/* ==========================================================================
   GRANDTOUR (PVT) LTD — SITE CHROME
   Header · logo · desktop mega-panels · mobile navigation · footer
   The reference design shipped none of this, so it is designed here from the
   same tokens. Loaded after components.css.
   ========================================================================== */

/* The global reset only strips classed lists, so prose keeps its bullets.
   The chrome's nested lists are unclassed by design — strip those here. */
.panel__group ul,
.mobile-nav__panel ul,
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   1. LOGO
   The mark is the client's own: a serif G holding the island of Sri Lanka.
   They supplied it only as flat PNGs on an opaque cream square — the file
   named "(White)" is byte-identical to the standard one — so neither could
   sit on the dark chrome. dev/trace-logo.js traces their 512px artwork into
   vector outlines, which is what ships; dev/gen-brand.js writes the files.
   The wordmark beside it is live text in the brand serif, so it stays crisp
   and selectable at any size.
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: var(--cream);
}
/* The mark is two colour: the G and the island of Sri Lanka inside it.
   The island is always gold — 8.1:1 on the dark chrome. The letterform has
   to flip, because the client's dark green G is invisible on ocean-dark.
   Both are custom properties on the inline SVG, so one copy of the markup
   serves every surface. */
.logo__mark {
  width: 34px;
  height: 34px;
  flex: none;
  --logo-letter: var(--cream);
  --logo-island: var(--gold);
}
/* On a light surface the mark reverts to the artwork as drawn. */
.on-light .logo__mark,
.logo--dark .logo__mark { --logo-letter: var(--ocean); }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}
.site-header--solid .logo,
.site-header.is-stuck .logo { color: var(--cream); }

/* --------------------------------------------------------------------------
   2. HEADER
   Transparent over a dark hero; condenses to solid ocean-dark on scroll.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--t-base) var(--ease);
}

.site-header.is-stuck,
.site-header--solid {
  background: var(--ocean-dark);
  border-bottom-color: rgba(251, 246, 236, 0.12);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.8);
}

/* A page with no dark hero would leave the transparent header sitting on cream,
   rendering the cream logo and nav invisible. Detect the absence of a hero and
   go solid automatically, so any future page is safe without remembering a
   modifier class. The content is padded down to clear the fixed bar. */
body:not(:has(.page-hero)):not(:has(.hero)) .site-header {
  background: var(--ocean-dark);
  border-bottom-color: rgba(251, 246, 236, 0.12);
}
body:not(:has(.page-hero)):not(:has(.hero)) #main { padding-top: var(--header-h); }
.site-header.is-stuck .site-header__bar { height: 64px; }

/* A panel is open: the bar needs a solid backing even at scroll position 0 */
.site-header.has-panel-open { background: var(--ocean-dark); border-bottom-color: rgba(251, 246, 236, 0.12); }

/* --------------------------------------------------------------------------
   3. DESKTOP NAV
   -------------------------------------------------------------------------- */
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-2); }
.nav__item { position: static; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 6px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after,
.nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__toggle[aria-expanded="true"] { color: var(--gold); }
.nav__link[aria-current="page"] { color: var(--gold); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Mega panel — full-bleed strip under the bar */
.panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--cream);
  border-top: 1px solid rgba(9, 31, 28, 0.08);
  box-shadow: 0 30px 60px -30px rgba(9, 31, 28, 0.55);
  /* The header is fixed, so a tall panel on a short laptop screen would
     otherwise run off the bottom with no way to reach the last links. */
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Deliberately no entrance animation. A navigation menu should appear the
   instant it is asked for — a fade makes it feel laggy — and any opacity-based
   entrance risks leaving the panel open but invisible if that animation never
   gets a frame. The caret rotation and link hovers carry the motion instead. */
.panel[hidden] { display: none; }

.panel__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.85fr;
  gap: var(--sp-7);
  padding-block: var(--sp-7);
}
.panel--compact .panel__inner { grid-template-columns: repeat(2, minmax(0, 320px)); }

.panel__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinnamon-dark);
  margin-bottom: var(--sp-3);
}
.panel__group ul { display: grid; gap: 2px; }
.panel__group a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease);
}
.panel__group a:hover { background: var(--sand); }
.panel__group strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ocean-dark);
}
.panel__group span { display: block; font-size: var(--step--1); color: var(--ink-muted); }

.panel__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--sand);
  border-radius: var(--radius-md);
}
.panel__aside-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--ocean-dark); }
/* A quieter second route out of the panel, under the primary button. */
.panel__aside-more { margin: var(--sp-3) 0 0; font-size: var(--step--1); }
.panel__aside p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   4. HEADER ACTIONS
   -------------------------------------------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.site-header__phone svg { width: 17px; height: 17px; color: var(--gold); }
.site-header__phone:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   5. BURGER
   -------------------------------------------------------------------------- */
.burger {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--cream);
}
.burger__box { display: block; width: 22px; height: 16px; position: relative; }
.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 7px; }
.burger__line:nth-child(3) { top: 14px; }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. MOBILE NAV — full-screen ocean-dark sheet
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  background: var(--ocean-dark);
  color: var(--cream);
  transform: translateY(-100%);
  transition: transform var(--t-base) var(--ease);
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { transform: none; }
.mobile-nav__scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--gutter) var(--sp-6); -webkit-overflow-scrolling: touch; }

.mobile-nav__item { border-bottom: 1px solid rgba(251, 246, 236, 0.12); }

/* Staggered entrance, driven by --i set in JS */
.mobile-nav.is-open .mobile-nav__item {
  animation: mnav-in 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
@keyframes mnav-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
  .mobile-nav.is-open .mobile-nav__item { animation: none; }
}

.mobile-nav__toggle,
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 60px;
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--cream);
  text-align: left;
}
.mobile-nav__toggle svg { width: 22px; height: 22px; flex: none; color: var(--gold); transition: transform var(--t-base) var(--ease); }
.mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav__toggle[aria-expanded="true"] { color: var(--gold); }

.mobile-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}
.mobile-nav__panel > div { overflow: hidden; }
.mobile-nav__item[data-open="true"] .mobile-nav__panel { grid-template-rows: 1fr; }

.mobile-nav__panel ul { padding-bottom: var(--sp-4); }
.mobile-nav__panel a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 46px;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 1px solid rgba(251, 246, 236, 0.16);
  color: var(--on-dark-soft);
  font-size: var(--step-0);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mobile-nav__panel a:hover { color: var(--gold); border-left-color: var(--gold); }
.mobile-nav__panel a span { font-size: var(--step--1); color: var(--on-dark-muted); white-space: nowrap; }
.mobile-nav__all { color: var(--gold) !important; font-weight: 600; }

.mobile-nav__foot {
  flex: none;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(251, 246, 236, 0.14);
  background: var(--ocean-deep);
}
.mobile-nav__contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.mobile-nav__contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  border: 1px solid rgba(251, 246, 236, 0.22);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--cream);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mobile-nav__contact a:hover { border-color: var(--gold); color: var(--gold); }
.mobile-nav__contact svg { width: 18px; height: 18px; color: var(--gold); }

.mobile-nav__scrim { position: fixed; inset: 0; z-index: 98; background: rgba(6, 22, 20, 0.6); }
.mobile-nav__scrim[hidden] { display: none; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ocean-dark);
  color: var(--on-dark-soft);
  overflow: hidden;
}
.site-footer__watermark {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 340px;
  height: 340px;
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
}
.site-footer__watermark svg { width: 100%; height: 100%; }

.site-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-block: var(--sp-9) var(--sp-8);
}

.site-footer__blurb { margin-block: var(--sp-5) var(--sp-5); max-width: 34ch; font-size: var(--step--1); }

.credentials { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.credentials dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 3px;
}
.credentials dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.socials { display: flex; gap: var(--sp-2); }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(251, 246, 236, 0.2);
  border-radius: 50%;
  color: var(--cream);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); background: rgba(224, 169, 76, 0.1); }
.socials svg { width: 18px; height: 18px; }

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: var(--sp-4);
}
.site-footer__col ul { display: grid; gap: 1px; }
.site-footer__col ul a {
  display: block;
  padding-block: 7px;
  font-size: var(--step--1);
  color: var(--on-dark-soft);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.site-footer__col ul a:hover { color: var(--gold); padding-left: 5px; }
.site-footer__more { color: var(--gold) !important; font-weight: 600; }

.site-footer__address { font-style: normal; font-size: var(--step--1); line-height: 1.75; margin-bottom: var(--sp-4); }
.site-footer__contact { display: grid; gap: 4px; margin-bottom: var(--sp-5); }
.site-footer__contact a { font-size: var(--step--1); color: var(--cream); transition: color var(--t-fast) var(--ease); }
.site-footer__contact a:hover { color: var(--gold); }

.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(251, 246, 236, 0.12);
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin: calc(var(--sp-2) * -1) 0; }
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;               /* WCAG 2.2 target size — 15px of text alone is not a target */
  color: var(--on-dark-muted);
  transition: color var(--t-fast) var(--ease);
}
.site-footer__legal a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   BRAND SPRITE
   The mark's outlines are declared once per page in a <symbol> and pulled in
   with <use> by the header logo, the footer logo and the footer watermark.
   The container must stay in the layout tree — display:none on it stops
   <use> resolving in some engines — so it is collapsed to nothing instead.
   -------------------------------------------------------------------------- */
.brand-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The watermark is one flat silhouette: the whole span is composited at 5%,
   so both shapes take the same ink and there is no seam where they meet. */
.site-footer__watermark { --logo-letter: currentColor; --logo-island: currentColor; }

/* --------------------------------------------------------------- language
   A quiet pill in the corner the page content never uses. It is replaced
   by GTranslate's own switcher once that loads, so the two never stack. */
.lang { position: fixed; z-index: 90; right: var(--sp-4); bottom: var(--sp-4); }
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--step--1); font-weight: 600;
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang__btn svg { width: 18px; height: 18px; flex: none; }
.lang__btn:hover { color: var(--ocean-dark); border-color: var(--leaf); }
@media (max-width: 640px) {
  /* Trim to the globe so it never crowds a phone screen. */
  .lang { right: var(--sp-3); bottom: var(--sp-3); }
  .lang__btn { padding: var(--sp-2); }
  .lang__btn span { display: none; }
}
@media print { .lang, .gtranslate_wrapper { display: none; } }
/* reCAPTCHA v3 pins its badge to the bottom-right, on top of the language
   button. Google allows hiding it provided the attribution appears in the
   form instead, which js/main.js adds. visibility rather than display: the
   widget still needs to be laid out to work. */
.grecaptcha-badge { visibility: hidden; }
.form-legal {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-muted);
}