/* ==========================================================================
   Chalukya Tiles — navbar.css
   Sticky header: transparent at top, solid on scroll, mobile hamburger.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  /* Never clip the mobile drawer (fixed children) */
  overflow: visible;
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Keep logo + hamburger above the full-screen drawer */
body.nav-open .site-header {
  z-index: calc(var(--z-modal) + 20);
  background-color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-border);
}

body.nav-open .site-header .nav__toggle {
  color: var(--color-charcoal);
  text-shadow: none;
}

body.nav-open .site-header .nav__logo-img {
  filter: none;
  background: transparent;
}

/* Hide floating WhatsApp / scroll-top while menu is open (they sit at z 850+) */
body.nav-open .float-actions {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Transparent over hero / dark top of page */
.site-header--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Hero header — flat white nav text (no glow / shadow) */
.site-header--transparent .nav__logo-text,
.site-header--transparent .nav__link,
.site-header--transparent .nav__toggle {
  color: #ffffff;
  text-shadow: none;
}

.site-header--transparent .nav__logo-mark {
  color: #ffffff;
}

/* Solid state while scrolling (or always on inner pages without hero video).
   Pure white header so tile pages stay bright and clean. */
.site-header--solid,
.site-header.is-scrolled {
  background-color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-border);
}

.site-header--solid .nav__logo-text,
.site-header--solid .nav__link,
.site-header--solid .nav__toggle,
.site-header.is-scrolled .nav__logo-text,
.site-header.is-scrolled .nav__link,
.site-header.is-scrolled .nav__toggle {
  color: var(--color-charcoal);
}

.site-header--solid .nav__logo-mark,
.site-header.is-scrolled .nav__logo-mark {
  color: var(--color-highlight);
}

.site-header--solid .nav__link:hover,
.site-header--solid .nav__link.is-active,
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__link.is-active {
  color: var(--color-highlight-dark);
}

/* Nav bar layout */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-4);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: calc(var(--z-modal) + 30);
  text-decoration: none;
}

/* Home hero: no top-left logo */
body[data-page="home"] .nav__brand--home {
  display: none !important;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.nav__brand:hover {
  color: inherit;
}

/* Logo — flat white plate on hero / dark chrome */
.nav__logo-img {
  display: block;
  height: 2.75rem;
  width: auto;
  max-width: 11.5rem;
  object-fit: contain;
  object-position: left center;
  background: #ffffff;
  padding: 0.22rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: none;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  filter: none;
  flex-shrink: 0;
}

.nav__brand-text,
.nav__brand-name,
.nav__brand-sub {
  display: none !important;
}

@media (min-width: 768px) {
  .nav__logo-img {
    height: 3.1rem;
    max-width: 13rem;
  }
}

.site-header--transparent:not(.is-scrolled) .nav__logo-img {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: none;
  padding: 0.22rem 0.4rem;
  filter: none;
}

.site-header--solid .nav__logo-img,
.site-header.is-scrolled .nav__logo-img {
  background: transparent;
  border: none;
  filter: none;
  box-shadow: none;
  padding: 0;
}

.site-header--transparent .nav__link.is-active,
.site-header--transparent .nav__link:hover {
  color: #ffffff;
  text-shadow: none;
}

.site-header--transparent .nav__link::after {
  background: #ffffff;
  box-shadow: none;
}

.site-header--solid .nav__link.is-active,
.site-header--solid .nav__link:hover,
.site-header.is-scrolled .nav__link.is-active,
.site-header.is-scrolled .nav__link:hover {
  color: var(--color-highlight);
}

.site-header--solid .nav__link.is-active::after,
.site-header--solid .nav__link:hover::after,
.site-header.is-scrolled .nav__link.is-active::after,
.site-header.is-scrolled .nav__link:hover::after {
  background: var(--color-highlight);
}

/* Desktop menu */
.nav__menu {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 1.5px;
  background: var(--color-highlight);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-highlight-dark);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--color-highlight-dark);
  font-weight: var(--fw-semibold);
}

.nav__actions {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: var(--space-3);
  flex-shrink: 0;
}

.nav__cta {
  display: inline-flex;
}

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-charcoal);
  position: relative;
  z-index: calc(var(--z-modal) + 30);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
}

.nav__toggle:hover {
  color: var(--color-highlight);
}

.nav__toggle-bar {
  display: block;
  width: 1.35rem;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  transform-origin: center;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer — portaled to <body> in navbar.js so it is never clipped
   by the sticky header (especially when scrolled). Full viewport overlay. */
.nav__drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: calc(var(--z-modal) + 10);
  visibility: hidden;
  pointer-events: none;
  /* Isolate stacking so page content cannot paint over the panel */
  isolation: isolate;
}

.nav__drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nav__drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 46, 0.55);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  /* Solid enough that page cards never “show through” the menu chrome */
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
}

.nav__drawer.is-open .nav__drawer-overlay {
  opacity: 1;
}

.nav__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(20rem, 88vw);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #ffffff;
  /* Fully opaque — no glass/blur that reveals content underneath */
  opacity: 1;
  box-shadow: var(--shadow-xl);
  padding: calc(var(--header-height) + var(--space-6)) var(--space-6) var(--space-8);
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1;
}

.nav__drawer.is-open .nav__drawer-panel {
  transform: translateX(0);
}

.nav__drawer-link {
  display: block;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    padding-left var(--duration-fast) var(--ease-out);
}

.nav__drawer-link:last-of-type {
  border-bottom: none;
}

.nav__drawer-link:hover,
.nav__drawer-link.is-active {
  color: var(--color-highlight-dark);
  background: var(--color-highlight-soft);
  padding-left: var(--space-4);
}

.nav__drawer-cta {
  margin-top: var(--space-6);
}

.nav__drawer-meta {
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.nav__drawer-meta a {
  color: var(--color-highlight-dark);
  font-weight: var(--fw-medium);
}

/* Body lock when menu open — prevent background scroll / rubber-band peek */
body.nav-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

html.nav-open {
  overflow: hidden;
}

/* Desktop breakpoint */
@media (min-width: 992px) {
  .nav__toggle {
    display: none;
  }

  .nav__menu {
    display: flex;
  }

  .nav__actions {
    display: inline-flex;
  }

  .nav__drawer {
    display: none;
  }
}

/* Home top-of-page: Book Visit + Login flat white outline */
body[data-page="home"] .site-header--transparent:not(.is-scrolled) .nav__actions .btn--primary {
  --btn-bg: transparent;
  --btn-color: #ffffff;
  --btn-border: rgba(255, 255, 255, 0.95);
  --btn-hover-bg: rgba(255, 255, 255, 0.12);
  --btn-hover-color: #ffffff;
  color: #ffffff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  text-shadow: none;
}

body[data-page="home"] .site-header--transparent:not(.is-scrolled) .nav__actions .btn--primary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: none;
  text-shadow: none;
}

/* After scroll on home: solid Oxford primary for both CTAs */
body[data-page="home"] .site-header.is-scrolled .nav__actions .btn--primary {
  --btn-bg: var(--color-highlight);
  --btn-color: #ffffff;
  --btn-border: var(--color-highlight);
  --btn-hover-bg: var(--color-highlight-dark);
  --btn-hover-color: #ffffff;
  color: #ffffff;
  background-color: var(--color-highlight);
  border-color: var(--color-highlight);
  box-shadow: var(--shadow-sm);
  text-shadow: none;
}

body[data-page="home"] .site-header.is-scrolled .nav__actions .btn--primary:hover {
  background-color: var(--color-highlight-dark);
  border-color: var(--color-highlight-dark);
  color: #ffffff;
  text-shadow: none;
}

.nav__drawer-cta + .nav__drawer-cta {
  margin-top: var(--space-3);
}