/* flj-layout.css — unified gutters, section rhythm, page alignment */

:root {
  --flj-content-max: 1280px;
  --flj-gutter: 48px;
  --flj-section-y: clamp(64px, 8vw, 96px);
  --flj-nav-h: 64px;
  /* Stable full-viewport height (address-bar safe); --flj-vh-px set by flj-viewport.js */
  --flj-vh: 100vh;
  --flj-vh: 100svh;
  --flj-vh: 100dvh;
  --flj-fill-h: calc(var(--flj-vh) - var(--flj-nav-h));
}

/* Compact nav (signed-in + auth pages) */
body:has(.main-nav--auth),
body:has(.main-nav--auth-page),
body.flj-auth-page {
  --flj-nav-h: 56px;
}

@media (max-width: 1100px) {
  :root { --flj-gutter: 32px; }
}

@media (max-width: 768px) {
  :root { --flj-gutter: 24px; }
}

/* ── Content width & gutters ── */
.section-wrap {
  max-width: var(--flj-content-max);
  margin-inline: auto;
  padding-inline: var(--flj-gutter);
  box-sizing: border-box;
}

.page-body,
.hub-body {
  max-width: var(--flj-content-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--flj-gutter) !important;
  box-sizing: border-box;
}

/* ── Hero pages: nav clearance lives on the hero, not site-main ── */
.site-main:has(> .hub-hero-shell:first-child),
.site-main:has(> #hero:first-child),
.site-main:has(> .pricing-scene > .hub-hero-shell:first-child) {
  padding-top: 0;
}

.hub-hero-shell > .hub-hero {
  padding-top: calc(var(--flj-nav-h) + 20px);
  padding-inline: var(--flj-gutter);
}

.hub-hero-shell .hub-stats {
  padding-inline: var(--flj-gutter);
}

/* ── Rank strip below hero ── */
.hub-hero-shell + .user-rank-strip {
  margin: -12px auto 24px;
  position: relative;
  z-index: 2;
  max-width: min(860px, calc(100% - var(--flj-gutter) * 2));
  width: calc(100% - var(--flj-gutter) * 2);
  box-sizing: border-box;
}

/* ── Section headings ── */
.section-head--spaced {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.section-head--left {
  text-align: left;
}

.section-head--left .section-eyebrow {
  justify-content: flex-start;
}

.section-head--left .section-title,
.section-head--left .section-sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.section-sub--narrow {
  max-width: 520px;
}

.section-sub--medium {
  max-width: 560px;
}

.rank-cards-heading .section-sub {
  max-width: 560px;
  margin-inline: auto;
}

/* ── Rank cards block ── */
.rank-cards-section {
  padding-block: var(--flj-section-y);
}

.rank-cards-heading {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ── Home: consistent vertical rhythm ── */
body.flj-home #magnet-section,
body.flj-home #learning-path-section,
body.flj-home #tools-section,
body.flj-home #quiz-section,
body.flj-home #structured-promo,
body.flj-home .rank-cards-section {
  padding-block: var(--flj-section-y);
}

body.flj-home #cta-section {
  padding: clamp(72px, 10vw, 110px) var(--flj-gutter);
}

body.flj-home #structured-promo .promo-inner {
  max-width: var(--flj-content-max);
  margin-inline: auto;
  padding-inline: var(--flj-gutter);
  box-sizing: border-box;
}

body.flj-home #tools-section .tools-grid {
  margin-top: clamp(32px, 4vw, 48px);
}

body.flj-home #quiz-section .quiz-wrap {
  margin-top: clamp(32px, 4vw, 48px);
}

/* ── Flash messages ── */
.flj-flash-stack {
  max-width: var(--flj-content-max);
  margin: 0 auto;
  padding: 12px var(--flj-gutter) 0;
  box-sizing: border-box;
}

/* ── CTA utilities ── */
.cta-accent-mint {
  color: var(--mint, #00c9a7);
}

.cta-sub-spaced {
  margin-bottom: 44px;
}