/* ==========================================================================
   ChiefBot9000.com — Light theme override
   Load AFTER css/style.css. Dark ink on light paper for readability.
   Palette drawn from the book cover: white, near-black, navy, cover orange.
   ========================================================================== */

:root {
  /* Surfaces (the old dark tokens, now light) */
  --dark:      #F6F7F9;   /* page background            */
  --dark-2:    #ECEFF3;   /* alternate section band     */
  --dark-3:    #FFFFFF;   /* cards                      */
  --border:    #D3D9E0;

  /* Ink (the old light text token, now dark) */
  --off-white: #1B1F24;   /* headings and primary text  */
  --warm-gray: #545B64;   /* secondary text  (7.0:1)    */

  /* Accents, darkened to pass WCAG AA on white */
  --blue:       #1F5F99;  /* 6.6:1 */
  --blue-light: #1F4E79;  /* 8.6:1 */
  --gold:       #B4500F;  /* cover orange, darkened  5.1:1 */
  --gold-light: #A3470C;  /* 5.9:1 */
}

html, body {
  background: var(--dark) !important;
  color: #2B3036;
}

body p, body li { color: #2B3036; }
body h1, body h2, body h3, body h4 { color: var(--off-white); }
body a { color: var(--blue-light); }
body a:focus-visible, body button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Navigation ---------- */
body .site-nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
body .nav-logo { color: var(--off-white) !important; }
body .nav-logo span { color: var(--gold) !important; }
body .nav-links { background: transparent; }
body .nav-links a { color: #2B3036 !important; }
body .nav-links a:hover, body .nav-links a.active { color: var(--blue) !important; }
body .nav-hamburger span { background: var(--off-white) !important; }


/* ---------- Buttons ---------- */
body .btn-primary,
body .nav-links a.nav-cta {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #FFFFFF !important;
}
body .btn-primary:hover,
body .nav-links a.nav-cta:hover {
  background: var(--blue-light) !important;
  border-color: var(--blue-light) !important;
}
body .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--blue-light) !important;
  color: var(--blue-light) !important;
}
body .btn-secondary:hover { background: #E3ECF5 !important; }

/* ---------- Hero and page headers ---------- */
body .hero,
body .hero-bg {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--dark) 100%) !important;
}
body .hero-grid { opacity: 0.25; }
body .hero-title,
body .page-header h1 { color: var(--off-white) !important; }
body .hero-title .accent { color: var(--blue) !important; }
body .hero-title .gold-word { color: var(--gold) !important; }
body .hero-sub,
body .page-header p { color: #3A4048 !important; }
body .hero-eyebrow,
body .page-header-eyebrow,
body .section-label { color: var(--gold-light) !important; }

body .page-header {
  background: #FFFFFF !important;
  border-bottom: 4px solid #1B1F24 !important; /* echoes the black band on the cover */
}

/* ---------- Sections ---------- */
body section { background: transparent; }
body .section-alt { background: var(--dark-2) !important; }
body .section-title { color: var(--off-white) !important; }
body .section-intro { color: #3A4048 !important; }
body .section-divider { border-color: var(--border) !important; opacity: 1; }

body .big-quote { border-color: var(--gold) !important; background: #FFFFFF !important; }
body .big-quote p { color: var(--off-white) !important; }

body .pitch-text p { color: #2B3036 !important; }

/* ---------- Cards ---------- */
body .character-card,
body .resource-card,
body .contact-card,
body .cred-item,
body .author-photo-placeholder {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
body .char-name, body .resource-card h3, body .cred-item h4, body .contact-card h3 { color: var(--off-white) !important; }
body .char-title { color: var(--gold-light) !important; }
body .char-desc, body .resource-card p, body .cred-item p, body .contact-card p { color: #3A4048 !important; }
body .resource-action { color: var(--blue) !important; }

body .resource-badge.badge-free { background: #E4F0DC !important; color: #2E4A1C !important; border-color: #B9D3A6 !important; }
body .resource-badge.badge-paid { background: #FBE9DC !important; color: #8A3C0B !important; border-color: #EDC3A4 !important; }

body .topics-list li { color: #3A4048 !important; border-color: var(--border) !important; }

/* ---------- Author ---------- */
body .author-name-block { color: var(--off-white) !important; }
body .author-credentials { color: var(--warm-gray) !important; }
body .author-bio p { color: #2B3036 !important; }

/* ---------- Call-to-action banner ---------- */
body .cta-banner {
  background: #1F4E79 !important;          /* one deliberate dark band per page */
  border-top: 4px solid var(--gold) !important;
}
body .cta-banner h2 { color: #FFFFFF !important; }
body .cta-banner p  { color: #E6EDF4 !important; }
body .cta-banner .btn-primary { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #1F4E79 !important; }
body .cta-banner .btn-secondary { border-color: #FFFFFF !important; color: #FFFFFF !important; }
body .cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.12) !important; }

/* ---------- Footer ---------- */
body .site-footer {
  background: #ECEFF3 !important;
  border-top: 1px solid var(--border) !important;
  color: #3A4048 !important;
}
body .site-footer p, body .site-footer li { color: #3A4048 !important; }
body .site-footer a { color: var(--blue-light) !important; }
body .footer-col h4 { color: var(--off-white) !important; }
body .footer-bottom { border-color: var(--border) !important; }
body .footer-bottom p { color: var(--warm-gray) !important; }

/* ---------- Assessment wrapper page ---------- */
body .assessment-intro {
  background: #FFFFFF !important;
  border-bottom: 4px solid #1B1F24 !important;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Tablet and phone layout ---------- */

/* The five nav links no longer fit on one line below ~860px (small tablets),
   so switch to the hamburger menu there instead of at 640px. */
@media (max-width: 860px) {
  body .nav-links { display: none; }
  body .nav-hamburger { display: flex; }
  body .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #FFFFFF !important;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(27,31,36,0.08);
  }
}

/* Phones: the main button spans the full width; secondary buttons
   split the row evenly beneath it, so the group lines up on both edges. */
@media (max-width: 640px) {
  body .hero-actions { gap: 12px; }
  body .hero-actions .btn-primary {
    flex: 1 1 100%;
    text-align: center;
  }
  body .hero-actions .btn-secondary {
    flex: 1 1 0;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- Headings: no early line breaks ---------- */

/* Mid-sentence breaks are a desktop layout choice. Below 960px the
   heading wraps on its own, so the forced break would strand a short line. */
@media (max-width: 960px) {
  br.br-wide { display: none; }
}

/* Even out line lengths when a heading wraps (ignored by older browsers). */
body .section-title,
body .page-header h1,
body .cta-banner h2,
body .assessment-intro h1 { text-wrap: balance; }

/* Home page only: center the main title on phones. */
@media (max-width: 640px) {
  body .hero .hero-title { text-align: center; }
}