/*
Theme Name: DonorBureau
Theme URI: https://donorbureau.com/
Author: DonorBureau
Description: Pixel-accurate WordPress theme for the DonorBureau marketing site. Navy + gold brand system, Source Serif 4 / Source Sans 3 / IBM Plex Mono. Layout, spacing, and color are a 1:1 port of the approved design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: donorbureau
*/

/* ============================================================
   IMPORTANT — how styling works in this theme.
   The approved design carries nearly all of its styling as inline
   `style` attributes on the markup, so the rendered result is byte
   for byte what was signed off. This stylesheet therefore only holds
   what an inline style cannot express:
     1. design tokens (custom properties)
     2. element resets
     3. :hover / :focus / :active states
     4. @keyframes
     5. media queries
   Do not move inline styles in here — it will change rendering order
   and break the 1:1 match.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Tokens: color ---------- */
:root {
  --db-navy-900: #0E2240;
  --db-navy-800: #143158;
  --db-navy-700: #1B3A66;
  --db-navy-600: #204A80;
  --db-navy-500: #2B5C9C;
  --db-navy-300: #7FA0C6;
  --db-navy-100: #DCE6F2;
  --db-navy-50:  #EEF3FA;

  --db-gold-700: #B97E0E;
  --db-gold-600: #D9971A;
  --db-gold-500: #F0B020;
  --db-gold-400: #F4C24F;
  --db-gold-200: #FBE3A6;
  --db-gold-100: #FDF3D9;

  --db-ink:      #14202E;
  --db-gray-800: #2C3947;
  --db-gray-600: #51616F;
  --db-gray-500: #6B7A88;
  --db-gray-400: #97A4B0;
  --db-gray-300: #C5CDD6;
  --db-gray-200: #E0E5EB;
  --db-gray-100: #EFF2F5;
  --db-gray-50:  #F7F9FB;
  --db-white:    #FFFFFF;

  --db-success-600: #1F8A53;
  --db-success-500: #27A463;
  --db-success-100: #E2F4EA;
  --db-warning-600: #C9831A;
  --db-warning-500: #E89F1C;
  --db-warning-100: #FCF1DA;
  --db-danger-600:  #C3402E;
  --db-danger-500:  #DC5340;
  --db-danger-100:  #FBE7E3;
  --db-info-600:    #204A80;
  --db-info-100:    #EEF3FA;

  --color-primary:        var(--db-navy-700);
  --color-primary-hover:  var(--db-navy-800);
  --color-primary-active: var(--db-navy-900);
  --color-accent:         var(--db-gold-500);
  --color-accent-hover:   var(--db-gold-600);
  --color-accent-active:  var(--db-gold-700);

  --text-strong:  var(--db-ink);
  --text-body:    var(--db-gray-800);
  --text-muted:   var(--db-gray-600);
  --text-subtle:  var(--db-gray-500);
  --text-on-navy: var(--db-white);
  --text-on-gold: var(--db-navy-900);
  --text-link:    var(--db-navy-600);

  --surface-page:      var(--db-gray-50);
  --surface-card:      var(--db-white);
  --surface-sunken:    var(--db-gray-100);
  --surface-navy:      var(--db-navy-700);
  --surface-navy-deep: var(--db-navy-900);
  --surface-gold-tint: var(--db-gold-100);
  --surface-navy-tint: var(--db-navy-50);

  --border-subtle:  var(--db-gray-200);
  --border-default: var(--db-gray-300);
  --border-strong:  var(--db-gray-400);
  --border-focus:   var(--db-navy-600);

  --focus-ring: 0 0 0 3px rgba(32, 74, 128, 0.30);
}

/* ---------- Tokens: type ---------- */
:root {
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-display-2xl: 64px;
  --text-display-xl:  52px;
  --text-display-lg:  42px;
  --text-h1: 34px;
  --text-h2: 27px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 11px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;
}

/* ---------- Tokens: space, radius, shadow, motion ---------- */
:root {
  --space-0: 0;   --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick: 2px;

  --shadow-xs: 0 1px 2px rgba(14, 34, 64, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 34, 64, 0.08), 0 1px 2px rgba(14, 34, 64, 0.05);
  --shadow-md: 0 4px 12px rgba(14, 34, 64, 0.10), 0 2px 4px rgba(14, 34, 64, 0.06);
  --shadow-lg: 0 12px 28px rgba(14, 34, 64, 0.14), 0 4px 10px rgba(14, 34, 64, 0.07);
  --shadow-xl: 0 24px 56px rgba(14, 34, 64, 0.18);
  --shadow-focus: var(--focus-ring);

  --container-max: 1200px;
  --container-narrow: 760px;
  --sidebar-width: 248px;
  --header-height: 64px;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- Base element styles ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

.db-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.db-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.db-chevron::after {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  margin-left: 0.4em;
}

/* Screen-reader text (WP standard) */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100000;
  background: #fff; color: var(--db-navy-700); padding: 10px 16px;
  border-radius: 8px; box-shadow: var(--shadow-lg); font-weight: 600;
  clip: auto; clip-path: none; width: auto; height: auto;
}

/* ============================================================
   Buttons — port of DonorBureauDesignSystem_7dc961.Button.
   Base geometry is emitted inline by db_button(); the hover /
   active / focus states live here because inline styles can't
   express them.
   ============================================================ */
.db-btn { -webkit-appearance: none; appearance: none; }
.db-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.db-btn:not([disabled]):active { transform: translateY(1px); }

.db-btn--primary:not([disabled]):hover  { background: var(--color-primary-hover); }
.db-btn--primary:not([disabled]):active { background: var(--color-primary-active); }
.db-btn--accent:not([disabled]):hover   { background: var(--color-accent-hover); }
.db-btn--accent:not([disabled]):active  { background: var(--color-accent-active); }
.db-btn--secondary:not([disabled]):hover  { background: var(--db-navy-50); }
.db-btn--secondary:not([disabled]):active { background: var(--db-navy-100); }
.db-btn--ghost:not([disabled]):hover    { background: var(--db-navy-50); }
.db-btn--ghost:not([disabled]):active   { background: var(--db-navy-100); }
.db-btn--danger:not([disabled]):hover   { background: var(--db-danger-600); }
.db-btn--danger:not([disabled]):active  { background: var(--db-danger-600); }
a:hover .db-btn { text-decoration: none; }

/* Form controls — port of Input / Select focus behaviour */
.db-field__box:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.db-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

/* ============================================================
   Header / navigation
   ============================================================ */
.db-nav-sub:hover { background: #F3F6F9; text-decoration: none; }
.db-nav-dd__panel { display: none; }
.db-nav-dd:hover .db-nav-dd__panel,
.db-nav-dd:focus-within .db-nav-dd__panel { display: block; }
.db-nav-link:hover, .db-nav-sub:hover, .db-mobile-link:hover { text-decoration: none; }

/* The design switches from the desktop bar to the burger at 1080px. */
.db-nav-desktop { display: flex; }
.db-nav-actions { display: flex; }
.db-nav-burger  { display: none; }
@media (max-width: 1079px) {
  .db-nav-desktop { display: none; }
  .db-nav-actions { display: none; }
  .db-nav-burger  { display: flex; }
}
.db-mobile-menu[hidden] { display: none; }

/* ============================================================
   Home
   ============================================================ */
.db-hero-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.42);
}
.db-round-nav:hover { background: rgba(255,255,255,0.14); }

/* Solutions — goal cards */
.db-goal-card:hover {
  box-shadow: 0 14px 34px rgba(14,34,64,0.12);
  transform: translateY(-3px);
  text-decoration: none;
}

/* Where We Reach — channel cards */
.db-channel-card:hover {
  box-shadow: 0 16px 38px rgba(14,34,64,0.13);
  transform: translateY(-4px);
}

/* About — core value cards */
.db-value-card:hover { background: rgba(240,176,32,0.06); }

/* Careers — subscribe form */
.db-subscribe-input:focus {
  border-color: #F0B020;
  box-shadow: 0 0 0 3px rgba(240,176,32,0.25);
}
.db-subscribe-btn:hover { background: #D9971A; }
.db-subscribe-btn:active { transform: translateY(1px); }

/* FAQs — open card gains the gold border + lifted shadow */
.db-faq-card:has([aria-expanded="true"]) {
  border-color: #F0B020;
  box-shadow: 0 8px 24px rgba(14,34,64,0.08);
}
.db-faq-card[hidden] { display: none; }
.db-resource-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
  border-color: rgba(240,176,32,0.4);
}
a:hover .db-resource-card { text-decoration: none; }

/* Resources — cards + viewer */
.db-case-card:hover,
.db-download-card:hover {
  box-shadow: 0 14px 34px rgba(14,34,64,0.13);
  transform: translateY(-3px);
}
.db-case-card:hover { box-shadow: 0 16px 40px rgba(14,34,64,0.14); }
a:hover .db-case-card, a:hover .db-download-card { text-decoration: none; }
.db-modal-download:hover { background: #D9971A; text-decoration: none; }
.db-modal-close:hover { background: #EEF3F9; }
[data-db-modal][hidden] { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.db-social:hover {
  background: #F0B020; color: #0B1B33; border-color: #F0B020;
  text-decoration: none;
}
.db-footer a:hover { text-decoration: underline; }

/* ============================================================
   Motion — ported from the design's @keyframes
   ============================================================ */
@keyframes tstmFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dbCheckPop {
  0%   { opacity: 0; transform: rotate(-48deg) scale(0); }
  60%  { opacity: 1; transform: rotate(-48deg) scale(1.25); }
  100% { opacity: 1; transform: rotate(-48deg) scale(1); }
}

.db-check { opacity: 0; }
.db-checks.is-revealed .db-check {
  animation: dbCheckPop .45s cubic-bezier(.34,1.56,.64,1) both;
}

.db-accordion__panel[hidden] { display: none; }
.db-accordion__inner { animation: faqReveal .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .db-checks.is-revealed .db-check { animation: none; opacity: 1; }
  .db-accordion__inner { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Long-form legal pages — scoped typography lifted verbatim from
   the design. The .pp wrapper is applied by page-legal.php; .cdf
   is kept so existing Commercial Data FAQ markup renders unchanged.
   ============================================================ */
  .pp p { font-size:17px; color:#3E4C59; line-height:1.7; margin:0 0 16px; }
  .pp h2 { font-family:'Source Serif 4',serif; font-size:24px; font-weight:600; color:#14202E; margin:44px 0 14px; letter-spacing:-0.01em; }
  .pp h3 { font-family:'Source Sans 3',sans-serif; font-size:18px; font-weight:700; color:#14202E; margin:30px 0 10px; }
  .pp strong { color:#14202E; }
  .pp ul { margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
  .pp ul li { font-size:17px; color:#3E4C59; line-height:1.65; }
  .pp ul li::marker { color:#F0B020; }
  .pp table { border-collapse:collapse; width:100%; font-size:14px; color:#3E4C59; line-height:1.5; }
  .pp table th { background:#0B1B33; color:#fff; text-align:left; font-weight:600; padding:12px 14px; border:1px solid #1B3A66; vertical-align:top; }
  .pp table td { padding:12px 14px; border:1px solid #E0E5EB; vertical-align:top; background:#fff; }
  .cpr p { font-size:17px; color:#3E4C59; line-height:1.7; margin:0 0 20px; }
  .crm p { font-size:17px; color:#3E4C59; line-height:1.7; margin:0 0 20px; }
  .crm h2 { font-family:'Source Serif 4',serif; font-size:24px; font-weight:600; color:#14202E; margin:44px 0 14px; letter-spacing:-0.01em; }
  .crm table { border-collapse:collapse; width:100%; font-size:16px; color:#3E4C59; line-height:1.5; font-variant-numeric:tabular-nums; }
  .crm table th { background:#0B1B33; color:#fff; text-align:left; font-weight:600; padding:12px 16px; border:1px solid #1B3A66; }
  .crm table td { padding:12px 16px; border:1px solid #E0E5EB; background:#fff; }
  .crm table td.num { font-family:'IBM Plex Mono',monospace; font-size:15px; }
  .cdf p { font-size:17px; color:#3E4C59; line-height:1.7; margin:0 0 20px; }
  .cdf h2 { font-family:'Source Serif 4',serif; font-size:23px; font-weight:600; color:#14202E; margin:44px 0 14px; letter-spacing:-0.01em; line-height:1.3; }