/* ==========================================================================
   Value Inn, Bangalore Airport — layout.css
   Header, sticky nav, dropdown, mobile drawer, footer, grids
   ========================================================================== */

/* --- Site header ---
   A thin brand accent line sits below the header across every page. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  /* Near-solid white through the full logo height (the old fade started at 55%
     and washed out the tagline at the bottom of the logo). The SAME colour is used
     in the scrolled state below: a gradient here plus a transition on `background`
     made the header flash transparent for ~100ms on every scroll start. */
  background: rgba(255, 255, 255, .96);
  z-index: 100;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), backdrop-filter var(--transition-fast);
}
.site-header.is-scrolled {
  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: auto;
  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));
}

.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%);
  visibility: hidden;                               /* off-canvas links must not be tabbable */
  transition: transform var(--transition), visibility 0s 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);
  visibility: visible;
  transition: transform var(--transition), visibility 0s;
}
.nav-drawer__row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.nav-drawer__link {
  flex: 1 1 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}
/* Chevron that reveals a section's inner pages (Rooms, Offers) */
.nav-drawer__toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin-right: -10px;                    /* optically align the 20px glyph with the text edge */
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer__toggle svg {
  width: 20px; height: 20px;
  transition: transform var(--transition-fast);
}
.nav-drawer__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-drawer__group.is-open .nav-drawer__toggle svg { transform: rotate(180deg); }
.nav-drawer__sub {
  list-style: none;
  margin: 0;
  padding: .25rem 0 .5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.nav-drawer__sublink {
  display: block;
  padding: .75rem 0;
  font-size: .9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}
.nav-drawer__sublink:hover,
.nav-drawer__sublink:active,
.nav-drawer__sublink[aria-current="page"] { color: var(--color-accent); }
.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;
}

/* Priority+ nav — driven by fitNav() in scripts/partials.js, not by a breakpoint.
   Links that no longer fit beside the logo and Book Now move into the hamburger
   one at a time, rightmost first:
     .has-overflow   at least one link moved  -> hamburger shown
     .nav-collapsed  no link fits             -> hamburger (left) | logo | Book Now (right),
                     logo centred in the space between the two controls (equal gaps). */
.nav-primary__item[hidden] { display: none; }
.site-header.has-overflow .nav-hamburger { display: inline-flex; }
.site-header.nav-collapsed .nav-primary { display: none; }
.site-header.nav-collapsed .nav-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
}
.site-header.nav-collapsed .nav-cta-cluster { display: contents; }   /* lets hamburger and Book Now sit in separate columns */
.site-header.nav-collapsed .nav-hamburger {
  order: -1;
  justify-self: start;
  margin-inline: -11px;                     /* icon lines are 22px in a 44px box: measure gaps from the lines, not the box */
}
.site-header.nav-collapsed .nav-brand {
  margin-right: 0;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
}
.site-header.nav-collapsed .nav-brand__logo { max-width: 100%; }
.site-header.nav-collapsed .nav-cta-cluster .btn { justify-self: end; }
@media (max-width: 640px) {
  /* Nav bar uses a tighter edge gutter than page content so the logo gets more width. */
  .site-header .u-container { padding-inline: 16px; }
  .nav-cta-cluster .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 .6rem;
    font-size: .75rem;
    letter-spacing: .06em;
  }
}

/* --- Footer ---
   Lobby seating-area photo (approved sitewide 7 Sep) under 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(18, 18, 18, .86) 0%, rgba(28, 28, 28, .72) 35%, rgba(18, 18, 18, .84) 100%),
    url('https://assets.simplotel.com/simplotel/image/upload/w_1800,h_900,c_fill/f_auto,q_auto/value-inn-bangalore-airport/lobby_seating_area');
  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 soft-accent vignette in the centre — gives the dark sheen a polished lift */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 119, 182, .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);
}
@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; }
}

/* 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 accent 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); }
/* min(300px, 100%): lets the track shrink on sub-300px containers (320px phones) */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 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; }
}