/* =====================================================
   DESIGN TOKENS  – used across entire theme
   ===================================================== */
:root {
  --bg:        #0c0a08;
  --bg-2:      #131109;
  --bg-3:      #191612;

  --text-1:    #f4f0e8;
  --text-2:    #e8e2d8;
  --text-3:    #a8a298;
  --text-4:    rgba(244,240,232,.35);

  --gold:      #c8a96e;
  --gold-2:    rgba(200,169,110,.4);
  --gold-3:    rgba(200,169,110,.12);

  --rule:      rgba(244,240,232,.10);
  --rule-2:    rgba(244,240,232,.16);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Montserrat', sans-serif;

  --hdr-h:     72px;
  --gap:       clamp(1.2rem, 3.5vw, 3.5rem);
  --container: 1400px;
}

/* =====================================================
   GLOBAL RESET – prevent Elementor from squeezing things
   ===================================================== */
html, body {
  max-width: 100% !important;
  overflow-x: clip;
}
#page, #page.site {
  width:      100% !important;
  max-width:  none !important;
  margin:     0    !important;
  padding:    0    !important;
}

/* =====================================================
   FIXED HEADER
   ===================================================== */
.site-header {
  position:  fixed !important;   /* force above any Elementor override */
  top:       0 !important;
  left:      0 !important;
  right:     0 !important;
  width:     100% !important;
  max-width: none !important;    /* override hello-elementor 1140px constraint */
  z-index:   9000 !important;   /* above Elementor's popups */
  height:    var(--hdr-h);
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease,
              backdrop-filter .45s ease;
  box-sizing: border-box;
}

/* Scrolled state – dark glass background */
.site-header.pinned {
  background:      rgba(12,10,8,.94) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color:    var(--rule-2);
  max-width:       none !important;
}

/* ── WordPress admin-bar offset ─────────────────── */
.admin-bar .site-header { top: 32px !important; }
.admin-bar .mob-menu    { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px !important; }
  .admin-bar .mob-menu    { top: 46px !important; }
}

/* =====================================================
   INNER CONTAINER  – true three-column flex
   [Left nav flex:1] [Logo flex:0 shrink:0] [Right nav flex:1]
   Logo is a flex item (not absolute) so navs can never overlap it.
   ===================================================== */
.hdr-inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap);
  box-sizing: border-box;
}

/* ── Left + Right nav wrappers ──────────────────── */
.hdr-left,
.hdr-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;   /* clip items that would otherwise bleed into logo */
}
.hdr-right {
  justify-content: flex-end;
}

/* ── wp_nav_menu output inside nav wrappers ─────── */
/* Targets the <ul> regardless of assigned menu-class */
.hdr-left  > ul,
.hdr-right > ul,
.hdr-left  .hdr-nav,
.hdr-right .hdr-nav {
  list-style: none;
  margin:  0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.hdr-left  > ul > li,
.hdr-right > ul > li,
.hdr-nav > li {
  list-style: none;
  margin:  0;
  padding: 0;
}

/* ── Nav link style ─────────────────────────────── */
.hdr-nav-link,
.hdr-left  > ul > li > a,
.hdr-right > ul > li > a,
.hdr-nav > li > a {
  font-family:    var(--sans);
  font-size:      .7rem;
  font-weight:    400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--text-3);
  text-decoration: none;
  white-space:    nowrap;
  position:       relative;
  padding-bottom: 2px;
  transition:     color .35s;
}
/* Underline hover/active */
.hdr-nav-link::after,
.hdr-left  > ul > li > a::after,
.hdr-right > ul > li > a::after,
.hdr-nav > li > a::after {
  content:    '';
  position:   absolute;
  bottom: 0; left: 0;
  width:   0;
  height:  1px;
  background: var(--gold);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.hdr-nav-link:hover,
.hdr-left  > ul > li > a:hover,
.hdr-right > ul > li > a:hover,
.hdr-nav > li > a:hover,
.hdr-nav > li.current-menu-item    > a,
.hdr-nav > li.current-page-ancestor > a { color: var(--text-1); }

.hdr-nav-link:hover::after,
.hdr-left  > ul > li > a:hover::after,
.hdr-right > ul > li > a:hover::after,
.hdr-nav > li > a:hover::after,
.hdr-nav > li.current-menu-item    > a::after,
.hdr-nav > li.current-page-ancestor > a::after { width: 100%; }

/* ── Logo (flex item, naturally centred by equal flex:1 sides) ── */
.hdr-logo {
  flex-shrink: 0;            /* never compress the logo */
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        .2rem;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  padding: 0 clamp(.8rem, 2vw, 2rem);   /* breathing room between logo and navs */
}
.hdr-logo-name {
  font-family:    var(--serif);
  font-size:      1.2rem;
  font-weight:    400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color:          var(--text-1);
  line-height:    1;
}
.hdr-logo-place {
  font-family:    var(--sans);
  font-size:      .48rem;
  font-weight:    300;
  letter-spacing: .38em;
  text-transform: uppercase;
  color:          var(--gold-2);
}
.hdr-logo-img {
  display:    block;
  width:      auto;
  max-width:  220px;
  height:     auto;
  object-fit: contain;
}

/* ── Contact CTA button ─────────────────────────── */
.hdr-contact {
  font-family:    var(--sans);
  font-size:      .65rem;
  font-weight:    500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold);
  text-decoration: none;
  border:         1px solid var(--gold-2);
  padding:        .5rem 1.4rem;
  white-space:    nowrap;
  flex-shrink:    0;
  position:       relative;
  overflow:       hidden;
  transition:     color .4s;
}
.hdr-contact::before {
  content:   '';
  position:  absolute; inset: 0;
  background: var(--gold);
  transform:  translateX(-101%);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.hdr-contact:hover { color: var(--bg); }
.hdr-contact:hover::before { transform: translateX(0); }
.hdr-contact span { position: relative; z-index: 1; }

/* ── Burger button (mobile only) ────────────────── */
.hdr-burger {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:    5px;
  width:  28px;
  height: 28px;
  cursor: pointer;
  background: none;
  border:     none;
  padding:    0;
  flex-shrink: 0;
  z-index:    10;
}
.hdr-burger:focus,
.hdr-burger:focus-visible,
.hdr-burger:active {
  background:  none !important;
  border:      none !important;
  outline:     none !important;
  box-shadow:  none !important;
  color:       inherit !important;
}
.hdr-burger span {
  display: block;
  width:  100%;
  height: 1px;
  background: var(--text-1);
  transition: transform .4s ease, opacity .4s ease, width .4s ease;
  transform-origin: center;
}
.hdr-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.hdr-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================
   MOBILE FULLSCREEN MENU
   ===================================================== */
.mob-menu {
  position:   fixed;
  inset:      0;
  z-index:    8999;          /* just below header */
  background: var(--bg);
  display:    flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity:    0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
.mob-menu.open {
  opacity:    1;
  visibility: visible;
  pointer-events: auto;
  z-index:    9001;
}
/* Gold line below logo area */
.mob-menu::before {
  content: '';
  position: absolute;
  top: var(--hdr-h); left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-2), transparent);
}

/* Logo bar at top */
.mob-menu-logo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mob-menu-logo span {
  font-family:    var(--serif);
  font-size:      1.1rem;
  font-weight:    400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color:          var(--text-1);
}
.mob-menu-logo img {
  display: block;
  height:  32px;
  width:   auto;
}

/* Close ✕ button */
.mob-menu-close {
  position:  absolute;
  top:       calc(var(--hdr-h) / 2);
  right:     var(--gap);
  transform: translateY(-50%);
  background: none;
  border:    none;
  color:     var(--text-2);
  font-size: 1.3rem;
  cursor:    pointer;
  width:  36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s;
  z-index: 2;
}
.mob-menu-close:hover { color: var(--gold); }

/* Mobile nav links (from wp_nav_menu) */
.mob-nav { width: 100%; padding: 0 var(--gap); }

.mob-nav-list {
  list-style: none;
  margin:  0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mob-nav-list li { list-style: none; width: 100%; }

.mob-nav-list li a {
  display:    block;
  width:      100%;
  text-align: center;
  padding:    1.25rem 0;
  font-family:    var(--serif);
  font-size:      2rem;
  font-weight:    300;
  letter-spacing: .08em;
  color:          var(--text-2);
  text-decoration: none;
  border-bottom:  1px solid var(--rule);
  opacity:    0;
  transform:  translateY(18px);
  transition: color .3s, transform .5s ease, opacity .5s ease;
}
.mob-nav-list li:first-child a { border-top: 1px solid var(--rule); }
.mob-nav-list li a:hover,
.mob-nav-list li.current-menu-item a { color: var(--gold); }

/* Staggered entrance */
.mob-menu.open .mob-nav-list li a          { opacity: 1; transform: translateY(0); }
.mob-menu.open .mob-nav-list li:nth-child(1) a { transition-delay: .08s; }
.mob-menu.open .mob-nav-list li:nth-child(2) a { transition-delay: .13s; }
.mob-menu.open .mob-nav-list li:nth-child(3) a { transition-delay: .18s; }
.mob-menu.open .mob-nav-list li:nth-child(4) a { transition-delay: .23s; }
.mob-menu.open .mob-nav-list li:nth-child(5) a { transition-delay: .28s; }
.mob-menu.open .mob-nav-list li:nth-child(6) a { transition-delay: .33s; }

/* Contact CTA in mobile menu */
.mob-menu-cta {
  margin-top:     2.5rem;
  font-family:    var(--sans);
  font-size:      .65rem;
  font-weight:    500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color:          var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-2);
  padding: .82rem 2.5rem;
  opacity:   0;
  transform: translateY(10px);
  transition: background .35s, color .35s,
              opacity .5s .35s ease, transform .5s .35s ease;
}
.mob-menu.open .mob-menu-cta { opacity: 1; transform: translateY(0); }
.mob-menu-cta:hover { background: var(--gold); color: var(--bg); }

/* =====================================================
   RESPONSIVE – MOBILE  (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {
  :root { --hdr-h: 60px; --gap: 1.2rem; }

  /* Hide desktop navs, show burger */
  .hdr-left,
  .hdr-right { display: none !important; }
  .hdr-burger { display: flex; }

  /* Logo: left-align on mobile */
  .hdr-logo {
    align-items: flex-start;
    padding: 0;
  }
  .hdr-logo-name  { font-size: .95rem; }
  .hdr-logo-place { display:   none;   }

  .hdr-inner { justify-content: space-between; }

  /* Anchor nav pills on mobile (targets se-anav in widgets.css) */
}

@media (max-width: 480px) {
  .hdr-logo-name { font-size: .85rem; }
}