/* =========================================
   NovaLuxe Navbar CSS (TOUCH MENU BUTTON FIX)
   Scope: Navbar + Mobile Menu ONLY
   Desktop untouched (mobile rules are wrapped)
   Fix: DO NOT change navbar text weight
   ========================================= */

/* ---------- Base header ---------- */
header {
  background: #000;
  color: #fff;
}

/* Logo */
.logo { transition: opacity .2s, filter .2s; }
.logo:hover { filter: brightness(.85); }

/* Desktop nav links (leave as-is) */
header nav ul li a {
  font-weight: 400 !important;
  color: #fff;
  transition: color .2s;
}
header nav ul li a:hover { color: #f2b705; }

/* ======================================================
   MOBILE ONLY (lg breakpoint and down)
   ====================================================== */
@media (max-width: 1023.98px){

  /* Only apply font cleanup to the MENU, not the whole header */
  #mobile-menu,
  #mobile-menu * {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* ======================================================
     MOBILE MENU BUTTON
     Fix: remove the stacked inner square on touch devices
     NOTE: do NOT set font-weight here
     ====================================================== */
  .menu-toggle,
  #menu-toggle,
  button[aria-controls="mobile-menu"]{
    -webkit-appearance: none !important;
    appearance: none !important;

    background: linear-gradient(180deg, var(--gold), var(--gold2), #ffffff) !important;
    background-clip: padding-box !important;

    color: #000 !important;
    -webkit-text-fill-color: #000 !important;

    padding: .45rem .9rem !important;
    border-radius: 10px !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;

    position: relative !important;
    overflow: visible !important;

    -webkit-tap-highlight-color: transparent !important;

    transition: transform .15s ease, box-shadow .15s ease;
  }

  .menu-toggle > *,
  #menu-toggle > *,
  button[aria-controls="mobile-menu"] > *{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .menu-toggle::before,
  .menu-toggle::after,
  #menu-toggle::before,
  #menu-toggle::after,
  button[aria-controls="mobile-menu"]::before,
  button[aria-controls="mobile-menu"]::after{
    content: none !important;
    display: none !important;
  }

  .menu-toggle:hover,
  #menu-toggle:hover,
  button[aria-controls="mobile-menu"]:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
  }

  .menu-toggle:active,
  #menu-toggle:active,
  button[aria-controls="mobile-menu"]:active{
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
  }

  .menu-toggle:focus,
  .menu-toggle:focus-visible,
  #menu-toggle:focus,
  #menu-toggle:focus-visible,
  button[aria-controls="mobile-menu"]:focus,
  button[aria-controls="mobile-menu"]:focus-visible{
    outline: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
  }

  /* ---------- Mobile full-screen menu ----------
     Default = hidden. Add .is-open via JS when opened.
     New layout: topbar + scroll body + footer (only body scrolls)
     ------------------------------------------------ */
  #mobile-menu{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: #000;
    color: #fff;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    padding-bottom: env(safe-area-inset-bottom);

    /* closed state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  #mobile-menu.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms ease;
  }

  /* Topbar hook (matches new HTML class) */
  #mobile-menu .nlx-mm-topbar{
    position: relative;
    height: auto !important;
    min-height: 64px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Scrollable links area (THIS is what scrolls) */
  #mobile-menu .nlx-mm-body{
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 14px;
    padding-bottom: 14px;
    scroll-padding-top: 18px;
  }

  /* Width constraint wrapper (matches new HTML class) */
  #mobile-menu .nlx-mm-wrap{
    max-width: 520px;
    width: min(92vw, 520px);
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Footer hook (matches new HTML class) */
  #mobile-menu .nlx-mm-footer{
    margin-top: 0;
  }

  /* ---------- Mobile menu list ---------- */
  .mm-list{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }

  .mm-row{
    display: block;
    width: 100%;
    padding: clamp(12px, 3.6vw, 16px) 0;
    font-size: clamp(16px, 4.4vw, 18px);

    /* keep your original menu link weight */
    font-weight: 600 !important;

    color: #fff;
    border-top: 1px solid rgba(255,255,255,.08);
    background: none;

    /* iOS text zoom safety */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;

    -webkit-tap-highlight-color: transparent;
  }

  .mm-row:first-child{ border-top: 0; }

  .mm-row:hover{
    background: rgba(255,255,255,.06);
    border-radius: 12px;
  }

  #mobile-menu ul li a:hover{ color: inherit; }

  /* Small device polish */
  @media (max-width: 320px){
    #mobile-menu .nlx-mm-topbar{ padding-left: 0; padding-right: 0; }
  }

  /* Spacer for short screens (gives Home room under huge text) */
  @media (max-width:600px) and (max-height:740px){
    #mobile-menu .nlx-mm-body{
      padding-top: 22px;
    }
  }

  /* ---------- Font Awesome fix ---------- */
  #mobile-menu i.fab,
  #mobile-menu i.fa-brands{
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
  }
  #mobile-menu i.fa,
  #mobile-menu i.fas,
  #mobile-menu i.fa-solid,
  #mobile-menu i.far,
  #mobile-menu i.fa-regular{
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
  }

  /* Mobile menu link: remove tap focus highlight, keep keyboard focus */
  .mm-row:focus{ outline: none; }

  .mm-row:focus:not(:focus-visible),
  .mm-row:active{
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ===== NAV HEIGHT LOCK (prevents zoom from eating your hero) ===== */
:root{
  --nlx-nav-h: 90px;   /* mobile */
}
@media (min-width: 768px){
  :root{ --nlx-nav-h: 80px; } /* md+ */
}

/* lock header height */
#site-header{
  height: var(--nlx-nav-h);
  min-height: var(--nlx-nav-h);
  max-height: var(--nlx-nav-h);
  overflow: hidden;
}

/* your nav: remove vertical padding so it can't balloon */
#site-header .nlx-nav{
  height: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* force logo to fit inside the locked header */
#site-header .logo{
  height: calc(var(--nlx-nav-h) - 22px);
  width: auto;
  max-width: 150px;
  display: block;
}

/* spacer under fixed header */
.nlx-header-spacer{
  height: var(--nlx-nav-h);
}

#mobile-menu .nlx-mm-topbar{
  min-height: auto !important;
  height: auto !important;
  padding-top: calc(28px + env(safe-area-inset-top));
  padding-bottom: 18px;
  overflow: visible;
}
#mobile-menu .nlx-mm-topbar{
  padding-top: calc(60px + env(safe-area-inset-top)) !important;
  padding-bottom: 24px !important;
}
/* Force navbar typography to stay consistent across pages */
header,
header *{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.2;
}
/* iPad Air / tablets: hug links to the left, DO NOT touch footer/icons */
@media (min-width: 768px) and (max-width: 1023.98px){

  /* only the LINKS area wrapper moves */
  #mobile-menu .nlx-mm-body .nlx-mm-wrap{
    margin-left: 0 !important;
    margin-right: auto !important;

    /* optional: how close to the edge you want it */
    padding-left: 34px !important;
    padding-right: 16px !important;

    /* remove the "centered column" feel */
    width: 100% !important;
    max-width: none !important;
  }

  /* make sure each row stays left aligned */
  #mobile-menu .mm-list{ text-align: left !important; }
}