/* site.css - GreatPlainsProtein.com layout. Tokens only; no literal colors or fonts. (SG-36) */

/* ---- Launch visibility: items hidden until after launch (outline) ---- */
[data-launch="hidden"] { display: none !important; }

/* ---- Page width: the concept runs nearly edge to edge (1536 wide, ~4% gutters).
   Wider container than the shared 72rem default (Reid, 2026-10-19 review). ---- */
.container { max-width: 92rem; padding-inline: clamp(var(--gutter), 3vw, 3.5rem); }
.band { padding-block: var(--space-6); }
/* Above the concept's 1536 px the whole layout scales with the viewport, capped at 1.5x,
   so a large monitor shows the concept enlarged in proportion (Reid, 2026-10-19, option a). */
@media (min-width: 96em) { html { font-size: min(1.0417vw, 24px); } }

/* ---- Logo tab: the badge was drawn for white, so it sits in a white tab on dark bands.
   The one permitted palette reference in this file (SG-36 brief). SG-38 may change the logo. ---- */
:root { --logo-tab-bg: var(--palette-white); }
.site-logo { display: inline-block; line-height: 0; }
.logo-tab { display: inline-flex; padding: var(--space-1) var(--space-3); background: var(--logo-tab-bg); border-radius: var(--radius-sm); }
.site-logo img { height: 4.5rem; width: auto; }
.site-logo--footer img { height: 3.5rem; }

/* ---- Header ---- */
.site-header { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.site-header .site-nav { margin-inline: auto; }
.site-header .site-nav ul { gap: var(--space-6); }

/* ---- Hero ---- */
/* Concept proportion: the hero is about one fifth of the page width tall */
.hero--home { display: flex; align-items: center; min-height: clamp(18rem, 21vw, 26rem); padding-block: var(--space-6); }
.hero--home > .container { position: relative; }
.hero--home .hero__media img { object-position: 60% 55%; }
.hero--home .hero__media::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--band-dark-bg) 96%, transparent) 0,
    color-mix(in srgb, var(--band-dark-bg) 88%, transparent) 28%,
    color-mix(in srgb, var(--band-dark-bg) 45%, transparent) 50%,
    transparent 68%);
}
.hero--home h1 { font-size: clamp(2rem, 3.8vw, 3.6rem); font-weight: 800; line-height: 1.02; text-transform: uppercase; }
.hero__lede { margin-top: var(--space-4); max-width: 34rem; font-size: var(--text-lg); color: var(--color-text); }
.hero--home .hero__actions { margin-top: var(--space-4); }
@media (min-width: 48em) {
  .hero--home .hero__content { max-width: none; }
  .hero--home h1 { white-space: nowrap; }
}

/* ---- Light bands and section headings ---- */
.band--light { background: var(--color-bg); }
.band--tight { padding-top: 0; }
.section-heading { margin-bottom: var(--space-5); }

/* ---- Product and country cards ---- */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pcard {
  display: flex; flex-direction: column;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.pcard img { flex: none; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.pcard__title {
  flex: 1 0 auto;
  padding: var(--space-3) var(--space-1) var(--space-1);
  font-family: var(--font-heading);
  font-size: 0.72rem; font-weight: var(--weight-heading-sm);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.35;
}
.pcard__title { font-size: 0.62rem; }
@media (min-width: 48em) {
  .pcard__title { font-size: 0.72rem; }
}
@media (min-width: 64em) {
  .pcard__title { padding-inline: 0; font-size: 0.58rem; letter-spacing: 0.01em; }
}
@media (min-width: 80em) {
  .product-grid { gap: var(--space-3); }
  .pcard__title { font-size: 0.68rem; letter-spacing: 0.03em; }
}
/* ---- Competence grid ---- */
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.cap {
  min-height: 5rem;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.cap__icon { width: 1.6rem; height: 1.6rem; margin: 0 auto var(--space-2); fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap__title { font-size: 0.72rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.35; }

/* ---- Dual CTA band ---- */
.cta-dual { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48em) { .cta-dual { grid-template-columns: 1fr 1fr; } }
.cta-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(10rem, 12vw, 16rem); }
.cta-panel__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.cta-panel--buyer::after { background: color-mix(in srgb, var(--band-dark-bg) 62%, transparent); }
.cta-panel--supplier::after { background: color-mix(in srgb, var(--band-dark-bg) 75%, transparent); }
/* Text in each panel starts at the page gutter: buyer at the left edge, supplier just right of center (Reid, 2026-10-19) */
.cta-panel__content { width: 100%; max-width: 36rem; padding: var(--space-6) clamp(var(--gutter), 3vw, 3.5rem); }
.cta-panel__content .section-heading { margin-bottom: var(--space-2); }
.cta-panel__title { margin-bottom: var(--space-2); font-size: clamp(var(--text-xl), 2.2vw, 1.9rem); color: var(--color-text); }
.cta-panel__content > p:not(.section-heading) { margin-bottom: var(--space-4); color: var(--color-text); }
@media (min-width: 48em) {
  .cta-panel--supplier::after { background: linear-gradient(90deg, color-mix(in srgb, var(--band-dark-bg) 82%, transparent) 0, color-mix(in srgb, var(--band-dark-bg) 70%, transparent) 55%, color-mix(in srgb, var(--band-dark-bg) 45%, transparent) 100%); }
}

/* ---- Footer ---- */
.site-footer { margin-top: 0; padding-block: var(--space-5) var(--space-4); border-top: 1px solid var(--color-border); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__rule { width: 1px; height: 2.5rem; background: var(--color-border); }
.site-footer .site-nav ul { gap: var(--space-5); }
.site-footer .site-nav a { font-size: 0.72rem; }
.cross-sites { display: flex; gap: var(--space-5); }
.cross-site { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.cross-site:hover { text-decoration: none; color: var(--color-accent); }
.cross-site__mark { display: grid; place-items: center; width: 6.5rem; height: 2.75rem; padding: var(--space-1); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); }
.cross-site__mark img { width: 100%; height: 100%; object-fit: contain; }
/* The podcast logo is a light JPEG with no margin: the box takes its shape and the logo fills the orange border (Reid, 2026-10-19) */
.cross-site__mark--podcast { width: 10.1rem; padding: 0; overflow: hidden; }
.cross-site__mark--podcast img { object-fit: cover; border-radius: var(--radius-sm); }
.cross-site__label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Contact page ---- */
.contact { display: grid; gap: var(--space-7); max-width: 56rem; }
@media (min-width: 48em) { .contact { grid-template-columns: 1fr 1.4fr; } }
.contact__intro h1 { font-size: clamp(var(--text-2xl), 4vw, 3rem); margin-bottom: var(--space-4); }
.contact__lede { font-size: var(--text-lg); color: var(--color-text-muted); }
.contact__form { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field + .field { margin-top: 0; } }
.field-row + .field, .field-row + .field-row, .choice + .field-row { margin-top: var(--space-4); }
.contact__form label { font-weight: 600; }
.req { color: var(--color-accent); }
.contact__note { margin-block: var(--space-4); }
.choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: var(--space-1); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.choice__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.choice__option { position: relative; margin: 0; padding: var(--space-3) var(--space-2); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); text-align: center; cursor: pointer; font-size: var(--text-sm); }
.choice__option input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.choice__option:has(:checked) { background: var(--color-accent); color: var(--color-accent-contrast); }
.choice__option:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- Phone overrides ---- */
.br-desktop { display: none; }
@media (min-width: 48em) { .br-desktop { display: inline; } }
@media (max-width: 47.99em) {
  .site-header__inner { justify-content: center; text-align: center; }
  .site-logo img { height: 3.5rem; }
  .site-header .site-nav ul { justify-content: center; gap: var(--space-5); }
  .hero--home .hero__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--band-dark-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--band-dark-bg) 72%, transparent) 100%);
  }
  /* each sentence on one line, as on desktop (Reid, 2026-10-20) */
  .hero--home h1 { font-size: clamp(1.375rem, 7.3vw, 2rem); white-space: nowrap; }
  .hero__lede { font-size: var(--text-base); }
  /* SG-40 phone compaction (Reid, 2026-10-19): shorter scroll, desktop untouched */
  .hero--home { min-height: 16rem; padding-block: var(--space-5); }
  .hero--home .hero__actions { gap: var(--space-3); }
  .hero--home .hero__actions .button { flex: 1 1 0; padding-inline: var(--space-3); white-space: nowrap; }
  .cta-panel { min-height: 10rem; }
  .cta-panel__content { padding: var(--space-5) var(--gutter); }
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .site-footer__rule { display: none; }
  .site-footer .site-nav ul { justify-content: center; }
  .cross-sites { flex-wrap: wrap; justify-content: center; }
}

/* ---- Products: four cards (SG-44). 2x2 on phones; one centred row of four, capped width, from tablet up ---- */
.product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 48em) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 18rem)); justify-content: center; gap: var(--space-4); } }
.product-grid--4 .pcard__title { margin: 0; padding: var(--space-3) var(--space-2) var(--space-2); font-size: 0.82rem; letter-spacing: 0.06em; }
@media (max-width: 47.99em) { .product-grid--4 .pcard__title { font-size: 0.68rem; letter-spacing: 0.04em; } }
.pop-btn { position: relative; display: block; width: 100%; padding: 0 1.5rem 0 0; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit; text-align: inherit; background: none; border: 0; cursor: pointer; }
.pop-btn::after { content: "+"; position: absolute; top: 0; right: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); }
.pop-btn:hover { color: var(--color-accent); }
.pop-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pcard:has(.pop:popover-open) { border-color: var(--color-accent); }
.pcard:has(.pop:popover-open) .pop-btn::after { content: "\2212"; }

/* ---- Popup bubble, shared by the Beef card (SG-44) and the competence tiles (SG-43/47).
   Centred on screen by default; under its trigger where anchor positioning exists. ---- */
.pop { inset: 0; margin: auto; height: fit-content; text-align: left; width: min(22rem, calc(100vw - 2 * var(--gutter))); padding: var(--space-5) var(--space-5) var(--space-4); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-card); box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-text) 22%, transparent); }
.pop::backdrop { background: color-mix(in srgb, var(--color-text) 25%, transparent); }
.pop__title { margin: 0 var(--space-5) var(--space-2) 0; font-family: var(--font-heading); font-size: 0.78rem; font-weight: var(--weight-heading-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.pop__desc { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.pop__desc + .pop__desc { margin-top: var(--space-2); }
.pop__list { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.7; }
.pop__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2rem; height: 2rem; padding: 0; font-size: 1.25rem; line-height: 1; color: var(--color-text-muted); background: none; border: 0; cursor: pointer; }
.pop__close:hover { color: var(--color-accent); }
@supports (position-area: bottom) { @media (min-width: 48em) {
  .pop { inset: auto; margin: var(--space-2) clamp(var(--gutter), 3vw, 3.5rem) 0; position-area: bottom; position-try-fallbacks: flip-block; }
  .pop::backdrop { background: transparent; }
} }
/* Browsers without popover support: keep the text in the HTML for crawlers, never print it inline */
@supports not selector(:popover-open) { .pop { display: none; } }

/* ---- Our Competence row (SG-43/46/47): statement, then six tiles; descriptions open in the shared bubble ---- */
.competence__heading { margin-bottom: var(--space-3); }
.competence__lede { max-width: 62rem; margin-bottom: var(--space-5); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.cap-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 48em) { .cap-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cap-grid--row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cap-grid--row .cap { display: flex; min-height: 0; padding: 0; }
.cap-grid--row .cap__title { display: flex; flex: 1; margin: 0; }
.cap__btn { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 6.25rem; padding: var(--space-4) var(--space-3) var(--space-3); font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-card); cursor: pointer; }
.cap__btn::after { content: "+"; position: absolute; top: var(--space-2); right: var(--space-3); font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); }
.cap__btn:hover { color: var(--color-accent); }
.cap__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cap:has(.pop:popover-open) { border-color: var(--color-accent); }
.cap:has(.pop:popover-open) .cap__btn::after { content: "\2212"; }
/* laptop widths: six tiles are about 155 px wide, so the titles step down (Fable review, 2026-10-21) */
@media (min-width: 64em) and (max-width: 79.99em) { .cap-grid--row .cap__title { font-size: 0.62rem; letter-spacing: 0.03em; } .cap__btn { padding-inline: var(--space-2); } }
@media (max-width: 47.99em) {
  .cap-grid--row .cap__title { font-size: 0.66rem; letter-spacing: 0.03em; }
  .cap__btn { min-height: 5.5rem; }
  .competence__lede { font-size: var(--text-base); }
}