/* =========================================================
   Header (logo + menu + vine/lottie) — solid black logo
   ========================================================= */

/* --- Global vars --- */
:root{
  --vine-opacity: .70;
  --vine-top:  -80px;
  --vine-left: 50px;
  --vine-w:    400px;
  --vine-h:    300px;
}

/* =========================================================
   OUTER WRAPPER
   ========================================================= */
.site-header{
  position: relative;
  z-index: 200;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
}

/* Home: frosted full-width bar (kept subtle, no enforced color) */
.has-hero-bg .site-header{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-radius: 0;
  padding: 0;
}

/* =========================================================
   INNER ROW
   ========================================================= */
.site-header a{
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
}
.site-header a:hover,
.site-header a:focus{ text-decoration: underline; }

/* Never underline the logo link */
.vine-h1-container .site-logo a,
.vine-h1-container .site-logo a:link,
.vine-h1-container .site-logo a:visited,
.vine-h1-container .site-logo a:hover,
.vine-h1-container .site-logo a:focus,
.vine-h1-container .site-logo a:active{ text-decoration: none; }

.vine-h1-container{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 12px auto;
  padding: 10px 12px;
  overflow: visible;
  z-index: 100;
  background: transparent;
  border: 0;
  box-shadow: none;
}

nav.main-menu{ margin-left: auto; }

/* =========================================================
   LOGO — solid black, no strokes, no shadows
   ========================================================= */

/* ===== LOGO — OpenDyslexic, solid black, no stroke ===== */
/* ===== LOGO — OpenDyslexic, solid black, tighter & responsive ===== */
.vine-h1-container .site-logo,
.vine-h1-container .site-logo a{
  font-family: "OpenDyslexic", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;

  /* Size & tracking tuned for a wide face */
  font-size: clamp(44px, 7.5vw, 64px);
  letter-spacing: -1px;      /* was -20px (way too much) */
  word-spacing: 0;           /* keep words tight but not crashed */

  line-height: 1;
  margin: 0;
  /* allow wrap if needed instead of overflowing off-screen */
  white-space: normal;

  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-decoration: none;

  position: relative;
  z-index: 3;
}

/* Desktop only: keep on one line if there’s room */
@media (min-width: 1024px){
  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    white-space: nowrap;      /* only on big screens */
  }
}

/* Mobile: a touch smaller and no negative tracking */
@media (max-width: 768px){
  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    font-size: clamp(36px, 9vw, 48px);
    letter-spacing: 0;        /* OpenDyslexic reads better without negative tracking on small sizes */
  }
}

/* Ultra-small phones */
@media (max-width: 400px){
  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    font-size: clamp(32px, 10vw, 44px);
  }
}

@media (min-width: 1200px){
  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    transform: scaleX(0.96);
    transform-origin: left center;
  }
}
/* =========================================================
   VINE (dotLottie) + fallback image share the same box
   ========================================================= */
.vine-h1-container .vine-anim,
.vine-background{
  position: absolute;
  top:   var(--vine-top);
  left:  var(--vine-left);
  width: var(--vine-w);
  height:var(--vine-h);
  pointer-events: none;
  z-index: 2;
  display: block;
}

.vine-h1-container .vine-anim{
  opacity: var(--vine-opacity);
  visibility: hidden;
}
.vine-h1-container .vine-anim.is-visible{ visibility: visible; }

.vine-background{
  display: none;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s ease-in-out;
}

/* =========================================================
   MAIN MENU
   ========================================================= */
nav.main-menu ul.menu,
nav.main-menu ul.submenu{ list-style:none; margin:0; padding:0; }

nav.main-menu ul.menu{
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:nowrap;
}

nav.main-menu ul.menu a,
nav.main-menu ul.menu button.toggle-btn{
  font-weight:700;
  text-decoration:none;
  color:#333;
  cursor:pointer;
  padding:8px 12px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:16px;
  display:inline-flex;
  align-items:center;
}
nav.main-menu ul.menu a:hover,
nav.main-menu ul.menu button.toggle-btn:hover{ color:#0078d7; }

.menu>li{ position:relative; }

/* level-1 submenu */
.menu>li>ul.submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:5px 0;
  min-width:150px;
  z-index:1000;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
}
.menu>li.open>ul.submenu{ display:block; }

/* nested submenu */
ul.submenu>li{ position:relative; }
ul.submenu li ul.submenu{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  background:#fff;
  min-width:150px;
  padding:5px 0;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
}
ul.submenu li.open>ul.submenu{ display:block; }

ul.submenu li a,
ul.submenu li button.toggle-btn{
  padding:6px 16px;
  display:block;
  color:#333;
  text-decoration:none;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-size:15px;
  width:100%;
}
ul.submenu li a:hover,
ul.submenu li button.toggle-btn:hover{
  background-color:#f0f0f0;
  color:#0078d7;
}

/* Special case link */
nav.main-menu .menu>li>a[href$="about.php"],
nav.main-menu .menu>li>a[href$="about.php"]:visited{ color:#333; }
nav.main-menu .menu>li>a[href$="about.php"]:hover,
nav.main-menu .menu>li>a[href$="about.php"]:focus{ color:#0078d7; }

/* Add Event pill */
.add-event-link{
  background:#2e7d32;
  color:#fff;
  border-radius:9999px;
  padding:8px 16px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 4px 12px rgba(46,125,50,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.12);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.add-event-link:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 18px rgba(46,125,50,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.18);
  filter:brightness(1.03);
}
.add-event-link:active{
  transform:translateY(0);
  box-shadow:
    0 3px 8px rgba(46,125,50,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* =========================================================
   HAMBURGER (mobile)
   ========================================================= */
.hamburger{
  display:none;
  font-size:28px;
  cursor:pointer;
  z-index:10;
  background:none;
  border:none;
  color:#212121;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px){
  :root{
    --vine-left: 24px;
    --vine-top:  -35px;
    --vine-w:    220px;
    --vine-h:    165px;
  }

  .vine-h1-container{
    flex-direction:column;
    align-items:flex-start;
    position:relative;
    padding-left:0;
    margin-top:10px;
  }

  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    text-align:left;
    align-self:flex-start;
    margin:12px 0 0 24px;
    font-size:clamp(36px, 9vw, 48px);
    line-height:1.05;

    font-weight:600;
    font-variation-settings:"wght" 600;

    color:#000;                 /* solid black on mobile too */
    -webkit-text-fill-color:#000;
    -webkit-text-stroke:0;
    text-shadow:none;

    background:none;
  }

  .hamburger{ display:inline-block; position:absolute; top:10px; right:10px; }

  nav.main-menu ul.menu{
    flex-direction:column;
    display:none;
    width:100%;
    gap:0;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    margin-top:8px;
  }
  nav.main-menu ul.menu.show{ display:flex; }

  nav.main-menu ul.menu>li{
    width:100%;
    text-align:left;
    border-top:1px solid #eee;
    padding:5px 10px;
  }
  nav.main-menu ul.menu>li:first-child{ border-top:none; }

  ul.submenu{
    position:relative;
    top:0;
    left:0;
    right:auto;
    display:none;
    width:100%;
    border:0;
    box-shadow:none;
    border-radius:0;
  }
  ul.submenu li ul.submenu{ left:auto; right:100%; top:0; }
  .menu>li.open>ul.submenu,
  ul.submenu li.open>ul.submenu{ display:block; }
}

/* =========================================================
   ULTRA-SMALL PHONES
   ========================================================= */
@media (max-width: 400px){
  .vine-h1-container .vine-anim,
  .vine-h1-container .vine-background{ display:none; }

  .vine-h1-container .site-logo,
  .vine-h1-container .site-logo a{
    font-weight:600;
    font-variation-settings:"wght" 600;
    font-size:clamp(32px, 10vw, 44px);
    margin-left:16px;

    color:#000;
    -webkit-text-fill-color:#000;
    -webkit-text-stroke:0;
    text-shadow:none;

    background:none;
  }
}

/* =========================================================
   COMPACT HEADER (internal pages opt-in)
   ========================================================= */
body.compact-header .vine-h1-container{
  margin:0 auto 10px;
  padding:4px 10px;
  --vine-top:-60px;
  --vine-left:30px;
}
body.compact-header .vine-h1-container .site-logo,
body.compact-header .vine-h1-container .site-logo a{
  font-size:48px;
  color:#000;
  -webkit-text-fill-color:#000;
  -webkit-text-stroke:0;
  text-shadow:none;
  background:none;
}
body.compact-header .vine-h1-container .vine-anim,
body.compact-header .vine-h1-container .vine-background{
  transform-origin: top left;
  transform: scale(.7);
}

@media (max-width: 768px){
  body.compact-header .vine-h1-container{
    --vine-left:24px;
    --vine-top:-10px;
    --vine-w:180px;
    --vine-h:135px;
  }
  body.compact-header .vine-h1-container .site-logo,
  body.compact-header .vine-h1-container .site-logo a{
    font-size:clamp(30px, 8vw, 40px);
  }
  body.compact-header .vine-h1-container .vine-anim,
  body.compact-header .vine-h1-container .vine-background{
    transform: scale(.8);
  }
}
/* ===== HOME (mobile): keep logo centered + center the white pill menu ===== */
@media (max-width: 768px){
  /* Keep the stack centered */
  body.home .vine-h1-container{
    flex-direction: column;
    align-items: center;                   /* ← ensures logo stays centered */
  }

  /* Lock the logo in the center */
  body.home .vine-h1-container .site-logo,
  body.home .vine-h1-container .site-logo a{
    text-align: center;
    margin: 12px auto 0 !important;       /* auto centers; prevents left pull */
  }

  /* Center the nav container and kill desktop's margin-left:auto */
  body.home nav.main-menu{
    width: 100%;
    margin-left: 0 !important;
    display: flex;
    justify-content: center;               /* center the UL inside nav */
  }

  /* Center the white pill itself under the logo */
  body.home nav.main-menu ul.menu{
    display: inline-flex !important;       /* shrink to contents */
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;

    background: rgba(255,255,255,.9);
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    padding: 6px 12px;
    margin: 8px auto 0 !important;        /* ← centers the pill */
    width: auto;                           /* content width */
    max-width: 92vw;
  }

  /* Items + separators */
  body.home nav.main-menu ul.menu > li{
    width: auto;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }
  body.home nav.main-menu ul.menu > li + li::before{
    content: "|";
    opacity: .55;
    margin: 0 6px 0 2px;
    line-height: 1;
  }
  body.home nav.main-menu ul.menu > li > a,
  body.home nav.main-menu ul.menu > li > button{
    background: none;
    border: 0;
    box-shadow: none;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 0;
    white-space: nowrap;
    text-decoration: none;
  }
  body.home nav.main-menu ul.menu > li > a:hover{
    text-decoration: underline;
  }
}

/* ===== Logo wave animation ===== */
.wave-text span{
  display:inline-block;
  will-change: transform;

  animation: logoWave 0.55s ease-in-out 1 both;
  animation-delay: calc(var(--i) * 0.09s);
  animation-play-state: paused; /* waits for footprints */
}

.wave-text.wave-go span{
  animation-play-state: running;
}

@keyframes logoWave{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}