/* ==========================================================================
   The Sahil Hotel — layout.css
   Header, sticky nav, dropdown, mobile drawer, footer, grids
   ========================================================================== */

/* --- Site header ---
   A thin gold accent line sits below the header across every page. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .35) 55%,
    rgba(255, 255, 255, 0) 85%
  );
  z-index: 100;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), backdrop-filter var(--transition-fast);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

#site-header { display: block; }
/* Body has NO top padding — the hero starts at y=0 and the fixed header
   floats over the top portion of it. Pages without a hero should add their
   own padding via a wrapper. */

.nav-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  line-height: 1;
}

/* Brand — flush left, pushes everything else right */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
  margin-right: auto;
}
.nav-brand__logo {
  height: 112px;
  width: auto;
  max-height: calc(var(--header-h) - 20px);
  max-width: 360px;
  object-fit: contain;
  display: block;
  transition: height var(--transition-fast), max-height var(--transition-fast), filter var(--transition-fast);
  /* Soft drop-shadow keeps the logo legible against varied hero backgrounds.
     A faint white outer-glow adds contrast over darker imagery too. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)) drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}
.site-header.is-scrolled .nav-brand__logo {
  /* height: 96px;
  max-height: calc(var(--header-h) - 28px); */
  /* Solid white header in scrolled state — soften the shadow so it doesn't read as a halo. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}

/* Home page hero sits flush under the fixed header. Carry more opacity through
   the full header height so the logo and nav links always sit on a near-white
   backdrop instead of fading into the hero imagery. */
body[data-page="index"] .site-header:not(.is-scrolled) {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .94) 0%,
    rgba(255, 255, 255, .70) 55%,
    rgba(255, 255, 255, .20) 90%,
    rgba(255, 255, 255, 0) 100%
  );
}
.nav-brand__mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 500; letter-spacing: .05em;
  font-size: .9rem;
}
.nav-brand__text {
  display: flex; flex-direction: column;
  line-height: 1.1;
}
.nav-brand__name {
  font-size: 1.05rem; font-weight: 500; letter-spacing: .02em;
  color: var(--color-text);
}
.nav-brand__tag {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--color-accent);
}

/* Primary nav (desktop) — right aligned, sits next to CTA cluster */
.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  flex: 0 0 auto;
  justify-content: flex-end;
}
.nav-primary__item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem .95rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: .02em;
  line-height: 1;
  position: relative;
  transition: color var(--transition-fast);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: .95rem; right: .95rem; bottom: .35rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover { color: var(--color-accent); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--color-accent); }

/* Right cluster */
.nav-cta-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
}

/* Hamburger — mobile only. Hidden on desktop where the full nav is visible. */
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  position: relative;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 101;                          /* above own header content */
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-hamburger span {
  position: absolute;
  width: 22px; height: 1.5px;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-hamburger span:nth-child(1) { transform: translateY(-6px); }
.nav-hamburger span:nth-child(3) { transform: translateY(6px); }
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(0) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* Backdrop — dim layer behind the drawer when the mobile menu is open */
.nav-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(.4,0,.2,1), visibility 300ms;
  cursor: pointer;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
}

/* Slide-in drawer — narrow side panel on desktop, full-screen on mobile */
.nav-drawer {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  right: 0;
  width: min(420px, 100%);
  background: #fff;
  z-index: 110;                       /* above header (100), bookbar (90), backdrop (105) */
  padding: var(--space-md) var(--space-lg) var(--space-2xl);
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
}
/* Hide the mobile bookbar while the nav drawer is open — avoids any
   visual or click-target overlap at the viewport bottom. */
body.nav-open .mobile-bookbar { display: none !important; }
/* Lock the body scroll when the drawer is open */
body.nav-open { overflow: hidden; }
@media (max-width: 540px) {
  .nav-drawer {
    width: 100%;
    padding-inline: var(--container-pad);
  }
}
body.nav-open .nav-drawer { transform: translateX(0); }
.nav-drawer__link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}
.nav-drawer__link:hover,
.nav-drawer__link:active { color: var(--color-accent); }
.nav-drawer__link[aria-current="page"] { color: var(--color-accent); }
.nav-drawer__cta {
  margin-top: var(--space-md);
  width: 100%;
  text-align: center;
}

/* Responsive nav — hamburger appears on mobile, primary nav hides */
@media (max-width: 1080px) {
  .nav-primary { display: none; }
  .nav-hamburger { display: inline-flex; }
}
@media (min-width: 1081px) {
  .nav-drawer { display: none !important; }
}

/* --- Footer ---
   Property image background with a dark sheen overlay for readability,
   following the Kingsbury reference. The #282828 fallback shows if the
   image fails to load. */
.site-footer {
  position: relative;
  isolation: isolate;
  background-color: #282828;
  background-image:
    linear-gradient(180deg, rgba(28, 28, 28, .68) 0%, rgba(18, 18, 18, .82) 100%),
    url('https://www.thesahilhotel.com/images/4427799c72e72bbdb9e830dac768e4cc.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* subtle parallax — image stays fixed as content scrolls over it */
  color: #fff;
  padding: var(--space-2xl) 0 var(--space-md);
  margin-top: 0;
  overflow: hidden;
}
/* Soft golden vignette in the centre — gives the dark sheen a luxurious lift */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(147, 115, 75, .12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--space-xl);
}

/* New 3-column footer (Brand+Address | Quick Links 2-col | Contact + Social) */
.footer-grid--3col {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 1080px) {
  .footer-grid--3col { grid-template-columns: 1fr 1fr; }
  .footer-grid--3col .footer-contact-col { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid--3col { grid-template-columns: 1fr; }
  .footer-grid--3col .footer-contact-col { grid-column: auto; }
}

.footer-brand-col,
.footer-quicklinks,
.footer-contact-col { display: flex; flex-direction: column; }

.footer-address {
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  line-height: 1.7;
  margin: 0;
}

.footer-col__title--mt { margin-top: var(--space-lg); }

/* Quick Links 2-column grid */
.footer-quicklinks__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem var(--space-md);
}
.footer-quicklinks__list li { margin: 0; }
.footer-quicklinks__list a {
  color: #fff;
  font-size: .9375rem;
  transition: color var(--transition-fast);
}
.footer-quicklinks__list a:hover { color: var(--color-accent-light); }

@media (max-width: 480px) {
  .footer-quicklinks__list { grid-template-columns: 1fr; }
}

/* Contact list (right column) */
.footer-contact a:hover { color: var(--color-accent-light); }
.footer-contact__hint { color: rgba(255,255,255,.65); }

/* Footer bottom credits style */
.footer-bottom__credits {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-bottom__credits a { color: rgba(255,255,255,.85); }
.footer-bottom__credits a:hover { color: var(--color-accent-light); }
.footer-bottom__credits span { color: rgba(255,255,255,.65); }
@media (max-width: 540px) {
  .footer-bottom__credits { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
}
.footer-brand__logo {
  width: 100%;
  max-width: 240px;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  object-position: left center;   /* anchor logo content to the left edge */
  align-self: flex-start;
  display: block;
  margin-left: 0;
  margin-bottom: var(--space-md);
  /* Convert the original logo (brown + grey + dark) to pure white
     so it reads cleanly on the #282828 footer */
  filter: brightness(0) invert(1);
}
@media (max-width: 640px) {
  .footer-brand__logo { max-width: 180px; max-height: 105px; }
}
.footer-brand__name {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .05em;
}
.footer-brand__tag {
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-top: .25rem;
}
.footer-brand__lede {
  color: rgba(255,255,255,.7);
  margin-top: var(--space-md);
  font-size: .9375rem;
  line-height: 1.7;
}
.footer-col__title {
  color: #fff;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.footer-col ul li { margin-bottom: .65rem; }
.footer-col a {
  color: #fff;
  font-size: .9375rem;
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--color-accent-light); }
.footer-contact li { display: flex; gap: .65rem; margin-bottom: .85rem; color: #fff; font-size: .9375rem; line-height: 1.6; }
.footer-contact li svg { flex: 0 0 16px; margin-top: .2rem; color: #fff; }

.footer-social {
  display: flex; gap: var(--space-2xs);
  margin-top: 0;            /* relies on the "Get in Touch" title's margin-bottom */
}
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.footer-social svg { width: 16px; height: 16px; color: inherit; }

.footer-bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  color: rgba(255,255,255,.7);
  font-size: .8125rem;
}
.footer-bottom a { color: rgba(255,255,255,.85); margin-left: 0.5rem; }
.footer-bottom a:hover { color: var(--color-accent-light); }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom > div:last-child a:first-child { margin-left: 0; }
}

/* Inner pages have no hero anymore — push body content down so the first
   section clears the fixed site-header (110px) + the fixed inner-nav (~50px).
   Home and other top-level pages keep the existing top: 0 hero behavior. */
html[data-depth="1"] body {
  padding-top: calc(var(--header-h) + 52px);
}
html[data-depth="1"] main > section:first-child {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

/* Style for the promoted h1 in inner-intro (was h2 — kept the same visual size) */
.inner-intro__h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
}
.inner-intro__h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
}

/* Brand-mark logo above the eyebrow on inner-intro headings (restaurants etc.) */
.inner-intro__brand-mark {
  display: block;
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 var(--space-md);
}
@media (max-width: 640px) {
  .inner-intro__brand-mark { height: 52px; max-width: 170px; }
}

/* --- Inner-page category sub-nav (pill bar) ---
   Sits directly below the main header on every inner page. Lists all sibling
   pages in the same category (e.g., all 4 rooms on a room page). The current
   page gets a gold underline + accent color. Auto-injected by partials.js.

   Position fixed at top: var(--header-h) so it sits BELOW the fixed site-header
   and stays visible as the user scrolls — just like a sub-header. */
.inner-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 99;                          /* below site-header (100), above content */
  background: rgba(250, 247, 242, .96); /* warm cream with slight transparency */
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.inner-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: .85rem 0;
  flex-wrap: wrap;
}
.inner-nav__link {
  position: relative;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--color-text);
  white-space: nowrap;
  padding: .25rem 0;
  transition: color var(--transition-fast);
}
.inner-nav__link:hover { color: var(--color-accent); }
.inner-nav__link.is-active {
  color: var(--color-accent);
  font-weight: 500;
}
.inner-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--color-accent);
}
@media (max-width: 640px) {
  .inner-nav__inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: center;
    padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inner-nav__inner::-webkit-scrollbar { display: none; }
}

/* --- Page section helper ---
   Tighter, consistent vertical rhythm — every .section uses the same padding
   so spacing between any two widgets is identical across all 22 pages. */
.section { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.section--soft { background: var(--color-bg-soft); }
.section--secondary { background: var(--color-secondary); }
.section--dark { background: #111; color: #DADADA; }
.section--dark h2, .section--dark h3 { color: #fff; }

/* When two sections share the same background (cream "soft" or muted
   "secondary"), there's no visual break between them — so dropping the
   second section's top padding removes a redundant gap site-wide. */
.section--soft + .section--soft,
.section--secondary + .section--secondary,
.section--dark + .section--dark {
  padding-top: 0;
}

/* Tighter vertical rhythm on mobile — the clamp's lower bound (36px)
   stacked on top of an adjacent section's bottom padding reads as a
   dead band on a phone. 24px on each side is consistent and breathable. */
@media (max-width: 640px) {
  .section { padding-block: var(--space-md); }
}

/* --- Generic grid --- */
.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}