/* GMC Community Locker -- example marketing site
   Palette mirrors the app's own dark/light themes (see gmc_community_locker.py's
   Qt palette setup) so the site and the tool feel like the same product. */

:root {
  --bg: #0d1117;
  --bg-alt: #11151c;
  --surface: #161b22;
  --surface-hover: #1c2229;
  --border: #262c36;
  --text: #e6edf3;
  --text-muted: #9aa4b2;
  --accent: #3aa0ff;
  --accent-strong: #1f8fff;
  --accent-soft: rgba(58, 160, 255, 0.12);
  --success: #3dd68c;
  --danger: #e5484d;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --max-width: 1120px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-hover: #eef2f7;
  --border: #dde3ea;
  --text: #141a21;
  --text-muted: #56626f;
  --accent: #1f8fff;
  --accent-strong: #0b73e0;
  --accent-soft: rgba(31, 143, 255, 0.1);
  --shadow: 0 8px 24px rgba(20, 26, 33, 0.08);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: #04101c;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-nav {
  padding: 8px 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* The nav-links dropdown's own copy of the Buy Now button is
   mobile-only (see the max-width:720px media query below) -- hidden
   here by default so it doesn't double up with the top bar's copy on
   a normal desktop-width nav. */
.nav-links .btn-nav {
  display: none;
}

.btn-block {
  width: 100%;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

:root[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.85);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}

.brand img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.brand .brand-accent {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.nav-links a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 88px 0 72px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%);
}

.hero-logo {
  /* width: 100% is load-bearing -- without it, a replaced element like
     <img> renders at its intrinsic pixel size (or max-width, whichever
     is smaller) regardless of a narrower parent, since nothing here
     forces it to shrink. Confirmed the hard way on a real 390px-wide
     mobile screenshot: the image overflowed straight past the
     viewport edge with just max-width set. */
  width: 100%;
  max-width: 420px;
  margin: 0 auto 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.hero p.lede {
  max-width: 620px;
  margin: 0 auto 36px;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Sections ---------- */

section {
  padding: 72px 0;
}

.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 12px;
}

.section-header p {
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Cards / grid ---------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Modifier for a 4-card grid whose last card ends up alone on its own
   row at the widths where this grid renders 3 columns -- plain CSS
   grid places it in column 1, left-aligned with empty space to the
   right, rather than centered. A flexbox-based fix was tried first,
   but flex-grow lets a card alone on its row (nothing to share space
   with) stretch further before hitting max-width than one of three
   cards splitting the same row does, producing mismatched card widths
   depending on row occupancy -- exactly the "same size" requirement
   this is meant to satisfy. Staying with grid keeps every card's width
   identical (grid column tracks are shared across every row by
   definition) and letting cards grow to fill wider viewports, both
   lost by the flexbox attempt.

   Confirmed via direct measurement that this grid only ever renders 2
   or 3 columns (never 4 -- the 1120px container cap doesn't leave
   room), and the 2-to-3-column transition happens at exactly 868px,
   so that's the exact point from which the last card needs explicitly
   centering into the middle column; below it, the last card already
   pairs naturally with the third card in a 2-column row. */
@media (min-width: 868px) {
  .grid-center-last > .card:last-child {
    grid-column: 2 / 3;
  }
}

.grid-center-last > .card {
  flex: 0 1 340px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}

/* Straight to a single column below this width, rather than auto-fit's
   usual 3 -> 2 -> 1 shrink -- these are numbered sequential steps, and
   a 2-up middle stage reads as 1+2 stacked oddly over a lone 3, not as
   a clean top-to-bottom sequence. */
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -16px;
  left: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #04101c;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h3 {
  margin: 10px 0 8px;
  font-size: 1.02rem;
}

.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
}

/* ---------- CTA banner ---------- */

.cta-banner {
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
}

.cta-banner h2 {
  margin: 0 0 12px;
  font-size: 1.7rem;
}

.cta-banner p {
  color: var(--text-muted);
  margin: 0 0 28px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 28px;
  background: var(--bg-alt);
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  margin-bottom: 28px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.92rem;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Page hero (non-home pages) ---------- */

.page-hero {
  padding: 56px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 12px;
}

.page-hero p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Documentation layout ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: 90px;
  border-right: 1px solid var(--border);
  padding-right: 24px;
}

.docs-toc h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.docs-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.docs-toc a:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.docs-toc a.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.docs-content h2 {
  font-size: 1.5rem;
  margin: 0 0 6px;
  padding-top: 8px;
}

.docs-content h2 .tag {
  font-size: 0.7rem;
  vertical-align: middle;
  margin-left: 10px;
}

.docs-content h3 {
  font-size: 1.08rem;
  margin: 28px 0 10px;
}

.docs-content h3:first-of-type {
  margin-top: 18px;
}

.docs-content > section {
  padding: 0 0 48px;
  scroll-margin-top: 90px;
}

.docs-content p {
  color: var(--text-muted);
}

.docs-content code {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.88em;
  font-family: "Cascadia Code", Consolas, monospace;
  color: var(--accent);
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
}

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  margin: 20px 0;
}

.note.warn {
  border-left-color: var(--danger);
  background: rgba(229, 72, 77, 0.1);
}

.cli-list {
  margin: 0 0 8px;
}

.cli-list dt {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.cli-list dt:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.cli-list dt code {
  margin-right: 2px;
}

.cli-list dd {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-question .chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
  color: var(--accent);
}

.faq-item.open .faq-question .chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer-inner {
  padding: 0 22px 20px;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.faq-category {
  margin: 40px 0 16px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.faq-category:first-of-type {
  margin-top: 0;
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-toc {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .docs-toc ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  /* At this width, "GMC Community Locker" plus the theme toggle and
     hamburger no longer fit on one line -- confirmed on a real 390px
     mobile screenshot, where "Community" wrapped onto its own line and
     crowded the header controls. Dropping "Community" (kept for
     desktop/tablet) is a common enough pattern for this size that it
     reads as intentional, not truncated. */
  .brand-community {
    display: none;
  }

  .brand {
    font-size: 0.95rem;
  }
}

@media (max-width: 960px) {
  .nav-links {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 4px;
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: 12px 14px;
  }

  .nav-toggle {
    display: flex;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Buy Now moves out of the cramped top bar and into the dropdown
     menu instead, alongside the other nav links. */
  .nav-right .btn-nav {
    display: none;
  }

  .nav-links .btn-nav {
    display: flex;
    margin-top: 8px;
  }
}