/* ============================================================
   temeculawinetasting.com — style1.css  (v1, first design draft)
   Design system: "estate label" — the typographic language of a
   wine label (centered small-caps kickers, hairline double rules,
   a diamond ornament) carried across an editorial travel site.
   Palette from the valley itself: wine-must dark, parchment,
   merlot, dry-grass gold, olive vine.
   Versioned-asset convention shared with nitra.net / pacificair.com:
   bump the number on edit, cache-bust in the pages.
   ============================================================ */

:root{
  --must:      #3A0D19;   /* wine-must red-black — nav, hero, footer     */
  --must-deep: #2A0912;   /* deeper pour of the same                     */
  --merlot:    #7A2135;   /* primary accent — links, rules               */
  --merlot-hi: #9C2E44;   /* hover state of the accent                   */
  --gold:      #C29B40;   /* dry-grass gold — kickers, ornaments         */
  --gold-pale: #E4CA82;   /* gold on dark grounds                        */
  --vine:      #5A6B4D;   /* olive-vine green — sparing, secondary       */
  --paper:     #FAF5EC;   /* sun-bleached parchment page ground          */
  --paper-warm:#F2E9D8;   /* alternating band                            */
  --ink:       #2B1D19;   /* warm brown-black body text                  */
  --ink-soft:  #5F4C44;   /* captions, secondary text                    */
  --hairline:  rgba(58,13,25,.28);

  --display: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --serif:   Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:    "Avenir Next","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

  --measure: 70ch;
  --pad-x: clamp(1.1rem, 4vw, 2.6rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--merlot);text-decoration-color:rgba(122,33,53,.35);text-underline-offset:3px;}
a:hover{color:var(--merlot-hi);}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
hr{border:0;border-top:1px solid var(--hairline);margin:2.6rem 0;}
strong{color:var(--must);}

/* ---------------- skip link ---------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--must-deep);
  padding:.6rem 1.1rem;font-family:var(--sans);font-size:.85rem;
}
.skip-link:focus{left:0;}

/* ---------------- top navigation ---------------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:1.4rem;
  background:var(--must);
  color:#F6EBDD;
  padding:0 var(--pad-x);
  min-height:64px;
  border-bottom:1px solid rgba(228,202,130,.28);
}
.nav-mark{
  font-family:var(--display);
  font-size:1.02rem;
  letter-spacing:.22em;
  color:#F6EBDD;
  text-decoration:none;
  white-space:nowrap;
}
.nav-mark .mark-dot{color:var(--gold-pale);padding:0 .12em;}
.nav-mark:hover{color:#fff;}
.nav-links{
  display:flex;align-items:stretch;gap:.2rem;
  list-style:none;margin:0 0 0 auto;padding:0;
  font-family:var(--sans);
  position:relative; /* anchor for the mega panel */
}
.nav-links > li{display:flex;} /* NOT position:relative — the mega panel anchors to .nav-links */
.nav-links > li > a{
  display:flex;align-items:center;
  padding:0 .85rem;min-height:64px;
  color:#EFDFC8;text-decoration:none;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.nav-links > li > a:hover,
.nav-links > li > a[aria-current="page"]{
  color:var(--gold-pale);
  border-bottom-color:var(--gold);
}
.nav-toggle{display:none;}

/* mega panel (Wineries) — anchored to the nav-links block's right edge so a
   640px panel can never overflow the viewport regardless of item position. */
.has-mega .mega-menu{
  position:absolute;top:100%;right:0;
  min-width:640px;max-width:min(760px,92vw);
  background:var(--must-deep);
  border:1px solid rgba(228,202,130,.3);
  border-top:0;
  padding:1.5rem 1.8rem 1.7rem;
  display:none;
  box-shadow:0 18px 40px rgba(26,5,12,.45);
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu{display:block;}
.mega-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.mega-col-header{
  display:block;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-pale);text-decoration:none;
  padding-bottom:.55rem;margin-bottom:.55rem;
  border-bottom:1px solid rgba(228,202,130,.3);
}
.mega-col ul{list-style:none;margin:0;padding:0;}
.mega-col li a{
  display:block;padding:.28rem 0;
  color:#EBDCC6;text-decoration:none;
  font-size:.86rem;letter-spacing:.02em;
}
.mega-col li a:hover{color:#fff;}
.mega-col-viewall{
  display:block;margin-top:.7rem;
  font-size:.78rem;color:var(--gold-pale);text-decoration:none;
}
.mega-col-viewall:hover{color:#fff;}

/* mobile nav */
@media (max-width: 980px){
  .site-nav{flex-wrap:wrap;padding-top:.4rem;padding-bottom:.4rem;}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;background:none;border:1px solid rgba(228,202,130,.4);
    border-radius:2px;color:#EFDFC8;width:44px;height:40px;cursor:pointer;
  }
  .nav-toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;
    width:100%;margin:.4rem 0 .6rem;gap:0;
  }
  .site-nav.nav-open .nav-links{display:flex;}
  .nav-links > li{flex-direction:column;}
  .nav-links > li > a{min-height:0;padding:.7rem .2rem;border-bottom:1px solid rgba(228,202,130,.16);}
  .has-mega .mega-menu{
    position:static;transform:none;min-width:0;display:none;
    border:0;box-shadow:none;padding:.4rem 0 .8rem .8rem;background:none;
  }
  .site-nav.nav-open .has-mega .mega-menu{display:block;}
  .mega-inner{grid-template-columns:1fr;gap:1rem;}
}

/* ---------------- breadcrumb ---------------- */
.breadcrumb{
  font-family:var(--sans);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:1rem var(--pad-x) 0;
  max-width:1200px;margin:0 auto;
}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--merlot);}
.breadcrumb .crumb-sep{color:var(--gold);padding:0 .35em;}

/* ---------------- the label headline system ---------------- */
.label-head{text-align:center;max-width:860px;margin:0 auto 2.6rem;}
.kicker{
  display:block;
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}
.on-dark .kicker{color:var(--gold-pale);}
.label-head h1,.label-head h2{
  font-family:var(--display);
  font-weight:400;
  color:var(--must);
  margin:0 0 1rem;
  line-height:1.12;
  letter-spacing:.01em;
}
.label-head h1{font-size:clamp(2.4rem,5.4vw,4.2rem);}
.label-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);}
.on-dark .label-head h1,.on-dark .label-head h2{color:#F6EBDD;}
.label-rule{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:1.1rem auto 0;max-width:340px;
  color:var(--gold);
}
.label-rule::before,.label-rule::after{
  content:"";flex:1;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  height:3px;opacity:.55;
}
.label-rule svg{width:12px;height:12px;flex:none;fill:currentColor;}
.label-head .lede{
  font-style:italic;
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:56ch;margin:1.3rem auto 0;
}
.on-dark .label-head .lede{color:#D9C6AE;}

/* ---------------- page structure ---------------- */
.section{padding:clamp(3rem,7vw,5.5rem) var(--pad-x);}
.section-warm{background:var(--paper-warm);}
.section-dark{background:var(--must);color:#EDDFC9;}
.section-dark strong{color:#F6EBDD;}
.section-dark a{color:var(--gold-pale);text-decoration-color:rgba(228,202,130,.4);}
.section-dark a:hover{color:#fff;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-inner.narrow{max-width:820px;}
.prose{max-width:var(--measure);}
.prose.centered{margin-left:auto;margin-right:auto;}
h2,h3{font-family:var(--display);font-weight:400;color:var(--must);line-height:1.2;}
.section-dark h2,.section-dark h3{color:#F6EBDD;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:2.4rem 0 1rem;}
h3{font-size:1.35rem;margin:2rem 0 .7rem;}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:clamp(560px, 88vh, 1000px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(122,33,53,.55), transparent 60%),
    linear-gradient(180deg, var(--must-deep), var(--must) 55%, #4A1524);
  color:#F6EBDD;
  text-align:center;
  padding:5.5rem var(--pad-x) 4.5rem;
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;margin:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42;}
.hero-frame{
  position:relative;z-index:2;
  max-width:820px;
  padding:clamp(2rem,5vw,3.6rem) clamp(1.4rem,5vw,3.4rem);
  border:1px solid rgba(228,202,130,.6);
  outline:1px solid rgba(228,202,130,.28);
  outline-offset:7px;
  background:rgba(42,9,18,.32);
}
.hero .kicker{color:var(--gold-pale);}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.7rem,7vw,5rem);
  line-height:1.05;letter-spacing:.015em;
  margin:.2rem 0 1rem;color:#F8EFE0;
}
.hero .est-line{
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:#CDB48C;margin:.2rem 0 1.1rem;
}
.hero .hero-sub{
  font-style:italic;font-size:clamp(1.02rem,2vw,1.2rem);
  color:#E8D8BE;max-width:52ch;margin:0 auto 1.9rem;
}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.85rem 1.7rem;text-decoration:none;border-radius:2px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-gold{background:var(--gold);color:var(--must-deep);border:1px solid var(--gold);}
.btn-gold:hover{background:var(--gold-pale);border-color:var(--gold-pale);color:var(--must-deep);}
.btn-line{background:transparent;color:#F0E2CB;border:1px solid rgba(240,226,203,.65);}
.btn-line:hover{color:#fff;border-color:#fff;}
.section .btn-line{color:var(--merlot);border-color:var(--merlot);}
.section .btn-line:hover{color:var(--merlot-hi);border-color:var(--merlot-hi);}

/* the signature: live valley strip pinned under the hero label */
.valley-now{
  position:relative;z-index:2;
  margin-top:2.6rem;
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--sans);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-pale);
  border-top:1px solid rgba(228,202,130,.4);
  border-bottom:1px solid rgba(228,202,130,.4);
  padding:.55rem 1.4rem;
}
.valley-now .vn-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(194,155,64,.9);
  flex:none;
}

/* ---------------- fact band (AVA numbers) ---------------- */
.fact-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.2rem;max-width:1100px;margin:0 auto;
  text-align:center;
}
.fact{padding:1.1rem .6rem;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.fact .fact-num{
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--merlot);line-height:1.1;
}
.fact .fact-label{
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.45rem;
}

/* ---------------- trail cards ---------------- */
.trail-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.8rem;max-width:1200px;margin:0 auto;
}
.trail-card{
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:1.8rem 1.6rem 1.6rem;
  display:flex;flex-direction:column;
}
.section-warm .trail-card{background:var(--paper);}
.trail-card .kicker{margin-bottom:.6rem;font-size:.64rem;}
.trail-card h3{margin:.1rem 0 .6rem;font-size:1.45rem;}
.trail-card p{margin:.2rem 0 1rem;font-size:.97rem;color:var(--ink-soft);}
.trail-card .read-more{margin-top:auto;}
.read-more a{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;
}

/* ---------------- winery directory rows ---------------- */
.winery-list{list-style:none;margin:2rem 0 0;padding:0;max-width:900px;}
.winery-list li{
  padding:1.15rem 0;
  border-bottom:1px solid var(--hairline);
}
.winery-list li:first-child{border-top:1px solid var(--hairline);}
.winery-name{
  font-family:var(--display);font-size:1.22rem;color:var(--must);
  margin-right:.6rem;
}
.winery-tag{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
.winery-list p{margin:.35rem 0 0;font-size:.97rem;color:var(--ink-soft);}

/* ---------------- numbered steps (true sequences only) ---------------- */
.steps{
  counter-reset:step;
  list-style:none;margin:2.2rem auto 0;padding:0;max-width:820px;
}
.steps > li{
  position:relative;
  padding:0 0 1.9rem 4.2rem;
  counter-increment:step;
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;
  font-family:var(--display);
  font-size:1.5rem;color:var(--gold);
}
.steps > li::after{
  content:"";position:absolute;left:1.05rem;top:2.5rem;bottom:.5rem;
  border-left:1px solid var(--hairline);
}
.steps > li:last-child::after{display:none;}
.steps h3{margin:0 0 .4rem;}
.steps p{margin:0;color:var(--ink-soft);font-size:.99rem;}

/* ---------------- note box ---------------- */
.note-box{
  max-width:var(--measure);
  border-left:3px solid var(--gold);
  background:rgba(194,155,64,.08);
  padding:1.1rem 1.4rem;
  margin:2.2rem 0;
  font-size:.98rem;
}
.note-box strong{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--merlot);display:block;margin-bottom:.35rem;}
.section-dark .note-box{background:rgba(228,202,130,.08);border-left-color:var(--gold-pale);}
.section-dark .note-box strong{color:var(--gold-pale);}

/* ---------------- fact table ---------------- */
.fact-table{width:100%;max-width:820px;border-collapse:collapse;margin:1.8rem 0;font-size:.98rem;}
.fact-table th,.fact-table td{
  text-align:left;padding:.65rem .8rem;
  border-bottom:1px solid var(--hairline);vertical-align:top;
}
.fact-table th{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
}

/* ---------------- image placeholder slots ----------------
   Photography does not exist yet; each slot marks where a
   generated image will land. data-img on the <figure> names the
   future asset file (matches codex/prompts.txt) — same convention
   as nitra.net. The frame and glyph inherit currentColor so the
   component adapts to paper and must-dark sections alike. */
.img-slot{margin:2.6rem auto 0;max-width:1100px;}
.img-slot-frame{
  aspect-ratio:16/9;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  border:1px dashed currentColor;
  border-radius:2px;
  background:linear-gradient(160deg, rgba(122,33,53,.07), rgba(194,155,64,.09));
  opacity:.75;
  color:var(--merlot);
}
.section-dark .img-slot-frame{color:var(--gold-pale);background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.12));}
.img-slot-frame svg{width:56px;height:auto;opacity:.6;}
.img-slot-label{
  font-family:var(--sans);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  opacity:.85;
}
.img-slot figcaption{
  margin-top:.7rem;
  font-style:italic;font-size:.84rem;letter-spacing:.02em;
  color:var(--ink-soft);
  text-align:center;
}
.section-dark .img-slot figcaption{color:#D9C6AE;}
.img-slot.has-img .img-slot-frame{display:none;}
.img-slot.has-img img{width:100%;border-radius:2px;}

/* Two-up (or three-up) slot rows inside a section. */
.img-slot-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6rem;max-width:1200px;margin:0 auto;
}
.img-slot-row .img-slot{margin-top:2.6rem;max-width:none;}
.img-slot-row .img-slot-frame{aspect-ratio:4/3;}

/* ---------------- teaser trio (plan / stay / dine) ---------------- */
.teaser-trio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.8rem;max-width:1200px;margin:0 auto;
}
.teaser{
  border-top:2px solid var(--gold);
  padding-top:1.2rem;
}
.teaser h3{margin:0 0 .5rem;}
.teaser p{margin:0 0 .9rem;font-size:.97rem;color:var(--ink-soft);}
.section-dark .teaser p{color:#D9C6AE;}

/* ---------------- footer ---------------- */
.site-footer{
  background:var(--must-deep);
  color:#D9C6AE;
  padding:3.5rem var(--pad-x) 0;
  font-size:.95rem;
}
.footer-top{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.4rem;
  padding-bottom:2.6rem;
}
.footer-brand h2{
  font-family:var(--display);font-weight:400;
  font-size:1.15rem;letter-spacing:.2em;color:#F6EBDD;margin:0 0 .9rem;
}
.footer-brand h2 .mark-dot{color:var(--gold-pale);padding:0 .1em;}
.footer-brand p{margin:0;font-size:.92rem;line-height:1.7;}
.footer-col h3{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-pale);margin:0 0 .8rem;font-weight:600;
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li a{
  display:block;padding:.22rem 0;
  color:#D9C6AE;text-decoration:none;font-size:.92rem;
}
.footer-col li a:hover{color:#fff;}
.footer-bottom{
  max-width:1200px;margin:0 auto;
  border-top:1px solid rgba(228,202,130,.22);
  padding:1.2rem 0 1.6rem;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:#B39B78;
}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

@media (max-width:480px){
  .img-slot-label{letter-spacing:.16em;font-size:.6rem;}
}

/* ---------------- 404 ---------------- */
.lost-page{
  min-height:70vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:4rem var(--pad-x);
}

/* ---------------- "On Map" pill (winery detail pages) ----------------
   Ported from nitra.net's .map-btn (style77.css), whose geometry the owner
   settled after three rounds — same min-width so the pill holds one width
   regardless of label length, same padding, same 999px radius, same font
   sizing/weight/letter-spacing. Only the palette is re-cut for this site:
   nitra sits white-on-dark inside its nav bar, Temecula sits merlot on the
   parchment breadcrumb row. Opens Google Maps in a new tab.
   .breadcrumb gets the flex treatment ONLY via .has-map, so every existing
   breadcrumb (bare text nodes + separators) lays out exactly as before. */
.breadcrumb.has-map{
  display:flex;align-items:center;justify-content:space-between;
  gap:.9rem;flex-wrap:wrap;
}
.map-cta{
  margin:0;
  display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.map-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:7.2rem;
  padding:.34rem .8rem;
  border:1px solid var(--merlot);
  border-radius:999px;
  background:transparent;
  color:var(--merlot);
  font-family:var(--sans);
  font-size:.68rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.map-btn:hover{background:var(--merlot);color:var(--paper);}
.map-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}