/* =========================================================
   GLOBAL VARIABLES
   ========================================================= */
:root {
  --dd-logo-url: https://dondriehausforcincinnati.org/resources/Pictures/Logo.jpg; /* not used on mobile now */
  --dd-purple: #490385;
  --dd-purple-dark: #370265;
  --dd-yellow: #FCE403;
  --dd-header-bg: #4b0082;
  --tap-target-min: 44px;
}

/* =========================================================
   HEADER / DESKTOP NAV
   ========================================================= */
#id_Header2 {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--dd-header-bg);
  transition: all 0.3s ease;
  padding-bottom: 10px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* Desktop horizontal menu spacing */
#id_YQ7WO9q {
  padding-bottom: 10px !important;
  line-height: 1.5 !important;
}

/* Remove stray WA content-area effects */
.zonePlace.zoneContentIder.WaPlaceHolderContent {
  box-shadow: none !important;
  border-top: none !important;
}

/* =========================================================
   MOBILE PANEL — BASE STYLES (scoped to WA container)
   ========================================================= */
.WaPlaceHolderMobilePanel .mobilePanel {
  background-color: var(--dd-purple) !important;
  color: #fff !important;
  font-family: 'League Spartan', sans-serif !important;
  padding: 10px 15px;
  border: none !important;
}

/* Mobile toggle buttons (hidden on mobile later) */
.WaPlaceHolderMobilePanel .mobilePanelButton {
  background-color: transparent !important;
  color: var(--dd-yellow) !important;
  font-weight: bold;
  padding: 8px 12px;
  border: none;
  display: block;
  text-align: left;
}

/* Links in the mobile panel */
.WaPlaceHolderMobilePanel .mobilePanel a,
.WaPlaceHolderMobilePanel .mobilePanel a span {
  color: var(--dd-yellow) !important;
  text-decoration: none;
  font-weight: bold;
}

.WaPlaceHolderMobilePanel .mobilePanel a:hover,
.WaPlaceHolderMobilePanel .mobilePanelButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

/* Menu items inside mobile panel */
.WaPlaceHolderMobilePanel .menuInner .item {
  background-color: var(--dd-purple) !important;
  color: #fff !important;
  padding: 8px 12px;
  border-bottom: 1px solid #ffffff33;
}

/* Ensure nested anchors inherit brand colors */
.WaPlaceHolderMobilePanel .menuInner .item a,
.WaPlaceHolderMobilePanel .menuInner .item a span {
  background-color: var(--dd-purple) !important;
  color: var(--dd-yellow) !important;
  text-decoration: none;
  font-weight: bold;
}

/* LI fallback */
.WaPlaceHolderMobilePanel .menuInner li {
  background-color: var(--dd-purple) !important;
}

/* Hover state */
.WaPlaceHolderMobilePanel .menuInner .item:hover,
.WaPlaceHolderMobilePanel .menuInner .item a:hover,
.WaPlaceHolderMobilePanel .menuInner .item a span:hover {
  background-color: var(--dd-purple-dark) !important;
  color: var(--dd-yellow) !important;
}

/* Avoid global zeroing that fights our spacing */
.WaPlaceHolderMobilePanel .menuInner,
.WaPlaceHolderMobilePanel .firstLevel,
.WaPlaceHolderMobilePanel .firstLevel li,
.WaPlaceHolderMobilePanel .item {
  background-color: var(--dd-purple) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   MOBILE BEHAVIOR (≤ 1024px)
   - Show full menu
   - NO injected logo above
   - Place template banner BELOW the menu (by disabling sticky header)
   ========================================================= */
@media (max-width: 1024px) {
  /* 1) Hide hamburger/login */
  .WaPlaceHolderMobilePanel .mobilePanelButton,
  .WaPlaceHolderMobilePanel .loginInner {
    display: none !important;
  }

  /* 2) Keep the menu open (override WA JS inline styles) */
  .WaPlaceHolderMobilePanel .menuInner {
    display: block !important;
    visibility: visible !important;
  }

  /* 3) Uniform background */
  .WaPlaceHolderMobilePanel #id_MobilePanel,
  .WaPlaceHolderMobilePanel .mobilePanel,
  .WaPlaceHolderMobilePanel .menuInner {
    background: var(--dd-purple) !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 4) REMOVE the injected logo above the menu (if any existed) */
  .WaPlaceHolderMobilePanel .mobilePanel::before {
    content: none !important;
    display: none !important;
  }

  /* 5) Let the template banner sit *below* the menu:
        - Stop making the header sticky on mobile
        - Add a little separation under the menu  */
  #id_Header2 { 
    position: static !important; 
    top: auto !important;
  }
  .WaPlaceHolderMobilePanel .mobilePanel { 
    margin-bottom: 8px; 
  }

  /* 6) Make mobile menu look like desktop horizontal */
  .WaPlaceHolderMobilePanel .menuInner ul.firstLevel {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
  }

  .WaPlaceHolderMobilePanel .menuInner ul.firstLevel > li {
    flex: 1 1 auto;
    text-align: center;
    margin: 0;
  }

  .WaPlaceHolderMobilePanel .menuInner .item { margin: 0; }

  .WaPlaceHolderMobilePanel .menuInner .item a {
    display: block;
    padding: 12px 16px;
    min-height: var(--tap-target-min);
    line-height: 1.2;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--dd-yellow) !important;
    background: transparent !important;
  }

  .WaPlaceHolderMobilePanel .menuInner .item a:hover,
  .WaPlaceHolderMobilePanel .menuInner .item a:active,
  .WaPlaceHolderMobilePanel .menuInner .item a:focus {
    color: var(--dd-yellow) !important;
    background: var(--dd-purple) !important;
  }

  /* If BOTH menus show on mobile and you want only the mobile one, uncomment:
  #id_YQ7WO9q { display: none !important; }
  */
}

/* =========================================================
   SMALLER BREAKPOINT TOUCH-UP
   ========================================================= */
@media (max-width: 480px) {
  .WaPlaceHolderMobilePanel .menuInner .item a {
    padding: 12px 12px;
    font-weight: 800;
  }
}

/* KEY FIX: make the mobile menu flow, not overlay */
@media (max-width: 1024px) {
  .WaPlaceHolderMobilePanel .menuInner {
    display: block !important;
    visibility: visible !important;

    /* override WA's absolute positioning */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;

    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* keep the container normal flow too */
  .WaPlaceHolderMobilePanel .mobilePanel {
    position: static !important;
    z-index: auto !important;
    margin: 0 0 8px 0 !important; /* space above the banner */
  }

  /* just in case WA styles the UL absolute as well */
  .WaPlaceHolderMobilePanel .menuInner > ul.firstLevel {
    position: static !important;
  }

  .navbar{
  color: #FCE403 !important;   /* Driehaus yellow */
  fill: #FCE403 !important;    /* for SVG logos */
}

@media (max-width: 1024px) {
  /* Force header to sit lower in the stack */
  .header-container {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Force WA mobile menu above header/logo */
  #id_MobilePanel,
  .WaPlaceHolderMobilePanel,
  .WaPlaceHolderMobilePanel .mobilePanel,
  .WaPlaceHolderMobilePanel .menuInner {
    position: relative !important;
    z-index: 9999 !important;
  }
}
/* =========================================================
   FIX: Stop mobile panel from overlaying the header/logo
   ========================================================= */
@media (max-width: 1024px) {
  /* keep the mobile panel in flow */
  .mobilePanelContainer,
  #id_MobilePanel,
  .WaPlaceHolderMobilePanel,
  .WaPlaceHolderMobilePanel .mobilePanel,
  .WaPlaceHolderMobilePanel .menuInner,
  .WaPlaceHolderMobilePanel .menuInner > ul.firstLevel {
    position: static !important;
    z-index: auto !important;
  }

  /* ensure header sits on its own layer if needed */
  #id_Header2 .header-container {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ===========================
   MOBILE NAV FIX (<=1024px)
   Make the WA mobile menu flow & show ALL items
   =========================== */
@media (max-width: 1024px) {
  /* 1) Kill any WA height/overflow limits */
  .WaPlaceHolderMobilePanel .mobilePanel,
  .WaPlaceHolderMobilePanel .menuInner {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  /* 2) Ensure the UL actually wraps and isn't floated */
  .WaPlaceHolderMobilePanel .menuInner > ul.firstLevel {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* 3) Clear WA floats so flex can work */
  .WaPlaceHolderMobilePanel .menuInner > ul.firstLevel > li {
    float: none !important;
    flex: 1 1 auto !important;  /* allows wrapping to next line */
    min-width: 33.33% !important; /* tweak: forces 3-per-row; remove if you prefer auto */
    text-align: center !important;
  }

  /* 4) Make links block-level tap targets */
  .WaPlaceHolderMobilePanel .menuInner .item a {
    display: block !important;
    padding: 12px 14px !important;
    min-height: var(--tap-target-min) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    color: var(--dd-yellow) !important;
    background: transparent !important;
  }
}
/* force brand yellow on nav links */
.nav-bar a,
.nav-bar a span {
  color: #FCE403 !important;   /* Driehaus yellow */
  fill: #FCE403 !important;    /* if any SVG icons */
  text-decoration: none;
}

/* hover/active should stay yellow too */
.nav-bar a:hover,
.nav-bar a:active,
.nav-bar a:focus {
  color: #FCE403 !important;
}
/* Brand yellow for ALL nav links (desktop gadget) */
#id_YQ7WO9q.nav-bar .menuInner .item > a,
#id_YQ7WO9q.nav-bar .menuInner .item > a > span,
#id_YQ7WO9q.nav-bar ul.firstLevel > li.sel .item > a > span,
#id_YQ7WO9q.nav-bar ul.firstLevel > li .item > a:link > span,
#id_YQ7WO9q.nav-bar ul.firstLevel > li .item > a:visited > span {
  color: #FCE403 !important;
  -webkit-text-fill-color: #FCE403 !important; /* in case theme uses text-fill */
  text-shadow: none !important;
}

/* Same color for the WA mobile panel version */
.WaPlaceHolderMobilePanel .menuInner .item > a,
.WaPlaceHolderMobilePanel .menuInner .item > a > span {
  color: #FCE403 !important;
  -webkit-text-fill-color: #FCE403 !important;
  text-shadow: none !important;
}

/* (optional) keep hover/active yellow too */
#id_YQ7WO9q.nav-bar .menuInner .item > a:hover,
#id_YQ7WO9q.nav-bar .menuInner .item > a:active,
#id_YQ7WO9q.nav-bar .menuInner .item > a:focus {
  color: #FCE403 !important;
}

/* Target by BOTH ID + class for max specificity */
#id_YQ7WO9q.nav-bar .menuInner a,
#id_YQ7WO9q.nav-bar .menuInner a span {
  color: #FCE403 !important;     /* Driehaus yellow */
  -webkit-text-fill-color: #FCE403 !important;
  text-shadow: none !important;
}