/*
 * CPG custom overrides — hand-maintained, NOT part of the Bud build.
 * Enqueued from app/setup.php. Edit directly; no compile step.
 *
 * 1. Dark-mode mobile menu fix
 * 2. Locations page search box
 */

/* ------------------------------------------------------------------ *
 * 1. Mobile burger menu — force LIGHT mode always
 * The site is light-designed but declares no color-scheme, so on a phone
 * in dark mode the browser force-darkens the white offcanvas while the
 * nav links stay dark -> invisible. Force the menu to light regardless of
 * OS/browser dark mode: white panel, dark links, normal (un-inverted) logo,
 * and neutralise the markup's data-bs-theme="dark".
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;
}

/* Opt the panel itself out of any dark color-scheme and force a white bg */
#offcanvasWithBothOptions {
  color-scheme: light;
  background-color: #fff !important;
}

/* Override data-bs-theme="dark" tokens on the offcanvas + its inner navbar */
#offcanvasWithBothOptions,
#offcanvasWithBothOptions .navbar,
#offcanvasWithBothOptions [data-bs-theme="dark"] {
  --bs-body-bg: #fff;
  --bs-body-color: #1c1c1c;
  --bs-emphasis-color: #1c1c1c;
  --bs-nav-link-color: #1c1c1c;
  --bs-nav-link-hover-color: #0057b8;
}

/* Dark, visible links on the white panel (beats .text-dark + theme tokens) */
#offcanvasWithBothOptions .nav-link {
  color: #1c1c1c !important;
}

#offcanvasWithBothOptions .nav-link:hover,
#offcanvasWithBothOptions .nav-link:focus {
  color: #0057b8 !important;
}

/* The theme inverts the mobile logo for a dark panel; undo it on white */
#offcanvasWithBothOptions #logo-mobile {
  filter: none !important;
}

/* Keep the close (X) visible on the white panel */
#offcanvasWithBothOptions .btn-close {
  filter: none !important;
}

/* Mobile submenus (Locations / Services etc.) only had a :hover expand rule,
 * which never fires on touch. app.js toggles `.open` on the tapped parent
 * <li>, but no CSS reacted to it — so taps did nothing. Expand on `.open`. */
#offcanvasWithBothOptions .menu-item-has-children.open > .sub-menu,
#offcanvasWithBothOptions .menu-item.open > .sub-menu {
  max-height: 100vh !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Mobile submenu: drop the default list bullets and use a clean indented
 * group (thin left rule) so the nesting still reads. */
#offcanvasWithBothOptions .sub-menu,
#offcanvasWithBothOptions .sub-menu .menu-item {
  list-style: none !important;
}
#offcanvasWithBothOptions .sub-menu {
  padding-left: 0;
  margin-left: 0.75rem;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
#offcanvasWithBothOptions .sub-menu .nav-link,
#offcanvasWithBothOptions .sub-menu a {
  padding-left: 1rem;
}

/* ------------------------------------------------------------------ *
 * Desktop header nav — reveal submenus on hover.
 * The theme's hover/caret styles are keyed on `.menu-item.dropdown`, but the
 * default walker outputs `.menu-item-has-children` (no `.dropdown`), so hover
 * never worked. Re-enable it on the desktop nav (#header .navbar-nav.flex-row).
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
  #header .navbar-nav.flex-row .menu-item-has-children {
    position: relative;
  }

  /* caret affordance on parent links */
  #header .navbar-nav.flex-row .menu-item-has-children > a::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.85em;
    transition: transform 0.2s ease-in-out;
  }
  #header .navbar-nav.flex-row .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
  }

  /* reveal the submenu on hover */
  #header .navbar-nav.flex-row .menu-item-has-children:hover > .sub-menu {
    max-height: 100vh;
    opacity: 1;
    overflow: visible;
  }

  /* drop the default list bullets on the dropdown items */
  #header .navbar-nav.flex-row .sub-menu,
  #header .navbar-nav.flex-row .sub-menu .menu-item {
    list-style: none !important;
  }

  /* dropdown panel look (base .sub-menu is already white) */
  #header .navbar-nav.flex-row .sub-menu {
    z-index: 1000;
    min-width: 14rem;
    padding: 0.5rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  #header .navbar-nav.flex-row .sub-menu a {
    display: block;
    padding: 0.4rem 1rem;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ *
 * 2. Locations index — search box + live filter empty state
 * ------------------------------------------------------------------ */
.location-search {
  max-width: 36rem;
}

.location-search .location-filter-label {
  font-weight: 700;
}

/* The locations section has a dark background, so the helper/status/empty
 * lines must be light. Two-class specificity (0,2,0) beats Bootstrap's
 * single-class .text-muted (!important) which would otherwise win on order. */
.location-search .location-filter-label,
.location-search .location-filter-status,
.location-search .location-filter-empty {
  color: #fff !important;
}

/* Keep each card at its column width (col-12 / -md-6 / -xl-4).
 * The cards carry .flex-grow-1, so when filtering hides siblings a lone
 * card would otherwise stretch to fill the whole row — pin grow to 0. */
.display-posts .location-card {
  flex-grow: 0 !important;
}

/* Hidden by JS when a card doesn't match the search query */
.location-card.is-hidden {
  display: none !important;
}