/* ==========================================================================
   AUBURY & CO — NAVBAR (single source of truth)
   ==========================================================================
   Extracted 15 April 2026 from the duplicated inline <style> blocks that
   previously existed on every page. This file is now the ONLY place the
   navbar should be styled. Link it from every page after the other CSS
   files and BEFORE any page-specific inline <style>.

   Covers:
   - Sticky navbar, transparent/solid states
   - Brand logo (AUBURY & CO)
   - Main menu + dropdown
   - "Get in Touch" button
   - Mobile hamburger toggle + slide-out open menu
   - Mobile breakpoint at 768px

   Do NOT put page-specific rules here. Page-specific hero/section styles
   stay in each page's own <style> block.
   ========================================================================== */


/* ----- NAVBAR SHELL ----- */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: all var(--transition-base);
}

.navbar--transparent {
  background: rgba(44, 62, 45, 0.85);
  padding: var(--space-6) 0;
}

.navbar--solid {
  background: rgba(247, 245, 240, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}


/* ----- DROPDOWN (desktop) ----- */

.navbar-menu .has-dropdown { position: relative; }

.navbar-menu .dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background: var(--warm-white);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: var(--space-3) 0;
  list-style: none !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
  z-index: 100;
}

.navbar-menu .dropdown li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-menu .dropdown a {
  display: block;
  padding: var(--space-2) var(--space-5);
  color: var(--charcoal) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-500);
  white-space: nowrap;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.navbar-menu .dropdown a:hover {
  background: var(--linen);
  color: var(--forest) !important;
}

@media (hover: hover) {
  .navbar-menu .has-dropdown:hover .dropdown,
  .navbar-menu .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}


/* ----- CONTAINER + LOGO ----- */

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.navbar-logo {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-400);
  letter-spacing: var(--tracking-widest);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  white-space: nowrap;
  flex-shrink: 0;
}

.navbar-logo--transparent { color: var(--light-text); }
.navbar-logo--solid       { color: var(--forest); }
.navbar-logo-amp          { font-size: var(--text-lg); opacity: 0.8; }


/* ----- MENU ----- */

.navbar-menu {
  display: flex;
  gap: var(--space-8);
  list-style: none !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

.navbar-menu li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-menu a {
  font-size: var(--text-sm);
  font-weight: var(--weight-500);
  transition: opacity var(--transition-base);
  text-decoration: none;
}

.navbar-menu--transparent a         { color: var(--light-text); }
.navbar-menu--transparent a:hover   { opacity: 0.8; }
.navbar-menu--solid a               { color: var(--charcoal); }
.navbar-menu--solid a:hover         { color: var(--forest); }


/* ----- CTA BUTTON ----- */

.btn-primary {
  background: var(--forest);
  color: var(--warm-white) !important;
  border: 1.5px solid var(--forest);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--meadow);
  color: var(--warm-white) !important;
  border-color: var(--meadow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61, 87, 64, 0.2);
}

.navbar-menu a.btn-primary,
.navbar-menu a.btn-primary:hover {
  color: var(--warm-white) !important;
}


/* ----- HAMBURGER TOGGLE ----- */

.navbar-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
}

.navbar-toggle span {
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: all var(--transition-base);
  border-radius: 1px;
}

.navbar-toggle--open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar-toggle--open span:nth-child(2) { opacity: 0; }
.navbar-toggle--open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar-toggle--transparent { color: var(--light-text); }
.navbar-toggle--solid       { color: var(--charcoal); }


/* ----- MOBILE OPEN MENU (KINFOLK-STYLE FULL-SCREEN OVERLAY) -----
   Updated 20 Apr 2026 per Matt's request. Reference: Kinfolk, Cereal,
   The Gentlewoman. The whole viewport dissolves to a Warm Linen canvas,
   items set in Playfair Display at display size, generous whitespace,
   sage hairlines between items. Logo and hamburger X stay visible above
   the overlay so the user can close the menu. */

.navbar-menu.navbar-menu--open {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  /* iOS Safari: 100vh is the STATIC viewport (full screen incl. the
     bottom toolbar area), so anything pinned to its bottom ends up
     behind Safari's chrome. 100dvh is the dynamic viewport height,
     which ends exactly at the visible edge. Fallback to 100vh for
     older browsers. 22 Apr 2026 fix. */
  height: 100vh;
  height: 100dvh;
  background: var(--linen);
  /* Extra bottom padding lifts "Get in Touch" clear of the iOS home
     indicator safe area too. */
  padding: var(--space-16) var(--space-8) calc(var(--space-12) + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: none;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  z-index: 90;
  animation: navbar-menu-fade-in 0.35s ease-out both;
}

@keyframes navbar-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Each menu item is a horizontal band with a sage forest hairline above.
   Last item also gets a hairline below for symmetry. */
.navbar-menu.navbar-menu--open > li {
  width: 100%;
  text-align: center;
  border-top: 1px solid rgba(61, 87, 64, 0.18);
  padding: var(--space-6) 0 !important;
}
.navbar-menu.navbar-menu--open > li:last-child {
  border-bottom: 1px solid rgba(61, 87, 64, 0.18);
  margin-top: auto !important;                              /* pin Get in Touch to the bottom of the overlay */
}

.navbar-menu.navbar-menu--open > li > a {
  font-family: var(--serif);
  font-size: 2.5rem;                          /* ~40px Playfair display size */
  line-height: 1.1;
  font-weight: var(--weight-400);
  letter-spacing: var(--tracking-wide);
  color: var(--forest) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
  border-radius: 0 !important;
  display: block;
}

/* Primary CTA sits within the band but italicised to distinguish. */
.navbar-menu.navbar-menu--open > li > a.btn-primary {
  font-style: italic;
  align-self: auto;
}

.navbar-menu.navbar-menu--open .has-dropdown { width: 100%; }

/* Services dropdown expanded inline, italic small-caps sub-items */
.navbar-menu.navbar-menu--open .dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  box-shadow: none;
  padding: var(--space-3) 0 0 0;
  margin: 0 !important;
  list-style: none !important;
  border-left: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.navbar-menu.navbar-menu--open .dropdown li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.navbar-menu.navbar-menu--open .dropdown a {
  color: var(--text-muted) !important;
  font-family: var(--sans) !important;
  font-size: var(--text-xs) !important;
  font-style: italic;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-1) 0 !important;
  display: block;
}

/* Lift the hamburger and wordmark above the overlay so they remain
   tappable/legible. Force their colours to read on linen when open. */
.navbar-logo,
.navbar-toggle {
  position: relative;
  z-index: 100;
}
.navbar:has(.navbar-menu--open) {
  background: transparent !important;
  box-shadow: none !important;
  padding: var(--space-4) 0 !important;
}
.navbar:has(.navbar-menu--open) .navbar-logo {
  color: var(--forest) !important;
}
.navbar:has(.navbar-menu--open) .navbar-toggle {
  color: var(--forest) !important;
}


/* ----- MOBILE BREAKPOINT ----- */

@media (max-width: 768px) {
  /* overflow-x: clip prevents horizontal scroll without creating a
     scroll container (which would break position: sticky on .navbar).
     Using "clip" not "hidden" is the critical fix — 21 Apr 2026. */
  body { overflow-x: clip; }

  .navbar-container    { padding: 0 var(--space-6); }
  .navbar--transparent { padding: var(--space-4) 0; }
  .navbar--solid       { padding: var(--space-3) 0; }
  .navbar-toggle       { display: flex; }
  .navbar-menu         { display: none; }

  .navbar-menu.navbar-menu--open { display: flex; }
}