/*
Theme Name: Foxground Cheese
Theme URI: https://foxgroundcheese.com
Author: Foxground Cheese / Free Selectors Dairy Stud
Description: Custom theme for Free Selectors Dairy Stud - Nigerian Dwarf goats and small-batch cheese, Foxground NSW.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: foxground
*/

/* ===================================================================
   FOXGROUND CHEESE / FREE SELECTORS DAIRY STUD
   Design tokens
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* colour */
  --cream:      #F6F1E4;   /* base background, warm oat */
  --cream-dim:  #EEE7D4;   /* recessed panels */
  --pine:       #223526;   /* deep hill green - header/footer/dark sections */
  --pine-ink:   #17251C;
  --clover:     #55703E;   /* mid pasture green - accents, links */
  --clay:       #A85A2C;   /* terracotta clay - primary CTA */
  --clay-dark:  #8B4823;
  --gold:       #DCA83F;   /* cheese / dairy gold */
  --ink:        #2A2620;   /* body text */
  --ink-soft:   #5B5548;   /* secondary text */
  --line:       #DCD3B9;   /* hairline rule on cream */
  --paper:      #FFFDF7;

  /* type */
  --display: "Fraunces", serif;
  --body:    "Public Sans", -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", monospace;

  --wrap: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  margin:0 0 .4em;
  color:var(--pine-ink);
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
@media(max-width:640px){ .container{ padding:0 20px; } }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / label ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--clay);
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border-radius:3px;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-clay{ background:var(--clay); color:var(--paper); }
.btn-clay:hover{ background:var(--clay-dark); transform:translateY(-1px); }
.btn-line{ background:transparent; border-color:currentColor; color:var(--pine-ink); }
.btn-line:hover{ background:var(--pine-ink); color:var(--cream); }
.btn-line.on-dark{ color:var(--cream); }
.btn-line.on-dark:hover{ background:var(--cream); color:var(--pine-ink); }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:40;
  padding:26px 0;
}
.site-header.solid{
  position:sticky;
  background:var(--pine);
  padding:16px 0;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--cream);
}
.brand-mark{
  width:40px;height:41px;
  flex:none;
  object-fit:contain;
  display:block;
}
.brand-word{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  line-height:1.05;
  color:var(--cream);
}
.brand-word small{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:3px;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.main-nav a{
  color:var(--cream);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  position:relative;
  padding:4px 0;
}
.main-nav a[aria-current="page"]{ color:var(--gold); }
.main-nav a:not([aria-current="page"])::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.main-nav a:not([aria-current="page"]):hover::after{ transform:scaleX(1); }

.nav-toggle{ display:none; }
@media(max-width:860px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--pine); flex-direction:column; align-items:flex-start;
    padding:100px 32px 32px; gap:22px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:34px; height:26px; position:relative; z-index:50;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:var(--cream);
  }
  .nav-toggle::before{ top:0; }
  .nav-toggle span{ top:12px; }
  .nav-toggle::after{ top:24px; }
}

/* ===================================================================
   HILLSIDE DIVIDER — signature motif
   =================================================================== */
.hillside{ display:block; width:100%; line-height:0; }
.hillside svg{ width:100%; height:auto; display:block; }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(180deg, rgba(23,37,28,.15), rgba(23,37,28,.72)), var(--pine);
  background-size:cover;
  background-position:center;
  color:var(--cream);
  overflow:hidden;
}
.hero-inner{
  position:relative;
  z-index:2;
  padding:120px 0 90px;
  width:100%;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(40px,6.4vw,84px);
  line-height:1.02;
  max-width:16ch;
  font-weight:500;
}
.hero h1 em{ color:var(--gold); font-style:italic; font-weight:400; }
.hero .lede{
  font-size:18px;
  max-width:52ch;
  color:#EDE7D6;
  margin-top:18px;
}
.hero .lede strong{ color:var(--gold); font-weight:600; }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-tag{
  position:absolute; top:130px; right:32px; z-index:2;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--cream); text-transform:uppercase;
  writing-mode:vertical-rl;
  opacity:.75;
}
@media(max-width:700px){ .hero-tag{ display:none; } }

.page-hero{
  min-height:56vh;
}
.page-hero .hero-inner{ padding:150px 0 70px; }
.page-hero h1{ font-size:clamp(34px,5.4vw,58px); }

/* ===================================================================
   SECTION HELPERS
   =================================================================== */
section{ padding:96px 0; }
.section-cream{ background:var(--cream); }
.section-panel{ background:var(--cream-dim); }
.section-pine{ background:var(--pine); color:var(--cream); }
.section-pine h2, .section-pine h3{ color:var(--paper); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); }
.section-head .lede{ color:var(--ink-soft); font-size:17px; }
.section-pine .section-head .lede{ color:#CFD9C7; }

/* ---------- three "art of" cards ---------- */
.art-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.art-card{
  background:var(--paper);
  padding:0 0 34px;
  position:relative;
}
.art-card .art-photo{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--cream-dim);
}
.art-card .art-photo img{ width:100%; height:100%; object-fit:cover; }
.art-card .art-body{ padding:26px 30px 0; }
.art-card .eyebrow{ margin-bottom:8px; }
.art-card h3{ font-size:22px; }
.art-card p{ color:var(--ink-soft); font-size:15.5px; }
@media(max-width:860px){ .art-grid{ grid-template-columns:1fr; } }

/* ---------- placeholder photo block ---------- */
.photo-slot{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--cream-dim), var(--cream-dim) 10px, #E4DABF 10px, #E4DABF 20px);
  border:1.5px dashed #C6B98F;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-align:center;
  padding:20px;
}
.photo-slot span{ background:var(--paper); padding:8px 14px; border:1px solid var(--line); }

/* ---------- feature split ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
@media(max-width:860px){
  .split, .split.reverse .split-media{ grid-template-columns:1fr; order:0; }
}
.split-media img, .split-media .photo-slot{ border-radius:2px; width:100%; }
.split-media .photo-slot{ aspect-ratio:4/5; }

/* ---------- fact strip ---------- */
.fact-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.fact{
  padding:34px 30px;
  border-left:1px solid rgba(255,255,255,.18);
}
.fact:first-child{ border-left:none; }
.fact .num{ font-family:var(--display); font-size:38px; color:var(--gold); font-weight:500; }
.fact .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#CFD9C7; margin-top:6px; }
@media(max-width:760px){
  .fact-strip{ grid-template-columns:repeat(2,1fr); }
  .fact{ border-top:1px solid rgba(255,255,255,.18); }
  .fact:nth-child(2){ border-left:1px solid rgba(255,255,255,.18); }
  .fact:nth-child(1),.fact:nth-child(2){ border-top:none; }
}

/* ---------- herd / kid cards ---------- */
.herd-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
@media(max-width:900px){ .herd-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .herd-grid{ grid-template-columns:1fr; } }
.goat-card{
  background:var(--paper);
  border:1px solid var(--line);
}
.goat-photo{ aspect-ratio:1/1; overflow:hidden; }
.goat-photo img{ width:100%; height:100%; object-fit:cover; }
.goat-info{ padding:20px 22px 24px; }
.goat-status{
  display:inline-block;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; margin-bottom:12px;
}
.status-available{ background:#DCEBD1; color:#2F5622; }
.status-reserved{ background:#F3E0C4; color:#8B5A16; }
.status-sold{ background:#EADEDE; color:#7A4646; }
.goat-info h3{ font-size:19px; margin-bottom:2px; }
.goat-info .breed-line{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.goat-info p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:14px; }
.goat-info .price{ font-family:var(--display); font-size:20px; color:var(--clay-dark); }

/* ---------- breed standard list ---------- */
.standard-list{ list-style:none; margin:0; padding:0; }
.standard-list li{
  display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:18px 0; border-top:1px solid var(--line);
  font-size:15.5px;
}
.standard-list li:last-child{ border-bottom:1px solid var(--line); }
.standard-list dt, .standard-list .k{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--clay); }
@media(max-width:600px){ .standard-list li{ grid-template-columns:1fr; gap:4px; } }

/* ---------- testimonials ---------- */
.quote-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
@media(max-width:860px){ .quote-grid{ grid-template-columns:1fr; } }
.quote-card blockquote{
  margin:0 0 16px;
  font-family:var(--display);
  font-style:italic;
  font-size:19px;
  color:var(--pine-ink);
  line-height:1.5;
}
.quote-card cite{ font-style:normal; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; }

/* ---------- founders panel ---------- */
.founders{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  padding:44px;
}
@media(max-width:860px){ .founders{ grid-template-columns:1fr; padding:28px; } }
.founders img{ width:100%; border-radius:2px; }

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--clay);
  color:var(--paper);
  text-align:center;
}
.cta-band h2{ color:var(--paper); }
.cta-band .lede{ color:#F5E6D8; }
.cta-band .btn-line{ color:var(--paper); }
.cta-band .btn-line:hover{ background:var(--paper); color:var(--clay-dark); }

/* ---------- process steps (cheese page) ---------- */
.process{ counter-reset:step; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:70px 1fr; gap:26px;
  padding:30px 0; border-top:1px solid var(--line);
}
.process .step:last-child{ border-bottom:1px solid var(--line); }
.step .stepnum{
  counter-increment:step;
  font-family:var(--display); font-size:30px; color:var(--gold);
}
.step .stepnum::before{ content: counter(step, decimal-leading-zero); }
.step h3{ font-size:20px; margin-bottom:6px; }
.step p{ color:var(--ink-soft); margin:0; }
@media(max-width:600px){ .step{ grid-template-columns:44px 1fr; } .step .stepnum{ font-size:22px; } }

/* ---------- product grid (cheese) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media(max-width:860px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .product-grid{ grid-template-columns:1fr; } }
.product-card .photo-slot, .product-card img{ aspect-ratio:1/1; }
.product-card h3{ font-size:18px; margin-top:16px; }
.product-card p{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); background:var(--paper);
  font-family:var(--body); font-size:15px; color:var(--ink); border-radius:2px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--clover); border-color:var(--clover); }
.info-list{ list-style:none; padding:0; margin:0 0 30px; }
.info-list li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.info-list li:last-child{ border-bottom:1px solid var(--line); }
.info-list .k{ width:120px; flex:none; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--clay); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:var(--pine-ink); color:#C9D2C2; padding:70px 0 30px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}
@media(max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-top h4{ color:var(--cream); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; margin-bottom:16px; }
.footer-top ul{ list-style:none; margin:0; padding:0; }
.footer-top li{ margin-bottom:10px; font-size:14.5px; }
.footer-top a{ text-decoration:none; color:#C9D2C2; }
.footer-top a:hover{ color:var(--gold); }
.footer-brand p{ color:#9FAE95; font-size:14px; max-width:34ch; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:26px; font-size:13px; color:#7E8C74; font-family:var(--mono);
}

/* acknowledgement strip */
.ack{
  font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line);
  padding-top:18px; margin-top:18px; max-width:70ch;
}