/* ==========================================================================
   Nashville Pumpkin Co. — shared styles

   Colour works through theme tokens (--fg, --fg-dim, --line, --accent) that
   each band re-declares. Components never hardcode a colour, so a section
   flips between the cream and olive themes just by changing its class:
     .band-cream   — parchment, dark type   (the default look)
     .band-cream-2 — a warmer parchment, for alternating
     .band-dark    — deep olive, light type (used sparingly, for contrast)

   Type: Fraunces (display) / Karla (body) / Fredoka (labels and small UI)
   ========================================================================== */

:root{
  --field:      #1B2416;   /* deep olive */
  --field-2:    #263120;
  --field-3:    #141C10;
  --bone:       #F7F1E2;   /* cream */
  --bone-2:     #F0E6D0;   /* warmer cream */
  --bone-dim:   #C9C7B2;
  --ink:        #26301F;   /* dark type on cream */
  --ink-dim:    #5C6852;
  --pumpkin:    #E2631B;
  --pumpkin-hi: #F5761F;
  --mum:        #8C2F39;
  --straw:      #C08A2E;   /* darkened so it reads on cream too */
  --straw-lt:   #D9B168;   /* original, for use on dark */
  --stem:       #5C7A46;

  --display: "Fraunces", Georgia, serif;
  --body:    "Karla", system-ui, sans-serif;
  --ui:      "Fredoka", system-ui, sans-serif;

  /* default theme = cream */
  --bg:          var(--bone);
  --fg:          var(--ink);
  --fg-dim:      var(--ink-dim);
  --line:        rgba(38,48,31,.16);
  --line-strong: rgba(38,48,31,.42);
  --accent:      var(--mum);
  --field-tint:  rgba(255,255,255,.55);

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---------- band themes ---------- */
.band-cream{
  --bg:var(--bone); --fg:var(--ink); --fg-dim:var(--ink-dim);
  --line:rgba(38,48,31,.16); --line-strong:rgba(38,48,31,.42);
  --accent:var(--mum); --field-tint:rgba(255,255,255,.55);
  background:var(--bg); color:var(--fg);
}
.band-cream-2{
  --bg:var(--bone-2); --fg:var(--ink); --fg-dim:var(--ink-dim);
  --line:rgba(38,48,31,.18); --line-strong:rgba(38,48,31,.45);
  --accent:var(--mum); --field-tint:rgba(255,255,255,.5);
  background:var(--bg); color:var(--fg);
}
.band-dark{
  --bg:var(--field-2); --fg:var(--bone); --fg-dim:var(--bone-dim);
  --line:rgba(247,241,226,.17); --line-strong:rgba(247,241,226,.4);
  --accent:var(--straw-lt); --field-tint:rgba(247,241,226,.06);
  background:var(--bg); color:var(--fg);
}
.band-darkest{
  --bg:var(--field); --fg:var(--bone); --fg-dim:var(--bone-dim);
  --line:rgba(247,241,226,.15); --line-strong:rgba(247,241,226,.38);
  --accent:var(--straw-lt); --field-tint:rgba(247,241,226,.06);
  background:var(--bg); color:var(--fg);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* height:auto keeps the ratio when CSS sets a width and the markup carries a
   height attribute. Cards and gallery tiles override this below. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--pumpkin); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:820px; }

h1,h2,h3{
  font-family:var(--display); font-weight:800; line-height:1.03;
  font-variation-settings:"SOFT" 40,"WONK" 1; margin:0; letter-spacing:-.02em;
}
h2{ font-size:clamp(2rem,4.4vw,3.2rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.55rem); font-weight:600; letter-spacing:-.01em; }

.eyebrow{
  font-family:var(--ui); font-size:.95rem; font-weight:600;
  letter-spacing:0; color:var(--accent); margin:0 0 1rem;
}
.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--fg-dim); max-width:56ch; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(27,36,22,.95); color:var(--bone); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(247,241,226,.14);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:62px; }
.brandmark{
  font-family:var(--display); font-weight:800; font-size:1.05rem; text-decoration:none;
  white-space:nowrap; display:flex; align-items:center; gap:.6rem; min-width:0;
}
.brandmark img{ width:34px; height:auto; flex:none; }
.brandmark b{ color:var(--pumpkin); font-weight:inherit; }
@media(max-width:600px){
  .brandmark .wordmark{ display:none; }
  .brandmark img{ width:38px; }
}
.topnav{ display:flex; align-items:center; gap:1.5rem; font-size:.95rem; }
.topnav a{ text-decoration:none; color:var(--bone-dim); white-space:nowrap; }
.topnav a:hover, .topnav a[aria-current="page"]{ color:var(--bone); }
.topnav .tag{
  font-family:var(--ui); font-weight:500; font-size:.9rem;
  color:var(--straw-lt); border:1px solid rgba(217,177,104,.5);
  padding:.32rem .8rem; border-radius:999px;
}
.topnav .tag:hover{ color:var(--field); background:var(--straw-lt); }
@media(max-width:860px){ .topnav a:not(.tag){ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:4px; border:0; cursor:pointer;
  font-family:var(--body); transition:transform .15s, background .15s, border-color .15s;
}
.btn-primary{ background:var(--pumpkin); color:#FFF6E9; }
.btn-primary:hover{ background:var(--pumpkin-hi); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--fg); background:none; }
.btn-ghost:hover{ border-color:var(--fg); }
.btn-lg{ padding:1.05rem 2rem; font-size:1.02rem; }

/* ---------- sections ---------- */
section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.sec-head{ max-width:62ch; margin-bottom:clamp(2.4rem,5vw,3.4rem); }
.sec-head > p:not(.eyebrow){ margin:1rem 0 0; color:var(--fg-dim); max-width:54ch; }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(560px,88vh,820px);
  display:flex; align-items:center; color:var(--bone);
  --fg:var(--bone); --fg-dim:#E8E2CE; --line-strong:rgba(247,241,226,.4);
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,5rem);
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 60%;
  transform:scale(1.03);
}
.hero-bg--home{ background-image:url('hero-sunset-wide.webp'); background-position:center 62%; }
@media(max-width:900px){
  .hero-bg--home{ background-image:url('hero-sunset-tall.webp'); background-position:center 45%; }
}
/* Warm near-black wash from the left keeps type legible; short fade at the
   bottom hands off to the section below. Kept light — the sky is the point. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(20,28,16,.96) 0%, rgba(26,15,7,.62) 14%, rgba(26,15,7,0) 40%),
    linear-gradient(100deg, rgba(26,15,7,.82) 0%, rgba(26,15,7,.52) 34%, rgba(26,15,7,.14) 62%, rgba(26,15,7,0) 85%);
}
.hero-inner{ position:relative; max-width:22ch; }

.hero-grid{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center; gap:clamp(1.5rem,5vw,4rem);
}
.hero-copy{ min-width:0; }
.hero-logo{
  justify-self:center; width:min(100%,320px);
  filter:drop-shadow(0 10px 34px rgba(8,12,6,.55));
}
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .hero-logo{ order:-1; width:min(42%,150px); justify-self:start; }
  .hero::before{
    background:linear-gradient(to top, rgba(20,28,16,.96) 0%, rgba(26,15,7,.86) 26%, rgba(26,15,7,.55) 58%, rgba(26,15,7,.18) 100%);
  }
}

.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ui); font-weight:500; font-size:.95rem;
  border:1px solid rgba(217,177,104,.6); color:var(--straw-lt); background:rgba(20,28,16,.55);
  padding:.4rem 1rem; border-radius:999px; margin-bottom:1.5rem; text-decoration:none;
}
.pill i{ width:7px; height:7px; border-radius:50%; background:var(--pumpkin); display:block; flex:none; }
a.pill:hover{ border-color:var(--straw-lt); background:rgba(217,177,104,.14); }
.hero h1{ font-size:clamp(2.8rem,6.6vw,5.4rem); text-shadow:0 2px 34px rgba(8,12,6,.6); }
.hero h1 em{ font-style:italic; font-weight:600; color:var(--pumpkin); }
.hero .lede{ margin:1.5rem 0 0; color:#F0EADA; text-shadow:0 1px 18px rgba(8,12,6,.6); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.1rem; }
.hero .btn-ghost{ color:var(--bone); border-color:rgba(247,241,226,.45); }
.hero .btn-ghost:hover{ border-color:var(--bone); }

.hero-sm{ min-height:auto; padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,5vw,3.5rem); align-items:center; }
.hero-sm h1{ font-size:clamp(2.4rem,5.6vw,4.2rem); }
.hero-sm .hero-inner{ max-width:26ch; }

/* ---------- fact strip ---------- */
.facts{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,3.5rem); }
.fact b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1; color:var(--pumpkin);
}
.fact span{
  font-family:var(--ui); font-size:.92rem; font-weight:400;
  color:var(--fg-dim); display:block; margin-top:.45rem;
}
.strip{ border-block:1px solid var(--line); padding:2rem 0; }

/* ---------- announce bar ---------- */
.announce{ background:var(--mum); color:#FDF3F1; }
.announce .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding-block:1.15rem;
}
.announce p{ margin:0; font-size:1rem; flex:1 1 320px; }
.announce b{ font-family:var(--ui); font-weight:500; font-size:.9rem; display:block; color:#F3C9CD; margin-bottom:.2rem; }
.announce a{ font-weight:700; white-space:nowrap; }
.announce .partner-mark{ flex:none; box-shadow:none; }

/* ---------- card grids ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(1.2rem,2.5vw,2rem); }
.card figure{ margin:0; overflow:hidden; border-radius:6px; background:var(--field-tint); aspect-ratio:4/3; }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover img{ transform:scale(1.04); }
.card h3{ margin:1.1rem 0 .5rem; }
.card p{ margin:0; color:var(--fg-dim); font-size:.94rem; max-width:40ch; }

/* ---------- locations ---------- */
.locs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(1.4rem,3vw,2.2rem); }
.loc{
  border:1px solid var(--line); border-radius:8px; background:var(--field-tint);
  padding:clamp(1.5rem,3vw,2.1rem); display:flex; flex-direction:column;
}
.loc.is-new{ border-color:rgba(226,99,27,.55); background:rgba(226,99,27,.07); }
.loc .flag{
  font-family:var(--ui); font-weight:500; font-size:.9rem;
  color:var(--pumpkin); margin-bottom:.6rem; display:block;
}
.loc h3{ color:var(--accent); margin-bottom:.7rem; }
.loc.is-new h3{ color:var(--pumpkin); }
.loc address{ font-style:normal; font-size:1.02rem; margin-bottom:.85rem; }
.loc p{ color:var(--fg-dim); font-size:.93rem; margin:0 0 1.5rem; flex:1; }
.loc .btn{ align-self:flex-start; }

.hours{
  margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:1.8rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:2.4rem; font-family:var(--ui); font-size:1rem;
}
.hours b{ display:block; font-size:.92rem; color:var(--accent); margin-bottom:.35rem; font-weight:600; }
.note{ font-family:var(--ui); font-size:.95rem; color:var(--fg-dim); margin-top:2rem; }

/* ---------- gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px; grid-auto-rows:190px;
}
.gallery a{ overflow:hidden; border-radius:5px; background:var(--field-tint); display:block; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease, filter .3s; filter:saturate(.96); }
.gallery a:hover img{ transform:scale(1.06); filter:saturate(1.08); }
.gallery .tall{ grid-row:span 2; }
.gallery .wide{ grid-column:span 2; }
@media(max-width:640px){ .gallery{ grid-auto-rows:150px; } .gallery .wide{ grid-column:span 1; } }

/* ---------- faq ---------- */
.faq{ max-width:760px; }
details{ border-bottom:1px solid var(--line); }
summary{
  cursor:pointer; padding:1.15rem 0; font-weight:700; font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; gap:1.5rem; align-items:center;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-family:var(--ui); color:var(--pumpkin); font-size:1.5rem; flex:none; transition:transform .2s; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin:0 0 1.3rem; color:var(--fg-dim); max-width:62ch; }

/* ---------- prose ---------- */
.prose p{ font-size:clamp(1.02rem,1.35vw,1.13rem); margin:0 0 1.4rem; max-width:66ch; }
.prose p.big{
  font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.35; letter-spacing:-.01em; color:var(--fg);
}
.prose h3{ margin:2.6rem 0 .9rem; color:var(--accent); }
.pull{
  border-left:3px solid var(--pumpkin); padding:.4rem 0 .4rem 1.6rem;
  margin:2.4rem 0; font-family:var(--display); font-weight:600; font-style:italic;
  font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.4; color:var(--fg); max-width:52ch;
}
.mission{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.2rem,3vw,2rem); margin:2.5rem 0;
}
.mission div{ border-top:2px solid var(--line-strong); padding-top:1.1rem; }
.mission h4{ font-family:var(--ui); font-size:1rem; color:var(--accent); margin:0 0 .5rem; font-weight:600; }
.mission p{ margin:0; font-size:.95rem; color:var(--fg-dim); }

/* ---------- form ---------- */
.form{ max-width:760px; }
fieldset{ border:0; padding:0; margin:0 0 2.6rem; }
legend{
  font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.5rem);
  padding:0; margin-bottom:.5rem; letter-spacing:-.01em;
}
.hint{ font-size:.94rem; color:var(--fg-dim); margin:0 0 1.3rem; max-width:52ch; }
.field{ margin-bottom:1.3rem; }
.field label{
  display:block; font-family:var(--ui); font-size:.95rem; font-weight:500;
  color:var(--accent); margin-bottom:.45rem;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--field-tint); color:var(--fg);
  border:1px solid var(--line-strong); border-radius:5px;
  padding:.85rem 1rem; font-family:var(--body); font-size:1rem;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--pumpkin); }
.field textarea{ min-height:110px; resize:vertical; }
/* Native select chrome doesn't inherit the theme, so draw our own arrow. */
.field select{
  appearance:none; cursor:pointer; padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) calc(50% + 2px), calc(100% - .85rem) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field select option{ color:#26301F; background:#fff; }
.row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.3rem; }

.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.6rem; }
.check{
  display:flex; align-items:center; gap:.8rem; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:5px; padding:.85rem 1rem;
  background:var(--field-tint); transition:border-color .15s, background .15s;
}
.check:hover{ border-color:var(--pumpkin); }
.check input{ width:18px; height:18px; accent-color:var(--pumpkin); flex:none; margin:0; }
.check span{ font-family:var(--ui); font-size:1rem; }
.check:has(input:checked){ border-color:var(--pumpkin); background:rgba(226,99,27,.1); }
.hp{ position:absolute; left:-9999px; }

.form-foot{ border-top:1px solid var(--line); padding-top:1.8rem; margin-top:.5rem; }
.err{ color:var(--mum); font-family:var(--ui); font-size:.98rem; margin:.8rem 0 0; }

/* ---------- partner logo ---------- */
/* The Cooper Trooper mark has a white background, so it always sits on a white
   card — that reads as deliberate rather than as a stray white box. */
.partner-mark{
  background:#fff; border-radius:10px; padding:.9rem 1.1rem;
  display:inline-block; line-height:0;
  box-shadow:0 2px 14px rgba(20,28,16,.14);
}
.partner-mark img{ width:170px; height:auto; }
.partner-mark--sm{ padding:.4rem .55rem; border-radius:7px; }
.partner-mark--sm img{ width:76px; }

.partner{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.2rem,3vw,2.2rem);
  border:1px solid var(--line); border-radius:10px; background:var(--field-tint);
  padding:clamp(1.4rem,3vw,2rem); margin:2.4rem 0;
}
.partner-body{ flex:1 1 260px; min-width:0; }
.partner-body p{ margin:0 0 1rem; color:var(--fg-dim); font-size:.98rem; max-width:46ch; }
.partner-body .btn{ margin-top:.2rem; }

/* ---------- socials ---------- */
.socials{ display:flex; flex-wrap:wrap; gap:.6rem; }
.socials a{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:.5rem 1.05rem; font-family:var(--ui); font-size:.95rem; color:var(--fg-dim);
  transition:border-color .15s, color .15s, background .15s;
}
.socials a:hover{ border-color:var(--pumpkin); color:var(--pumpkin); }
.socials svg{ width:16px; height:16px; fill:currentColor; flex:none; }

/* ---------- footer ---------- */
footer{
  background:var(--field-3); color:var(--bone);
  --fg:var(--bone); --fg-dim:var(--bone-dim);
  --line:rgba(247,241,226,.14); --line-strong:rgba(247,241,226,.32);
  padding:clamp(3rem,6vw,4.5rem) 0 2.4rem;
}
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2.4rem; }
.foot-grid h4{ font-family:var(--ui); font-size:1rem; color:var(--straw-lt); margin:0 0 .8rem; font-weight:600; }
.foot-grid p, .foot-grid a{
  margin:0 0 .45rem; color:var(--bone-dim); font-size:.93rem;
  text-decoration:none; display:block;
}
.foot-grid a:hover{ color:var(--bone); }
.colophon{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--ui); font-size:.9rem; color:#8B9481;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
}

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}