/* The Babe Den — main menu (header) theme
 * Transparent header with a subtle dark overlay so the light menu text stays readable.
 * Homepage: fully see-through over the hero video (see index.html), turns into a frosted bar on scroll.
 * Other pages: translucent frosted bar (their first sections are light cream).
 * The overlay lives on header::before so the full-screen mobile menu (inside the header) is unaffected.
 * If you change this file, bump the ?v= number where it's linked on every page.
 */

/* ---- Page base: cream from the very first paint (before the page script renders) ---- */
html, body { background: #faf7f2; }

/* ---- Header surface ---- */
header {
  position: relative; /* legal pages; main pages keep their inline position:sticky */
  background: transparent !important;
  border-bottom: 0 !important; /* no divider line between menu and hero */
  isolation: isolate;
}
header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #000000;                 /* interior pages: solid black menu */
  transition: background 300ms ease, opacity 300ms ease;
}
/* (Homepage overrides this in index.html: transparent over the hero, frosted after scrolling) */

/* ---- Larger logo ---- */
header img[alt="The Babe Den"] {
  height: clamp(60px, 8vw, 88px) !important;
  width: auto !important;
}

/* ---- Larger menu text ---- */
header [data-desktop-nav] {
  font-size: 13.5px !important;
  letter-spacing: 0.16em !important;
  gap: 8px 30px !important;
}
header [data-desktop-nav] a,
header .bar nav a {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
/* Call + Book buttons in the header */
header a[href^="tel:"][data-phone-pill],
header > div a[href="booking.html"] {
  font-size: 12.5px !important;
  min-height: 44px !important;
}
/* Legal pages use a simpler header nav */
header .bar nav {
  font-size: 13px !important;
}

/* ---- Phones & small tablets: keep the menu on one compact row ---- */
@media (max-width: 900px) {
  header > div:first-child {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    min-height: 72px !important;
    padding: 10px 0 !important;
  }
  header > div:first-child > a:first-child,
  header > div:first-child > div {
    flex: 0 1 auto !important;
  }
  header img[alt="The Babe Den"] {
    height: 54px !important;
  }
  header > div:first-child > div {
    gap: 8px !important;
  }
  header > div a[href="booking.html"] {
    padding: 0 16px !important;
    font-size: 11.5px !important;
  }
  /* Phone icon button: a perfect circle (equal width/height, no squeezing) */
  header a[href^="tel:"][data-phone-pill] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}
@media (max-width: 360px) {
  header img[alt="The Babe Den"] { height: 46px !important; }
  header > div a[href="booking.html"] { padding: 0 12px !important; letter-spacing: 0.08em !important; }
}
/* Legal pages: tighter nav on small screens */
@media (max-width: 700px) {
  header .bar { gap: 8px 12px !important; padding: 10px 0 !important; }
  header .bar img { height: 50px !important; }
  header .bar nav { font-size: 11.5px !important; gap: 2px 14px !important; }
}