/* ============================================================
 * user_ui — buttons
 * ============================================================
 *
 * Phase 7 Package B. Canonical button surface for the user-
 * facing site. Three reusable building blocks:
 *
 *   .btn          — primary call-to-action shape (height 56,
 *                   16px radius, gap 8). Always paired with a
 *                   variant that supplies the color: .primary,
 *                   .ghost, .steam, .discord, .steam-dark.
 *                   `.sm` modifier shrinks to height 44.
 *   .icon-btn     — circular 38px button for icon-only actions
 *                   (theme toggle, hamburger, dropdown opener).
 *                   Hover sets `--chip` as the background so it
 *                   reads identically in both themes.
 *   .steam-login  — the Steam OpenID sign-in button, rendered
 *                   as an <img> wrapped in an <a>. The image is
 *                   the brand asset; the wrapper only handles
 *                   the hit-target and the hover brightness.
 *
 * Class names are canonical per Architecture Rule §4 — section-
 * local CSS layers on top, NEVER replaces these. If a page
 * needs a button shape that isn't here, add a variant alongside
 * (e.g. `.btn.danger`); do NOT define a new namespaced wrapper.
 *
 * Rules below are mirrored verbatim from the landing mockup.
 * ============================================================ */

/* -------- Base button -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .02em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* -------- Size modifier -------- */
.btn.sm {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
  border-radius: 12px;
}

/* -------- Variants -------- */
.btn.primary {
  background: var(--orange);
  color: #fff;
}
.btn.primary:hover {
  background: var(--orange-2);
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--text);
}

.btn.steam {
  background: linear-gradient(180deg, #7C5BE6, #5B3FCC);
  color: #fff;
}
.btn.steam:hover {
  filter: brightness(1.05);
}

.btn.discord {
  background: #5865F2;
  color: #fff;
}
.btn.discord:hover {
  filter: brightness(1.05);
}

.btn.steam-dark {
  background: #1B2330;
  color: #fff;
  border: 1px solid var(--line);
}
/* Light theme bumps the dark-button background a touch lighter
 * so it still reads as "dark" against the lighter page bg. */
html[data-theme="light"] .btn.steam-dark {
  background: #2B3140;
}

/* -------- Inert state (social-links pass) -------- */
/* An <a class="btn"> carrying no `href` is not a link at all per the
   HTML spec, so it must stop advertising itself as one — every variant
   above is a full-strength brand fill and would read as a live button
   that silently does nothing when clicked. The Join Discord / Join
   Steam Group CTAs land in exactly that state whenever the admin has
   not configured that social URL yet, and the footer / header already
   dim their own inert rows the same way (`.foot-grid
   a[aria-disabled="true"]`, `nav.primary a[aria-disabled="true"]`).

   ELEMENT-QUALIFIED ON PURPOSE, and the `:hover` half is not
   redundant: the variants' own `.btn.discord:hover` above scores
   (0,3,0) and would re-apply its brightness lift over an unqualified
   (0,3,0) rule here, since it is declared later in this same file.
   `a.btn[...]:hover` scores (0,3,1) and outranks it. Anchors are the
   whole surface: a <button class="btn"> uses the real `disabled`
   attribute, which the browser already handles.

   THIS RULE DOES NOT REACH EVERY `.btn` — a page that re-declares a
   variant more deeply still wins, so check before assuming the inert
   state is free. `about.css` re-declares the whole button as
   `.team-cta .btn.discord` (0,3,0) incl. `cursor: pointer`, and
   `.team-cta .btn.discord:hover` scores (0,4,0) — `:hover` counts in
   the class column — so BOTH beat the rule here and about.css ships
   its own `.team-cta a.btn[aria-disabled="true"]` twin at
   (0,3,1)/(0,4,1). The landing page needs none: it uses the shared
   variants and adds no competing `cursor` or `:hover` rule. */
a.btn[aria-disabled="true"],
a.btn[aria-disabled="true"]:hover {
  opacity: .55;
  cursor: default;
  filter: none;
}

/* ============================================================
 * Icon button — circular 38px target for icon-only controls.
 * Hover state uses the theme chip color so it works in both
 * light and dark. SVG sizing is locked at 18px so all icons
 * sit on the same optical baseline.
 * ============================================================ */

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 0;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--chip);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
 * Steam-login button — Steam-branded sign-in asset. The img is
 * the brand mark (sourced as `steam-login-button.svg` under
 * img/user_ui/). The wrapper handles the hit-target only.
 * ============================================================ */

.steam-login {
  display: inline-flex;
  line-height: 0;
}
.steam-login img {
  height: 40px;
  width: auto;
  display: block;
  border-radius: 999px;
}
.steam-login:hover img {
  filter: brightness(1.08);
}

@media (max-width: 760px) {
  .steam-login img { height: 32px; }
}