/*
 * Site header / navbar — the SINGLE source of truth for these styles.
 *
 * Used by both:
 *   - the React app, via a <link> in client/index.html (rendered by
 *     client/src/components/Header.jsx)
 *   - the standalone static pages (privacy, terms, how-it-works, logout),
 *     which have no React and drive the account control with
 *     /site-header.js
 *
 * So it lives in public/ rather than src/: Vite copies public/ through
 * untouched, letting plain HTML pages link it directly.
 *
 * Every colour is written as `var(--token, fallback)`. Inside the React app
 * the tokens come from src/index.css; on the static pages (which only load
 * legal.css, a different and older palette) the fallback applies. The
 * fallbacks are the current design-system values, so both render identically.
 */

.header {
  position: relative; /* stable containing block for absolutely-positioned children */
  background-color: var(--bg-deep, oklch(13% 0.045 266));
  border-bottom: 1px solid var(--border-soft, oklch(40% 0.06 266 / 0.22));
  padding: 0 20px;
}

.header-content {
  max-width: 1100px;
  min-height: 56px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo:visited,
.logo:hover,
.logo:active {
  text-decoration: none;
}

.logo-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.logo-subtitle {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text, oklch(97% 0.012 80));
  letter-spacing: 0;
  /* legal.css uppercases its logo text; keep the app's casing everywhere. */
  text-transform: none;
}

.logo-accent {
  color: var(--gold, oklch(82% 0.15 76));
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  /* Pushes the nav flush against the header's right edge, with the sign-in
     button / account menu (now a sibling here, not nav's own last child)
     following right after — replacing the old two-child
     `justify-content: space-between` on .header-content. */
  margin-left: auto;
}

/* The link fills the header's height so its active underline sits flush on
   the header's bottom border. */
.nav-link {
  display: block;
  padding: 17px 0 15px;
  border-bottom: 2px solid transparent;
  color: var(--text-faint, oklch(56% 0.015 90));
  text-decoration: none;
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover {
  color: var(--gold, oklch(82% 0.15 76));
}

/* Marks the current page — set by Header.jsx in the app and hard-coded on
   the static pages. */
.nav-link[aria-current='page'] {
  color: var(--gold, oklch(82% 0.15 76));
  border-bottom-color: var(--gold, oklch(82% 0.15 76));
}

/* ---- Riot Sign-On: sign-in button / account menu ---- */

.account-signin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md, 5px);
  background: var(--riot-brand-red, #d13639);
  color: #fff;
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.account-signin:hover {
  background: var(--riot-brand-red-hover, #e8474a);
  box-shadow: 0 6px 16px oklch(55% 0.18 25 / 0.35);
}

.account-signin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.account-signin-mark {
  display: block;
}

.account-menu {
  position: relative;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--border-soft, oklch(40% 0.06 266 / 0.22));
  border-radius: var(--radius-md, 5px);
  background: var(--bg-panel-2, oklch(22% 0.055 268));
  color: var(--text, oklch(97% 0.012 80));
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.account-trigger:hover {
  border-color: var(--gold, oklch(82% 0.15 76));
}

.account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-tag {
  color: var(--text-faint, oklch(56% 0.015 90));
}

.account-caret {
  font-size: 10px;
  color: var(--text-faint, oklch(56% 0.015 90));
  transition: transform 0.2s ease;
}

.account-caret-open {
  transform: rotate(180deg);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  background: var(--bg-panel-2, oklch(22% 0.055 268));
  border: 1px solid var(--border, oklch(40% 0.06 266 / 0.55));
  border-radius: var(--radius-md, 5px);
  box-shadow: 0 14px 32px oklch(8% 0.03 266 / 0.55);
  z-index: 60;
  animation: fadeSlideUp 0.18s ease-out both;
}

.account-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md, 5px);
  color: var(--text-dim, oklch(72% 0.02 90));
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-item-button {
  border: none;
  background: none;
  cursor: pointer;
}

.account-item:hover {
  background: var(--bg-panel-3, oklch(26% 0.055 268));
  color: var(--gold, oklch(82% 0.15 76));
}

/* ---- Riot Games fist logomark on the sign-in button ----
   Sized by height alone so the mark's own aspect ratio (~1.13:1) is preserved.
   See client/src/components/RiotMark.jsx. */
.riot-mark {
  display: block;
  width: auto;
}

/* Shown in the logo's place when the asset isn't present, keeping the button
   readable as "Sign in with Riot". */
.riot-mark-fallback {
  white-space: nowrap;
}

/* Redeclared here (it also lives in src/index.css) so the dropdown animates on
   the static pages, which never load the app bundle. Identical definition, so
   whichever wins is the same. */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Phones: the logo and the sign-in button / account menu share the first
   row — level with each other, logo left and the account control right —
   and the nav links become one swipeable row beneath, rather than
   everything wrapping into a tall multi-line block. */
@media (max-width: 720px) {
  .header {
    padding: 0 14px;
  }

  .header-content {
    flex-wrap: wrap;
    gap: 0;
    min-height: 0;
    padding-top: 10px;
  }

  /* `order` puts these on row 1 (with the logo) and pushes the nav to row
     2: flex-wrap otherwise packs items strictly in source order, which
     would put the account control on its own row below the nav. */
  .header-content > .account-signin,
  .header-content > .account-menu {
    order: 1;
    margin-left: auto;
    flex-shrink: 0;
  }

  .nav {
    order: 2;
    width: 100%;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed to the screen edges so the row scrolls under the header padding. */
    margin: 0 -14px;
    padding: 0 14px;
    width: calc(100% + 28px);
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    padding: 10px 0 9px;
  }

  .account-name {
    max-width: 90px;
  }
}