/*
 * bizbroker.services — sitewide UX/UI + palette + font unification
 * (audit 2026-07-28, redesign v2)
 * Loaded after css/output.css on every page.
 * ?v=2 — bump on every edit to defeat Hostinger's aggressive cache.
 */

/* ─── 0. Home-page palette — override output.css variables ─────────────
 *  Any page using `bg-[var(--color-paper)]`, `text-[var(--color-ink)]`
 *  etc. now inherits the darker navy home-page palette automatically.
 *  Approved in Figma redesign v1.
 * ------------------------------------------------------------------- */
:root {
  --color-paper:         #14213d;   /* was #1b1d44 — home page header navy */
  --color-paper-deep:    #0f1b33;   /* was #161836 — section backdrop     */
  --color-paper-darker:  #050c18;   /* was #11132a — footer / darkest     */

  --color-ink:           #f6efe0;   /* was #f0e6cb — cream                */
  --color-ink-soft:      #e8dfc8;   /* was #ddcfad — soft cream           */
  --color-ink-muted:     rgba(246, 239, 224, 0.72);  /* was #b0a380       */

  --color-oxblood:       #f6c952;   /* was #dca868 — home page gold       */
  --color-oxblood-bright:#ffdb7c;   /* was #f0c285                        */
  --color-gilt:          #f6c952;   /* was #f2d49c                        */

  --color-rule:          rgba(255, 255, 255, 0.08);  /* was #45476c       */
  --color-rule-strong:   rgba(255, 255, 255, 0.14);  /* was #5a5c82       */
}

/* Body base — dark navy background across every page */
body {
  background: #0a1526;
  color: #f6efe0;
}

/* ─── 1. Font unification — Fraunces + EB Garamond + JetBrains Mono ── */
/* Override any Urbanist declarations from about.html / services.html.  */
body,
body *:not(script):not(style) {
  font-family: 'EB Garamond', ui-serif, Georgia, serif !important;
}
/* Display-scale headings render in Fraunces */
h1, h2, h3, .h-display,
.nh-hero-title, .about-hero-title, .svc-hero-title,
.nh-practice-title, .nh-card-title, .nh-svc-title,
.nh-prac-title, .nh-cta-final-title,
.svc-card-title, .svc-cta-title, .svc-card-num,
.about-item h3, .about-chapter-title {
  font-family: 'Fraunces', 'EB Garamond', ui-serif, Georgia, serif !important;
  font-weight: 300;
  letter-spacing: -0.015em;
}
/* Eyebrows / small caps / mono metrics */
.eyebrow, .nh-card-tag, .nh-practice-tag, .nh-prac-tag,
.nh-svc-num, .svc-card-num, .svc-hero-tag,
.nh-cta-final-tag, .nh-footer-eyebrow,
.about-hero-tag, .about-hero-role,
.nh-header .nav-link, .nh-nav a,
.wordmark, .btn, .nh-cta, .nh-cta-btn,
.mobile-bottom-nav a {
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace !important;
}

/* ─── 2. Focus rings (WCAG 2.4.7) ─────────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.nh-cta:focus-visible,
.nh-cta--filled:focus-visible,
.nh-cta--ghost:focus-visible,
.nh-cta-btn:focus-visible,
.nh-card-link:focus-visible,
.nh-practice-btn:focus-visible,
.nh-prac-link:focus-visible,
.nh-cta-final-btn:focus-visible,
.nh-cta-final-email:focus-visible,
.about-cta-btn:focus-visible,
.about-cta-email:focus-visible,
.svc-card-link:focus-visible,
.svc-cta-btn:focus-visible,
.svc-cta-email:focus-visible,
.link-editorial:focus-visible,
.nh-footer-cols a:focus-visible,
.nh-footer-bottom a:focus-visible,
.mobile-bottom-nav a:focus-visible {
  outline: 2px solid #f6c952;
  outline-offset: 3px;
  border-radius: 2px;
}
.field:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #f6c952;
  outline-offset: 2px;
}

/* ─── 3. Contrast — bump muted body copy above 4.5:1 ─────────────── */
.svc-card-desc, .about-item p, .about-chapter-body,
.nh-card-body, .nh-svc-desc,
.nh-footer-desc, .nh-footer-cols p,
.nh-footer-cols address, .nh-footer-cols ul,
.nh-cta-final-body {
  color: rgba(246, 239, 224, 0.92) !important;
}
.nh-masthead, .nh-masthead *,
.about-masthead, .about-masthead *,
.svc-masthead, .svc-masthead *,
.masthead, .masthead * {
  color: rgba(246, 239, 224, 0.75) !important;
}
.nh-footer-bottom, .nh-footer-bottom p {
  color: rgba(246, 239, 224, 0.72) !important;
}
.nh-footer-bottom a {
  color: rgba(246, 239, 224, 0.92) !important;
  display: inline-block;
  padding: .35rem .25rem;
}

/* ─── 4. Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nh-card, .nh-svc, .svc-card, .about-item,
  .nh-cta-final-btn, .about-cta-btn, .svc-cta-btn,
  .nh-cta, .nh-cta--filled, .nh-cta--ghost,
  .nh-practice-btn, .nh-card-link, .nh-prac-link,
  .link-editorial { transition: none !important; }
  .nh-card:hover, .nh-svc:hover, .svc-card:hover, .about-item:hover,
  .nh-cta-final-btn:hover, .about-cta-btn:hover, .svc-cta-btn:hover,
  .nh-cta:hover, .nh-practice-btn:hover, .nh-card-link:hover,
  .nh-prac-link:hover { transform: none !important; }
}

/* ─── 5. Progressive enhancement — reveal fallback ───────────────── */
html.no-js .reveal,
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── 6. Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; top: .5rem; left: .5rem; z-index: 1000;
  width: auto; height: auto;
  padding: .65rem .95rem;
  background: #f6c952; color: #050c18;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .14em; text-transform: uppercase; font-size: .75rem;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* ─── 7. Long-word overflow guard ─────────────────────────────────── */
.nh-hero-title, .svc-hero-title, .about-hero-title, .h-display {
  overflow-wrap: anywhere; hyphens: auto;
}

/* ─── 8. Retire the editorial mastheads (Vol. I · Edition 2026) ──── */
.nh-masthead, .about-masthead, .svc-masthead,
body > div.border-b.border-\[var\(--color-rule\)\]:first-of-type,
body > div:first-child.border-b {
  display: none !important;
}
/* If a masthead is expressed as the top border-b bar (investors/contact),
   hide any element containing the "Vol. I" or "Edition" text pattern —
   safer to remove at HTML level, but this guards any missed one.       */

/* ─── 9. Header — force home-page navy across all pages ──────────── */
.nh-header,
header.nh-header,
header[class*="border-b"][class*="sticky"] {
  background: #14213d !important;
  backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.nh-header .wordmark span:first-child,
header .wordmark span:first-child { color: #f6efe0 !important; }
.nh-header .wordmark span:last-child,
header .wordmark span:last-child { color: #f6c952 !important; }
.nh-header .nav-link,
header .nav-link {
  color: rgba(246, 239, 224, 0.78) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-bottom: 2px solid transparent;
}
.nh-header .nav-link:hover,
.nh-header .nav-link[aria-current="page"],
header .nav-link:hover,
header .nav-link[aria-current="page"] { color: #f6c952 !important; }

/* Nav CTA — outlined gold */
.nh-header .btn.btn-oxblood,
.nh-cta-btn,
header .btn.btn-oxblood {
  background: transparent !important;
  color: #f6c952 !important;
  border: 1px solid #f6c952 !important;
  border-radius: 3px !important;
  padding: 0.55rem 1.1rem !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.nh-header .btn.btn-oxblood:hover,
.nh-cta-btn:hover,
header .btn.btn-oxblood:hover {
  background: #f6c952 !important;
  color: #14213d !important;
}

/* ─── 10. Filled gold primary button (btn-filled) ───────────────── */
.btn-filled, .nh-cta-final-btn {
  background: #f6c952 !important;
  color: #050c18 !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0.9rem 1.5rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-filled:hover, .nh-cta-final-btn:hover { background: #ffdb7c !important; }

/* ─── 11. Section background classes — belt-and-braces override ─── */
/* Tailwind v4 emits a hardcoded rgba fallback (#1b1d44cc) BEFORE the
 * modern color-mix() rule. Older mobile Safari / Android WebView use
 * the hardcoded fallback and ignore our CSS variable override.
 * Force the correct colour explicitly.                              */
.bg-\[var\(--color-paper\)\]        { background-color: #14213d !important; }
.bg-\[var\(--color-paper\)\]\/80    { background-color: rgba(20, 33, 61, 0.85) !important; }
.bg-\[var\(--color-paper\)\]\/70    { background-color: rgba(20, 33, 61, 0.70) !important; }
.bg-\[var\(--color-paper\)\]\/60    { background-color: rgba(20, 33, 61, 0.60) !important; }
.bg-\[var\(--color-paper\)\]\/50    { background-color: rgba(20, 33, 61, 0.50) !important; }
.bg-\[var\(--color-paper-deep\)\]   { background-color: #0f1b33 !important; }
.bg-\[var\(--color-paper-darker\)\] { background-color: #050c18 !important; }
.text-\[var\(--color-ink\)\]        { color: #f6efe0 !important; }
.text-\[var\(--color-ink-soft\)\]   { color: #e8dfc8 !important; }
.text-\[var\(--color-ink-muted\)\]  { color: rgba(246, 239, 224, 0.72) !important; }
.text-\[var\(--color-oxblood\)\]    { color: #f6c952 !important; }
.text-\[var\(--color-gilt\)\]       { color: #f6c952 !important; }
.border-\[var\(--color-rule\)\]     { border-color: rgba(255, 255, 255, 0.08) !important; }
.border-\[var\(--color-oxblood\)\]  { border-color: #f6c952 !important; }

/* ─── 12. Hero sections on investors/contact — dark navy backdrop ─ */
section.relative { background: #0a1526; }

/* ─── 13. Cards, cohort tiles — flatten to home-page style ──────── */
.svc-card, .about-item, .nh-card, .nh-svc {
  background: #0f1b33 !important;
  border: 1px solid rgba(246, 201, 82, 0.14) !important;
  border-radius: 4px !important;
}

/* ─── 14. Editorial catches — belt-and-braces removal ───────────── */
.drop-num, .drop-cap::first-letter,
.rule-double, .caption { display: none !important; }