/* components/header.css
   The ONE shared header stylesheet — logo banner, sticky header, desktop
   nav + "Beach Bonfires" dropdown, mobile hamburger nav + in-place
   expanding dropdown. The base (non-dropdown) rules are copied verbatim
   from the live site's own per-page <style> blocks.

   Loaded BEFORE lmu-design.css (the same position the old per-page
   header CSS always occupied) — lmu-design.css's color corrections
   (white header/logo-banner backgrounds, the blue-gray active-pill, blue
   -tinted borders, etc.) must win over the literal values below, exactly
   as they do on the live site. Loading this after lmu-design.css was the
   bug that made the header look cream/beige instead of white/blue.

   This file is the single source of truth for header appearance —
   do not duplicate any of these rules in a page's own <style> block. */

/* LOGO BANNER */
.logo-banner{background:var(--warm-white);display:flex;align-items:center;gap:18px;padding:11px 28px;border-bottom:1px solid rgba(200,86,42,0.13);}
.logo-banner img.logo-img{height:58px;width:auto;margin:0;display:block;object-fit:contain;flex-shrink:0;}
.logo-banner-text{text-align:left;}
.logo-banner .logo-fallback{font-family:var(--font-display);font-size:clamp(1.05rem,2.5vw,1.55rem);font-weight:400;color:var(--text-dark);}
.logo-banner .logo-fallback span{color:var(--flame);font-style:italic;}
.logo-banner .logo-tagline{font-family:var(--font-display);font-style:italic;font-size:0.88rem;color:var(--text-mid);margin-top:1px;}
.logo-banner .logo-est{font-size:0.60rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-light);margin-top:2px;}

/* STICKY HEADER */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(250,245,236,0.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(200,86,42,0.13);transition:box-shadow var(--transition);}
.site-header.scrolled{box-shadow:0 3px 24px rgba(28,34,40,0.10);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:13px 28px;max-width:1280px;margin:0 auto;gap:16px;}
.header-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;flex:1;}
.header-nav a{font-size:0.80rem;font-weight:500;letter-spacing:0.06em;color:var(--text-mid);padding:7px 12px;border-radius:var(--radius-pill);transition:var(--transition);white-space:nowrap;}
.header-nav a:hover{color:var(--flame);background:rgba(200,86,42,0.07);}
.header-nav a.active{color:var(--flame);background:rgba(200,86,42,0.09);font-weight:600;}
.header-actions{flex-shrink:0;display:flex;align-items:center;gap:14px;}
.header-phone{display:inline-flex;align-items:center;gap:6px;font-size:0.80rem;font-weight:700;letter-spacing:0.06em;color:var(--text-dark);white-space:nowrap;transition:var(--transition);}
.header-phone:hover{color:var(--flame);}
.header-phone svg{flex-shrink:0;}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:transparent;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text-dark);border-radius:2px;transition:var(--transition);}
@media(max-width:768px){
  .header-nav,.header-actions{display:none;}
  .nav-toggle{display:flex;}
}
@media(max-width:768px){.logo-banner{flex-direction:column;align-items:center;text-align:center;padding:22px 28px 16px;gap:6px;}.logo-banner img.logo-img{height:80px;}.logo-banner-text{text-align:center;}.logo-banner .logo-fallback{font-size:clamp(1.3rem,4vw,1.8rem);}.logo-banner .logo-tagline,.logo-banner .logo-est{display:block;}}

/* DESKTOP "Beach Bonfires" DROPDOWN
   .nav-dropdown sits flush against the trigger (top:100%, no real gap) and
   uses its own padding-top to create the visual gap, so that invisible
   padding strip stays part of .nav-item's hover/focus subtree — the mouse
   never exits .nav-item while moving down into the menu. The actual white
   box is the nested .nav-dropdown-panel; .nav-dropdown itself is reset to
   fully transparent/unstyled so it only ever acts as the invisible bridge. */
.nav-item{position:relative;display:inline-flex;align-items:center;}
.nav-item > a::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-left:5px;opacity:0.5;vertical-align:middle;}
.nav-dropdown{position:absolute;top:100%;left:0;padding:10px 0 0;margin:0;background:none;border:none;border-radius:0;box-shadow:none;min-width:0;transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.18s ease,visibility 0.18s;z-index:200;}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;}
.nav-dropdown-panel{background:var(--white);border:1px solid rgba(74,125,156,0.14);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(43,43,43,0.10);padding:6px 0;min-width:180px;transform:translateY(-6px);transition:transform 0.18s ease;}
.nav-item:hover .nav-dropdown-panel,.nav-item:focus-within .nav-dropdown-panel{transform:translateY(0);}
.nav-dropdown-panel a{display:block;padding:10px 18px;font-size:0.80rem;color:var(--text-mid);font-weight:500;transition:background var(--transition),color var(--transition);white-space:nowrap;border-radius:0;}
.nav-dropdown-panel a:hover{background:rgba(74,125,156,0.07);color:var(--flame);}

/* MOBILE NAV */
.mobile-nav{display:none;flex-direction:column;background:var(--warm-white);border-top:1px solid rgba(200,86,42,0.10);padding:14px 28px 18px;gap:4px;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-size:0.9rem;font-weight:500;color:var(--text-mid);padding:10px 0;border-bottom:1px solid rgba(200,86,42,0.07);transition:color var(--transition);}
.mobile-nav a:hover{color:var(--flame);}
.mobile-nav .btn{margin-top:12px;justify-content:center;width:100%;}

/* MOBILE "Beach Bonfires" — tapping the words expands/collapses in place,
   no navigation on mobile; the three options live in the submenu instead. */
.mnav-item{display:flex;flex-direction:column;}
.mnav-trigger{position:relative;}
.mnav-trigger::after{content:'';position:absolute;right:2px;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:0.5;transform:translateY(-50%) rotate(0deg);transition:transform 0.18s ease;}
.mnav-item.open .mnav-trigger::after{transform:translateY(-50%) rotate(180deg);}
.mnav-dropdown{display:none;flex-direction:column;padding:0 0 4px 16px;gap:2px;}
.mnav-item.open .mnav-dropdown{display:flex;}
.mnav-dropdown a{font-size:0.86rem !important;padding:8px 0 !important;border-bottom:none !important;}