/* ==========================================================================
   ARKADE LOUNGE — Layout
   The global shell: header, primary navigation, mobile drawer, hero, footer.
   Depends on tokens.css, base.css and components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  /* Transparent over the hero, then solid once the page scrolls. The class
     is toggled by shell.js rather than by a scroll-linked animation, so the
     work happens once per threshold crossing instead of every frame. */
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}

.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface-void) 88%, transparent);
  border-block-end-color: var(--line-soft);
  backdrop-filter: blur(12px);
}

/* When the drawer is open the header must stay legible above the overlay. */
.site-header.is-open {
  background: var(--surface-void);
  border-block-end-color: var(--line-soft);
}

.site-header__inner {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Pages without a hero need the content pushed clear of the fixed header. */
.has-offset-header { padding-block-start: var(--header-h); }

/* --------------------------------------------------------------------------
   BRAND LOCKUP
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  margin-inline-end: auto;
  /* The mark itself is 36px, which left the home link under the 44px minimum
     touch target. The tap area is raised here rather than by enlarging the
     logo, so the header proportions are unchanged. */
  min-block-size: 2.75rem;
}

.brand__mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* The wordmark is hidden on the narrowest phones so the header never wraps;
   the mark alone still identifies the brand and the link keeps its label. */
@media (max-width: 24rem) {
  .brand__name { display: none; }
}

/* --------------------------------------------------------------------------
   DESKTOP NAVIGATION
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   PRIMARY NAVIGATION

   Five destinations and a "More" menu. There were nine, which needed 1450px
   of an 1190px bar and wrapped onto two lines at every width — that was the
   jumbled look, and no amount of styling fixes too many items.

   The treatment is deliberately esports rather than corporate: uppercase,
   widely tracked, and marked with a hard magenta rule rather than a soft
   underline. ARKADE red does the pointing throughout — it is the colour that
   says "this one", while purple stays the colour of the furniture.
   -------------------------------------------------------------------------- */

.nav { display: none; }

@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
}

.nav__link {
  /* A two-word entry ("Gift Cards") must not fold into two lines and push
     the underline off its own text. */
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  block-size: 2.75rem;
  padding-inline: var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

/* The marker. A short magenta bar that grows from nothing on hover and sits
   full width on the current page — the same gesture a scoreboard uses. */
.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0.45rem;
  inset-inline-start: var(--sp-4);
  inline-size: 0;
  block-size: 2px;
  background: var(--alert);
  transition: inline-size var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--text); }

.nav__link:hover::after,
.nav__link:focus-visible::after {
  inline-size: calc(100% - var(--sp-4) * 2);
}

.nav__link[aria-current='page'] {
  color: var(--text);
}

.nav__link[aria-current='page']::after {
  inline-size: calc(100% - var(--sp-4) * 2);
  /* Solid ARKADE red on the page you are on, and a faint glow so it reads as
     lit rather than merely coloured. */
  background: var(--brand-magenta);
  box-shadow: 0 0 10px rgba(202, 35, 53, 0.55);
}

.nav__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   THE MORE MENU
   -------------------------------------------------------------------------- */

.nav__more { position: relative; }

.nav__chev {
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__more-button[aria-expanded='true'] .nav__chev { transform: rotate(180deg); }
.nav__more-button[aria-expanded='true'] { color: var(--text); }

.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-end: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  min-inline-size: 12rem;
  padding: var(--sp-2);
  background: var(--surface-high);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.nav__menu[hidden] { display: none; }

.nav__menu-link {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--sp-3);
  border-inline-start: 2px solid transparent;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.nav__menu-link:hover,
.nav__menu-link:focus-visible {
  background: var(--alert-quiet);
  border-inline-start-color: var(--brand-magenta);
  color: var(--text);
}

.nav__menu-link[aria-current='page'] {
  border-inline-start-color: var(--brand-magenta);
  color: var(--text);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* The account link is desktop-only; on mobile it lives inside the drawer. */
.header__account { display: none; }

@media (min-width: 960px) {
  .header__account { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   Built as an intentional mobile surface rather than a shrunken desktop nav:
   full-height, large touch targets, and BOOK NOW kept permanently visible in
   the header rather than buried behind the toggle.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex-shrink: 0;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  inline-size: 1.15rem;
  block-size: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-instant) var(--ease-out);
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; inset-block-start: -6px; }
.nav-toggle__bars::after  { position: absolute; inset-block-start: 6px; }

/* Morph to an X while open. */
[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded='true'] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--gutter);
  /* The iOS home indicator overlaps the last item without this. */
  padding-block-end: max(var(--sp-6), env(safe-area-inset-bottom));
  background: var(--surface-void);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-move),
              visibility 0s linear var(--dur-base);
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-move),
              visibility 0s;
}

@media (min-width: 960px) {
  .drawer { display: none; }
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 3.5rem;
  padding-inline: var(--sp-2);
  font-size: 1.125rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  border-block-end: 1px solid var(--line-soft);
}

.drawer__link[aria-current='page'] { color: var(--purple-300); }

.drawer__foot {
  margin-block-start: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Locks the page behind the drawer without the scroll position jumping. */
body.is-locked {
  position: fixed;
  inline-size: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* svh rather than vh: on mobile the browser chrome would otherwise push
     the call to action below the fold on first paint. */
  min-block-size: 100svh;
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-10);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.hero__media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Two overlays: a vertical wash so the header and lower edge stay legible,
   and a purple grade from the leading edge so the brand colour is present
   in the composition without a flat purple panel. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(19, 18, 24, 0.92) 0%,
      rgba(19, 18, 24, 0.55) 35%,
      rgba(19, 18, 24, 0.75) 70%,
      var(--surface) 100%),
    linear-gradient(100deg,
      rgba(83, 38, 114, 0.55) 0%,
      rgba(83, 38, 114, 0.12) 45%,
      transparent 70%);
}

.hero__inner {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.hero__content { max-inline-size: 46rem; }

.hero__title { margin-block: var(--sp-4) var(--sp-5); }

/* The slogan. The separators are decorative, so they are marked aria-hidden
   in the markup and a screen reader hears three plain words. */
.hero__slogan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
}

.hero__slogan span:nth-child(even) { color: var(--purple-400); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-8);
}

@media (max-width: 30rem) {
  /* Full-width stacked buttons on a phone: two side-by-side uppercase CTAs
     truncate badly at this width. */
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { inline-size: 100%; }
}

/* THE SAME GROUP UNDER A PAGE HERO. Take Over's hero carries two buttons in
   .page-hero__actions, and nothing styled it: the two anchors sat as inline
   text with no gap, and on a phone the second landed hard against the first
   with its cut corner overlapping. Same rules as .hero__actions. */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}

@media (max-width: 30rem) {
  .page-hero__actions { flex-direction: column; }
  .page-hero__actions .btn { inline-size: 100%; }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   PAGE HERO
   The compact opener used by every page that is not the homepage. It clears
   the fixed header itself, so these pages do not also need
   .has-offset-header.
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-8);
  background:
    radial-gradient(90% 120% at 15% 0%,
      rgba(83, 38, 114, 0.5) 0%, transparent 60%),
    var(--surface-void);
  border-block-end: 1px solid var(--line-soft);
}

.page-hero__title {
  font-size: var(--fs-h1);
  margin-block: var(--sp-3) var(--sp-5);
}

/* --------------------------------------------------------------------------
   FINAL CALL TO ACTION
   Shared by every page, which is why it lives here rather than in a single
   page's stylesheet.
   -------------------------------------------------------------------------- */

.final-cta {
  padding-block: var(--section-y);
  text-align: center;
  background:
    radial-gradient(80% 140% at 50% 100%,
      rgba(83, 38, 114, 0.55) 0%, transparent 62%),
    var(--surface-void);
  border-block-start: 1px solid var(--line-soft);
}

.final-cta__title {
  font-size: var(--fs-h1);
  margin-block: var(--sp-3) var(--sp-7);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-void);
  border-block-start: 1px solid var(--line-soft);
  padding-block: var(--sp-9) var(--sp-6);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.footer__brand { max-inline-size: 24rem; }

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  margin-block-end: var(--sp-4);
}

.footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__list a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
}

/* Footer links are ~18px tall as plain text, which is fine to click with a
   mouse and awkward to hit with a thumb. The target is enlarged only where
   the pointer is actually coarse, so the desktop footer keeps its tight
   rhythm instead of being stretched for a problem it does not have. */
@media (pointer: coarse) {
  .footer__list { gap: 0; }

  .footer__list a {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}

.footer__list a:hover {
  color: var(--text);
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* The legal links live outside .footer__list, so they need the same coarse
   pointer treatment rather than inheriting it. */
@media (pointer: coarse) {
  .footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}

address {
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Small footer utilities, defined here rather than as inline styles so the
   markup stays clean and the content security policy needs no exception. */
.footer__blurb {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm);
}

.footer__legal { --gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   DRAWER GROUPING
   The phone menu keeps every destination, grouped under headings, because
   there is room to scroll and hiding things behind a second tap helps nobody.
   -------------------------------------------------------------------------- */

.drawer__heading {
  display: block;
  margin-block: var(--sp-5) var(--sp-2);
  color: var(--alert-text);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.drawer__heading:first-of-type { margin-block-start: 0; }

/* The current page gets the ARKADE red edge here too, so the marker means the
   same thing on a phone as it does on a desktop. */
.drawer__link[aria-current='page'] {
  border-inline-start: 3px solid var(--brand-magenta);
  padding-inline-start: var(--sp-3);
  color: var(--text);
}