/* ================================
   The Hive — Header Styles (Hello Child)
   File: assets/hive-header.css
   ================================ */

:root{
  --hive-bg: #0f0f0f;           /* header base (dark) */
  --hive-fg: #ffffff;           /* text on dark */
  --hive-accent: #FFC107;       /* honey gold */
  --hive-muted: #cfcfcf;        /* secondary text */
  --wrap: clamp(16px, 3vw, 24px);
  --maxw: 1200px;
  --ring: 2px solid rgba(255,193,7,.35);
}

/* Header shell */
.hive-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  color: var(--hive-fg);
}

/* Top utility strip */
.hive-topbar{
  background: #151515;
  font-size: .85rem;
}
.hive-topbar .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .4rem var(--wrap);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  color: var(--hive-muted);
}

/* Brand bar */
.hive-brandbar{
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(15,15,15,.9);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hive-brandbar .wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .6rem var(--wrap);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

/* Brand cluster (logo + name) */
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width: 0;
}
.logo img,
.custom-logo.hive-logo-img{
  display:block;
  height:48px;      /* mobile default */
  width:auto;
}
.name-stack{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.site-name{
  font-weight:700;
  font-size: 1.125rem;
  letter-spacing:.2px;
}
.site-desc{
  font-size:.85rem;
  color: var(--hive-muted);
}

/* =========================
   NAV: Hybrid behavior
   - Inline when <=3 items
   - Collapsible when >3
   ========================= */

/* Inline (<=3) */
.site-nav--inline{ display:block; }
.menu--inline{
  display:flex;
  gap:1.25rem;
  list-style:none;
  margin:0;
  padding:0;
}
.menu--inline > li > a{
  padding:.5rem .25rem;
  border-radius:.25rem;
  text-decoration:none;
}

/* Collapsible (>3) */
.nav-toggle{
  background:transparent;
  border:0;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:.75rem;
  outline-offset:2px;
}
.nav-toggle:focus-visible{ outline: var(--ring); }
.nav-bars{
  width:22px; height:2px; background:var(--hive-fg); position:relative;
}
.nav-bars::before, .nav-bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--hive-fg);
}
.nav-bars::before{ top:-7px; }
.nav-bars::after{ top:7px; }

.site-nav--collapse{ display:none; }
.site-nav--collapse.is-open{ display:block; }

.menu{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.menu > li > a{
  padding:.5rem;
  border-radius:.5rem;
  text-decoration:none;
}

/* Tagline bar */
.hive-tagline{
  background: #181200;
  color:#fefefe;
  border-top: 1px solid rgba(255,255,255,.06);
}
.hive-tagline .wrap{
  max-width: var(--maxw);
  margin:0 auto;
  padding:.5rem var(--wrap);
  font-size:.95rem;
  text-align:center;
}
.hive-tagline strong{
  color: var(--hive-accent);
  font-weight:700;
}

/* Desktop breakpoint */
@media (min-width: 992px){
  .logo img,
  .custom-logo.hive-logo-img{ height:64px; }
  .nav-toggle{ display:none; }
  .site-nav--collapse{ display:block; }
  .menu{ flex-direction:row; gap:.75rem; }
  .menu > li > a{ padding:.5rem .75rem; }
}

/* Motion polish (optional) */
@media (prefers-reduced-motion: no-preference){
  .hive-brandbar{ transition: background .2s ease, backdrop-filter .2s ease; }
}

/* =========================================
   HIGH-CONTRAST NAV COLORS (beats Elementor)
   ========================================= */

/* Default/visited – WHITE on dark header, remove global underline */
.hive-header .site-nav .menu > li > a,
.hive-header .site-nav .menu > li > a:link,
.hive-header .site-nav .menu > li > a:visited{
  color: var(--hive-fg) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Hover/Focus – GOLD text and subtle gold tint */
.hive-header .site-nav .menu > li > a:hover,
.hive-header .site-nav .menu > li > a:focus,
.hive-header .site-nav .menu > li > a:focus-visible{
  color: var(--hive-accent) !important;
  background: rgba(255,193,7,.18) !important;
  outline: var(--ring) !important;
  outline-offset: 2px !important;
  border-radius: .5rem;
  text-decoration: none !important;
}

/* Current page – GOLD text + underline accent */
.hive-header .site-nav .menu > li.current-menu-item > a,
.hive-header .site-nav .menu > li.current_page_item > a{
  color: var(--hive-accent) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-bottom: 2px solid var(--hive-accent);
}

/* Kill WP/Elementor global underline inside header only */
.hive-header a:where(:not(.wp-element-button)){
  text-decoration: none !important;
}