/* ============================================================
   Preserve A Spot — header skin (Night at the Lodge).
   Add the CSS class  aspot-header  to your Theme Builder header
   section/row. Skins the brand lockup + a real WP menu, whether
   rendered by QuadMenu (primary) or Divi's Menu module (fallback).
   ============================================================ */

/* ---- brand lockup ([aspot_brand]) ---- */
.aspot-header .aspot-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;}
.aspot-header .aspot-crest{height:46px;width:auto;display:block;}
.aspot-header .aspot-wm{display:flex;flex-direction:column;align-items:center;line-height:1;
  font-family:"Playfair Display",Georgia,serif;}
.aspot-header .aspot-wm .the{font-weight:500;font-size:11.5px;letter-spacing:.46em;text-transform:uppercase;
  color:#c9a159;padding-left:.46em;}
.aspot-header .aspot-wm .name{font-weight:600;font-size:21px;letter-spacing:.24em;text-transform:uppercase;
  color:#f3ecdd;padding-left:.24em;margin-top:4px;white-space:nowrap;}
.aspot-header .aspot-wm .tag{font-family:"Montserrat",sans-serif;font-weight:600;font-size:7px;letter-spacing:.34em;
  text-transform:uppercase;color:#a89e8c;margin-top:6px;padding-left:.34em;}
/* on a light header, darken the wordmark */
.aspot-header.aspot-light .aspot-wm .name{color:#1c1a17;}
.aspot-header.aspot-light .aspot-wm .tag{color:#6f675a;}

/* ---- menu links (QuadMenu primary, Divi fallback) ---- */
.aspot-header .quadmenu-navbar .quadmenu-item > a.quadmenu-link,
.aspot-header .et-menu li a,
.aspot-header .et_pb_menu .et-menu-nav li a{
  font-family:"Montserrat",sans-serif !important;font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#cfc6b5;position:relative;
  padding:6px 0;transition:color .2s;background:transparent;
}
.aspot-header .quadmenu-navbar .quadmenu-item > a.quadmenu-link:hover,
.aspot-header .et-menu li a:hover{color:#ffffff;}

/* gold underline on hover / current */
.aspot-header .quadmenu-navbar .quadmenu-item > a.quadmenu-link::after,
.aspot-header .et-menu > li > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:#c9a159;transition:right .28s ease;
}
.aspot-header .quadmenu-navbar .quadmenu-item:hover > a.quadmenu-link::after,
.aspot-header .quadmenu-navbar .quadmenu-item.current-menu-item > a.quadmenu-link::after,
.aspot-header .et-menu > li:hover > a::after,
.aspot-header .et-menu > li.current-menu-item > a::after{right:0;}
.aspot-header .et-menu > li.current-menu-item > a{color:#c9a159;}

/* spacing between top-level items (QuadMenu) */
.aspot-header .quadmenu-navbar > .quadmenu-nav > .quadmenu-item{margin:0 clamp(10px,1.6vw,22px);}

/* ---- "Get Started" CTA — add menu-item CSS class  aspot-cta  ---- */
.aspot-header .aspot-cta > a.quadmenu-link,
.aspot-header .et-menu li.aspot-cta a{
  background:#c9a159 !important;color:#1c150a !important;font-weight:700;
  padding:10px 20px !important;border-radius:16px;letter-spacing:.1em;
}
.aspot-header .aspot-cta > a.quadmenu-link::after,
.aspot-header .et-menu li.aspot-cta a::after{display:none;}
.aspot-header .aspot-cta > a.quadmenu-link:hover,
.aspot-header .et-menu li.aspot-cta a:hover{background:#8f2418 !important;color:#faf6ed !important;}

/* ---- QuadMenu mega panels: keep them on-brand (dark) ---- */
.aspot-header .quadmenu-dropdown,
.aspot-header .quadmenu-dropdown-content{
  background:#1b1712 !important;border:1px solid rgba(201,161,89,.2) !important;
}
.aspot-header .quadmenu-dropdown .quadmenu-item > a{color:#d8d1c4 !important;}
.aspot-header .quadmenu-dropdown .quadmenu-item > a:hover{color:#c9a159 !important;}

/* ---- mobile toggle ---- */
.aspot-header .quadmenu-navbar-toggle,
.aspot-header .quadmenu-navbar-toggle .quadmenu-icon-bar{color:#c9a159 !important;border-color:#c9a159 !important;background:#c9a159;}

@media(max-width:980px){
  .aspot-header .aspot-wm .name{font-size:18px;}
}

/* ============================================================
   Header follows the sun/moon toggle (0.12.0)
   The toggle is site-wide — it puts .lodge-light on <html> — but the light
   rules were all scoped inside the shortcode wrappers, so the Divi header
   stayed cream while the page went dark and the menu looked detached from
   the rest of the page. Dark is the default state, so the DARK rules are
   what needed writing.
   ============================================================ */
html:not(.lodge-light) #main-header,
html:not(.lodge-light) .et-l--header .et_pb_menu,
html:not(.lodge-light) .et-l--header .et_pb_row{background-color:#1c1a17!important}
html:not(.lodge-light) #main-header{box-shadow:0 1px 0 rgba(201,161,89,.22)!important}
html:not(.lodge-light) #top-menu a,
html:not(.lodge-light) .et-l--header .et_pb_menu a,
html:not(.lodge-light) #et_mobile_nav_menu a{color:#e9e1d2!important}
html:not(.lodge-light) #top-menu a:hover,
html:not(.lodge-light) .et-l--header .et_pb_menu a:hover,
html:not(.lodge-light) #top-menu a:focus,
html:not(.lodge-light) .et-l--header .et_pb_menu a:focus{color:#c9a159!important;opacity:1}
html:not(.lodge-light) #top-menu li.current-menu-item > a{color:#c9a159!important}
html:not(.lodge-light) .aspot-brand b,
html:not(.lodge-light) .aspot-brand .name{color:#faf6ed!important}
html:not(.lodge-light) .aspot-brand s,
html:not(.lodge-light) .aspot-brand .tag{color:#c9a159!important}
html:not(.lodge-light) #main-header .mobile_menu_bar::before{color:#c9a159!important}
html:not(.lodge-light) .et_mobile_menu{background-color:#1c1a17!important;border-color:#c9a159!important}

/* ============================================================
   §  [aspot_header] — Theme Builder global header (0.14.0)
   Live-text lockup instead of an uploaded logo image: the old dark PNG was
   invisible on the dark ground and could not be recoloured by the toggle.
   ============================================================ */
.aspot-hd{
  --ink:#151210; --gold:#c9a159; --gold-lt:#e2c483; --paper:#f3ecdd;
  --bone:#cbc0aa; --line:rgba(201,161,89,.2);
  --disp:"Playfair Display",Georgia,serif; --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  display:block;background:var(--ink);border-bottom:1px solid var(--line);
  font-family:var(--sans);position:relative;z-index:50
}
.aspot-hd *{box-sizing:border-box}
.aspot-hd.is-sticky{position:sticky;top:var(--aspot-sticky-top,0px)}
.aspot-hd-in{width:min(1280px,92vw);margin-inline:auto;display:flex;align-items:center;
  gap:clamp(16px,3vw,40px);padding:16px 0;transition:padding .22s}
.aspot-hd.is-scrolled .aspot-hd-in{padding:9px 0}

/* brand lockup — text, so it recolours with the toggle */
.aspot-hd-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;min-width:0}
.aspot-hd-brand img{width:40px;height:auto;flex:none;transition:width .22s}
.aspot-hd.is-scrolled .aspot-hd-brand img{width:33px}
.aspot-hd-brand .wm{display:flex;flex-direction:column;line-height:1;min-width:0}
.aspot-hd-brand .the{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--gold)}
.aspot-hd-brand .name{font-family:var(--disp);font-weight:600;font-size:23px;
  letter-spacing:.02em;color:#fbf6ec;margin-top:1px;white-space:nowrap}
.aspot-hd-brand .tag{font:600 8px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:5px;white-space:nowrap}
.aspot-hd-brand:hover .name,.aspot-hd-brand:focus .name{color:var(--gold-lt);outline:none}

/* nav */
.aspot-hd-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.aspot-hd-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
/* Divi applies a list-style to li directly, so clearing it on the ul is not enough —
   the nav rendered with bullets between every item. */
.aspot-hd-menu,.aspot-hd-menu li,.aspot-hd-menu .sub-menu{list-style:none!important}
.aspot-hd-menu li::marker,.aspot-hd-menu li::before{content:none!important;display:none!important}
.aspot-hd-menu li{position:relative}
.aspot-hd-menu a{font:500 13px/1 var(--sans);letter-spacing:.04em;color:var(--paper);
  text-decoration:none;transition:color .18s;white-space:nowrap}
.aspot-hd-menu a:hover,.aspot-hd-menu a:focus{color:var(--gold);outline:none}
.aspot-hd-menu .current-menu-item > a,.aspot-hd-menu .current_page_item > a{color:var(--gold)}
/* one level of dropdown */
.aspot-hd-menu .sub-menu{position:absolute;top:100%;left:-14px;margin-top:14px;list-style:none;
  padding:10px 0;min-width:210px;background:#191512;border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s;z-index:60}
.aspot-hd-menu li:hover > .sub-menu,.aspot-hd-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.aspot-hd-menu .sub-menu a{display:block;padding:10px 18px;font-size:12.5px}
.aspot-hd-nomenu{margin:0;font-size:12px;color:var(--bone)}
.aspot-hd-cta{display:inline-flex;align-items:center;font:600 10.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:#1c150a;
  border:1px solid var(--gold);padding:13px 22px;text-decoration:none;transition:.18s}
.aspot-hd-cta:hover,.aspot-hd-cta:focus{background:transparent;color:var(--gold-lt);border-color:var(--gold-lt);outline:none}
.aspot-hd-tog{flex:none;margin-left:4px}

/* burger + drawer */
.aspot-hd-burger{display:none;width:42px;height:42px;margin-left:auto;padding:0;flex:none;
  background:transparent;border:1px solid var(--line);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.aspot-hd-burger span{display:block;width:18px;height:1.5px;background:var(--paper);
  transition:transform .24s,opacity .18s}
.aspot-hd-burger:hover,.aspot-hd-burger:focus{border-color:var(--gold);outline:none}
.aspot-hd.nav-open .aspot-hd-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.aspot-hd.nav-open .aspot-hd-burger span:nth-child(2){opacity:0}
.aspot-hd.nav-open .aspot-hd-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:980px){
  .aspot-hd-burger{display:flex}
  .aspot-hd-nav{position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--ink);
    border-bottom:1px solid var(--line);padding:0 max(4vw,20px);
    max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease}
  .aspot-hd.nav-open .aspot-hd-nav{max-height:min(74vh,620px);overflow-y:auto;padding:8px max(4vw,20px) 22px}
  .aspot-hd-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .aspot-hd-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line);
    font-size:14px;letter-spacing:.14em;text-transform:uppercase}
  .aspot-hd-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    margin:0 0 0 14px;border:0;padding:0;background:transparent;min-width:0}
  .aspot-hd-cta{margin-top:18px;justify-content:center}
  .aspot-hd-tog{margin:16px 0 0}
  .aspot-hd-brand .tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  .aspot-hd-nav,.aspot-hd-in,.aspot-hd-brand img,.aspot-hd-burger span{transition:none}
}

/* light mode */
html.lodge-light .aspot-hd{background:#faf6ed;border-bottom-color:rgba(28,26,23,.12)}
html.lodge-light .aspot-hd-brand .name{color:#1c1a17}
html.lodge-light .aspot-hd-brand .the,html.lodge-light .aspot-hd-brand .tag{color:#8f2418}
html.lodge-light .aspot-hd-brand:hover .name{color:#8f2418}
html.lodge-light .aspot-hd-menu a{color:#3f3a31}
html.lodge-light .aspot-hd-menu a:hover,html.lodge-light .aspot-hd-menu a:focus,
html.lodge-light .aspot-hd-menu .current-menu-item > a{color:#8f2418}
html.lodge-light .aspot-hd-menu .sub-menu{background:#fff;border-color:rgba(28,26,23,.12)}
html.lodge-light .aspot-hd-menu a{border-bottom-color:rgba(28,26,23,.1)}
html.lodge-light .aspot-hd-cta{background:#8f2418;border-color:#8f2418;color:#faf6ed}
html.lodge-light .aspot-hd-cta:hover,html.lodge-light .aspot-hd-cta:focus{background:transparent;color:#8f2418;border-color:#8f2418}
html.lodge-light .aspot-hd-burger{border-color:rgba(28,26,23,.16)}
html.lodge-light .aspot-hd-burger span{background:#1c1a17}
html.lodge-light .aspot-hd-nav{background:#faf6ed;border-bottom-color:rgba(28,26,23,.12)}