/* ============================================================================
   KrakenTheMeta — /cards + /decks brand overlay.
   Cinzel (curvy display) titles + Sora body to match the landing + dashboard.
   Loaded AFTER each page's own CSS so it wins. Deliberately light-touch:
   typography + a few clean accent touches; page layout + JS are untouched, and
   the card-search color icons are intentionally NOT restyled.
   ============================================================================ */

/* ---- Cinzel gradient hero titles (identical on both pages) ---- */
.cp-title,
.dk-title,
.dk-title .search-span {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.16;
}
.cp-title,
.dk-title { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin-bottom: 24px; }

/* Cyan→blue brand gradient on the title text (cards page had a plain white title). */
.cp-title,
.dk-title .search-span {
  background: linear-gradient(135deg, #a2e7ee 0%, #7bc0e8 50%, #4196e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Section heading ("Recent Decks") also in Cinzel. */
.dk-section-header h2 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.4px;
}

/* ---- Sora body on the interactive bits for a clean, consistent feel ---- */
.cp-search-input, .dk-search-input,
.cp-adv-btn, .dk-format-select {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Unify the accent to the brand cyan (#a2e7ee) ---- */
.cp-search-box:focus-within,
.dk-search-box:focus-within {
  border-color: #a2e7ee;
  box-shadow: 0 0 0 3px rgba(162, 231, 238, 0.15);
}
.cp-adv-btn:hover {
  background: rgba(162, 231, 238, 0.12);
  border-color: #a2e7ee;
  color: #a2e7ee;
}
.dk-format-select:hover,
.dk-format-select:focus { border-color: #a2e7ee; }

/* ============================================================================
   Free-tool pages brand overlay (2026-07-03): Budget Swaps (.bs-), Deck
   Analyzer (.an-), Odds Calculator (.od-), and the mini-games (h1.logo).
   Same recipe as above: Cinzel gradient titles + Sora body, layout untouched.
   ============================================================================ */
.bs-wrap, .an-wrap, .od-wrap {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}
.bs-hero h1, .an-hero h1, .od-hero h1,
h1.logo {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.16;
  background: linear-gradient(135deg, #a2e7ee 0%, #7bc0e8 50%, #4196e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bs-hero h1, .an-hero h1, .od-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
/* section subtitles inside the tools pick up the display face too */
.bs-tool h2, .an-tool h2, .od-tool h2,
.bs-results h2, .an-results h2 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.4px;
}
/* the site header is fixed (~85px) — the tools' original 24px top padding hid
   the first title line behind it; clear it properly */
.bs-wrap, .an-wrap, .od-wrap { padding-top: 115px; }