/* ============================================================
   Green Kitchen by HTCE — front-end polish
   Only what theme.json cannot express. No frameworks, no bloat.
   ============================================================ */

:root {
	--fp-radius: 14px;
	--fp-line: #E6E1D5;
}

/* ---------- Header ---------- */
.fp-header {
	border-bottom: 1px solid var(--fp-line);
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 50;
}
.fp-header__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-block: .8rem;
}
.fp-header__inner > .wp-block-group { gap: .6rem; }
.fp-nav .wp-block-navigation-item__content {
	font-weight: 600;
	font-size: .95rem;
}

/* ---------- Hero ---------- */
.fp-hero { text-align: center; }
.fp-kicker {
	display: inline-block;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin-bottom: .6rem;
}
.fp-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--primary);
}
.fp-hero__sub {
	max-width: 560px;
	margin-inline: auto;
	color: var(--wp--preset--color--contrast-2);
	font-size: 1.12rem;
}
.fp-hero .wp-block-buttons {
	display: flex;
	gap: .8rem;
	justify-content: center;
	flex-wrap: wrap;
}
.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1.5px solid var(--fp-line);
}
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary) !important;
}

/* ---------- Article ---------- */
.htce-article .fp-article-header { margin-bottom: 1.4rem; }
.fp-byline {
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-2);
	gap: .45rem;
}
.fp-byline__avatar img { border-radius: 50%; }
.fp-byline__name { font-weight: 600; color: var(--wp--preset--color--contrast); }

/* Drop-cap for the first paragraph of guides — editorial feel */
.htce-article .entry-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--heading);
	float: left;
	font-size: 3.4em;
	line-height: .82;
	padding-right: .12em;
	padding-top: .05em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* ---------- Cards / archive grid ---------- */
.fp-card {
	transition: transform .18s ease, box-shadow .18s ease;
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
}
.fp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}
.fp-card__date {
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-2);
	margin-top: .4rem;
}
.fp-pagination .page-numbers {
	padding: .35rem .7rem;
	border-radius: 999px;
}
.fp-pagination .current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---------- Footer ---------- */
.fp-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tables (time/temp charts) ---------- */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fp-line);
}
.wp-block-table th {
	background: var(--wp--preset--color--mint-softer);
	font-family: var(--wp--preset--font-family--heading);
	text-align: left;
}
.wp-block-table th,
.wp-block-table td {
	padding: .65rem .9rem;
	border-bottom: 1px solid var(--fp-line);
}
.wp-block-table tr:last-child td { border-bottom: none; }

/* ---------- Focus visibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.fp-hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
	.entry-content { font-size: 1.02rem; }
}