/* ==========================================================================
   The Whole Vine Festival — global styles
   Recreated from the Claude Design prototype (static, production build).
   Palette: cream #FAF5EC · deep purple #36184A · vine green #2FAE4A / #9BE36B
            grape magenta #D62E9A / #F062BE · gold #E9A93C
   Fonts:   Saira Condensed (display) · Archivo (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Archivo:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Archivo',system-ui,sans-serif;
  background:#FAF5EC;
  color:#36184A;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
input{font-family:inherit}
button{font-family:inherit}
::selection{background:#D62E9A;color:#FAF5EC}

/* ---- Keyframes (verbatim from the prototype) ---------------------------- */
@keyframes wv-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes wv-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wv-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes wv-swayS{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}
@keyframes wv-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wv-draw{to{stroke-dashoffset:0}}
@keyframes wv-reveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes wv-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes wv-wave{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-15px)}}
@keyframes wv-bobbig{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(2.4deg)}}
@keyframes wv-linewave{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(11px) scaleY(1.05)}}
@keyframes wv-ken{from{transform:scale(1)}to{transform:scale(1.1)}}

/* ---- About dropdown ----------------------------------------------------- */
.wv-dd-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:204px;background:#241029;
  border:1px solid rgba(155,227,107,.25);border-radius:5px;padding:8px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7);z-index:60;
}
.wv-dd:hover .wv-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.wv-dd-menu a{
  display:block;padding:11px 16px;border-radius:4px;
  font-family:'Archivo';font-weight:500;font-size:13px;letter-spacing:.04em;
  color:rgba(255,255,255,.82);transition:.2s;
}
.wv-dd-menu a:hover{background:rgba(155,227,107,.14);color:#9BE36B}

/* ---- Hover states (were `style-hover` in the prototype) ----------------- */
.wv-navlink{border-bottom:1px solid transparent;transition:.3s}
.wv-navlink:hover{color:#2FAE4A;border-bottom-color:#2FAE4A}
.wv-navlink-home:hover{color:#2FAE4A;border-bottom-color:#2FAE4A}

.wv-btn-green{transition:.3s}
.wv-btn-green:hover{background:#46C862}
.wv-btn-green-lift{transition:.3s}
.wv-btn-green-lift:hover{background:#46C862;transform:translateY(-1px)}
.wv-btn-green-lift2{transition:.3s}
.wv-btn-green-lift2:hover{background:#46C862;transform:translateY(-2px)}

.wv-btn-cream{transition:.3s}
.wv-btn-cream:hover{background:#fff;transform:translateY(-1px)}

.wv-btn-outline{transition:.3s}
.wv-btn-outline:hover{border-color:#2FAE4A!important;color:#2FAE4A!important}

.wv-link-green{transition:.3s}
.wv-link-green:hover{color:#2FAE4A}

.wv-link-light:hover{color:#FAF5EC}

.wv-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.wv-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(42,22,34,.5);border-color:rgba(155,227,107,.7)}

.wv-tile{transition:all .35s ease}
.wv-tile:hover{border-color:rgba(155,227,107,.75);transform:translateY(-3px)}

.wv-social{transition:.3s}
.wv-social:hover{border-color:#2FAE4A;background:rgba(155,227,107,.1)}

.wv-footlink:hover{color:#2FAE4A}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1120px){
  .wv-desktop-nav{display:none!important}
  .wv-burger{display:flex!important}
}
@media (max-width:820px){
  .wv-grid2{grid-template-columns:1fr!important}
  .wv-hide-sm{display:none!important}
}
@media (max-width:680px){
  .wv-grid3{grid-template-columns:1fr!important}
  .wv-footer-grid{grid-template-columns:1fr 1fr!important}
}

/* ---- Interactive map zone hover ----------------------------------------- */
.wv-zone{cursor:pointer}
.wv-zone rect{transition:all .3s ease}

/* ---- Stateful: header, mobile menu, hero rotator ------------------------ */
.wv-header{
  position:sticky;top:0;z-index:50;
  margin-bottom:-74px;            /* overlay the hero so the transparent bar sits over the
                                     purple hero (nav was invisible white-on-cream before) */
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;
}
.wv-header.scrolled{
  background:rgba(36,16,41,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:rgba(155,227,107,.22);
}

.wv-mobile-menu{
  display:none;flex-direction:column;padding:16px 32px 26px;
  background:rgba(36,16,41,.98);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(155,227,107,.12);
}
.wv-mobile-menu.open{display:flex}

.wv-hl{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1s ease;pointer-events:none;
}
.wv-hl.is-active{opacity:1;pointer-events:auto}

.wv-dot{
  width:7px;height:7px;border-radius:999px;border:none;cursor:pointer;padding:0;
  background:rgba(155,227,107,.34);transition:all .5s ease;
}
.wv-dot.is-active{width:22px;background:#2FAE4A}

/* ---- Sub-page helpers (logo wall, downloads, gallery, forms) ------------ */
.wv-logo-tile{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.wv-logo-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(42,22,34,.45);border-color:rgba(155,227,107,.7)}
.wv-logo-tile img{max-width:100%;max-height:100%;object-fit:contain;filter:saturate(1)}

.wv-dl{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.wv-dl:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(42,22,34,.5);border-color:rgba(155,227,107,.7)}

.wv-gallery-item{transition:transform .3s ease,box-shadow .3s ease}
.wv-gallery-item:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 26px 54px -26px rgba(42,22,34,.55)}

.wv-field{transition:border-color .2s ease,box-shadow .2s ease}
.wv-field:focus{border-color:#2FAE4A!important;box-shadow:0 0 0 3px rgba(47,174,74,.16);outline:none}

.wv-board:hover{border-color:rgba(155,227,107,.6)!important;transform:translateY(-3px)}
.wv-board{transition:transform .3s ease,border-color .3s ease}

/* ==========================================================================
   MOBILE HARDENING — no overflow, no overlap, no out-of-lane stacking
   ========================================================================== */

/* Nothing can ever exceed its container width */
img, svg, video, iframe { max-width:100%; height:auto; }
*, *::before, *::after { min-width:0; }

/* Responsive logo wall — auto-wraps, never overlaps regardless of count/width */
.wv-logowall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.wv-logo-tile{ overflow:hidden; }
.wv-logo-tile.dark{ background:#36184A !important; border-color:rgba(155,227,107,.35) !important; }

/* Keep the floating background grapes visible AND moving on phones/tablets.
   (#wv-hero-fx id beats the .wv-hide-sm rule; .wv-fx-keep covers sub-page heroes.) */
@media (max-width:820px){
  #wv-hero-fx{ display:block !important; }
  .wv-fx-keep{ display:block !important; }
}

/* Tablet ≤ 900px: tighten spacing, collapse 2-col layouts a touch earlier */
@media (max-width:900px){
  .wv-grid2{ grid-template-columns:1fr !important; }
}

/* Phone ≤ 560px: two-up logo walls, single-column content, calmer spacing */
@media (max-width:560px){
  .wv-logowall{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .wv-grid3{ grid-template-columns:1fr !important; }
}
@media (max-width:380px){
  .wv-logowall{ grid-template-columns:1fr !important; }
}

/* Founder photo: smaller, with the story wrapping around it (Vickie's request) */
.wv-founder-photo{ float:left; width:300px; max-width:42%; margin:6px 30px 14px 0; display:block; }
@media (max-width:600px){
  .wv-founder-photo{ float:none; width:100%; max-width:100%; margin:0 0 22px; }
}

/* ==========================================================================
   MOBILE BUG FIXES (clipped headings, sticky overlap, single-column cards)
   ========================================================================== */
/* Never clip or truncate text; always wrap long words gracefully */
h1, h2, h3, p, span, a, div { overflow-wrap:break-word; }
h1, h2, h3 { word-break:normal; hyphens:none; }

/* Anchor / section tops clear the 74px sticky header on jump-to navigation */
section, footer, [id]{ scroll-margin-top:90px; }

@media (max-width:760px){
  /* Force EVERY grid card to a full-width single column — kills the
     "Kids Zone span-2" cramming that squeezed cards narrow and clipped titles
     (e.g. "Sponsors" → "Spo"). */
  .wv-grid3 > *{ grid-column:1 / -1 !important; }
  .wv-grid2 > *{ grid-column:1 / -1 !important; }
  /* Roomy padding + a sane min text width so body copy never wraps one-word-per-line */
  .wv-card{ padding:26px !important; min-height:0 !important; }
}

/* ---- Shared sponsor rendering (content.js) — NEW design styling ---------- */
.twv-sp-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.twv-sp-tile{ display:flex; align-items:center; justify-content:center; height:118px;
  background:#fff; border:1px solid rgba(47,174,74,.22); border-radius:6px; padding:20px;
  overflow:hidden; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.twv-sp-tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(42,22,34,.45); border-color:rgba(155,227,107,.7); }
.twv-sp-tile img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Founding sponsors — filterable 3x3 grid, larger logos, all visible */
.twv-sp-filter{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 26px; }
.twv-sp-fbtn{ font-family:'Archivo'; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#5A4A52; background:#fff; border:1px solid rgba(47,174,74,.35); border-radius:999px; padding:9px 18px; cursor:pointer; transition:.2s; }
.twv-sp-fbtn:hover{ border-color:#2FAE4A; }
.twv-sp-fbtn.on{ background:#2FAE4A; color:#fff; border-color:#2FAE4A; }
.twv-sp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.twv-sp-grid .twv-sp-tile{ height:158px; padding:28px; }
@media (max-width:820px){ .twv-sp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .twv-sp-grid{ grid-template-columns:1fr; } }
/* Homepage Vineyard Masters — same 3-across grid, but noticeably larger so
   the six logos read at a glance. One of the six is a portrait ad tile, so
   tiles get generous height and the art is contained rather than cropped. */
.twv-sp-grid-lg .twv-sp-tile{ height:250px; padding:34px; border-radius:8px; }
@media (max-width:820px){ .twv-sp-grid-lg .twv-sp-tile{ height:210px; padding:26px; } }
@media (max-width:520px){ .twv-sp-grid-lg .twv-sp-tile{ height:190px; padding:22px; } }

/* Gratitude wall — a fixed 5 across. With 19 sponsors that lands 5/5/5/4,
   so the last row is a balanced group rather than a single straggler. */
.twv-sp-wall-5{ grid-template-columns:repeat(5,1fr) !important; }
@media (max-width:980px){ .twv-sp-wall-5{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width:820px){ .twv-sp-wall-5{ grid-template-columns:repeat(3,1fr) !important; } }

.twv-sp-tile.dark{ background:#36184A; border-color:rgba(155,227,107,.35); }
.twv-sp-group{ margin-bottom:30px; }
.twv-sp-tierlabel{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.twv-sp-tierlabel span{ font-family:'Archivo'; font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#FAF5EC; background:#5A2A72; padding:7px 16px; border-radius:2px; white-space:nowrap; }
.twv-sp-tierlabel::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(47,174,74,.4),transparent); }
@media (max-width:560px){ .twv-sp-wall{ grid-template-columns:repeat(2,1fr) !important; gap:10px; } }
@media (max-width:360px){ .twv-sp-wall{ grid-template-columns:1fr !important; } }