/* ==========================================================================
   Pearl Island Tours — Layout
   Container, section rhythm, grid helpers, header, footer.
   ========================================================================== */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + (var(--container-gutter) * 2));
}

.container--wide {
  max-width: calc(var(--container-max) + 200px + (var(--container-gutter) * 2));
}

/* ---------- Section rhythm ---------- */
.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--lg {
  padding-block: var(--section-space-lg);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--alt {
  background-color: var(--color-surface-alt);
}

.section--muted {
  background-color: var(--color-surface-muted);
}

.section--inverse {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
  color: var(--color-text-inverse);
}

/* Hairline divider used between two white sections */
.section--ruled {
  border-top: 1px solid var(--color-border);
}

/* ---------- Section heading block ---------- */
.section-head {
  max-width: var(--measure-wide);
  margin-bottom: var(--space-3xl);
}

.section-head__title {
  margin-bottom: var(--space-md);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Split heading: title left, supporting copy + link right */
.section-head--split {
  display: grid;
  gap: var(--space-lg) var(--space-3xl);
  max-width: none;
  align-items: end;
}

@media (min-width: 62rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .section-head--split .section-head__title {
    margin-bottom: 0;
  }
}

/* ---------- Grid helpers ---------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 40rem) and (max-width: 61.999rem) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Full-bleed escape hatch for breakout bands */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ==========================================================================
   Header

   The header sits in normal document flow, directly above the page content,
   with a solid surface background. It never overlays the hero.

   Desktop (>= 64em)
     row 1  .header-utility  dark green contact strip
     row 2  .header-brand    language selector | centred logo | WhatsApp + CTA
     row 3  .header-nav      centred horizontal navigation

   Mobile (< 64em)
     row 1  .header-brand    centred stack: logo, language selector, hamburger
     the navigation becomes a drawer, opened by the hamburger.

   Scrolling is handled by .quick-bar, a separate fixed element further down
   this file. Collapsing the header in place would change its flow height and
   jerk the page content upwards, so the header is left alone and the compact
   bar slides over the top of it instead.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Utility strip ----------------------------------------------------------- */

.header-utility {
  background-color: var(--palette-forest-900);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-xs);
}

.header-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 38px;
  flex-wrap: wrap;
}

.header-utility__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.header-utility__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.header-utility__item .icon {
  color: var(--palette-gold-400);
}

.header-utility a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.header-utility a:hover {
  color: var(--color-text-inverse);
}

/* Between 64em and 75em the strip would wrap onto two lines, so the
   reassurance line steps aside and the contact details stay on one row. */
@media (max-width: 74.999em) {
  .header-utility__inner > .header-utility__item {
    display: none;
  }
}

@media (max-width: 63.999em) {
  .header-utility {
    display: none;
  }
}

/* Brand row --------------------------------------------------------------- */

.header-brand__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.header-brand__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Brand logo --------------------------------------------------------------
   One emblem in three lockups, drawn inline from the sprite so it stays crisp
   at any size and costs no extra request. The square badge takes over from the
   horizontal lockup wherever the wordmark would fall below a readable size. */

.brand-logo {
  display: block;
  line-height: 0;
}

.brand-logo__wide,
.brand-logo__badge {
  display: block;
  width: auto;
}

.brand-logo__badge {
  display: none;
}

.header-brand__logo {
  justify-self: center;
}

.header-brand__logo .brand-logo__wide {
  height: clamp(2.75rem, 1.95rem + 1.6vw, 3.75rem);
}

.header-brand__logo .brand-logo__badge {
  height: 3rem;
}

/* On the narrowest phones the wordmark would set below its legible size, so
   the header falls back to the badge as well. */
@media (max-width: 22.5em) {
  .header-brand__logo .brand-logo__wide  { display: none; }
  .header-brand__logo .brand-logo__badge { display: block; }
}

/* WhatsApp block in the brand row ----------------------------------------- */

.header-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
}

.header-whatsapp__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--palette-forest-50);
  color: var(--color-brand);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.header-whatsapp:hover .header-whatsapp__icon {
  background-color: var(--palette-forest-100);
}

.header-whatsapp__text {
  display: block;
  line-height: 1.2;
}

.header-whatsapp__label {
  display: block;
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.header-whatsapp__number {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--palette-forest-800);
}

/* Language selector ------------------------------------------------------- */

.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
}

.lang {
  position: relative;
}

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.lang__toggle:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-tint);
}

.lang__caret {
  color: var(--color-text-subtle);
  transform: rotate(90deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.lang__toggle[aria-expanded="true"] .lang__caret {
  transform: rotate(-90deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 0;
  z-index: var(--z-overlay);
  min-width: 11rem;
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lang__menu--end {
  left: auto;
  right: 0;
}

.lang__menu[hidden] {
  display: none;
}

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.lang__option:hover {
  background-color: var(--color-surface-tint);
}

.lang__option.is-selected {
  font-weight: var(--font-weight-semibold);
  color: var(--palette-forest-800);
}

/* Navigation row ---------------------------------------------------------- */

.header-nav {
  border-top: 1px solid var(--color-border);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-md), 1.1vw + 0.3rem, var(--space-xl));
}

.primary-nav__link {
  position: relative;
  display: block;
  padding: var(--space-md) 2px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}

.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
  color: var(--palette-forest-800);
}

.primary-nav__link:hover::after,
.primary-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Hamburger --------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--palette-forest-800);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex: none;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Desktop ----------------------------------------------------------------- */

@media (min-width: 64em) {
  .primary-nav__cta {
    display: none;
  }
}

/* Mobile and tablet ------------------------------------------------------- */

@media (max-width: 63.999em) {

  /* Requirement: a centred vertical stack of logo, language selector and
     hamburger while the page is at the top. */
  .header-brand__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
  }

  .header-brand__inner > .header-brand__logo { order: 1; }
  .header-brand__inner > .lang               { order: 2; }
  .header-brand__inner > .nav-toggle         { order: 3; display: inline-flex; }

  .header-brand__end {
    display: none;
  }

  .header-nav {
    border-top: 0;
  }

  /* The drawer is pinned below whichever bar is currently on screen; JS keeps
     --drawer-top in step with the header or the compact bar. */
  .primary-nav {
    position: fixed;
    top: var(--drawer-top, 0px);
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    max-height: calc(100vh - var(--drawer-top, 0px));
    overflow-y: auto;
    padding: var(--space-lg) var(--container-gutter) var(--space-xl);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base) var(--ease-out);
  }

  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .primary-nav__list li + li {
    border-top: 1px solid var(--color-border);
  }

  .primary-nav__link {
    padding: var(--space-md) 0;
    font-size: var(--text-sm);
  }

  .primary-nav__link::after {
    display: none;
  }

  .primary-nav__cta {
    margin-top: var(--space-lg);
    display: grid;
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   Compact bar

   Fixed, hidden by default, slides down once the header has scrolled out of
   view and slides back up when the page returns to the top.
   ========================================================================== */

.quick-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base) var(--ease-out);
}

.quick-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.quick-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--quickbar-height);
}

/* The compact bar carries the badge at every width: it has to share one short
   row with the nav, the language selector and the call to action. */
.quick-bar__logo {
  flex: none;
}

.quick-bar__logo .brand-logo__badge {
  display: block;
  height: 2.25rem;
}

.quick-bar__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-sm), 0.9vw, var(--space-lg));
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-bar__nav a {
  display: block;
  padding: var(--space-xs) 2px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.quick-bar__nav a:hover,
.quick-bar__nav a[aria-current="page"] {
  color: var(--palette-forest-800);
}

.quick-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

@media (max-width: 63.999em) {
  .quick-bar .quick-bar__nav,
  .quick-bar .quick-bar__cta {
    display: none;
  }

  .quick-bar .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 29.999em) {
  .quick-bar .lang__name,
  .quick-bar .nav-toggle [data-nav-toggle-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Visitors who prefer reduced motion get the same states without the slide. */
@media (prefers-reduced-motion: reduce) {
  .quick-bar,
  .primary-nav {
    transition: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--palette-forest-950);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
}

/* The footer carries the reversed lockup, so it needs no pearl tile behind it. */
.footer-logo .brand-logo__wide {
  height: 3.5rem;
}

.site-footer a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--palette-gold-400);
}

.footer-main {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-4xl) var(--space-3xl);
}

@media (min-width: 48rem) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .footer-main {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
}

.footer-brand__text {
  margin-top: var(--space-lg);
  max-width: 34ch;
  line-height: var(--leading-normal);
}

.footer-heading {
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--palette-gold-400);
}

.footer-list {
  display: grid;
  gap: var(--space-sm);
}

.footer-contact__item {
  display: flex;
  gap: var(--space-sm);
  line-height: var(--leading-normal);
}

.footer-contact__item .icon {
  flex: none;
  margin-top: 3px;
  color: var(--palette-gold-400);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.footer-social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse-muted);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.footer-social__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--palette-gold-400);
  color: var(--palette-gold-400);
}

.footer-bottom {
  border-top: 1px solid var(--color-border-inverse);
  padding-block: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-xs);
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}