/* ==========================================================================
   LIONS DON'T BOW — corrections layer
   Loaded AFTER each page's own <style>, so it wins.

   The automated re-theme maps colours by property role, which it can do
   reliably. What it cannot know is intent: that a gold *fill* needs near-black
   text on top, that two blocks are genuine alerts rather than decoration, and
   a handful of judgement calls about hierarchy. Those live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   Text-on-gold contrast is handled upstream: the re-theme walks each CSS rule
   and, wherever a rule paints itself gold, appends near-black text to that
   same rule. Doing it per rule beats a selector list, because `.cta-button` is
   a gold fill in one page family and a charcoal fill in another.

   What is left here is hover behaviour, which no rule-level pass can infer.
   -------------------------------------------------------------------------- */
/* !important on both halves keeps the pair atomic: the re-theme marks gold
   fills important, so a non-important hover here would change the background
   and lose the text colour, producing dark-on-gold-hover. */
.btn-primary:hover,
.cta:hover,
.cta-button:hover,
.score-btn:hover:not(:disabled),
.submit-btn:hover,
.form-submit:hover {
  background: var(--ldb-gold-hi) !important;
  color: #0a0a0b !important;
}

/* Outline buttons have no fill to fight, so they keep light type. */
.btn-ghost,
.btn-secondary,
.related-links a,
.blink,
.sbtn,
.more-btn {
  color: var(--ldb-text);
}
.btn-ghost:hover,
.btn-secondary:hover,
.related-links a:hover,
.blink:hover,
.sbtn:hover {
  background: var(--ldb-gold-wash);
  border-color: var(--ldb-gold);
  color: var(--ldb-gold);
}

/* --------------------------------------------------------------------------
   2. Real alerts stay red
   These two are the only blocks on the site that mean "danger", so they keep a
   true red rather than following the accent to gold.
   -------------------------------------------------------------------------- */
.crisis-box,
.warning-box,
.crisis {
  background: rgba(176, 32, 32, .12) !important;
  border-color: #b02020 !important;
  color: var(--ldb-text);
}
.crisis-label,
.warning-box strong {
  color: #ff6b6b !important;
}

/* --------------------------------------------------------------------------
   3. Hierarchy and legibility corrections
   -------------------------------------------------------------------------- */

/* Section eyebrows/labels sat at #bbb on white; on black they were the
   quietest thing on the page despite being structural. */
.connects-label,
.deep-label,
.share-label,
.q-sub,
.article-meta,
.post-meta,
.talk-meta,
.read-meta,
.essay-meta {
  color: var(--ldb-text-3);
}

/* Big numerals were pale-grey "ghost" digits on white. On black they vanished
   entirely, taking the question numbering with them. */
.qn,
.q-num,
.toc-num,
.section-num,
.stat-number,
.dn {
  color: var(--ldb-gold);
  opacity: .85;
}

/* Headings inside components that inherited a dark-on-dark colour. */
.q-head,
.card-title,
.rcard-title,
.talk-title,
.post-title,
.book-info h3,
.cta-box h3,
.related h3 {
  color: var(--ldb-text);
}

/* Prose links: gold, and underlined on hover so they read as links in body
   copy rather than as emphasis. */
article a:not([class]),
.post-body a:not([class]),
.talk-body a:not([class]),
.essay-body a:not([class]),
.deep a:not([class]),
.connects a:not([class]) {
  color: var(--ldb-gold);
  text-decoration: underline;
  text-decoration-color: var(--ldb-gold-line);
  text-underline-offset: 3px;
}
article a:not([class]):hover,
.post-body a:not([class]):hover {
  text-decoration-color: var(--ldb-gold);
}

/* --------------------------------------------------------------------------
   4. Surfaces that lost their edge
   Cards relied on a shadow against white. On black a shadow does nothing, so
   they need a border to separate from the page.
   -------------------------------------------------------------------------- */
.card,
.rcard,
.q-card,
.talk-card,
.book-card,
.who-card,
.cat-card,
.service-card,
.reco-card,
.fact-card,
.stat-box,
.section-card,
.tile {
  border: 1px solid var(--ldb-line);
}
.card:hover,
.rcard:hover,
.talk-card:hover,
.cat-card:hover,
.reco-card:hover {
  border-color: var(--ldb-gold-line);
}

/* --------------------------------------------------------------------------
   5. Mobile
   Several bespoke pages set fixed pixel widths or large fixed padding that
   overflowed narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cta-box,
  .pillar-block,
  .pull-quote,
  .comparison-box,
  .principle-block,
  .step-block,
  .trait-block,
  .truth-block,
  .excuse-block,
  .fear-block,
  .tactic-block,
  .play-block,
  .phase-block,
  .week-block,
  .practice-block,
  .action-block,
  .content-block,
  .cost-block,
  .message-block,
  .note-block,
  .intro-block,
  .impact-box,
  .example-box,
  .callout-box,
  .action-box,
  .note-box,
  .ritual-box {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .three-col,
  .who-grid,
  .services-grid,
  .stat-grid,
  .bros-grid,
  .cards,
  .cardgrid,
  .fog-grid,
  .comparison-block {
    grid-template-columns: 1fr !important;
  }

  .related-links,
  .btn-row,
  .cta-buttons,
  .cta-row,
  .ctas,
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .related-links a,
  .btn-row > *,
  .cta-buttons > *,
  .ctas > * {
    text-align: center;
  }
}

/* Anything that still insists on a fixed width gets contained rather than
   pushing the whole document sideways. */
table, pre { display: block; max-width: 100%; overflow-x: auto; }

/* --------------------------------------------------------------------------
   6. Form controls
   -------------------------------------------------------------------------- */
input, textarea, select {
  background: var(--ldb-surface);
  color: var(--ldb-text);
  border: 1px solid var(--ldb-line-strong);
  border-radius: var(--ldb-radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--ldb-text-4); }
input:focus, textarea:focus, select:focus { border-color: var(--ldb-gold); outline: none; }

/* --------------------------------------------------------------------------
   7. Page-level rhythm
   The per-page heroes varied from 40px to 110px of padding. Normalising them
   is what makes consecutive pages feel like one site.
   -------------------------------------------------------------------------- */
.hero,
.article-header,
.page-hero,
.post-hero,
.talk-hero,
.essay-hero,
.book-hero,
.result-hero,
.page-header,
.p-hero {
  padding-block: clamp(48px, 8vw, 88px);
  background: var(--ldb-surface);
  border-bottom: 1px solid var(--ldb-line);
}

.hero h1, .article-header h1, .page-hero h1,
.hero .phrase, .hero-title {
  text-wrap: balance;
}

/* The study pages set their headline in the accent colour end-to-end. Gold at
   that size is the single strongest thing the brand owns — keep it. */
.phrase span { color: var(--ldb-gold); }