/* =========================================================
   Header (logo + menu + vine/lottie)
   ========================================================= */
:root{
  --vine-opacity: 0.70;

  /* Desktop vine box (applies to BOTH the lottie + fallback image) */
  --vine-top:  -80px;
  --vine-left: 50px;   /* ← change this to move left/right on DESKTOP */
  --vine-w:    400px;
  --vine-h:    300px;
}

/* Header row */
.vine-h1-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;        /* deterministic layout */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px auto;
  padding: 10px;
  overflow: visible;
  z-index: 100;
}

/* Keep the nav pinned to the right */
nav.main-menu { margin-left: auto; }

/* Logo */
.vine-h1-container .site-logo {
  font-size: 70px;
  color: #fff;
  -webkit-text-stroke: 1px #000;     /* outline thickness */
  text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  margin: 0;
  position: relative;
  z-index: 3;
}

.vine-h1-container .site-logo a {
  color: inherit;
  text-decoration: none;
  display: inline-block; /* keeps click area snug to the text */
}

.vine-h1-container .site-logo a:hover {
  text-decoration: none; /* no underline on hover */
}


/* Lottie + fallback image share the exact 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;
}

/* Lottie styling: hidden until JS marks it ready */
.vine-h1-container .vine-anim{
  opacity: .6;
  visibility: hidden;         /* start hidden to avoid half-render */
}
.vine-h1-container .vine-anim.is-visible{
  visibility: visible;         /* JS adds this once player is ready */
}

/* Fallback image — keep hidden to avoid mismatch */
.vine-background{
  display: none;                 /* <— keeps life simple; no cross-fade */
  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;
}

nav.main-menu ul.menu a,
nav.main-menu ul.menu button.toggle-btn {
  font-weight: bold;
  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; }

.menu > li > ul.submenu {
  display: none; position: absolute; top: 100%; left: 0;
  background: white; padding: 5px 0; min-width: 150px; z-index: 1000;
}
.menu > li.open > ul.submenu { display: block; }

ul.submenu > li { position: relative; }

ul.submenu li ul.submenu {
  display: none; position: absolute; top: 0; left: 100%;
  background: white; min-width: 150px; padding: 5px 0;
}
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; }

/* ---------- "Add Event" pill button with shadow ---------- */
.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 ---------- */
.hamburger {
  display: none; font-size: 28px; cursor: pointer; z-index: 10; background: none; border: none;
}

/* ---------- ABOUT colour override ---------- */
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; }

/* ---------- Mobile (<=768px) ---------- */
@media (max-width: 768px) {
  /* Override the vine box ONCE for mobile (all pages) */
  :root{
    --vine-left: 24px;     /* ← change this to move left/right on MOBILE */
    --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 {
    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;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 4px rgba(0,0,0,.35);
    z-index: 5;
    position: relative;
  }

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

  nav.main-menu ul.menu {
    flex-direction: column;
    display: none;
    width: 100%;
    gap: 0;
  }
  nav.main-menu ul.menu.show { display: flex; }

  nav.main-menu ul.menu > li {
    width: 100%;
    text-align: left;
    border-top: 1px solid #ddd;
    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%; }
  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 (<=400px) ---------- */
@media (max-width: 400px) {
  .vine-h1-container .vine-anim,
  .vine-h1-container .vine-background { display: none; }

  .vine-h1-container .site-logo {
    -webkit-text-stroke: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,.25);
    font-weight: 600;
    font-size: clamp(32px, 10vw, 44px);
    margin-left: 16px;
  }
}

/* =========================================
   Compact header (internal pages)
   ========================================= */

/* General shrink on all screen sizes */
body.compact-header .vine-h1-container {
  margin: 0 auto 10px;
  padding: 4px 10px;

  /* Default (desktop/tablet) vine tweak for internal pages */
  --vine-top: -60px;
  --vine-left: 30px;
}

/* Smaller logo text on internal pages */
body.compact-header .vine-h1-container .site-logo {
  font-size: 48px;  /* smaller than the default 70px */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.45);
}

/* Scale the animation instead of shrinking its box */
body.compact-header .vine-h1-container .vine-anim,
body.compact-header .vine-h1-container .vine-background {
  transform-origin: top left;
  transform: scale(0.7);   /* adjust 0.6–0.8 to taste */
}

/* Tweak for tablets/phones (compact header) */
@media (max-width: 768px) {

  /* On mobile internal pages, override the vine box so it lines up like homepage */
  body.compact-header .vine-h1-container {
    --vine-left: 24px;   /* match mobile logo left offset */
    --vine-top:  -10px;  /* sit a bit closer behind the smaller logo */
    --vine-w:    180px;
    --vine-h:    135px;
  }

  body.compact-header .vine-h1-container .site-logo {
    font-size: clamp(30px, 8vw, 40px);
  }

  body.compact-header .vine-h1-container .vine-anim,
  body.compact-header .vine-h1-container .vine-background {
    transform: scale(0.8);  /* a bit larger on smaller screens */
  }
}

/* Extra tweak for ultra-small phones (compact header) */
@media (max-width: 400px) {
  body.compact-header .vine-h1-container .site-logo {
    font-size: clamp(26px, 9vw, 36px);
    margin-left: 16px; /* keep same left offset */
  }

  /* Note: on <=400px the global rule already hides the vine,
     so no extra animation rules needed here. */
}