/*
Theme Name: Half Hunted
Description: The Half Hunted site. Built from the original hand-written landing page, so it stays small and fast on weak rural signal. No page builder, no framework, no external requests.
Version: 1.0.0
Author: Half Hunted
License: GPL-2.0-or-later
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: half-hunted
*/

/* -------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED
   1. Fonts and the base page. Carried over unchanged from the static build.
   2. Landing page.
   3. Recipes.
   4. Small shared pieces.
   Colours live in the :root block as variables. Change one there and it changes
   everywhere. Charcoal is the dark, bone is the off-white, blaze is the orange.
   ---------------------------------------------------------------------- */

/* 1 and 2. BASE AND LANDING PAGE */
@font-face{font-family:Oswald;src:url('assets/fonts/oswald-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--charcoal:#242521;--bone:#f2f1e9;--blaze:#ff681e;--olive:#5c6250;--line:#b6b8aa;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--charcoal);background:var(--bone);font:400 18px/1.5 Barlow,Arial,sans-serif}a{color:inherit}button,input{font:inherit}button,input,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blaze);outline-offset:5px}.skip{position:absolute;top:-100px;left:12px;z-index:5;padding:12px;background:var(--bone);color:var(--charcoal)}.skip:focus{top:12px}.brand{min-height:110px;display:flex;align-items:center;justify-content:space-between;padding:14px 5%;gap:32px;max-width:1600px;margin:auto}.brand-link{display:block;line-height:0;max-width:320px;width:100%}.brand-link img{display:block;width:100%;height:auto;max-height:90px;object-fit:contain;object-position:left}.header-note{font-size:12px;letter-spacing:1.5px;font-weight:600}.hero{background:var(--charcoal);color:var(--bone);display:grid;grid-template-columns:1.24fr 0.76fr;max-width:1600px;margin:auto}.hero-copy{padding:48px clamp(28px,5vw,80px) 38px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:600;margin:0 0 18px}.signup-block .eyebrow{color:#ff9a67}h1,h2,.species strong,.footer-brand{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700}h1{font-size:clamp(42px,4.2vw,64px);text-transform:uppercase;line-height:1.1;letter-spacing:-.8px;margin:0 0 20px}h1 span{color:#c8cabe}.intro{max-width:400px;font-size:19px;line-height:1.4;margin:0 0 26px}form{max-width:440px;scroll-margin-top:24px}fieldset{border:0;padding:0;margin:0 0 17px}legend,.email-label{font-size:15px;font-weight:600;margin:0 0 9px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choices label{position:relative;cursor:pointer}.choices input{position:absolute;inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer}.choices span{display:flex;align-items:center;justify-content:center;min-height:54px;border:1px solid #aaaE9c;color:var(--bone);background:#30322b;font-size:17px;font-weight:600}.choices input:checked+span{background:var(--bone);border-color:var(--bone);color:var(--charcoal);box-shadow:inset 0 -4px var(--blaze)}.choices input:checked+span:before{content:'✓';margin-right:8px}.choices input:focus-visible+span{outline:3px solid var(--blaze);outline-offset:4px}.email-label{display:block}#email{min-height:54px;width:100%;border:1px solid var(--bone);border-radius:0;background:var(--bone);color:var(--charcoal);padding:12px 16px;font-size:17px}#email::placeholder{color:var(--olive)}.submit{width:100%;min-height:56px;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:0;background:var(--blaze);color:var(--charcoal);font-size:18px;font-weight:600;padding:12px 18px;cursor:pointer;margin-top:12px}.submit:hover{background:#ff8b51}.submit:disabled{cursor:wait;opacity:.7}.submit span{font-size:24px}.offer{font-size:14px;margin:12px 0 4px}.fine{color:#c5c8b9;font-size:13px;margin:4px 0}.preview-note{color:#ffb087;font-size:12px;margin:8px 0 0}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#status:empty{display:none}#status{border-left:3px solid var(--blaze);padding-left:12px;font-size:16px}.hero-art{position:relative;margin:0;min-height:820px;overflow:hidden}.hero-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.82)}.hero-art:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(20,21,16,.75))}.hero-art figcaption{position:absolute;bottom:27px;left:32px;right:24px;z-index:1;font-size:16px;font-weight:600;color:white}.coming{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1440px;margin:auto;padding:64px 5% 52px}.coming .eyebrow{color:var(--olive);margin-bottom:15px}h2{font-size:42px;line-height:1.15;text-transform:uppercase;margin:0}.coming-detail{padding-top:20px;max-width:480px}.coming-detail p{margin:0 0 14px}.species{max-width:1440px;margin:auto;padding:0 5% 46px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}.species a{border-top:2px solid var(--charcoal);border-bottom:1px solid var(--line);padding:22px 28px 25px 0;text-decoration:none;margin-right:28px}.species a:last-child{margin-right:0}.species-label{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--olive)}.species strong{font-size:42px;text-transform:uppercase;display:block;line-height:1.2;margin:9px 0 18px}.species a>span:last-child{display:flex;justify-content:space-between;gap:12px;font-size:16px}.species b{font-size:22px;line-height:1;color:#993900}.species a:hover strong{text-decoration:underline;text-decoration-color:var(--blaze);text-underline-offset:6px}.share-row{max-width:1440px;margin:auto;padding:0 5% 40px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:16px}.share-row p{margin:0}.share-row a{min-height:44px;display:flex;align-items:center;gap:20px;font-weight:600;text-underline-offset:4px}.share-row #share-status:empty{display:none}footer{background:var(--charcoal);color:var(--bone);padding:25px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px}.footer-brand{font-size:23px;text-decoration:none;min-height:44px;display:flex;align-items:center}footer div{display:flex;gap:24px}footer div a{min-height:44px;display:flex;align-items:center;text-underline-offset:4px}@media(min-width:1600px){.hero{border:1px solid var(--charcoal)}}@media(max-width:760px){.brand{min-height:82px;padding:9px 6%}.brand-link{max-width:250px}.brand-link img{max-height:68px}.header-note{display:none}.hero{display:flex;flex-direction:column}.hero-copy{padding:26px 6% 28px}h1{font-size:39px;letter-spacing:-.5px;margin-bottom:15px}.eyebrow{font-size:11px;margin-bottom:14px}.intro{font-size:17px;line-height:1.4;margin-bottom:22px;max-width:330px}form{max-width:none}fieldset{margin-bottom:15px}.choices span{min-height:50px}#email{min-height:52px}.submit{min-height:54px;font-size:17px}.offer{font-size:13px}.fine{font-size:12px}.hero-art{min-height:540px}.hero-art>img{object-position:center top}.hero-art figcaption{left:6%;bottom:22px;font-size:15px}.coming{display:block;padding:37px 6% 24px}.coming h2{font-size:33px}.coming-detail{padding-top:20px;font-size:17px}.species{padding:0 6% 22px;grid-template-columns:1fr}.species a{margin:0;padding:20px 0;border-top:0;position:relative}.species a:first-child{border-top:2px solid var(--charcoal)}.species strong{font-size:32px;margin:3px 0 8px}.species a>span:last-child{font-size:16px}.share-row{padding:15px 6% 27px;gap:3px;flex-direction:column;align-items:flex-start}footer{padding:22px 6%;flex-wrap:wrap;gap:10px}footer div{gap:18px}}@media(max-width:360px){h1{font-size:33px}.intro{font-size:16px}.hero-copy{padding-top:22px}.brand{min-height:76px}.brand-link{max-width:225px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:760px){h1{font-size:32px;line-height:1.15;letter-spacing:-.4px}.brand-link{max-width:265px}}@media(max-width:360px){h1{font-size:28px}}

.page{max-width:720px;margin:auto;padding:10px 6% 60px}.page .eyebrow{color:var(--olive)}.page h1{font-size:clamp(34px,4vw,52px);margin-bottom:18px}.page h2{font-size:26px;margin:36px 0 10px}.page p{margin:0 0 14px}.page .lede{font-size:20px;line-height:1.45;border-left:3px solid var(--blaze);padding-left:16px;margin-bottom:20px}.page .updated{font-size:14px;color:var(--olive);margin-bottom:26px}.page ul{margin:0 0 14px;padding-left:20px}.page li{margin:0 0 9px}.page a{text-underline-offset:4px}.page .mailto{font-weight:600;word-break:break-word}.page .back{margin-top:40px}.page .back a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}@media(max-width:760px){.page{padding:4px 6% 44px}.page .lede{font-size:18px}.page h2{font-size:23px;margin-top:30px}}


/* -------------------------------------------------------------------------
   3. RECIPES
   ---------------------------------------------------------------------- */
.recipe-head{max-width:1100px;margin:auto;padding:14px 5% 0}
.recipe-head .eyebrow{color:var(--olive)}
.recipe-head h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:14px}
.recipe-head .recipe-lede{font-size:20px;line-height:1.45;max-width:640px;margin:0 0 18px}
.recipe-facts{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--charcoal);border-bottom:1px solid var(--line);margin:0 0 26px;padding:0;list-style:none}
.recipe-facts li{padding:14px 34px 14px 0;margin-right:34px}
.recipe-facts li:last-child{margin-right:0}
.recipe-facts b{display:block;font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--olive);margin-bottom:5px}
.recipe-facts span{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:23px;text-transform:uppercase}
.recipe-photo{max-width:1100px;margin:0 auto 30px;padding:0 5%}
.recipe-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.recipe-photo figcaption{font-size:14px;color:var(--olive);margin-top:8px}
.recipe-body{max-width:1100px;margin:auto;padding:0 5% 10px;display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:56px;align-items:start}
.recipe-note{font-size:17px;line-height:1.6;max-width:640px}
.recipe-note p{margin:0 0 15px}
.recipe-col h2{font-size:30px;margin:0 0 16px;text-transform:uppercase}
.ingredients{list-style:none;margin:0;padding:0}
.ingredients li{padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}
.ingredients li.sub{border:0;padding:20px 0 4px;font-size:12px;letter-spacing:1.5px;font-weight:600;color:var(--olive);text-transform:uppercase}
.ingredients li:first-child.sub{padding-top:0}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{position:relative;padding:0 0 22px 52px;font-size:17px;line-height:1.55}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--blaze);color:var(--charcoal);font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:19px}
.steps li.sub{padding-left:0;font-size:12px;letter-spacing:1.5px;font-weight:600;color:var(--olive);text-transform:uppercase;padding-top:6px}
.steps li.sub:before{content:none;counter-increment:none}
.kit-note{margin:28px 0 0;padding:20px 22px;background:var(--charcoal);color:var(--bone)}
.kit-note h3{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;margin:0 0 10px}
.kit-note ul{margin:0;padding-left:19px;font-size:16px}
.kit-note li{margin:0 0 5px}
.kit-note p{margin:12px 0 0;font-size:14px;color:#c5c8b9}
.recipe-index{max-width:1440px;margin:auto;padding:10px 5% 40px}
.recipe-index h1{font-size:clamp(34px,4.4vw,56px);margin-bottom:12px}
.recipe-index .intro{max-width:620px;margin-bottom:30px}
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:34px;list-style:none;margin:0;padding:0}
.recipe-card a{display:block;text-decoration:none}
.recipe-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:12px}
.recipe-card .ph{aspect-ratio:3/2;background:var(--charcoal);margin-bottom:12px}
.recipe-card .species-label{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--olive)}
.recipe-card strong{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:27px;text-transform:uppercase;display:block;line-height:1.15;margin:6px 0 8px}
.recipe-card a:hover strong{text-decoration:underline;text-decoration-color:var(--blaze);text-underline-offset:5px}
.recipe-card p{margin:0;font-size:16px}
.species-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0;list-style:none}
.species-filter a{display:flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--charcoal);text-decoration:none;font-weight:600;font-size:16px}
.species-filter a:hover,.species-filter a[aria-current=page]{background:var(--charcoal);color:var(--bone)}

/* -------------------------------------------------------------------------
   4. SMALL SHARED PIECES
   ---------------------------------------------------------------------- */
.hh-status:empty{display:none}
.hh-status{border-left:3px solid var(--blaze);padding-left:12px;font-size:16px;margin:12px 0 0}
.hh-status.is-good{border-left-color:#7ea04d}
.signup-block{background:var(--charcoal);color:var(--bone);padding:44px 5%;margin-top:30px}
.signup-block .inner{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.signup-block h2{font-size:34px;margin:0 0 12px}
.signup-block .eyebrow{color:#ff9a67}
.signup-block p{margin:0 0 12px;max-width:420px}
.signup-block form{max-width:440px}
.pagination{display:flex;gap:14px;margin:36px 0 0;font-weight:600}
.pagination .page-numbers{min-height:44px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);text-decoration:none}
.pagination .page-numbers.current{background:var(--charcoal);color:var(--bone);border-color:var(--charcoal)}
@media(max-width:900px){.recipe-body{grid-template-columns:1fr;gap:34px}.signup-block .inner{grid-template-columns:1fr;gap:26px}}
@media(max-width:760px){
  .recipe-head{padding:6px 6% 0}
  .recipe-head h1{font-size:33px}
  .recipe-head .recipe-lede{font-size:18px}
  .recipe-facts li{padding:12px 20px 12px 0;margin-right:20px}
  .recipe-facts span{font-size:20px}
  .recipe-photo,.recipe-body,.recipe-index{padding-left:6%;padding-right:6%}
  .recipe-col h2{font-size:26px}
  .signup-block{padding:32px 6%}
  .signup-block h2{font-size:28px}
  .recipe-grid{gap:28px}
}
@media print{
  .brand,footer,.signup-block,.skip,.recipe-photo figcaption,.species-filter,.pagination{display:none!important}
  body{background:#fff;font-size:12pt}
  .recipe-body{display:block}
  .steps li:before{background:#000;color:#fff}
}

/* =========================================================================
   5. FRONT PAGE
   One dark hero holds the logo, the headline, the supporting copy, the signup
   form and the share box. The photo sits beside it with the orange badge in its
   corner. Everything below is in one place on purpose. If you change something
   here, change it here, do not add a new rule at the bottom of the file.
   ========================================================================= */

/* --- The footer stays pinned to the bottom of the window ----------------
   If a page is shorter than the screen, the footer floats up and the pale page
   background shows below it. This makes the page a column: the footer keeps its
   size and the block above it grows into whatever space is left.
   100svh is the "small viewport height". On a phone it measures the screen with
   the browser bars showing, so nothing jumps when they slide away. 100vh comes
   first as a fallback for older browsers. */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column}
main>*{flex-shrink:0}
footer{flex-shrink:0}
/* The grey WordPress bar only shows when logged in. Take its height off. */
.admin-bar{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px)}

/* --- The hero fills the width and takes up the slack ------------------- */
.home .hero{flex:1 0 auto;max-width:none;border:0;align-items:stretch}
.home .hero-copy{max-width:940px;width:100%;justify-self:end;padding-top:40px;padding-bottom:40px}

/* --- Logo ---------------------------------------------------------------
   The white version, with the antler and fork still orange. */
.hero-logo{margin:0 0 30px;line-height:0}
.hero-logo img{display:block;width:100%;max-width:250px;height:auto}

/* --- Headline and the copy beside it ------------------------------------
   max-content means the headline column is only as wide as the headline, so the
   paragraphs sit right beside it instead of across an empty gap.
   align-items:end puts the last line of the paragraphs level with the bottom of
   the headline.
   Each headline line is told never to break. The size is capped low enough that
   the longest line always fits, so that can never push text off the edge. */
.hero-kit{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:38px;margin:0 0 34px;align-items:end}
.hero-kit .eyebrow{color:#ff9a67;margin-bottom:14px}
.hero-kit h1{font-size:clamp(28px,2.4vw,38px);margin:0}
.hero-kit h1 span{display:block;white-space:nowrap}
.hero-kit h1 span:first-child{color:var(--bone)}
.hero-kit-detail{font-size:16px;line-height:1.55;max-width:390px;color:#c8cabe;padding-bottom:0}
.hero-kit-detail p{margin:0 0 11px}
.hero-kit-detail p:last-child{margin-bottom:0}
.hero-kit-detail strong{font-weight:600;color:var(--bone)}

/* --- Share box, under the small print ----------------------------------
   Outlined so it reads as its own thing. Same border as the species buttons. */
.hero .share-row{max-width:440px;margin:22px 0 0;padding:16px 20px;border:1px solid #aaae9c;gap:8px;flex-direction:column;align-items:flex-start;font-size:15px}
.hero .share-row p{margin:0;color:#c5c8b9}
.hero .share-row a{color:var(--bone);min-height:40px;gap:10px}

/* --- The orange badge in the top corner of the photo -------------------- */
.hero-badge{position:absolute;top:0;right:0;z-index:2;margin:0;background:var(--blaze);color:#fff;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:14px;letter-spacing:1.4px;font-weight:700;padding:13px 20px;max-width:78%}

/* --- Footer tagline, set like the wordmark beside it -------------------- */
footer p{margin:0;color:var(--bone);font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:.2px;text-transform:uppercase;text-align:center}

/* --- Narrow screens ----------------------------------------------------- */
@media(max-width:900px){
  .hero-kit{grid-template-columns:1fr;gap:16px}
  .hero-kit-detail{max-width:460px}
}
@media(max-width:782px){
  .admin-bar{min-height:calc(100vh - 46px);min-height:calc(100svh - 46px)}
}
@media(max-width:760px){
  .home .hero-copy{padding-top:26px;padding-bottom:30px}
  .hero-logo{margin-bottom:22px}
  .hero-logo img{max-width:200px}
  .hero-kit h1{font-size:30px}
  .hero-kit-detail{font-size:15px}
  .hero-badge{font-size:12px;padding:10px 14px;letter-spacing:1.1px}
  /* The base stylesheet hides this line on phones. It carries the tagline now. */
  footer p{display:block;width:100%;order:3;font-size:15px;text-align:left}
}
@media(max-width:380px){
  .hero-kit h1{font-size:26px}
}
