/*
Theme Name: NZ Wool Collective
Theme URI: https://nzwoolco.com
Author: Established Group
Author URI: https://establishedgroup.com
Description: Classic ACF-driven holding page for New Zealand Wool Collective. Built for job [2406]; superseded by the full site build [2042].
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary — commissioned work, all rights reserved.
Text Domain: nzwoolco
*/

/* ---------------------------------------------------------------
   Fonts — full variable faces, so ACF-edited copy can't drop glyphs
   --------------------------------------------------------------- */
/* General Sans, not Figtree. The brand asset pack shipped Figtree by mistake;
   Gretchen confirmed 27 Aug the sans is General Sans (Fontshare, ITF Free
   Font License). Weight axis is 200-700, which covers every weight used here. */
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/GeneralSans-Variable.woff2') format('woff2-variations'),
      url('assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
      url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------
   Design tokens — from NZWC_Swatches / v7 mockup
   --------------------------------------------------------------- */
:root{
  --ink:#101921;
  --gold:#F4AF2D;
  --tan:#AF8C63;
  --pale:#F2EDA8;
  --white:#fff;
  --ink-60:rgba(16,25,33,.6);
  --rule:rgba(16,25,33,.75);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'General Sans',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.mono{font-family:'Geist Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}

/* Accessibility ------------------------------------------------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;background:var(--gold);color:var(--ink);
  font-weight:700;border-radius:999px;
}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* gold reads badly on the tan panel — white there instead */
.signup a:focus-visible{outline-color:#fff}

/* HERO ---------------------------------------------------------- */
.hero{position:relative;min-height:640px;background-color:var(--ink);background-position:center 30%;background-size:cover;background-repeat:no-repeat;display:flex;flex-direction:column}
/* hero-inner fills the hero so the copy can centre inside it */
.hero-inner{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:44px 64px 0;flex:1;display:flex;flex-direction:column}
.logo-svg{width:118px;height:auto;display:block;flex:0 0 auto}
.logo-svg path,.logo-svg rect{fill:#fff}
/* auto margins centre the copy in the space left below the logo, rather than
   sitting a fixed distance down from the top of the image */
.hero-copy{margin:auto 0;max-width:560px}
.hero h1{font-size:52px;line-height:1.12;font-weight:600;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero .sub{margin-top:26px;font-size:19px;line-height:1.45;color:#fff;font-weight:400;max-width:340px;text-shadow:0 1px 14px rgba(0,0,0,.45)}

/* INTRO --------------------------------------------------------- */
.intro{background:#fff;padding:110px 32px 118px}
.intro-inner{max-width:640px;margin:0 auto;text-align:center}
.intro .lead{font-size:23px;line-height:1.5;font-weight:500}
.intro .lead p{margin:0}
.intro .body p{margin-top:26px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.intro .body p:first-child{margin-top:26px}

/* SIGNUP -------------------------------------------------------- */
.signup{background:var(--tan);padding:88px 32px 96px}
.form-head{max-width:560px;margin:0 auto 44px}
.form-head h2{font-size:44px;font-weight:600;letter-spacing:-.01em;line-height:1.12}
.form-head p{margin-top:16px;font-size:18.5px;line-height:1.55}
.form-wrap{max-width:560px;margin:0 auto;color:var(--ink)}

/* TEAM ---------------------------------------------------------- */
.team{max-width:560px;margin:56px auto 0;border-top:1px solid var(--rule);padding-top:28px}
.team-lead{font-size:11px;font-weight:600;margin-bottom:20px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.person{display:flex;flex-direction:column;gap:3px}
.p-name{font-size:15.5px;font-weight:600}
.p-role{font-size:13px;color:var(--ink)}
.p-mail{font-size:10px;color:var(--ink);font-weight:600;margin-top:3px;text-decoration:none}
.p-mail:hover,.p-mail:focus{text-decoration:underline}

/* FOOTER BAND --------------------------------------------------- */
.footband{height:190px;background-position:left bottom;background-repeat:repeat-x;background-size:auto 100%}

/* RESPONSIVE ---------------------------------------------------- */
@media (max-width:720px){
  .hero{min-height:560px}
  .hero-inner{padding:28px 24px 0}
  .hero-copy{margin:auto 0}
  .hero h1{font-size:34px}
  .hero .sub{font-size:19px;max-width:300px}
  .intro{padding:72px 24px}
  .intro .lead{font-size:19px}
  .signup{padding:64px 24px}
  .form-head h2{font-size:32px}
  .form-head p{font-size:16.5px}
  .footband{height:160px}
  .team-grid{grid-template-columns:1fr;gap:20px}
}