/* ============================================================
   header-sl.css — Sanctuary Lodge site-wide header styles
   Extracted from plugin sl-home/assets/sl/sl-home.css (header
   + mega-menu rules only). Loaded on all theme pages so the
   plugin header-sl.php renders correctly outside the SL Home
   landing template. DO NOT edit the plugin file; update here.
   ============================================================ */

/* --- CSS custom properties (from sl-home.css :root) --- */
:root{
  --navy:#4c5e6b;
  --navy-dark:#2e404c;
  --gold:#b8447e;
  --gold-light:#f5d5e2;
  --gold-deep:#993963;
  --off-white:#faf7f3;
  --line:#dde2e5;
  --ink:#25333d;
  --muted-text:hsl(28,8%,40%);
  --white:#fff;
  --shadow-card:0 4px 20px rgba(15,30,66,.10);
  --shadow-elev:0 8px 40px rgba(15,30,66,.12);
}


/* ============================================================
   SL Header — styled to match HTML prototype
   Maps WordPress header-sl.php structure → prototype design
   Prototype:  .header > .utility-bar + .nav-bar.transparent
   WordPress:  .sl-header > .topbar + .desktop
   ============================================================ */

/*--Outer wrapper ------------------------------------------ */
.sl-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important}

/*--Utility bar (= .utility-bar in prototype) -------------- */
.sl-header .topbar{display:none;background:var(--navy-dark)!important;color:rgba(255,255,255,.8)!important;font-size:.78rem!important;border:none!important}
.sl-header .topbar .container{height:36px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:1.25rem!important;float:none!important;}
.sl-header .topbar a{color:rgba(255,255,255,.8)!important;font-size:.78rem!important;letter-spacing:0!important;text-transform:none!important;font-weight:400!important}
.sl-header .topbar a:hover{color:var(--gold)!important;text-decoration:none!important}
.sl-header .topbar .sep{height:12px!important;width:1px!important;background:rgba(255,255,255,.2)!important;display:inline-block!important;opacity:1!important}
.sl-header .topbar .topbar-phone{display:flex!important;align-items:center!important;gap:.375rem!important;color:#fff!important;font-weight:500!important}
@media(min-width:768px){.sl-header .topbar{display:block!important}}

/*--Main nav bar (= .nav-bar in prototype) ----------------- */
.sl-header .desktop{transition:background-color .3s,box-shadow .3s,border-color .3s!important}
.sl-header.transparent .desktop{background:transparent!important;box-shadow:none!important;border:none!important}
.sl-header.solid .desktop{background:#fff!important;box-shadow:0 2px 20px rgba(15,30,66,.08)!important;border-bottom:1px solid var(--line)!important}
.sl-header.transparent .desktop {background: rgba(76, 94, 107, 0.4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0; height:100px !important; }
.sl-header.transparent .desktop .hero-inner{text-shadow: rgb(0, 0, 0) 0px 2px 8px;}
/*--Nav row (= .nav-row in prototype) --------------------- */
.sl-header .header-row{height:80px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;margin-top:0!important}
@media(min-width:768px){.sl-header .header-row{height:112px!important}}

/*--Logo (= .nav-logo in prototype) ----------------------- */
.sl-header .brand{display:flex!important;align-items:center!important;height:64px!important;position:relative!important;text-decoration:none!important}
@media(min-width:768px){.sl-header .brand{height:96px!important}}
.sl-header .brand img{max-width: 180px;height:100%!important;width:auto!important;object-fit:contain!important;transition:opacity .3s!important;position:absolute!important;inset:0!important}
.sl-header .brand .logo-color{position:relative!important;opacity:1!important;filter:none!important}
.sl-header .brand .logo-white{opacity:0!important;filter:none!important}
.sl-header.transparent .brand .logo-color{opacity:0!important}
.sl-header.transparent .brand .logo-white{opacity:1!important}
/* Tagline under logo */
.sl-header .brand .tagline{position:absolute!important;bottom:-14px!important;left:0!important;transform:none!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.2em!important;white-space:nowrap!important;color:var(--muted-text)!important;font-weight:400!important;float:none!important;padding:0!important;width:auto!important}
.sl-header.transparent .brand .tagline{color:rgba(255,255,255,.7)!important}

/*--Megamenu area (= .nav-links in prototype) -------------- */
.sl-header .menubar{display:none}
@media(min-width:958px){.sl-header .menubar{display:flex!important;align-items:center!important;flex:1!important;justify-content:center!important}}

.sl-header .menubar #desktop_mega_menu .lftBox ul > li > a{font-weight:500!important;font-size:.85rem!important;transition:color .2s!important;color:var(--navy)!important;text-transform:none!important;float:none!important;padding:.65rem .85rem!important;letter-spacing:0!important;border:none;cursor:pointer;gap:.5rem;width:100%;text-align:left}

.sl-header .menubar #desktop_mega_menu ul > li > a{font-weight:500!important;font-size:.78rem!important;transition:color .2s!important;color:var(--navy)!important;text-transform:none!important;float:none!important;padding:0!important;letter-spacing:0!important;}
.sl-header.transparent .menubar #desktop_mega_menu > ul > li > a{color:#fff!important}
.sl-header .menubar #desktop_mega_menu ul > li > a:hover{color:var(--gold)!important}

/* chevron arrows — navy by default, white when transparent */
.sl-header .menubar #desktop_mega_menu.navsec ul.menu>li>a::after{border-right-color:var(--navy)!important;border-bottom-color:var(--navy)!important}
.sl-header.transparent .menubar #desktop_mega_menu.navsec ul.menu>li>a::after{border-right-color:#fff!important;border-bottom-color:#fff!important}

/*--CTA area (= .nav-cta in prototype) -------------------- */
.sl-header .header-cta{display:none!important;align-items:center!important;gap:1rem!important}
@media(min-width:768px){.sl-header .header-cta{display:flex!important}}
.sl-header .header-cta .phone-link{font-weight:600!important;font-size:.82rem!important;color:var(--navy)!important;float:none!important;text-transform:none!important;padding:0!important;white-space:nowrap!important}
.sl-header.transparent .header-cta .phone-link{color:#fff!important}
.sl-header .header-cta .btn-gold{background:var(--gold)!important;color:#fff!important;border:none!important;padding:.5rem .875rem!important;font-size:.8rem!important;border-radius:8px!important;font-weight:600!important;display:inline-flex!important;align-items:center!important;gap:.5rem!important;white-space:nowrap!important;float:none!important;text-transform:none!important}
.sl-header .header-cta .btn-gold:hover{background:var(--gold-deep)!important;color:#fff!important}

/*--Mobile header ------------------------------------------ */
.sl-header .mobile .headseccont{background:#fff!important;transition:background .3s!important}
.sl-header.transparent .mobile .headseccont{background:#06060666!important}
.sl-header .mobile .fa,.sl-header .mobile .mmenu_icon{color:var(--navy)!important}
.sl-header.transparent .mobile .fa,.sl-header.transparent .mobile .mmenu_icon{color:#fff!important}
.sl-header.transparent .mobiico .numberswap,.sl-header.transparent .ukat-gpt-link{color:#fff!important}
.sl-header.transparent .mobile .spin{filter:brightness(0) invert(1)!important}
.sl-header .mobile .brand img{position:relative!important;inset:auto!important; }
.sl-header.transparent .mobile .brand .logo-white{opacity:1!important; display:block;}
.sl-header.transparent .mobile .brand .logo-color{opacity:0!important; display:none;}

/*--Body padding for fixed header ------------------------- */
#page-body #page-body{padding-top:0}


/* ============================================================
   MEGA MENU – Sanctuary Lodge  (vanilla-style theme)
   HTML: .megamenubox > .lftBox + .rgtBox > .tab > .full > col-lg-6
   ============================================================ */

/* ── Drop panel: rounded bottom, shadow, border ─────────── */
#menu .mega_menu:hover>ul{background:#fff!important;border-radius:0 0 14px 14px!important;box-shadow:0 24px 60px -20px rgba(15,30,66,.22)!important;border:1px solid rgba(76,94,107,.15)!important;overflow:hidden!important; padding:0 !important}
@media(min-width:1024px){#menu .mega_menu:hover>ul{width:980px!important;left:50%!important;transform:translateX(-50%)!important;margin-left:0!important}}

/* ── lftBox: warm off-white sidebar ─────────────────────── */
.sl-header .menubar .megamenubox .lftBox{border-right:1px solid rgba(76,94,107,.12)!important;padding:1rem .6rem!important;background:#faf7f3!important; min-height:380px;}
.sl-header .menubar .megamenubox .lftBox ul{padding:0!important;margin:0!important}
.sl-header .menubar .megamenubox .lftBox ul li{position:relative!important;list-style:none!important;border-bottom:none!important}

/* lftBox items: rounded pills like vanilla .mega-cat */
.sl-header .menubar .megamenubox .lftBox ul li a{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:.65rem .85rem!important;font-size:.85rem!important;font-weight:500!important;color:rgba(37,51,61,.7)!important;line-height:1.3!important;border-radius:8px!important;transition:background .15s,color .15s,box-shadow .15s!important;background:transparent!important}
.sl-header .menubar .megamenubox .lftBox ul li a:hover,
.sl-header .menubar .megamenubox .lftBox ul li a.selected{background:#fff!important;color:var(--navy-dark)!important;box-shadow:0 2px 10px -3px rgba(15,30,66,.15)!important}

/* chevron arrow: gold when selected */
#menu li .lftBox li::after{border-top-color:transparent!important;border-right-color:transparent!important;display:none!important}
.sl-header .menubar .megamenubox .lftBox ul li a::after{content:"›"!important;font-size:1rem!important;color:var(--gold)!important;opacity:0!important;transition:opacity .15s!important;margin-left:auto!important;padding-left:.5rem!important}
.sl-header .menubar .megamenubox .lftBox ul li a.selected::after,
.sl-header .menubar .megamenubox .lftBox ul li a:hover::after{opacity:1!important}

/* ── rgtBox container ────────────────────────────────────── */
.sl-header .menubar .megamenubox .rgtBox{flex:1!important;padding:1.5rem 1.75rem!important;overflow:visible!important;background:none!important;}
.sl-header .mega_menu .sub-menu .rgtBox{background:none}
/* ── Tabs: hide all; JS sets .active on hover ───────────── */
.megamenubox .rgtBox .tab{display:none!important}
.megamenubox .rgtBox .tab.active{display:block!important}

/* ── Two-column layout inside tab (.col-lg-6) ───────────── */
/* .sl-header .menubar .megamenubox .rgtBox .full>.full{display:flex!important;gap:2rem!important;align-items:flex-start!important}
.sl-header .menubar .megamenubox .rgtBox .col-lg-6,.sl-header .menubar .megamenubox .rgtBox .col-md-6{flex:1!important;float:none!important;width:auto!important;min-width:0!important} */

/* ── Column headings — uppercase label + gold rule (vanilla h4 + .rule style) ── */
/* Direct <a> child (right col), <p><a> child (left col), standalone first p>a */
 .sl-header .menubar .megamenubox .rgtBox .col-lg-6>a:first-of-type,
.sl-header .menubar .megamenubox .rgtBox .col-md-6>a:first-of-type,
.sl-header .menubar .megamenubox .rgtBox .col-lg-6>p:first-child>a,
.sl-header .menubar .megamenubox .rgtBox .col-md-6>p:first-child>a,
.sl-header .menubar .megamenubox .rgtBox .tab>.full>p:first-child>a{display:block!important;font-size:.78rem!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:0!important;margin-bottom:.85rem!important;border:none!important;text-decoration:none!important;background:transparent!important}
.sl-header .menubar #desktop_mega_menu .rgtBox ul > li > a{padding:2px 0!important;}
.sl-header .menubar #desktop_mega_menu .rgtBox br{display:none;}

.sl-header .menubar .megamenubox .rgtBox .tab>.full>p:first-child>a{display:block!important;font-size:1.2rem!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:0!important;margin-bottom:.85rem!important;border:none!important;text-decoration:none!important;background:transparent!important; font-family: 'Playfair Display', serif; color: var(--navy-dark); margin: 0 0 .5rem;}



/* gold underline rule via ::after */
#menu li li a.rbhead, #menu li li .rbhead{font-size: 1.0rem !important; letter-spacing: -0.02em !important; text-transform: uppercase !important;color: var(--navy-dark) !important; font-weight: 600 !important; padding: 0 !important; border: none !important; text-decoration: none !important; background: transparent !important; font-family: 'Playfair Display', serif; margin: 0 0 15px 0;line-height: 1.15;}

.sl-header .menubar .megamenubox .rgtBox .rbhead::after{content:""!important;display:block!important;width:36px!important;height:2px!important;background:var(--gold)!important;margin-top:.45rem!important} 
#menu li li a.rblink{font-size: .85rem !important; letter-spacing: .08em !important; text-transform: uppercase !important;color: var(--gold-deep) !important;}
#menu li li a.rblink:hover{color: var(--navy) !important;}

/* kill any theme border-bottom on <p> inside megamenu */
.sl-header .menubar .megamenubox .rgtBox p{border:none!important}
.sl-header .menubar .megamenubox .rgtBox .col-lg-6>p:first-child,
.sl-header .menubar .megamenubox .rgtBox .col-md-6>p:first-child{border:none!important;padding:0!important;margin:0 0 .85rem!important;background:transparent!important}

/* ── List items inside rgtBox ───────────────────────────── */
/* .sl-header .menubar .megamenubox .rgtBox ul{max-width:none!important;margin:0!important}
.sl-header .menubar .megamenubox .rgtBox ul li{border-bottom:none!important;list-style:none!important}
.sl-header .menubar .megamenubox .rgtBox ul li a{display:block!important;font-size:.82rem!important;font-weight:400!important;color:rgba(37,51,61,.78)!important;padding:4px 0!important;line-height:1.4!important;background:transparent!important;transition:color .15s!important;border-radius:0!important}
.sl-header .menubar .megamenubox .rgtBox ul li a:hover{color:var(--navy-dark)!important;background:transparent!important} */

/* ── "Learn More →" CTA links ───────────────────────────── */
.sl-header .menubar .megamenubox .rgtBox .full>p:last-child>a,
.sl-header .menubar .megamenubox .rgtBox .full>p:last-of-type>a{display:inline-flex!important;align-items:center!important;gap:.4rem!important;font-size:.8rem!important;font-weight:600!important;color:var(--navy-dark)!important;border:none!important;padding:0!important;background:transparent!important;margin-top:.75rem!important}
#menu li li a.arrowrgt{padding: 5px 0 !important; border: none !important; font-size: 0.75rem !important; width: 100% !important; color: var(--navy-dark) !important; text-transform: uppercase;}
#menu li li a.arrowrgt:hover{color: var(--gold) !important;}
    
.sl-header .menubar .megamenubox .rgtBox .arrowrgt::after{content:"→"!important; margin-left:10px;}
.sl-header .menubar .megamenubox .rgtBox .full>p:last-child>a:hover,
.sl-header .menubar .megamenubox .rgtBox .full>p:last-of-type>a:hover{color:var(--gold-deep)!important}

/* ── CTA phone link ──────────────────────────────────────── */
.sl-header .menubar .megamenubox .rgtBox p>a[href^="tel"]{border-bottom:none!important;font-size:.8rem!important;color:var(--gold-deep)!important;font-weight:600!important;padding:4px 0 0!important;margin-top:4px!important}
.sl-header .menubar .megamenubox .rgtBox p>a[href^="tel"]:hover{color:var(--gold)!important}

/* ── Body text in rgtBox ─────────────────────────────────── */
.sl-header .menubar .megamenubox .rgtBox p{background:transparent!important;padding:0!important;font-size:.82rem!important;line-height:1.65!important;color:rgba(37,51,61,.65)!important}

/* ── button.button variant ───────────────────────────────── */
.rgtBox .button{background:#3f3731!important;padding:12px 20px!important;border-radius:6px!important}
.sl-header .menubar .megamenubox .rgtBox button.button a,.rgtBox .button a{color:#fff!important;text-decoration:none!important;padding:0!important;background:transparent!important;border-bottom:none!important;font-size:13px!important}

/* --- Header-only responsive rules (extracted from landing media queries) --- */
@media(max-width:1190px){
  #desktop_mega_menu.navsec > ul > li{padding:0 4px !important;}
  .header-cta .phone-link {display:none !important;}
  .sl-header .brand img{max-width: 150px;}
  .sl-header .menubar #desktop_mega_menu ul > li > a{font-size:0.70rem!important}
}

@media(max-width:559px){
  .sl-header .brand img{max-width:80%;}
}


/* ============================================================
   Inner-page fix — force the SOLID header look.
   The plugin header ships in the ".transparent" state (white logo
   + white menu), designed to sit over the SL Home landing page's
   dark hero. On inner pages the background is light, so that state
   is invisible (white-on-white). Scoped to non-home pages; the
   homepage/hero keeps its transparent header.
   ============================================================ */
body:not(.home):not(.front-page) .sl-header.transparent .desktop{
  background:#fff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 2px 20px rgba(15,30,66,.08)!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  height:auto!important;
}
/* Logo: show colour version, hide the white one */
body:not(.home):not(.front-page) .sl-header.transparent .brand .logo-color{opacity:1!important}
body:not(.home):not(.front-page) .sl-header.transparent .brand .logo-white{opacity:0!important}
/* Desktop menu links + chevrons → navy */
body:not(.home):not(.front-page) .sl-header.transparent .menubar #desktop_mega_menu > ul > li > a{color:var(--navy-dark)!important}
body:not(.home):not(.front-page) .sl-header.transparent .menubar #desktop_mega_menu.navsec ul.menu>li>a::after{border-right-color:var(--navy)!important;border-bottom-color:var(--navy)!important}
/* CTA phone link + tagline → readable on white */
body:not(.home):not(.front-page) .sl-header.transparent .header-cta .phone-link{color:var(--navy)!important}
body:not(.home):not(.front-page) .sl-header.transparent .brand .tagline{color:var(--muted-text)!important}
/* Mobile header */
body:not(.home):not(.front-page) .sl-header.transparent .mobile .headseccont{background:#fff!important}
body:not(.home):not(.front-page) .sl-header.transparent .mobile .fa,
body:not(.home):not(.front-page) .sl-header.transparent .mobile .mmenu_icon{color:var(--navy)!important}
body:not(.home):not(.front-page) .sl-header.transparent .mobiico .numberswap,
body:not(.home):not(.front-page) .sl-header.transparent .ukat-gpt-link{color:var(--navy)!important}
body:not(.home):not(.front-page) .sl-header.transparent .mobile .spin{filter:none!important}
body:not(.home):not(.front-page) .sl-header.transparent .mobile .brand .logo-white{opacity:0!important;display:none!important}
body:not(.home):not(.front-page) .sl-header.transparent .mobile .brand .logo-color{opacity:1!important;display:block!important}


/* ============================================================
   Reveal the desktop mega-menu nav on inner pages.
   The theme's global.css hides `.navsec` by default and only
   un-hides it inside the OLD header wrapper (.headthirdcont).
   Our header uses .menubar > #menu > nav.navsec instead, so we
   just re-show it — the theme's own float layout + item padding
   (genratedcss.css) then apply, giving spacing identical to the
   SL Home landing page. (Do NOT re-impose flex/gap/padding here:
   that overrides the theme's 8px item padding and makes the menu
   tighter than the homepage.)
   ============================================================ */
.sl-header .menubar #desktop_mega_menu{display:block!important}


/* ============================================================
   Inner-page header offset — no content hidden behind it.
   The header stays position:fixed (same as the landing page and
   the homepage, so the top bar behaves identically). Because the
   header overlays the top of the viewport, inner-page content
   needs a top offset equal to the header height, or the breadcrumb
   + start of the article sit behind it.

   NOTE: position:sticky is NOT usable here — body#page-body has
   overflow-x:hidden (→ overflow-y:auto), which makes body a scroll
   container and breaks sticky. So we pad the body instead.

   These CSS values are a fallback to avoid a content jump before
   header-sl.js runs; the JS then sets the exact header height.
   ============================================================ */
body:not(.home):not(.front-page){padding-top:84px}          /* mobile header */
@media(min-width:768px){
  body:not(.home):not(.front-page){padding-top:149px}       /* topbar + desktop nav */
}


/* ============================================================
   Header icon sizing.
   The topbar phone uses aroham_svg('phone','icon icon-sm'). The
   generic .icon / .icon-sm utilities that size it live in the
   full sl-home.css (not the header block), so without them the
   SVG renders full-size and overlaps the number (only the last
   digits show). Scoped to .sl-header so we don't resize other
   `.icon` elements elsewhere on inner pages.
   ============================================================ */
.sl-header .icon{width:24px;height:24px;display:inline-block;vertical-align:middle}
.sl-header .icon-sm{width:16px;height:16px}
@media screen and (max-width: 958px) {
.headseccont .alignright li.ukat-gpt-link{margin-top:-10px !important}
.ukat-gpt-text, .ukat-gpt-mobile-text{margin-top:-2px}
}