/* Atlas Wild Experiences — LAYOUT ONLY.
 *
 * Every colour, size, font and radius comes from the design system at
 * ../design-system/system/variables.css, which the build copies in ahead of
 * this file. There is deliberately not one raw hex below — that rule is what
 * lets the editor's Tokens panel restyle all pages by rewriting one :root, and
 * what stops a hardcoded colour surviving a rebrand.
 *
 * The component tokens this file is allowed to add live in the :root block
 * below and carry the --awe- extension prefix, per the system's token contract.
 */
:root {
  --awe-head-h: 72px;
  --awe-card-min: 260px;
}

/* Sections are full-bleed colour fields butted against each other — the way
   the brand cheat sheet itself is composed. So a band paints its own ground
   edge to edge and only the text column is constrained. Two consecutive bands
   on the SAME ground would show a seam of doubled padding, so they collapse. */
.band + .band[data-surface="forest"],
.band + .band[data-surface="night"],
.band + .band[data-surface="sand"] { border-top: 0; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-gutter-phone);
}
.band { padding-block: var(--section-y-phone); }

@media (min-width: 768px) {
  .wrap { padding-inline: var(--container-gutter-tablet); }
  .band { padding-block: var(--section-y-tablet); }
}
@media (min-width: 1040px) {
  .wrap { padding-inline: var(--container-gutter-desktop); }
  .band { padding-block: var(--section-y-desktop); }
}

/* ── header ────────────────────────────────────────────────────────────── */
.head {
  border-bottom: var(--awe-rule);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}
/* The wordmark is artwork, not type — the kit ships no logo font. The lockup
   is 1200x566 with generous internal air, so it is sized by height and the
   header row is what holds the rhythm. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 0;
  flex: none;
}
/* The `notag` crop, because the tagline baked into the full lockup renders
   about two pixels tall at this size. It is set once, at readable size, in the
   footer instead. */
.logo .lockup-horizontal-notag {
  height: 46px;
  width: auto;
}
@media (min-width: 768px) {
  .logo .lockup-horizontal-notag { height: 54px; }
}
/* On a phone the five nav items wrapped onto three rows and the sticky header
   took 390px — half the viewport, above the fold, on every page. verify.py
   does not catch this: nothing overflows, the header is simply enormous.

   Below 768px the header is two rows: mark and Enquire on the first, the nav
   on the second as one line that scrolls sideways inside itself. The grid
   areas are explicit because the DOM order is logo → nav → button, and left
   to flow the button lands on a third row and stretches to full width. */
.head .wrap {
  min-height: var(--awe-head-h);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo cta" "nav nav";
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}
.head .logo { grid-area: logo; }
.head > .wrap > .btn { grid-area: cta; justify-self: end; }
.head nav {
  grid-area: nav;
  display: flex;
  gap: var(--space-6);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.head nav::-webkit-scrollbar { display: none; }
.head nav a { white-space: nowrap; }

@media (min-width: 768px) {
  .head .wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav cta";
    gap: var(--space-6);
    padding-block: 0;
  }
  .head nav { justify-content: center; overflow: visible; gap: var(--space-8); }
}
.head nav a {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: var(--awe-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  /* Navigation is not prose: the base link rule's underline turns a five-item
     nav into five ruled boxes. The current page gets the only rule here. */
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.head nav a:hover { color: var(--fg); border-bottom-color: var(--border); }
.head nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.head nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── header dropdown menus ───────────────────────────────────────────────────
   Modelled on the live site: each nav group with children owns a full-width
   panel that drops out of the black header — titled columns, and a feature
   image for Experiences.

   The closed state is the HTML `hidden` attribute, not a CSS hover trick. A
   panel ships hidden and is opened only by nav.js (hover, click or keyboard),
   so it reads as CLOSED in every context — a stale stylesheet, the editor's
   iframe, or no JavaScript at all — and can never render inline the way a
   hover-only `visibility` toggle can when its media query does not match.
   `.head .navmenu[hidden]` outranks the open rule on specificity, so a panel
   the script has not opened stays display:none. Below 1040px the full-width
   panel would overflow a tablet, so the script does not open it there; the top
   link goes to the hub page, which lists the same children. */
.head .navitem { display: flex; align-items: center; }
.head .navmenu { display: none; }

@keyframes navdrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 1040px) {
  .head .navitem.has-menu > a { display: inline-flex; align-items: center; }
  .head .navitem.has-menu > a::after {
    content: "";
    margin-left: 7px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.55;
    transition: transform var(--motion-fast) var(--ease-standard),
                opacity var(--motion-fast) var(--ease-standard);
  }
  .head .navitem.open > a::after { transform: rotate(180deg); opacity: 0.9; }

  .head .navmenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--awe-black);
    border-top: 1px solid
                color-mix(in oklab, var(--awe-sand), transparent 82%);
    box-shadow: 0 24px 44px
                color-mix(in oklab, var(--awe-black), transparent 52%);
    animation: navdrop var(--motion-fast) var(--ease-standard);
    z-index: 30;
  }
  .head .navmenu[hidden] { display: none; }

  .megawrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--container-gutter-desktop);
    display: flex;
    gap: var(--space-12);
    align-items: flex-start;
  }
  .megacol { display: flex; flex-direction: column; gap: var(--space-1); }
  .megacol-h {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--awe-sand);
    margin: 0 0 var(--space-3);
  }
  .head .megacol a {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-data);
    font-size: var(--text-sm);
    /* Menu links are primary, not secondary ink: --fg-2 on black reads as a
       disabled item. Cream is the light ink the kit draws on any dark ground. */
    color: var(--awe-cream);
    padding: var(--space-1) 0;
    border-bottom: 0;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content;
  }
  .head .megacol a:hover,
  .head .megacol a:focus-visible { color: var(--awe-orange); }
  .megafeat { margin-left: auto; width: 300px; flex: none; }
  .megafeat img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
  }
  .megafeat p {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--awe-cream);
    font-size: var(--text-base);
    line-height: 1.35;
    margin: var(--space-4) 0 0;
  }
}

/* ── hero and headings ─────────────────────────────────────────────────── */
.hero h1 {
  font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl));
  max-width: 16ch;
  margin-block: 0 var(--space-6);
}
.lede {
  font-size: var(--text-lg);
  color: var(--fg-2);
  max-width: var(--awe-measure);
  margin-block: 0;
}
.head-block { margin-bottom: var(--space-8); }
.eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

/* ── actions ───────────────────────────────────────────────────────────── */
.acts {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.btn {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background var(--motion-fast) var(--ease-standard);
}
.btn:hover { background: var(--accent-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The accent is budgeted at two per screen. A second CTA is a ruled outline. */
.btn-quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn-quiet:hover { background: var(--surface); }

/* ── blocks ────────────────────────────────────────────────────────────── */
.prose p {
  max-width: var(--awe-measure);
  margin-block: 0 var(--space-5);
}
.cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(var(--awe-card-min), 1fr));
}
.card {
  border: var(--awe-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  background: var(--surface);
}
.card h3 { font-size: var(--text-xl); margin-block: 0 var(--space-3); }
.card p { color: var(--fg-2); margin-block: 0; }
.card ul {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card ul li {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ── footer ────────────────────────────────────────────────────────────── */
footer {
  padding-block: var(--space-12);
}
.foot-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: var(--awe-rule);
}
.foot-top .lockup-vertical { height: 168px; width: auto; }
footer .cols { gap: var(--space-8); }
footer h4 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  margin-block: 0 var(--space-4);
}
/* Sitemap links, not prose links: the base rule's underline would draw a rule
   the full width of each column and turn the footer into a ruled ledger. */
footer .cols a {
  display: block;
  color: var(--fg-2);
  text-decoration: none;
  border: 0;
  margin-bottom: var(--space-2);
  transition: color var(--motion-fast) var(--ease-standard);
}
footer .cols a:hover { color: var(--accent); }
.legal {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--awe-rule);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-body);
  max-width: none;
}
/* Inline, and quiet. These run in a sentence with separators between them. */
.legal a {
  display: inline;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border);
}
.legal a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Wide content scrolls inside its own box; the page body never does.
   NOT `table` — every table chrome.py emits is already inside a .table-wrap
   that scrolls (13 of 13 in the build), and adding `display: block` here
   defeated the `width: 100%` in blocks.css: the frame stretched full width
   while the rows hugged the left, which reads as a broken table rather than a
   narrow one. The wrapper owns the scrolling; the table owns its width. */
pre { display: block; overflow-x: auto; max-width: 100%; }