/* ────────────────────────────────────────────────────────────────────────
   Site header — centered logo + nav below, with a subtle top-of-page
   scrim so the header stays legible over hero photography on every page.

   TWEAK POINTS
   ──────────── */
:root {
  /* Logo width (desktop). */
  --logo-width: 240px;
  /* Vertical padding above and below the logo (desktop). */
  --logo-padding-top: 28px;
  --logo-padding-bottom: 12px;

  /* Nav row below the logo. */
  --nav-gap: 36px;              /* space between nav items */
  --nav-font-size: 12px;
  --nav-letter-spacing: 0.24em;
  --nav-padding-bottom: 22px;   /* air beneath the nav */

  /* Scrim — the dark fade at the top of the page that holds the header. */
  --header-scrim-height: 230px;
  --header-scrim-strength: 0.6;

  /* Logo fade-up reveal (runs once on page load). */
  --reveal-duration: 1100ms;
  --reveal-delay: 150ms;
}

/* ──────────────────────────────────────────────────────────────────────── */

/* Top-of-page scrim — a soft dark gradient. Holds the centered header. */
#header { position: relative; }
#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-scrim-height);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--header-scrim-strength)) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
#header > * { position: relative; z-index: 1; }

/* Flip Squarespace's table-cell header into a centered flex column. */
#header .title-nav-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  margin: 0 auto !important;
}

#header .site-title {
  display: block !important;
  width: auto !important;
  max-width: 100%;
  text-align: center !important;
  padding: var(--logo-padding-top) 0 var(--logo-padding-bottom) !important;
  margin: 0 auto !important;
  font-size: 0 !important; /* kill Squarespace text-title fallback leak */
  vertical-align: top !important;
}

#header .site-title a {
  display: inline-block;
  line-height: 0;
}

/* The logo itself. site.css ships .site-title img{max-height:100px} — override. */
#header .site-title img.logo-lockup,
.logo-lockup {
  display: block !important;
  width: var(--logo-width) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  animation: at-logo-in var(--reveal-duration) cubic-bezier(.22,.61,.36,1) var(--reveal-delay) both;
}

@keyframes at-logo-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-lockup { animation: none; opacity: 1; transform: none; }
}

/* Nav container — full width, centered content. */
#header #desktopNav {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding-bottom: var(--nav-padding-bottom);
  vertical-align: top !important;
}

#header #desktopNav .main-nav,
#header #desktopNav .main-nav .nav-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* The nav row — inline-block items centered via text-align on the ul.
   Overrides .main-nav ul{text-align:right} and li margins from site.css. */
/* Top-level nav list. */
#header #desktopNav ul.cf {
  display: block !important;
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0 !important;        /* kill inline-block whitespace */
  position: static !important;
  float: none !important;
}

#header #desktopNav ul.cf > li {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 19px !important;
  padding: 0 !important;
  float: none !important;
  text-align: center !important;
  line-height: 1 !important;
  position: relative;
}

/* Hidden items stay hidden. */
#header #desktopNav ul.cf > li[style*="display: none"],
#header #desktopNav ul.cf > li[style*="display:none"] {
  display: none !important;
}

/* Link typography — warm ivory tracked caps, refined size. */
#header #desktopNav .main-nav ul li a {
  display: inline-block;
  color: #F5EFE4 !important;
  text-decoration: none;
  line-height: 1 !important;
}

#header #desktopNav .main-nav ul li a span {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: var(--nav-font-size) !important;
  letter-spacing: var(--nav-letter-spacing) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: inherit !important;
}

#header #desktopNav .main-nav ul li a:hover,
#header #desktopNav .main-nav ul li a:focus {
  color: #A1814C !important;
}

/* Locations dropdown — parent must be relative so the absolute submenu
   anchors correctly. The submenu must be absolute so its width doesn't
   balloon the parent li and push the rest of the nav sideways. */
#header .at-locations-dropdown {
  position: relative !important;
  width: auto !important;
}
#header .at-locations-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-6px) !important;
  min-width: 168px !important;
  width: auto !important;
  max-width: 240px !important;
  text-align: left !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  background: #1a1a1a !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  border-top: 1px solid #A1814C;
  list-style: none !important;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
#header .at-locations-menu li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
#header .at-locations-menu a {
  display: block !important;
  padding: 8px 18px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #F5EFE4 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
#header .at-locations-menu a:hover { color: #A1814C !important; }
@media (hover: hover) {
  #header .at-locations-dropdown:hover .at-locations-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* Instagram icon — inline, scaled, same ivory→gold hover. */
#header .at-nav-ig-item {
  display: inline-flex !important;
  align-items: center;
}
#header .at-nav-ig-item a {
  display: inline-flex;
  align-items: center;
  line-height: 0 !important;
}
#header .at-nav-ig-item a svg {
  width: 15px;
  height: 15px;
  fill: #F5EFE4;
  display: block;
  transition: fill .25s ease;
}
#header .at-nav-ig-item a:hover svg { fill: #A1814C; }

/* Hide the mobile hamburger on desktop (Squarespace ships it in the header). */
#header #mobileMenu { display: none; }

/* On pages with a hero image + title (location, about, contact, etc.),
   make sure the hero title clears the taller centered header. */
@media (min-width: 641px) {
  .title-desc-wrapper.has-main-image {
    padding-top: 190px !important;
  }
}

/* ── Mobile ── */
@media (max-width: 900px) {
  :root {
    --logo-width: 220px;
    --logo-padding-top: 24px;
    --logo-padding-bottom: 12px;
    --nav-gap: 22px;
    --nav-font-size: 11px;
    --nav-padding-bottom: 22px;
    --header-scrim-height: 220px;
  }
}
@media (max-width: 640px) {
  :root {
    --logo-width: 180px;
    --logo-padding-top: 18px;
    --logo-padding-bottom: 8px;
    --header-scrim-height: 170px;
  }
  /* On narrow screens hide the desktop nav; Squarespace's mobile menu takes over. */
  #header #desktopNav { display: none !important; }
  #header #mobileMenu { display: inline-block; }
}