/* San Churro 2026 — values from the Figma wireframe (Website Update [Showpony]): desktop node 1:454 (1440), mobile node 1:1401 (402). */

@font-face { font-family: "Archer"; src: url("../fonts/archer-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archer"; src: url("../fonts/archer-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Brandon Text"; src: url("../fonts/brandon-text-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Brandon Text"; src: url("../fonts/brandon-text-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--color-cream: #efe4ce;
	--color-orange: #f58025;
	--color-blue: #3e459d;
	--color-charcoal: #333;
	--color-white: #fff;
	--color-black: #000;

	--font-serif: "Archer", Georgia, serif;
	--font-sans: "Brandon Text", "Helvetica Neue", Arial, sans-serif;

	--container: 1024px;
	--gutter: 30px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-cream); color: var(--color-black); font-family: var(--font-sans); font-size: 16px; line-height: 1.2; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
/* The <img> inside does the layout (see sanchurro_picture()); <source> would otherwise become an empty grid/flex item. */
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 10px 15px; background: var(--color-white); }
.skip-link:focus { top: var(--gutter); }

/* Button (Figma "Button": 10/15 padding, 2px stroke, Archer Bold 16/16, square) */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; border: 2px solid var(--color-orange); background: var(--color-orange); color: var(--color-white); font: 700 16px/1 var(--font-serif); text-align: center; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.button:hover, .button:focus-visible { background: var(--color-white); color: var(--color-orange); }
.button--light { border-color: var(--color-white); background: var(--color-white); color: var(--color-orange); }
.button--light:hover, .button--light:focus-visible { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); }

/* Socials */
.socials { display: flex; align-items: center; gap: 30px; }
.socials a { display: block; color: var(--color-orange); transition: opacity .2s; }
.socials a:hover, .socials a:focus-visible { opacity: .75; }
.socials svg { display: block; width: 36px; height: 36px; }
.socials--footer { gap: 20px; }
.socials--footer a { color: var(--color-white); }
.socials--footer svg { width: 24px; height: 24px; }

/* Header */
.site-header { position: relative; z-index: 10; background: var(--color-cream); }
.site-header__inner { display: flex; align-items: center; gap: 41px; min-height: 140px; padding-block: 20px; }
.site-header__logo { margin-right: auto; }
.site-header__logo img { width: 100px; height: 100px; }
.site-nav__list { display: flex; align-items: center; gap: 41px; }
.site-nav__link { font: 600 16px/1.2 var(--font-serif); text-decoration: none; }
.site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link[aria-current="page"] { color: var(--color-orange); }
.site-header__toggle { display: none; }

/* Hero */
.hero { position: relative; }
.hero__slide { position: relative; height: 600px; }
.hero__media { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.hero__image { width: 100%; height: 100%; object-fit: cover; }
/* Anchor both halves to the centre seam, so narrower screens crop the outer edges (as the mobile frame does). */
.hero__image--start { object-position: right center; }
.hero__image--end { object-position: left center; }
/* The 18px bottom padding sits the heading + button 9px above centre, as in Figma. */
.hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 var(--gutter) 18px; text-align: center; }
.hero__heading { color: var(--color-white); font: 600 80px/.85 var(--font-serif); text-transform: uppercase; }

/* Promo split: columns align to their buttons, which share a baseline. */
.promo-split__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding-block: 100px 92px; }
.promo-split__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.promo-split__col--store { padding-inline: 40px; }
.promo-split__title { margin-bottom: 20px; font: 700 24px/1 var(--font-serif); }
.promo-split__text { max-width: 431px; margin-bottom: 20px; }
.promo-split__text--order { display: none; }
.promo-split__heading { margin-bottom: 14px; font: 400 50px/1 var(--font-sans); }

/* Product grid */
.product-grid { padding-block: 70px; background: var(--color-white); }
.product-grid__title { margin-bottom: 30px; font: 700 30px/1 var(--font-serif); text-align: center; text-transform: uppercase; }
.product-grid__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-inline: 30px; }
.product-card__link { display: flex; flex-direction: column; gap: 15px; text-decoration: none; }
.product-card__media { display: block; aspect-ratio: 226 / 300; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card__link:hover img, .product-card__link:focus-visible img { transform: scale(1.04); }
.product-card__title { font: 700 18px/15px var(--font-serif); } /* Figma's text box is 15px (its .85 line-height rounded), and layout below follows that. */

/* Story */
/* Figma centres a pair of 750px tiles, so a tile edge sits on the centre line at every width. */
.pattern-strip { height: 75px; background: var(--color-white) url("../img/pattern-strip.svg") repeat-x calc(50% - 375px) center / auto 75px; }
/* 10px top padding: Figma sits the heading 5px below the banner's centre. */
.story__banner { position: relative; display: grid; place-items: center; height: 346px; padding-top: 10px; overflow: hidden; }
/* Left-anchored: the mobile frame shows the photo at desktop scale, cropped from the left. */
.story__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.story__heading { position: relative; color: var(--color-white); font: 700 80px/.85 var(--font-serif); text-align: center; text-transform: uppercase; }
.story__body { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; text-align: center; }
.story__text { max-width: 600px; }

/* Social */
.social__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 40px; text-align: center; }
.social__title { font: 700 24px/1 var(--font-serif); }
.social__text { max-width: 600px; }

/* Image strip */
.image-strip img { width: 100%; height: 200px; object-fit: cover; }

/* Footer */
.site-footer { background: var(--color-orange); color: var(--color-white); }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 20px; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 100px; }
.site-footer__logo img { width: 148px; height: 100px; }
.site-footer__nav { width: 100%; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 40px; font-size: 14px; line-height: 1.39; }
/* Desktop shows the model's two rows: a full-width spacer between them forces the break. */
.site-footer__links::after { order: 1; flex-basis: 100%; height: 15px; content: ""; }
.site-footer__row-start, .site-footer__row-start ~ li { order: 2; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { text-decoration: underline; }
.site-footer__copyright { font-size: 12px; line-height: 1.39; }

/* ≤1024: tighter header, smaller display type (no tablet frame in Figma) */
@media (max-width: 1024px) {
	.site-header__inner, .site-nav__list { gap: 24px; }
	.hero__heading { font-size: 64px; }
	.promo-split__heading { font-size: 40px; }
}

/* ≤860: mobile header (Figma mobile: 60px logo, Order Now + 24px menu icon) */
@media (max-width: 860px) {
	.site-header__inner { flex-wrap: wrap; gap: 15px; min-height: 100px; }
	.site-header__logo img { width: 60px; height: 60px; }
	/* 44px tap target around the 24px icon box; the negative margin keeps the icon box where Figma has it. */
	.js .site-header__toggle { position: relative; display: block; width: 44px; height: 44px; margin-inline: -10px; padding: 0; border: 0; background: none; color: var(--color-charcoal); cursor: pointer; }
	/* Figma icon: three 16px, 1px round-capped strokes, 6px apart, on half-pixel centres. */
	.site-header__toggle-bar, .site-header__toggle-bar::before, .site-header__toggle-bar::after { position: absolute; left: 14px; width: 16px; height: 1px; border-radius: .5px; background: currentColor; content: ""; transition: transform .2s, background-color .2s; }
	.site-header__toggle-bar { top: 21.5px; }
	.site-header__toggle-bar::before { left: 0; top: -6px; }
	.site-header__toggle-bar::after { left: 0; top: 6px; }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar { background: transparent; }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before { background: var(--color-charcoal); transform: translateY(6px) rotate(45deg); }
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after { background: var(--color-charcoal); transform: translateY(-6px) rotate(-45deg); }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__link { display: block; padding: 14px 0; border-bottom: 1px solid rgb(0 0 0 / .1); }
	/* Without JS the menu simply sits open under the logo and Order Now. */
	.no-js .site-nav { order: 1; flex-basis: 100%; }
	.js .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: 8px var(--gutter) 24px; background: var(--color-cream); border-top: 1px solid rgb(0 0 0 / .1); }
	.site-header.is-open .site-nav { display: block; }
}

/* ≤768: stacked sections (Figma mobile frame) */
@media (max-width: 768px) {
	.hero__content { gap: 62px; padding: 16px var(--gutter) 0; }
	.hero__heading { font-size: 40px; }

	.promo-split__inner { grid-template-columns: 1fr; align-items: stretch; padding-block: 0; }
	/* Each block is 281px: content from 70px down, button 30px off the bottom. */
	.promo-split__col { min-height: 281px; padding: 70px 0 30px; }
	.promo-split__col--store { padding-inline: 0; }
	.promo-split__col .button { margin-top: auto; }
	.promo-split__text { max-width: none; margin-bottom: 16px; }
	.promo-split__text--order { display: block; }
	.promo-split__heading { margin-bottom: 20px; font: 700 24px/1 var(--font-serif); }

	.product-grid__list { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-inline: 0; }

	.story__heading { font-size: min(80px, 20vw); }

	.image-strip img { height: 100px; }

	.site-footer__top { min-height: 60px; }
	.site-footer__logo img { width: 88px; height: 60px; }
	.site-footer__links { gap: 10.5px 20px; }
	.site-footer__links::after { display: none; }
	/* The mobile frame lists the second row first. */
	.site-footer__row-start, .site-footer__row-start ~ li { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.product-card__link:hover img, .product-card__link:focus-visible img { transform: none; }
}

/* ≤560: one product per row, using the mobile crops (see product-grid.php) */
@media (max-width: 560px) {
	.product-grid__list { grid-template-columns: 1fr; gap: 20px; }
	.product-card__media { aspect-ratio: 342 / 300; }
}

/* 404 (index.php) */
.page-not-found { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 80px; text-align: center; }
.page-not-found h1 { font: 700 30px/1 var(--font-serif); text-transform: uppercase; }