/* ==========================================================================
   THE WILD ORBIT — overrides

   Loaded last, after style.css → pages.css → templates.css.

   This is the only place a rule may change something those three already
   define. Putting such a rule in style.css does nothing, because style.css is
   the first layer, not the last — a mistake worth only making once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MEGA MENU — anchored to its trigger, deeper glass, fluid type
   Three changes to the panel pages.css defines, made here so that file stays
   an unmodified copy of the screens package.
   -------------------------------------------------------------------------- */

/*
 * 1. The panel spans the nav bar: from the first nav item across to the right
 *    edge of the Book Expedition button, the same run for every panel. Both
 *    ends are measured in script.js; the fallbacks keep it full-width inside
 *    the gutter if JavaScript never runs, which is the layout pages.css ships.
 */
.mega {
  left: var(--mega-left, 0);
  right: var(--mega-right, var(--gutter));
  padding-left: 0;
  padding-right: 0;
}
.mega__panel {
  margin-inline: 0;
  /* No longer centred in the viewport, so the container cap would only pull
     the panel away from its trigger. */
  max-width: none;
}

/*
 * 2. Deeper glass. The panel sits over photography, and at 26px the hero read
 *    through it strongly enough to compete with the links.
 *
 *    The background alpha does most of the work rather than the blur alone:
 *    backdrop-filter is unsupported or disabled often enough — older Firefox,
 *    reduced-transparency settings, some embedded browsers — that a panel
 *    relying on it for legibility becomes unreadable over a bright hero.
 *    The blur is the finish; the alpha is the floor.
 */
.mega__panel {
  background-color: rgba(4, 14, 13, 0.96);
  backdrop-filter: blur(42px) saturate(135%);
  -webkit-backdrop-filter: blur(42px) saturate(135%);
}

/* Where the browser composites it, a little less alpha lets the blur read —
   but only a little. Blur smears the backdrop, it does not darken it, so the
   alpha is what actually stops a bright hero competing with the links. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mega__panel { background-color: rgba(4, 14, 13, 0.93); }
}

/* Someone who has asked for less transparency gets a solid panel. */
@media (prefers-reduced-transparency: reduce) {
  .mega__panel,
  .mega-enc {
    background-color: rgb(6, 16, 15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/*
 * 3. Fluid type. Every size below is clamp(min, preferred, max) against the
 *    viewport, so the panel stays readable from a 1200px laptop up to a
 *    1920px desktop without a breakpoint for each step.
 */
.mega__rail-label {
  font-size: clamp(0.5625rem, 0.52rem + 0.12vw, 0.6875rem);
}
.mega__rail-item {
  font-size: clamp(0.75rem, 0.68rem + 0.22vw, 0.9375rem);
  min-height: 38px;
  padding-block: var(--space-2);
}
.mega__group-title {
  font-size: clamp(0.5625rem, 0.52rem + 0.12vw, 0.6875rem);
}
.mega__link-title {
  font-size: clamp(0.875rem, 0.78rem + 0.28vw, 1.125rem);
}
.mega__link-note {
  font-size: clamp(0.6875rem, 0.63rem + 0.18vw, 0.8125rem);
}
.mega__link { padding-block: calc(var(--space-2) * 0.75); }
.mega__panes { padding: clamp(1rem, 0.5rem + 1.2vw, 2rem); }
.mega__featured-title {
  font-size: clamp(0.9375rem, 0.82rem + 0.34vw, 1.25rem);
}
.mega__featured-text {
  font-size: clamp(0.6875rem, 0.63rem + 0.18vw, 0.8125rem);
}

/* The three columns shrink with the type rather than staying fixed, so an
   anchored panel opened from the last trigger still has room for all of it. */
.mega__panel {
  grid-template-columns:
    clamp(140px, 11vw, 210px)
    minmax(0, 1fr)
    clamp(210px, 17vw, 320px);
}

/* --------------------------------------------------------------------------
   An anchored panel opened from the last trigger has far less room than one
   opened from the first. Rather than refuse to anchor — which is what a large
   minimum width amounts to — the panel adapts to the width it is given.

   A container query rather than a viewport media query, because what matters
   is the panel's own width, which depends on which trigger opened it, not on
   how wide the window is.
   -------------------------------------------------------------------------- */
.mega { container-type: inline-size; }

/* Below this the featured card and the rail have nowhere useful to sit. */
@container (max-width: 860px) {
  .mega__panel { grid-template-columns: clamp(130px, 16cqi, 190px) minmax(0, 1fr); }
  .mega__featured { display: none; }
}

@container (max-width: 620px) {
  .mega__panel { grid-template-columns: minmax(0, 1fr); }
  .mega__rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-right: 0;
    border-bottom: 1px solid rgba(174, 124, 53, 0.28);
  }
  .mega__rail-label { display: none; }
  .mega__rail-item { width: auto; }
  .mega__pane { grid-template-columns: minmax(0, 1fr); }
}

/* The rail's own translucency compounds with the panel's; on a bright hero
   that was enough to make the tab labels waver. */
.mega__rail { background-color: rgba(6, 21, 16, 0.85); }

/* --------------------------------------------------------------------------
   MOBILE FIXES — from the audit
   Each of these was measured on 360/375/390px viewports, not guessed at.
   -------------------------------------------------------------------------- */

/*
 * 1. The legal list is a flex row that never wrapped, so on a 375px phone it
 *    ran to 473px — about a hundred pixels past the edge, on every page. The
 *    page does not scroll sideways only because something upstream clips it,
 *    which meant the last items were simply unreachable rather than visibly
 *    broken. Wrap it, and close the gap up at this size.
 */
.legal-list {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

@media (max-width: 640px) {
  .legal-list { gap: var(--space-3) var(--space-6); }

  /*
   * 2. Footer links were only as tappable as their text was wide — the "X"
   *    in Connect gave a 9px-wide target. Making them block-level hands the
   *    whole column width to the finger, and the padding brings the height up
   *    to the 44px guideline.
   */
  /* Footer links are inline-flex from the screens package, so a plain
     `display:block` here lost to it and the target stayed as narrow as the
     word — nine pixels for the X in Connect. `flex` is the block-level form of
     the same box, so the layout is unchanged and the row fills the column. */
  .site-footer .footer-col a {
    display: flex;
    padding-block: 7px;
  }
  .legal-list a {
    display: block;
    padding-block: 7px;
  }
  .footer-col li + li { margin-top: 0; }

  /*
   * 3. The brand lockup measured 38px tall and the search button 24px wide.
   */
  .site-header .brand,
  .site-footer .brand {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
  }
  .icon-btn { min-width: 44px; min-height: 44px; }

  /* Phone and email on the contact page were 21px tall — the two links on the
     site most likely to be tapped on a phone, and the hardest to hit. */
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * 4. Type floors. The badge clamp bottoms out at 10px and the fineprint at
   *    9px, which is below what is comfortable on a phone — these raise only
   *    the small-screen end of each scale, so the desktop design is untouched.
   */
  :root {
    --fs-badge: 0.6875rem;      /* was 10px here */
    --fs-fineprint: 0.6875rem;  /* was 9.2px here */
  }

  /* Form labels are not decoration; they need to be readable. */
  /* Class-on-element selectors in the component sheets outrank a bare
     `form label`, so these carry the same weight to win honestly rather than
     reaching for !important. */
  .enquiry__label,
  .enquiry form label,
  .signup-form label,
  .site-main form label,
  form label { font-size: 0.75rem; }
}

/* ==========================================================================
   ENCYCLOPEDIA-STYLE MEGA PANEL  —  Archives, Wildlife

   One component, two sections: an eyebrow, a two-column list of
   icon/title/description, and a featured card. Sundarban Tales and Expeditions
   keep the rail-and-panes panel until their own designs arrive, so everything
   here is scoped under the variant classes and cannot leak sideways.

   Colour is the Wildlife panel's, not its own. The reference image specified
   #E9AE2A / #081913 / #08120B, but the navigation already has a colour system
   — --mega-hairline, --panel-shadow, --gold-tint, --color-accent and the
   greens in .mega__panel — and a second, slightly different set of greens and
   golds sitting next to it in the same bar would read as a bug rather than a
   design. Every colour below is either a token or the exact value the
   Wildlife panel already uses; the ground and the blur go further and share
   its selectors outright, so the two cannot drift apart.

   Layout, dimensions and structure are unchanged.
   ========================================================================== */
.mega--archives,
.mega--wildlife,
.mega--tales {
  /*
   * The same run as every other panel: the first nav item across to the right
   * edge of the Book Expedition button. script.js already measures both ends
   * into --mega-left / --mega-right for the rail-and-panes panels, so this is
   * reuse rather than a second measuring pass.
   *
   * It was briefly the full container content box, which starts at the brand —
   * about 250px further left than HOME — and made the panel read as oversized.
   * The nav run is the honest anchor: the panel belongs to the bar above it.
   *
   * The offsets also settle the width, which matters: .mega carries
   * `container-type: inline-size`, and inline-size containment makes width
   * independent of contents — `width: auto` with no offsets collapsed this
   * wrapper to zero and the panel only showed because it overflowed it.
   */
  left: var(--mega-left, 0);
  right: var(--mega-right, var(--gutter));
  width: auto;
  padding: 12px 0 32px;
}

.mega-enc {
  display: flex;
  width: 100%;                 /* the wrapper's offsets hold the span */
  padding: 20px 20px 20px 36px;
  /*
   * `stretch`, not the `center` the comp specified. The categories are shorter
   * than the featured card, so centring them left dead space above and below
   * the list — the panel looked padded top and bottom for no reason. Stretched,
   * the column owns the full height and the grid below spends it on the gaps.
   */
  align-items: stretch;
  gap: 32px;

  /*
   * Glass, not a filled rectangle.
   *
   * The same colour as .mega__panel — rgb(4, 14, 13) — at a much lower alpha.
   * It was 0.93, and the reason that read as solid is the layer underneath:
   * .mega-scrim sits at z-index 80 between the hero and the panel, already
   * taking the page down by 55%. Two dimming layers stacked left about 3% of
   * the hero showing (measured: pixel sd 0.86, which is a flat fill).
   *
   * The scrim is what protects readability, so the panel itself does not need
   * to. At 0.60 over the scrim roughly a sixth of the hero comes through —
   * enough for the sunset to move under the panel, not enough to compete with
   * the type. Blur comes down with it: 42px was smearing a backdrop nobody
   * could see, and the softer 26px is what actually reads as glass.
   */
  background-color: rgba(4, 14, 13, 0.60);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);

  border: 1px solid rgba(174, 124, 53, 0.42);   /* as .mega__panel */
  box-shadow: var(--panel-shadow);
  color: var(--color-text-soft);
}

/* Without compositing support the alpha is the only thing standing between the
   type and a bright hero, so it goes back up. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mega-enc { background-color: rgba(4, 14, 13, 0.93); }
}

/* --- left: the categories --- */
.mega-enc__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mega-enc__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 237, 0.42);   /* as .mega__group-title */
}

.mega-enc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Column-major, as the design reads: the first column runs Islands down to
     Watch Towers and the second picks up at Forest Blocks. Row-major would
     interleave them across the two columns instead. --enc-rows is the row
     count the renderer worked out from how many categories there actually
     are, so adding one in the menu editor still balances. */
  grid-template-rows: repeat(var(--enc-rows, 4), auto);
  grid-auto-flow: column;
  /*
   * The row gap here is a floor, not the final spacing: the grid takes the
   * height left over after the eyebrow and `space-between` distributes it
   * across the rows. So the same rule both closes the gap at the bottom of the
   * panel and opens the items out — the space is spent rather than left over.
   */
  gap: 18px 28px;
  flex: 1 1 auto;
  align-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-enc__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px;
  margin: -8px;
  transition: background-color var(--transition);
}

.mega-enc__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(174, 124, 53, 0.42);   /* the panel's own border gold */
  background: transparent;
  color: var(--color-accent);
  transition: background-color var(--transition), border-color var(--transition);
}

.mega-enc__icon svg.lucide { width: 20px; height: 20px; }

.mega-enc__text { min-width: 0; }

.mega-enc__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--color-cream);
  transition: color var(--transition);
}

.mega-enc__note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-muted);
}

/* Restrained: a tint, the title warming, the icon border coming forward. */
.mega-enc__item:hover,
.mega-enc__item:focus-visible {
  background-color: rgba(241, 173, 78, 0.07);   /* as .mega__link:hover */
}
.mega-enc__item:hover .mega-enc__title,
.mega-enc__item:focus-visible .mega-enc__title { color: var(--color-accent); }
.mega-enc__item:hover .mega-enc__icon,
.mega-enc__item:focus-visible .mega-enc__icon {
  background-color: rgba(241, 173, 78, 0.12);   /* as the selected rail tab */
}
.mega-enc__item:focus-visible { outline: 1px solid var(--color-gold-light); outline-offset: 2px; }

/* --- right: the featured entry ---
   280px is the floor the design pinned, but the panel is now as wide as the
   site's content box rather than a fixed 1020, and holding the card at its
   minimum there left a conspicuous hole between the second column and the
   card. Letting it take a share of the extra keeps the two halves balanced at
   any width without ever going below the pinned size. */
/* Stretches with the panel; 396px is the floor that sets the panel's height
   when the category list is shorter than it. */
.mega-enc__featured {
  flex: 0 0 clamp(280px, 23%, 360px);
  display: flex;
  min-height: 396px;
}

.mega-enc__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  padding: 18px;
  border: 1px solid var(--mega-hairline);      /* as .mega__featured's divider */
  background-color: rgba(6, 21, 16, 0.4);      /* as .mega__featured */
}
.mega-enc__card[hidden] { display: none; }

.mega-enc__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);   /* as .mega__featured-label */
}

.mega-enc__media {
  display: block;
  margin-top: 14px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #0b120f;
}
.mega-enc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mega-enc__card-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--color-cream);
}

.mega-enc__card-text {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-muted);
}

.mega-enc__cta {
  display: flex;
  width: 216px;
  height: 52px;
  margin-top: auto;
  justify-content: center;
  align-items: center;
  gap: 8px;

  /* Wildlife's featured link is bare gold text, so there is no button to copy
     the fill from. These are still its colours: the panel's border gold, the
     stylesheet's own --gold-tint, and the accent the link uses. */
  border: 1px solid rgba(174, 124, 53, 0.42);
  background-color: var(--gold-tint);

  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: background-color var(--transition), color var(--transition);
}
.mega-enc__cta svg.lucide {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}
.mega-enc__cta:hover,
.mega-enc__cta:focus-visible {
  background-color: rgba(241, 173, 78, 0.12);   /* as the selected rail tab */
  color: var(--color-white);
}
.mega-enc__cta:hover svg.lucide,
.mega-enc__cta:focus-visible svg.lucide { transform: translateX(4px); }

/* --- responsive ---
   Container queries, not media queries: the panel is as wide as the nav run
   between HOME and the CTA, and that depends on how long the menu labels are,
   not on the viewport. A 1366px laptop and a 1920px desktop can hand this
   panel very different widths, so it has to answer to its own.

   .mega already carries `container-type: inline-size`, which is what the
   rail-and-panes panel uses for the same reason. */
@container (max-width: 1000px) {
  .mega-enc { padding-left: 32px; gap: 28px; }
  .mega-enc__grid { gap: 16px 24px; }
}

/* Two columns need roughly 280px each beside a 280px card; below this the
   columns get too narrow and the six-word descriptions start wrapping to three
   lines, so the list goes to one column and keeps the card. */
@container (max-width: 940px) {
  .mega-enc__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* Narrower still — and on the stacked fallback — the card moves below. The
   panel must never be the reason the page scrolls sideways. */
@container (max-width: 640px) {
  .mega-enc {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }
  /* Stacked, there is no leftover height to distribute and no card height to
     match, so the list goes back to its natural rhythm. */
  .mega-enc__grid { flex: 0 0 auto; align-content: start; }
  .mega-enc__featured { flex: 0 0 auto; min-height: 0; }
  .mega-enc__card { width: 100%; flex: 0 0 auto; }
  .mega-enc__cta { width: 100%; margin-top: 20px; }
}

/* ==========================================================================
   Expedition Package Tier Mega Menu
   ========================================================================== */
.mega--expeditions {
  left: var(--mega-left, 0);
  right: var(--mega-right, 0);
  width: auto;
}

.mega-expeditions {
  background-color: rgba(4, 14, 13, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(241, 173, 78, 0.2);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  padding: 1.5rem;
}

.mega-expeditions__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #f1ad4e);
  margin-bottom: 1rem;
}

.mega-expeditions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@container (max-width: 800px) {
  .mega-expeditions__grid {
    grid-template-columns: 1fr;
  }
}

.mega-tier {
  display: flex;
  flex-direction: column;
  background: rgba(14, 32, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.15rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.mega-tier:hover {
  border-color: rgba(241, 173, 78, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.mega-tier__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.mega-tier__icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 6px;
  background: rgba(241, 173, 78, 0.12);
  border: 1px solid rgba(241, 173, 78, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent, #f1ad4e);
  flex-shrink: 0;
}

.mega-tier__icon-wrap svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mega-tier__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.mega-tier__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white, #fff);
  margin: 0;
  line-height: 1.25;
}

.mega-tier__desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.mega-tier__preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(4, 14, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mega-tier__preview:hover {
  border-color: rgba(241, 173, 78, 0.3);
  background: rgba(241, 173, 78, 0.06);
}

.mega-tier__media {
  width: 4rem;
  height: 2.75rem;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.mega-tier__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mega-tier__preview:hover .mega-tier__media img {
  transform: scale(1.08);
}

.mega-tier__preview-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega-tier__preview-label {
  font-size: 0.6rem;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #f1ad4e);
}

.mega-tier__preview-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-white, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-tier__preview-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.mega-tier__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(241, 173, 78, 0.1);
  border: 1px solid rgba(241, 173, 78, 0.25);
  border-radius: 6px;
  color: var(--color-accent, #f1ad4e);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mega-tier__btn:hover {
  background: var(--color-accent, #f1ad4e);
  border-color: var(--color-accent, #f1ad4e);
  color: #040e0d;
}

.mega-tier__btn svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.2s ease;
}

.mega-tier__btn:hover svg {
  transform: translateX(3px);
}