/*
Theme Name: Palatez
Template: twentytwentyfive
Version: 1.1.0
Description: Child theme for the Palatez recipe site, extending Twenty Twenty-Five with recipe/landing-page/cuisine-guide templates.
*/

/*
 * True 3-column header (nav-left / logo-center / nav-right). Flex
 * "space-between" only looks centered when both sides happen to have equal
 * width, so this forces a real CSS grid instead -- the middle column stays
 * dead-center regardless of how much content is in the side nav menus.
 */
.palatez-header-grid {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: 100%;
}
.palatez-header-grid > .palatez-brand {
	justify-self: center;
}
.palatez-header-grid > :last-child {
	justify-self: end;
}

/*
 * The header's site-title previously used level:0, which WordPress renders
 * as a plain <p> tag (bypassing heading styles entirely) -- unlike the
 * footer's site-title (level:2, a real <h2>), which is why they looked
 * different and the user confirmed the footer's look is correct. Changed the
 * header to level:2 in header.html so both now share the exact same default
 * heading style (Cormorant Garamond bold) with no separate override needed.
 */

/* PALATEZ brand name grows slightly on hover to draw attention. */
.palatez-brand .wp-block-site-title,
.palatez-brand .wp-block-site-title a {
	display: inline-block;
	transition: transform 0.2s ease;
}
.palatez-brand .wp-block-site-title:hover,
.palatez-brand .wp-block-site-title a:hover {
	transform: scale(1.08);
}

/*
 * Footer rebuild, matching Wix's real footer exactly (confirmed via its own
 * CSS): the "PALATEZ" footer heading uses font_4 = bold, ~22px, "Avenir LT
 * W01 85 Heavy" -- a licensed commercial font that can't be self-hosted the
 * way the site's other (Google) fonts were. Poppins Bold is the closest
 * freely-available substitute (a common real-world Avenir alternative,
 * sharing its geometric, humanist-sans character). The copyright line uses
 * font_9 = normal, 15px, Syne -- a real Google Font, fetched exactly.
 * Declared as plain @font-face here (not via theme.json) so it stays scoped
 * to just these footer classes instead of affecting the site's global
 * heading system used everywhere else.
 */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("./assets/fonts/poppins-bold.woff2") format("woff2");
}
@font-face {
	font-family: "Syne";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./assets/fonts/syne-regular.woff2") format("woff2");
}

.palatez-footer-brand {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.05em;
	color: #000;
}
.palatez-footer-label {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #000;
}
.palatez-footer-bold {
	font-weight: 700;
}
.palatez-footer-bottom {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid #e0e0e0;
	font-family: "Syne", sans-serif;
	font-weight: 400;
	font-size: 15px;
}

/*
 * Rating + time badge shown under every recipe card's photo, across all
 * recipe grids site-wide (homepage carousels, archive, cuisine guide
 * carousels, landing page carousels, related recipes) -- rebuilding a design
 * that existed briefly (added by a separate session working on this same
 * site) before an earlier deploy from this session overwrote it. Not applied
 * to the cuisine_guide archive grid, since those posts have no rating/time
 * fields at all (different content type).
 */
.palatez-card-badge {
	background: #f0f0f0;
	padding: 0.5em 0.75em;
	gap: 0.3em;
	align-items: center;
	font-size: 1.15em;
}

/*
 * Recipe card titles inside a grid (Query Loop) use a plain bold sans-serif
 * on the real Wix pages, not the elegant Cormorant Garamond serif the site's
 * global heading style applies everywhere else -- confirmed visually against
 * the real breakfast page screenshot (section headings like "Popular High
 * Protein Breakfast Recipe" are serif, but individual card titles like
 * "Traditional Huevos Rancheros" are not). Scoped to titles inside a
 * post-template specifically so it doesn't affect real content headings.
 */
.wp-block-post-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-weight: 600;
}
.palatez-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	max-width: 24em;
}
.palatez-newsletter-form input[type="email"] {
	padding: 0.5em;
	border: none;
	border-bottom: 1px solid #000;
}
.palatez-newsletter-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
}
.palatez-newsletter-form button {
	align-self: flex-start;
	padding: 0.6em 1.5em;
	border: 1px solid #000;
	background: transparent;
	cursor: pointer;
}

/*
 * Responsive rules below are written as single declarations that hold across
 * every device tier (mobile/tablet/laptop/desktop) rather than a battery of
 * @media overrides per tier -- fluid units (dvh/clamp/minmax, applied via the
 * grid blocks' minimumColumnWidth in the template files) and target sizes
 * that are simply always comfortable don't need a breakpoint at all. A
 * breakpoint is only justified where the underlying value is genuinely
 * discontinuous (e.g. a hard image-crop change), not as a default tool.
 */

/*
 * Header utility nav (right side, header.html's ref:584): overlayMenu:"never"
 * means this nav never collapses into a second hamburger at any width -- it
 * always renders inline -- so one set of tap-target rules covers phone
 * through desktop instead of a mobile-only override.
 */
.palatez-header-grid > :last-child .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * Homepage hero (front-page.html's palatez-home-hero): the block's own
 * min-height stays a plain 70dvh in the template markup so the Site Editor
 * doesn't overwrite it on next save; this rule layers a single clamp() on
 * top so the same formula floors out at 360px on short/landscape viewports
 * and caps at 620px on very tall ones, with no discrete breakpoint jump
 * anywhere in between.
 */
.palatez-home-hero {
	min-height: clamp(360px, 70dvh, 620px) !important;
}

/*
 * "Explore by Cuisine" / "Browse by Meal" chip rows (front-page.html):
 * comfortable gap plus a 44px tap-target floor on every button, applied once
 * for all device tiers -- a larger target never hurts a mouse pointer, so
 * there's no reason to scope this to mobile only.
 */
.palatez-chip-row {
	gap: 0.6em;
}
.palatez-chip-row .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * The static 4-item recipe grids (landing/cuisine guide "Popular Recipes",
 * single-recipe's related recipes -- none of these have a load-more button,
 * so they always render exactly 4 items) use minimumColumnWidth, which core
 * renders as `repeat(auto-fill, minmax(...))`. auto-fill reserves as many
 * tracks as the container can fit regardless of how many items exist, so on
 * any desktop/laptop screen wide enough to fit a 5th 16rem card, these grids
 * left a blank trailing track. auto-fit collapses unused tracks instead,
 * letting the 4 real cards stretch to fill the row. The homepage trending
 * carousel used to be in this group too, but it now has a "Load More" button
 * that keeps adding items, so it was switched to a fixed columnCount:4
 * instead -- auto-fit's column count depends only on container width, not
 * item count, so it can't guarantee "4 per row" once more than 4 exist.
 */
.palatez-grid-fixed4 {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important;
}

/*
 * The "Query Loop Load More" plugin renders its button as
 * .wp-load-more__button, structurally a wp:button link but without the
 * is-style-outline class every other button on the site uses. It falls back
 * to core's default filled-button style, which reads
 * background-color: var(--wp--preset--color--contrast) and
 * color: var(--wp--preset--color--base) -- neither token exists in this
 * theme's color palette, so the undefined variables leave the button with no
 * background and no border at all: plain, unclickable-looking text. This
 * replicates the site's real outline-button look (border, pill radius,
 * padding) using currentColor instead of the missing preset tokens, so it
 * can't silently break again if the palette changes.
 */
.wp-load-more__button {
	display: inline-flex;
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 9999px;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	background: transparent;
	color: inherit;
}
.wp-load-more__button:hover {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/*
 * Header account icon (WooCommerce customer-account block, header.html's
 * ref:584 nav): the SVG's own class ("icon") doesn't match the class core's
 * customer-account stylesheet actually sizes ("wc-block-customer-account__
 * account-icon"), so it was falling back to whatever ambient color/size
 * context it inherited -- unreliable given that nav's overlayTextColor is
 * set to "contrast", a color slug this theme's palette never defines.
 * Forcing explicit, non-inherited values here removes that dependency
 * entirely instead of chasing the cascade.
 */
.wc-block-customer-account__link svg {
	width: 24px;
	height: 24px;
	color: #000;
	fill: currentColor;
	stroke: currentColor;
	display: block;
}