/*
Theme Name: Bandana Child
Template: astra
Version: 1.0.0
Description: Bandana child theme with custom post grid
*/

/* Global */
body {
  background: #000 !important;
  color: #fff !important;
}

/* Header */
#masthead,
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background: #000 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  padding: 12px 20px !important;
}

/* Logo */
.ast-site-identity img {
  max-height: 50px !important;
  width: auto !important;
}

/* Nav links */
.main-header-menu .menu-item a,
.ast-primary-header-bar .menu-item a {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background-color: transparent !important;
}

/* Nav hover — must override Astra's own hover background */
.main-header-menu .menu-item a:hover,
.main-header-menu .menu-item a:focus,
.main-header-menu .menu-item.current-menu-item > a,
.ast-header-custom-item .menu-item a:hover,
.ast-nav-menu .menu-item a:hover,
.ast-nav-menu .menu-item a:focus,
.navigation-accessibility .menu-item a:hover,
header .menu-item a:hover,
header .menu-item a:focus,
.ast-primary-header-bar .menu-item a:hover,
.ast-primary-header-bar .menu-item a:focus {
  color: #ff6b2b !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Search icon */
.ast-search-icon,
.ast-header-custom-item .ast-search-icon,
.search-icon,
.ast-search-menu-icon {
  color: #fff !important;
  background-color: transparent !important;
}
.ast-search-icon:hover,
.ast-header-custom-item .ast-search-icon:hover,
.search-icon:hover,
.ast-search-menu-icon:hover {
  color: #ff6b2b !important;
  background-color: transparent !important;
}
/* Astra search overlay input */
.ast-search-menu-icon .search-field,
.ast-search-menu-icon input[type="search"] {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

/* Dropdown submenu background — covers all Astra nav variants */
.main-header-menu .sub-menu,
.ast-header-custom-item .sub-menu,
.ast-nav-menu .sub-menu,
.navigation-accessibility .sub-menu,
.menu-item .sub-menu {
  background: #111 !important;
  border: 1px solid #222 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
  min-width: 180px !important;
  padding: 4px 0 !important;
}

/* Dropdown item text */
.main-header-menu .sub-menu .menu-item a,
.ast-header-custom-item .sub-menu .menu-item a,
.ast-nav-menu .sub-menu .menu-item a,
.navigation-accessibility .sub-menu .menu-item a,
.menu-item .sub-menu .menu-item a {
  color: #ccc !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  display: block !important;
  border-bottom: 1px solid #1a1a1a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Last item no border */
.main-header-menu .sub-menu .menu-item:last-child a,
.ast-header-custom-item .sub-menu .menu-item:last-child a,
.ast-nav-menu .sub-menu .menu-item:last-child a,
.menu-item .sub-menu .menu-item:last-child a {
  border-bottom: none !important;
}

/* Dropdown item hover */
.main-header-menu .sub-menu .menu-item a:hover,
.ast-header-custom-item .sub-menu .menu-item a:hover,
.ast-nav-menu .sub-menu .menu-item a:hover,
.navigation-accessibility .sub-menu .menu-item a:hover,
.menu-item .sub-menu .menu-item a:hover {
  color: #ff6b2b !important;
  background: #1a1a1a !important;
}

/* Dropdown toggle arrow color */
.ast-menu-toggle,
.ast-header-custom-item .ast-menu-toggle {
  color: #fff !important;
}
.menu-item:hover > .ast-menu-toggle,
.menu-item:focus-within > .ast-menu-toggle {
  color: #ff6b2b !important;
}

/* Kill sidebar */
#primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

#secondary {
  display: none !important;
}

/* Footer */
.site-footer,
#colophon,
.ast-footer-overlay {
  background: #000 !important;
  border-top: 1px solid #222 !important;
  color: #aaa !important;
}

.site-footer a { color: #aaa !important; }
.site-footer a:hover { color: #fff !important; }

/* ── Global grid override — ensures cards always display as grid ── */
.bandana-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  padding: 0 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 1100px) {
  .bandana-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .bandana-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Card must be block-level in grid */
.bandana-grid .bandana-card {
  display: flex !important;
  flex-direction: column !important;
  background: #0d0d0d;
  border-radius: 6px;
  overflow: hidden;
  min-width: 0; /* prevents grid blowout */
}
.bandana-grid .bandana-card__image,
.bandana-grid .bandana-card__image-wrap { display: block !important; width: 100% !important; }
.bandana-grid .bandana-card__image img { width: 100% !important; height: auto !important; display: block !important; }

/* Share stat color */
.bandana-stat--shares { color: #4fc3f7; }

/* Bookmark saved state */
.bandana-bookmark-btn.saved svg,
.bs-stat--bookmark.saved svg { fill: #ff6b2b; stroke: #ff6b2b; }

/* ============================================================
   NAV / DROPDOWN / SEARCH — high-specificity overrides
   Astra's Customizer injects inline CSS that beats generic
   selectors, so we need html body and element-level specificity
   ============================================================ */

/* ── Top-level nav links (default) ── */
html body .main-header-bar .main-header-menu > .menu-item > a,
html body .main-header-bar .ast-nav-menu > .menu-item > a,
html body .site-header .main-header-menu > .menu-item > a {
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Top-level nav links hover / focus / current ── */
html body .main-header-bar .main-header-menu > .menu-item > a:hover,
html body .main-header-bar .main-header-menu > .menu-item > a:focus,
html body .main-header-bar .main-header-menu > .current-menu-item > a,
html body .main-header-bar .main-header-menu > .current-menu-ancestor > a,
html body .main-header-bar .ast-nav-menu > .menu-item > a:hover,
html body .main-header-bar .ast-nav-menu > .menu-item > a:focus,
html body .site-header .main-header-menu > .menu-item > a:hover,
html body .site-header .main-header-menu > .menu-item > a:focus {
  color: #ff6b2b !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Dropdown sub-menu container ── */
html body .main-header-bar .main-header-menu .sub-menu,
html body .main-header-bar .ast-nav-menu .sub-menu,
html body .site-header .ast-nav-menu .sub-menu,
html body .navigation-accessibility .sub-menu,
html body header .sub-menu {
  background: #111 !important;
  background-color: #111 !important;
  border: 1px solid #222 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.75) !important;
  min-width: 180px !important;
  padding: 4px 0 !important;
}

/* ── Dropdown item links (default) ── */
html body .main-header-bar .main-header-menu .sub-menu .menu-item a,
html body .main-header-bar .ast-nav-menu .sub-menu .menu-item a,
html body .site-header .ast-nav-menu .sub-menu .menu-item a,
html body .navigation-accessibility .sub-menu .menu-item a,
html body header .sub-menu .menu-item a {
  color: #ccc !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: 'Poppins', Sans-Serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  display: block !important;
  border-bottom: 1px solid #1a1a1a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Dropdown item links hover / focus ── */
html body .main-header-bar .main-header-menu .sub-menu .menu-item a:hover,
html body .main-header-bar .main-header-menu .sub-menu .menu-item a:focus,
html body .main-header-bar .ast-nav-menu .sub-menu .menu-item a:hover,
html body .main-header-bar .ast-nav-menu .sub-menu .menu-item a:focus,
html body .site-header .ast-nav-menu .sub-menu .menu-item a:hover,
html body .site-header .ast-nav-menu .sub-menu .menu-item a:focus,
html body .navigation-accessibility .sub-menu .menu-item a:hover,
html body .navigation-accessibility .sub-menu .menu-item a:focus,
html body header .sub-menu .menu-item a:hover,
html body header .sub-menu .menu-item a:focus {
  color: #ff6b2b !important;
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

/* ── Last dropdown item — remove bottom border ── */
html body .main-header-bar .sub-menu .menu-item:last-child a,
html body .site-header .sub-menu .menu-item:last-child a {
  border-bottom: none !important;
}

/* ── Search icon (svgicon and font variants) ── */
html body .main-header-bar .ast-search-menu-icon,
html body .main-header-bar .ast-search-menu-icon .search-menu-icon,
html body .main-header-bar .ast-header-custom-item .ast-search-menu-icon,
html body .site-header .ast-search-menu-icon {
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body .main-header-bar .ast-search-menu-icon:hover,
html body .main-header-bar .ast-search-menu-icon .search-menu-icon:hover,
html body .main-header-bar .ast-header-custom-item .ast-search-menu-icon:hover,
html body .site-header .ast-search-menu-icon:hover {
  color: #ff6b2b !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Search icon SVG fill / stroke ── */
html body .ast-search-menu-icon svg,
html body .ast-search-menu-icon .search-menu-icon svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* ── Search slidedown / overlay input box ── */
html body .ast-search-menu-icon.slide-search .search-form,
html body .ast-search-menu-icon.ast-inline-search .search-form,
html body .main-header-bar .ast-search-menu-icon .search-form {
  background: #111 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}
html body .ast-search-menu-icon .search-field,
html body .ast-search-menu-icon input[type="search"],
html body .main-header-bar .ast-search-menu-icon input[type="search"] {
  background: #111 !important;
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}
html body .ast-search-menu-icon .search-field::placeholder,
html body .main-header-bar .ast-search-menu-icon input[type="search"]::placeholder {
  color: #666 !important;
}
html body .ast-search-menu-icon .search-field:focus,
html body .main-header-bar .ast-search-menu-icon input[type="search"]:focus {
  outline: none !important;
  border-color: #ff6b2b !important;
  box-shadow: 0 0 0 2px rgba(255,107,43,0.2) !important;
}

/* ── Mobile toggle / hamburger ── */
html body .ast-mobile-menu-trigger-fill,
html body .ast-mobile-menu-trigger svg,
html body .main-header-bar .ast-mobile-menu-trigger {
  color: #fff !important;
  background: transparent !important;
}