/* Naval Letter Builder page — theme bindings for the shared chapter
   system (chapters.css). Loaded AFTER chapters.css so these win. */

/* USN navy + gold palette */
body[data-theme="nlb"] {
  --nlb-ink:        #00081a;   /* deep night-ops navy */
  --nlb-ink-soft:   #06122a;
  --nlb-navy:       #003087;   /* USN brand navy */
  --nlb-navy-soft:  #1c4ba8;
  --nlb-gold:       #c5a572;   /* USN brand gold */
  --nlb-gold-soft:  #d9bd8e;
  --nlb-text-strong: #f3f6fb;
  --nlb-text-soft:   rgba(225, 232, 244, 0.82);
  --nlb-text-muted:  rgba(190, 200, 218, 0.58);

  --chapter-bg:           var(--nlb-ink);
  --chapter-accent:       var(--nlb-gold);
  --chapter-accent-soft:  var(--nlb-gold-soft);
  --chapter-text-strong:  var(--nlb-text-strong);
  --chapter-text-soft:    var(--nlb-text-soft);
  --chapter-text-muted:   var(--nlb-text-muted);
}

body[data-theme="nlb"] .rk-footer {
  background: var(--nlb-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Per-chapter tonal walk — ink → midnight blue through the page */
body[data-theme="nlb"] #chapter-secnav {
  background: linear-gradient(180deg, #00081a 0%, #051129 100%);
}
body[data-theme="nlb"] #chapter-wizard {
  background: linear-gradient(180deg, #051129 0%, #07172f 100%);
}
body[data-theme="nlb"] #chapter-ssic {
  background: linear-gradient(180deg, #07172f 0%, #091c36 100%);
}
body[data-theme="nlb"] #chapter-classification {
  background: linear-gradient(180deg, #091c36 0%, #0b213d 100%);
}
body[data-theme="nlb"] #chapter-ai {
  background: linear-gradient(180deg, #0b213d 0%, #0d2643 100%);
}
body[data-theme="nlb"] #chapter-ipad {
  background: linear-gradient(180deg, #0d2643 0%, #0f2b4a 100%);
}
body[data-theme="nlb"] #chapter-compliance {
  background: linear-gradient(180deg, #0f2b4a 0%, #112f51 100%);
}
body[data-theme="nlb"] #chapter-privacy {
  background: linear-gradient(180deg, #112f51 0%, #133458 100%);
}
body[data-theme="nlb"] #chapter-gallery {
  background: linear-gradient(180deg, #133458 0%, #163a5f 100%);
}

/* iPad chapter media — 3:4 portrait, contained */
body[data-theme="nlb"] .rk-chapter__media--ipad {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body[data-theme="nlb"] .rk-chapter__media--ipad img {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 580px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
}

/* Hero gold accents */
body[data-theme="nlb"] .rk-chapter-hero__backdrop {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(197, 165, 114, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 48, 135, 0.42), transparent 70%);
}

/* Coming-soon hero badge (App Store not yet live) */
body[data-theme="nlb"] .rk-chapter-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(197, 165, 114, 0.45);
  background: rgba(197, 165, 114, 0.08);
  color: var(--nlb-gold);
  font-family: 'Black Ops One', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}

/* Hero secondary link (e.g. "See it in motion ↓") */
body[data-theme="nlb"] .rk-chapter-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(197, 165, 114, 0.40);
  color: var(--nlb-text-strong);
  font-family: var(--chapter-body-font);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body[data-theme="nlb"] .rk-chapter-hero__secondary:hover {
  background: rgba(197, 165, 114, 0.12);
  border-color: rgba(197, 165, 114, 0.65);
  transform: translateY(-1px);
}

/* Tighten the rhythm same as 2Q — 85svh per chapter, less full padding */
body[data-theme="nlb"] .rk-chapter-hero {
  min-height: 85svh;
  padding: clamp(60px, 7vh, 100px) clamp(24px, 6vw, 96px) clamp(32px, 5vh, 64px);
}
body[data-theme="nlb"] .rk-chapter {
  min-height: 85svh;
}
body[data-theme="nlb"] .rk-chapter--full {
  min-height: auto;
  padding: clamp(60px, 8vh, 110px) clamp(24px, 6vw, 96px);
}
body[data-theme="nlb"] .rk-chapter__copy {
  padding: clamp(48px, 6vh, 96px) clamp(32px, 5vw, 80px);
}

/* Headlines — Cal Sans is good, just balance the wrap */
body[data-theme="nlb"] .rk-chapter-title {
  text-wrap: balance;
  text-wrap: pretty;
}

/* Lift kicker readability */
body[data-theme="nlb"] .rk-chapter-kicker {
  font-size: clamp(12px, 1.05vw, 14px);
  opacity: 0.92;
  letter-spacing: 0.22em;
}

/* Constrain full-chapter titles so they don't span screen-wide */
body[data-theme="nlb"] .rk-chapter--full .rk-chapter-title {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Multi-device gallery — per-track heading + size variants */
body[data-theme="nlb"] .rk-gallery-track-head {
  text-align: center;
  margin: clamp(40px, 5vw, 72px) 0 clamp(20px, 2vw, 32px);
  padding: 0 clamp(24px, 6vw, 96px);
}
body[data-theme="nlb"] .rk-gallery-track-head__kicker {
  font-family: 'Black Ops One', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--chapter-accent);
  font-size: clamp(11px, 1.1vw, 13px);
}
body[data-theme="nlb"] .rk-gallery-track-head__label {
  display: block;
  margin-top: 6px;
  color: var(--chapter-text-soft);
  font-size: clamp(13px, 1.2vw, 15px);
}
body[data-theme="nlb"] .rk-chapter-gallery__item--ipad {
  width: clamp(280px, 34vw, 440px);
  border-radius: 22px;
}

/* Compliance card grid on the full-bleed chapter */
body[data-theme="nlb"] .rk-nlb-compliance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(36px, 5vh, 60px) auto 0;
  max-width: 1100px;
  width: 100%;
}
body[data-theme="nlb"] .rk-nlb-compliance__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--nlb-gold);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: left;
}
body[data-theme="nlb"] .rk-nlb-compliance__title {
  font-family: 'Black Ops One', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nlb-gold);
  font-size: 12px;
  margin: 0 0 6px;
}
body[data-theme="nlb"] .rk-nlb-compliance__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--chapter-text-soft);
  margin: 0;
}

/* Hero icon: tile treatment for the Naval Letter Builder app icon.
   The hero img keeps the rk-chapter-hero__wordmark class so it
   inherits position + animation, but the tile styles overpower the
   default wordmark width/filter so it reads as an Apple home-screen
   icon — rounded square + navy/gold edge glow + drop shadow.
   NOTE: The page header uses the standard Government Solutions logo
   (RoxyKovu seal + wordmark), not an NLB-specific tile — header rules
   live in government-solutions.css, which is loaded above this file. */
body[data-theme="nlb"] .rk-chapter-hero__wordmark.rk-hero-tile {
  width: clamp(140px, 22vw, 200px) !important;
  height: auto;
  border-radius: 32px;
  display: block;
  margin: 0 auto clamp(20px, 3vw, 36px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 48, 135, 0.5),
    0 0 0 1px rgba(197, 165, 114, 0.18);
  filter: none;
}

/* ─────────────────────────────────────────────
   Match the Government Solutions visual family
   — share the tracker map body backdrop so the
   NLB page reads as part of the same suite. The
   chapter backgrounds sit on top via z-stacking. */
body[data-theme="nlb"] {
  background:
    linear-gradient(180deg, rgba(0, 8, 26, 0.45) 0%, rgba(0, 8, 26, 0) 35%, rgba(0, 8, 26, 0) 70%, rgba(0, 8, 26, 0.55) 100%),
    url('/assets/images/site/tracker-map.webp'),
    linear-gradient(180deg, var(--nlb-ink) 0%, #061129 50%, #07172f 100%);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* Make chapter backgrounds slightly translucent so the tracker map
   shows through subtly — same trick gov solutions uses. */
body[data-theme="nlb"] .rk-chapter-hero,
body[data-theme="nlb"] .rk-chapter,
body[data-theme="nlb"] .rk-chapter--full {
  background-color: rgba(0, 8, 26, 0.78);
  background-blend-mode: multiply;
}
body[data-theme="nlb"] .rk-chapter-gallery {
  background: rgba(15, 43, 74, 0.82);
}

/* Header: match the gov solutions dark navy treatment so the NLB tile
   stands out against a unified backdrop instead of fading into chapter
   tonal variations. */
body[data-theme="nlb"] .rk-header {
  --rk-header-text-strong: #eef0f4;
  --rk-header-text-soft: rgba(200, 214, 229, 0.78);
  --rk-header-text-muted: rgba(160, 175, 195, 0.6);
  background-color: rgba(8, 14, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tighten the closer — match the cleaner gov solutions CTA panel rhythm */
body[data-theme="nlb"] .rk-chapter-closer {
  background: linear-gradient(135deg, rgba(14, 30, 54, 0.95), rgba(20, 36, 62, 0.9));
  padding: clamp(60px, 8vh, 110px) clamp(24px, 6vw, 96px);
}

/* The "Get in touch" closer button — gold border, matches gov solutions
   primary actions when the user reaches the end of the scroll. */
body[data-theme="nlb"] .rk-chapter-closer .rk-button.primary {
  background: var(--nlb-gold);
  color: var(--nlb-ink);
  border: none;
  padding: 14px 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-theme="nlb"] .rk-chapter-closer .rk-button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(197, 165, 114, 0.35);
}