/*
Theme Name: Greener Grocer
Theme URI: https://www.greenergrocer.co.uk/
Author: Kobestarr Digital
Author URI: https://kobestarr.io
Description: Bespoke theme for The Greener Grocer, 47 Park Lane, Poynton. Scroll-scrubbed apple hero, veg boxes, journal. Built from the approved Greener Grocer design system tokens.
Version: 1.0.0
Requires PHP: 7.4
License: Proprietary
Text Domain: greenergrocer
*/

/* ============================================================
   1. Fonts (tokens/fonts.css, per Build addenda: Google Fonts
   @import stripped; PT Serif + Bricolage Grotesque dropped.
   Forum + Work Sans self-hosted, font-display: swap.)
   ============================================================ */
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/forum-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/forum-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/worksans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/worksans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/worksans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/worksans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/worksans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/worksans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ tokens/colors.css (verbatim) ============ */
:root{
/* --- Base ramps --- */
/* Leaf - the brand green. --green-60 is the published brand colour (#4D7C2B). */
--green-95:#f2f6ec;--green-90:#e3ecd6;--green-80:#c6d9ae;--green-70:#8fb265;--green-60:#4d7c2b;--green-50:#416924;--green-40:#35551d;--green-30:#2a4417;--green-20:#1d2f10;
/* Sage - the shopfront sign green, sampled from the board itself. The brand's surface colour. */
--sage-95:#f4f6f2;--sage-90:#e6eae2;--sage-80:#ccd4c6;--sage-70:#a6b39e;--sage-60:#7f8c79;--sage-50:#68755f;--sage-40:#515e4a;--sage-30:#3d4838;--sage-20:#2a3226;
/* Bramble - near-black green used for text and deep surfaces */
--bramble-40:#33402c;--bramble-30:#26301f;--bramble-20:#1a2115;--bramble-10:#11160e;
/* Paper - warm off-white neutrals (never pure grey) */
--paper-100:#fffdf8;--paper-95:#faf6ec;--paper-90:#f2ece0;--paper-80:#e6ddcc;--paper-70:#d3c7b1;--paper-60:#b3a68e;--paper-50:#8c8271;
/* Rhubarb - warm red accent (offers, sale, alerts) */
--rhubarb-90:#fbe6e0;--rhubarb-60:#c4472c;--rhubarb-50:#a63a22;
/* Honey - amber accent (preserves, honey, highlights, warnings) */
--honey-90:#fbeecd;--honey-60:#e2a221;--honey-50:#b57d13;
/* Blossom - blush accent (seasonal flowers, soft emphasis) */
--blossom-90:#fae7ea;--blossom-60:#dc8e9d;--blossom-50:#b96475;

/* --- Semantic aliases --- */
--text-strong:var(--bramble-20);
--text-body:var(--bramble-30);
--text-muted:var(--paper-50);
--text-inverse:var(--paper-100);
--text-brand:var(--green-50);
--text-link:var(--green-50);
--text-link-hover:var(--green-40);

--surface-page:var(--paper-95);
--surface-sign:var(--sage-60);
--surface-card:var(--paper-100);
--surface-sunken:var(--paper-90);
--surface-brand:var(--green-60);
--surface-brand-soft:var(--sage-90);
--surface-panel:var(--sage-60);
--surface-panel-soft:var(--sage-80);
--surface-deep:var(--sage-20);
--surface-blossom:var(--blossom-90);
--surface-honey:var(--honey-90);

--border-subtle:var(--paper-80);
--border-strong:var(--paper-70);
--border-brand:var(--green-60);
--border-deep:var(--bramble-30);

--accent-sale:var(--rhubarb-60);
--accent-honey:var(--honey-60);
--accent-blossom:var(--blossom-60);

--status-success:var(--green-60);
--status-success-soft:var(--green-90);
--status-warning:var(--honey-50);
--status-warning-soft:var(--honey-90);
--status-error:var(--rhubarb-50);
--status-error-soft:var(--rhubarb-90);

--focus-ring:var(--green-60);
}

/* ============ tokens/typography.css (verbatim) ============ */
:root{
--font-display:"Forum",Georgia,"Times New Roman",serif;
--font-body:"Work Sans","Helvetica Neue",Arial,sans-serif;
--font-serif:"PT Serif",Georgia,serif;
--font-accent:"Bricolage Grotesque","Work Sans",sans-serif;

--fs-display-1:clamp(3rem,7vw,5.25rem); /* @kind font */
--fs-display-2:clamp(2.25rem,4.5vw,3.5rem); /* @kind font */
--fs-h1:2.5rem; /* @kind font */--fs-h2:1.875rem; /* @kind font */--fs-h3:1.375rem; /* @kind font */--fs-h4:1.125rem; /* @kind font */
--fs-body-lg:1.125rem; /* @kind font */--fs-body:1rem; /* @kind font */--fs-body-sm:0.9375rem; /* @kind font */--fs-caption:0.8125rem; /* @kind font */--fs-label:0.75rem; /* @kind font */

--lh-tight:1.04; /* @kind font */--lh-snug:1.18; /* @kind font */--lh-heading:1.25; /* @kind font */--lh-body:1.6; /* @kind font */--lh-loose:1.75; /* @kind font */

--fw-light:300; /* @kind font */--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */

--ls-display:-0.02em; /* @kind font */--ls-heading:-0.01em; /* @kind font */--ls-body:0; /* @kind font */--ls-label:0.14em; /* @kind font */

/* Overline / eyebrow label: the brand's one all-caps treatment */
--label-transform:uppercase; /* @kind other */
}

/* ============ tokens/spacing.css (verbatim) ============ */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--gutter:24px;
--page-max:1200px; /* @kind spacing */
--prose-max:66ch; /* @kind spacing */
--section-y:var(--space-9);
--section-y-tight:var(--space-8);
}

/* ============ tokens/radius.css (verbatim) ============ */
:root{
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
--radius-card:var(--radius-lg);
--radius-control:var(--radius-pill);
--radius-input:var(--radius-sm);
--radius-image:var(--radius-lg);
}

/* ============ tokens/elevation.css (verbatim) ============ */
:root{
/* Shadows are warm-tinted (bramble, not black) and low - this brand sits close to the page. */
--shadow-none:none;
--shadow-1:0 1px 2px rgba(26,33,21,.06);
--shadow-2:0 2px 8px rgba(26,33,21,.07);
--shadow-3:0 8px 24px rgba(26,33,21,.09);
--shadow-4:0 18px 48px rgba(26,33,21,.12);
--shadow-inset-top:inset 0 1px 0 rgba(255,253,248,.6);
--ring-focus:0 0 0 3px rgba(77,124,43,.35);
--overlay-scrim:linear-gradient(to top,rgba(17,22,14,.72),rgba(17,22,14,0)); /* @kind other */
}

/* ============ tokens/motion.css (verbatim) ============ */
:root{
--dur-fast:120ms; /* @kind other */--dur-base:220ms; /* @kind other */--dur-slow:420ms; /* @kind other */--dur-scroll:900ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.3); /* @kind other */
--press-scale:.97; /* @kind other */
--hover-lift:-2px; /* @kind other */
}

/* ============ tokens/base.css (verbatim) ============ */
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular);margin:0}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ============================================================
   10. Site components (built strictly from the tokens above)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Header: normal in-flow bar, hairline beneath, nothing floats --- */
.site-header { background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__wordmark { height: 28px; width: auto; display: block; }
.site-nav ul { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; }
.site-nav a { white-space: nowrap; }
.site-nav ul { flex-wrap: wrap; }
@media (max-width: 640px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .site-nav ul { gap: var(--space-4); }
}
.site-nav a {
  font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--text-body); text-decoration: none; padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--text-link-hover); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a { color: var(--text-strong); border-bottom-color: var(--green-60); }

/* --- Sections --- */
.band { padding-top: var(--section-y); padding-bottom: var(--section-y); background: var(--surface-page); }
.band--sunken { background: var(--surface-sunken); }
.band h2 { font-size: var(--fs-h1); margin-top: var(--space-3); }
.band__intro { max-width: var(--prose-max); }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }

/* --- Eyebrow: the one all-caps treatment --- */
.eyebrow {
  display: block; font-family: var(--font-body); font-size: var(--fs-label);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: var(--label-transform);
  color: var(--text-brand);
}

/* --- Buttons: pills, verb-first --- */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium);
  text-decoration: none; border: 0; cursor: pointer; line-height: var(--lh-body);
  transition: filter var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--surface-brand); color: var(--text-inverse); }
.btn--primary:hover { filter: brightness(0.92); color: var(--text-inverse); }
.btn--ghost { background: transparent; color: var(--text-link); }
.btn--ghost:hover { background: var(--surface-brand-soft); color: var(--text-link-hover); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Cards --- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.card--interactive:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-3); }
.card h3 { font-size: var(--fs-h3); margin: var(--space-3) 0 var(--space-2); }
.card--deep { background: var(--surface-deep); border-color: var(--border-deep); box-shadow: var(--shadow-inset-top); }
.card--deep h3 { color: var(--text-inverse); }
.card--deep p { color: rgba(255,253,248,.75); font-size: var(--fs-body-sm); margin: 0; }

/* --- Grids --- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* --- Photo placeholder: caption stays visible until a real img drops in.
       To go live, replace the inner div with <img class="photo__img" src="..." alt="..."> --- */
.photo { border-radius: var(--radius-image); overflow: hidden; }
.photo__placeholder {
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-image); width: 100%; height: 100%;
  display: grid; place-items: center; padding: var(--space-4); text-align: center;
}
.photo__caption { color: var(--text-muted); font-size: var(--fs-caption); max-width: 28ch; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--landscape { aspect-ratio: 4 / 3; }
.photo__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-image); }

/* --- Product tile: photo slot + name + origin line. No prices until the range is confirmed. --- */
.product-tile .photo { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.product-tile .photo__placeholder { border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.product-tile__origin { color: var(--text-muted); font-size: var(--fs-caption); margin: 0; }

/* --- Journal teaser --- */
.post-card { display: flex; flex-direction: column; gap: var(--space-2); }
.post-card__meta { color: var(--text-muted); font-size: var(--fs-caption); margin: 0; }
.post-card p { margin: 0; }

/* --- Quote --- */
.quote { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-strong); line-height: var(--lh-heading); }
.quote figcaption { color: var(--text-muted); font-size: var(--fs-caption); }

/* --- Inputs: 8px radius, green focus glow --- */
.input {
  width: 100%; padding: 12px var(--space-4); border-radius: var(--radius-input);
  border: 1px solid var(--border-strong); background: var(--surface-card);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input:focus { border-color: var(--border-brand); box-shadow: var(--ring-focus); outline: none; }
.input::placeholder { color: var(--text-muted); }

/* --- Prose column (About) --- */
.prose { max-width: var(--prose-max); }
.prose h1 { font-size: var(--fs-h1); margin: var(--space-3) 0 var(--space-5); }

/* --- Footer: --surface-deep, inverse text --- */
.site-footer { background: var(--surface-deep); color: var(--text-inverse); padding: var(--space-8) 0; }
.site-footer__inner { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.site-footer p { margin: var(--space-1) 0; color: rgba(255,253,248,.72); font-size: var(--fs-body-sm); }
.site-footer a { color: var(--paper-100); }
.site-footer__social { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; min-width: 0; }
.site-footer__social a { overflow-wrap: anywhere; }
.site-footer__social a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-size: var(--fs-body-sm); }
.site-footer__social a:hover { text-decoration: underline; }
.site-footer__social svg { width: 20px; height: 20px; display: block; }

/* --- Disabled --- */
[disabled], .is-disabled { opacity: .45; cursor: not-allowed; }

/* --- WP accessibility helper --- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Full-bleed product tiles: the photo is the card, label rides the scrim --- */
.product-tile--bleed { position: relative; padding: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.product-tile--bleed .photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.product-tile__label { position: absolute; inset: auto 0 0 0; padding: var(--space-7) var(--space-4) var(--space-4); background: var(--overlay-scrim); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.product-tile--bleed h3 { color: var(--text-inverse); font-size: var(--fs-h4); margin: 0; }
.product-tile--bleed .product-tile__origin { color: rgba(255,253,248,.78); margin-top: 2px; }

/* --- Journal: lead post carries the row --- */
.journal-grid { grid-template-columns: 2fr 1fr 1fr; align-items: stretch; }
.post-card--lead .photo--landscape { aspect-ratio: 16 / 9; }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.tag { display: inline-block; background: var(--surface-brand-soft); color: var(--text-strong); border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: .02em; margin-right: var(--space-2); }
@media (max-width: 960px) { .journal-grid { grid-template-columns: 1fr; } }

/* --- Delivery band: content left, action card right --- */
.delivery-band { align-items: center; }
.delivery-band .card--deep { max-width: 420px; justify-self: end; width: 100%; }
@media (max-width: 960px) { .delivery-band .card--deep { justify-self: stretch; max-width: none; } }

/* --- Front-page header: lands at the foot of the film, docks to the top on scroll --- */
.home .site-header { position: fixed; left: 0; right: 0; z-index: 30; transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.home .site-header.is-landing { bottom: 0; top: auto; background: transparent; border-bottom: 0; }
.home .site-header.is-landing .site-header__inner { justify-content: center; }
.home .site-header.is-landing .site-header__brand { display: none; }
.home .site-header.is-landing .site-nav a { color: var(--text-inverse); text-shadow: 0 1px 18px rgba(26,33,21,.6); border-bottom-color: transparent; }
.home .site-header.is-docked { top: 0; bottom: auto; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-2); }
.home.no-js .site-header, .home .site-header:not(.is-landing):not(.is-docked) { position: static; }
@media (prefers-reduced-motion: reduce) { .home .site-header { position: static; } }