/* ==========================================================================
   DAP Design System, Tokens
   Single source of truth for colors, type, spacing, radii.

   Two namespaces live in here:
     --dap-*       → Deck / audit system (dark bg, Lato, JetBrains Mono)
     --dap-web-*   → Web surfaces system (light bg, Cerebri Sans → Inter,
                     Maastricht-blue heroes, signature orange-glow CTA)

   Both share the same brand DNA (navy + orange + numbers-forward voice).
   Pick a namespace per surface; do not cross-pollinate within a single page.

   Sources:
     deck system  → dap-branding skill v1 (existing audit decks)
     web system   → digitalauthority.me live DOM, May 2026 audit
                    → see brand/design-system.md, brand/tokens.json
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

/* =============================================================================
   v2 FUNNEL TOKENS (May 2026 design refresh)
   Raw names used by the v2 design HTMLs. Co-exist with the --dap-web-* aliases
   below so existing CSS keeps rendering.
   ============================================================================= */
:root {
  /* ===== BRAND (from new DAP homepage) ===== */
  --maastricht:   #041C2C;
  --maastricht-2: #02141f;
  --prussian:     #033748;
  --prussian-2:   #052a3a;
  --orange:       #F4511E;
  --orange-hov:   #D63D0F;
  --orange-soft:  #FEF3EB;

  /* ===== SEMANTIC ACCENT ===== */
  --lime:         #A3E635;
  --lime-hov:     #84CC16;
  --proof-green:  #22A06B;

  /* ===== INK & SURFACES ===== */
  --ink:          #0a1620;
  --body:         #263238;
  --body-soft:    #475259;
  --muted:        #5B6770;
  --muted-dark:   #94a3b8;
  --paper:        #FFFFFF;
  --grey:         #F5F5F5;
  --grey-2:       #ECEEF0;
  --grey-3:       #f8f9fa;
  --border:       #D7D7D7;
  --border-soft:  #E5E7EB;
  --line-dark:    #1f3050;

  /* ===== GRADE COLORS ===== */
  --grade-a:      #16a34a;
  --grade-b:      #22c55e;
  --grade-c:      #3b82f6;
  --grade-d:      #f59e0b;
  --grade-f:      #dc2626;

  /* ===== EFFECTS ===== */
  --glow:         12px 12px 24px 0px rgba(244, 81, 30, 0.55);
  --glow-sm:      8px 8px 18px 0px rgba(244, 81, 30, 0.42);
  --card-shadow:  1px 1px 22px 2px rgba(6, 20, 33, 0.08);
  --card-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35);
  --float-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);

  /* ===== TYPE ===== */
  --font-sans:    'Inter', 'Cerebri Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== LAYOUT ===== */
  --container:    1440px;
  --container-narrow: 1100px;
  --gutter:       32px;
  --gutter-sm:    20px;
}

:root {
  /* ===== CORE BRAND COLORS (legacy --dap-* deck namespace) ===== */
  --dap-navy:        #061C2C;  /* Primary dark, slide bg, headers */
  --dap-orange:      #F2501E;  /* "DAP red", dominant accent */
  --dap-blue:        #4285F4;  /* Secondary accent, links, secondary data */
  --dap-cyan:        #00B4D8;  /* Tertiary accent, competitor color, info */

  /* ===== CONTENT BLOCK FILLS ===== */
  --dap-slate:       #364D5D;  /* General-purpose card */
  --dap-dark-teal:   #1E3342;  /* Secondary panel */
  --dap-deep-navy:   #052236;  /* Deepest panel */
  --dap-purple:      #644CA5;  /* AI/GEO section, highlight */
  --dap-green:       #70AD47;  /* Positive / success */

  /* ===== AUDIT-SPECIFIC SHADES (from existing HTMLs) ===== */
  --dap-card:        #0D2A3F;  /* Audit card bg */
  --dap-card-2:      #102F46;  /* Audit alt card bg */
  --dap-border:      #1A3A4F;  /* Subtle border */
  --dap-deep:        #041824;  /* Section alt bg */

  /* ===== SEMANTIC ===== */
  --dap-yellow:      #F5B30B;  /* Warning */
  --dap-red:         #E04040;  /* Critical / negative */

  /* Soft variants (for tinted backgrounds) */
  --dap-orange-soft: rgba(242, 80, 30, 0.12);
  --dap-cyan-soft:   rgba(0, 180, 216, 0.12);
  --dap-green-soft:  rgba(118, 192, 67, 0.15);
  --dap-yellow-soft: rgba(245, 179, 11, 0.15);
  --dap-red-soft:    rgba(224, 64, 64, 0.15);
  --dap-purple-soft: rgba(100, 76, 165, 0.20);

  /* ===== TEXT ===== */
  --dap-white:       #FFFFFF;
  --dap-muted:       #B0BEC5;       /* Body on dark */
  --dap-dim:         rgba(255, 255, 255, 0.55);
  --dap-text-dark:   #1A1A2E;       /* Body on light */

  /* ===== LIGHT-MODE SURFACES ===== */
  --dap-bg-light:    #FFFFFF;
  --dap-bg-subtle:   #F5F5F5;
  --dap-callout-bg:  #FFF0EB;       /* Light callout (orange-tinted) */

  /* ===== TYPOGRAPHY ===== */
  --dap-font:        'Lato', 'Calibri', system-ui, -apple-system, sans-serif;
  --dap-font-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Lato weights: 300 light, 400 regular, 700 bold, 900 black */

  /* ===== RADII ===== */
  --dap-radius-sm:   4px;
  --dap-radius:      8px;
  --dap-radius-lg:   14px;
  --dap-radius-pill: 999px;

  /* ===== SHADOWS ===== */
  --dap-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.15);
  --dap-shadow:      0 8px 24px rgba(0, 0, 0, 0.25);
  --dap-shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Base reset (use on every DS page; not auto-applied to consumer pages)
   ========================================================================== */
.dap-reset *,
.dap-reset *::before,
.dap-reset *::after { box-sizing: border-box; }

.dap-reset {
  margin: 0;
  padding: 0;
  font-family: var(--dap-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ==========================================================================
   Utility, orange punch word.
   Mandatory on every headline. Wrap key data points.
   ========================================================================== */
.hl, .punch {
  color: var(--dap-orange);
  font-weight: 900;
}

/* CTA-section override: orange-on-orange = invisible.
   When .hl/.punch lives inside an orange CTA bg, scope this override: */
.cta-orange .hl,
.cta-orange .punch {
  color: var(--dap-navy);
  background: #fff;
  padding: 0 14px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   --dap-web-*, Web surface tokens
   Source: digitalauthority.me live DOM (May 2026), brand/design-system.md
   Use on consumer-facing web pages, landing pages, marketing surfaces.
   ========================================================================== */
:root {
  /* Web brand colors (note: orange is #F4511E, NOT the deck #F2501E) */
  --dap-web-maastricht:    #041C2C;   /* Hero background, primary brand dark */
  --dap-web-prussian:      #033748;   /* Inset cards on dark hero */
  --dap-web-orange:        #F4511E;   /* CTAs, links, accents */
  --dap-web-orange-hover:  #D63D0F;   /* CTA hover */
  --dap-web-charcoal:      #1F2A33;   /* Body section bg, secondary dark */

  /* Neutrals */
  --dap-web-white:         #FFFFFF;
  --dap-web-body:          #263238;   /* Default paragraph color */
  --dap-web-black:         #000000;   /* H2/H3 on light */
  --dap-web-border:        #D7D7D7;   /* Secondary button border */
  --dap-web-input-border:  #AFAFAF;
  --dap-web-card-shadow:   #E6E6E6;
  --dap-web-bg-grey:       #F5F5F5;   /* "dap-grey-bg" sections */
  --dap-web-muted:         rgba(255,255,255,0.78);

  /* Signature orange-glow shadow, preserve in any redesign */
  --dap-web-glow:          12px 12px 24px 0px rgba(244, 81, 30, 0.64);
  --dap-web-glow-soft:     8px 8px 18px 0px rgba(244, 81, 30, 0.42);
  --dap-web-card-soft:     1px 1px 20px 2px rgb(230, 230, 230);

  /* Type, Cerebri Sans (commercial, paid). Inter is the open-source fallback. */
  --dap-web-font:          'Cerebri Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (desktop ≥1024px), from live computed CSS */
  --dap-web-h1:            55px;
  --dap-web-h1-lh:         66px;
  --dap-web-h2:            36.8px;
  --dap-web-h2-lh:         48px;
  --dap-web-h3:            30px;
  --dap-web-h3-lh:         36px;
  --dap-web-h4:            25px;     /* Orange eyebrow */
  --dap-web-body-size:     16px;
  --dap-web-body-lh:       26px;
  --dap-web-body-lg:       20px;
  --dap-web-small:         15px;

  /* Radii */
  --dap-web-r-input:       10px;
  --dap-web-r-card:        0px;       /* Cards rely on shadow, not radius */
  --dap-web-r-pill:        30px;
  --dap-web-r-pill-lg:     45px;
  --dap-web-r-pill-full:   1000px;

  /* Layout */
  --dap-web-container:     1320px;    /* Bootstrap container-xxl */
  --dap-web-section-y:     48px;
  --dap-web-section-y-lg:  96px;
}

/* ==========================================================================
   DAP Header + Footer chrome
   Moved here from public/index.html inline <style> on 2026-05-22 (v4.2). The
   audit app is served two ways: standalone at the deploy subdomain (where
   public/index.html ships verbatim, inline styles included) and wrapped by
   the DAP main WordPress site at /custom-apps/healthcare/ai-discoverability-audit/
   (where only this tokens.css is loaded, NOT the audit app's index.html
   inline <style>). Keeping the dap-hdr/dap-ftr rules in tokens.css means
   both surfaces get the chrome styled identically.

   Section also adds the dropdown :hover behavior the Round 17 JSX required
   but never had CSS for, causing all .dap-hdr__sub menu panels to render as
   visible inline content on the WordPress-wrapped surface.
   ========================================================================== */

/* ---------- DAP HEADER ---------- */
.dap-hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #f0f0f0;
}
.dap-hdr__inner {
  max-width: var(--dap-web-container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.dap-hdr__logo { height: 38px; }
.dap-hdr__nav { display: flex; gap: 28px; }
.dap-hdr__nav > .dap-hdr__nav-item > a,
.dap-hdr__nav a {
  color: var(--dap-web-black);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 4px;
  text-decoration: none;
}
.dap-hdr__nav a:hover { color: var(--dap-web-orange); }
.dap-hdr__right { display: flex; align-items: center; gap: 16px; }
.dap-hdr__phone {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 22px 7px 14px;
  border: 1.25px solid var(--dap-web-border);
  border-radius: var(--dap-web-r-pill);
  font-size: 15px;
  color: var(--dap-web-maastricht);
  white-space: nowrap;
}
.dap-hdr__phone-text { white-space: nowrap; }
.dap-hdr__phone-num { white-space: nowrap; }
.dap-hdr__phone-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--dap-web-orange);
  display: grid; place-items: center; color: white;
  font-size: 13px;
}
.dap-hdr__phone-label { font-size: 11px; color: #666; line-height: 1; margin-bottom: 2px; white-space: nowrap; }
.dap-hdr__phone-num-weight { font-weight: 600; }
.dap-hdr__cta {
  background: var(--dap-web-orange);
  color: white;
  padding: 14px 32px;
  border-radius: var(--dap-web-r-pill-full);
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--dap-web-glow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.dap-hdr__cta:hover {
  transform: translateY(-1px);
  box-shadow: 14px 14px 28px 0 rgba(244,81,30,0.7);
}

/* ---------- Dropdown nav (Round 17 JSX feature, CSS added v4.2) ----------
   Each .dap-hdr__nav-item contains a top-level <a> AND an optional
   .dap-hdr__sub <div> of dropdown links. Without the rules below, the sub
   panel renders as inline visible content under every nav row, exposing the
   entire site map permanently in the header. */
.dap-hdr__nav-item {
  position: relative;
  display: inline-block;
}
.dap-hdr__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECEEF0;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(6, 20, 33, 0.12);
  padding: 8px 0;
  z-index: 100;
}
.dap-hdr__sub a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dap-web-body, #263238);
  white-space: nowrap;
  text-decoration: none;
}
.dap-hdr__sub a:hover {
  background: rgba(244, 81, 30, 0.08);
  color: var(--dap-web-orange);
}
.dap-hdr__nav-item:hover > .dap-hdr__sub,
.dap-hdr__nav-item:focus-within > .dap-hdr__sub {
  display: flex;
}

@media (max-width: 980px) {
  .dap-hdr__nav, .dap-hdr__phone-text { display: none; }
}

/* ---------- DAP FOOTER ---------- */
.dap-ftr {
  background: var(--dap-web-maastricht);
  color: white;
  padding: 64px 0 0;
  margin-top: 0;
}
.dap-ftr__inner {
  max-width: var(--dap-web-container);
  margin: 0 auto;
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 56px;
}
.dap-ftr__logo { height: 36px; margin-bottom: 24px; }
.dap-ftr__tag { color: var(--dap-web-orange); font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 22px; max-width: 360px; }
.dap-ftr__addr { font-size: 14px; line-height: 1.7; color: var(--dap-web-muted); }
.dap-ftr__addr a { color: var(--dap-web-muted); text-decoration: none; }
.dap-ftr__main { display: flex; flex-direction: column; gap: 28px; }
.dap-ftr__nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; }
.dap-ftr__nav a { color: white; font-weight: 500; text-decoration: none; }
.dap-ftr__nav a:hover { color: var(--dap-web-orange); }
.dap-ftr__news {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 24px 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dap-ftr__news-text strong { display: block; font-size: 16px; margin-bottom: 4px; }
.dap-ftr__news-text span { color: var(--dap-web-muted); font-size: 14px; }
.dap-ftr__news-form { display: flex; gap: 0; }
.dap-ftr__news-form input {
  padding: 12px 18px;
  border: none;
  border-radius: var(--dap-web-r-pill) 0 0 var(--dap-web-r-pill);
  width: 220px; outline: none;
}
.dap-ftr__news-form button {
  background: var(--dap-web-orange);
  color: white;
  padding: 12px 24px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 0 var(--dap-web-r-pill) var(--dap-web-r-pill) 0;
}
.dap-ftr__sub {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 32px;
  max-width: var(--dap-web-container);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--dap-web-muted);
}
.dap-ftr__social { display: flex; gap: 14px; }
.dap-ftr__social a {
  width: 28px; height: 28px;
  color: white; opacity: 0.8;
  display: grid; place-items: center;
  text-decoration: none;
}
.dap-ftr__social a:hover { opacity: 1; color: var(--dap-web-orange); }
.dap-ftr__bottom { background: var(--dap-web-orange); height: 6px; }

@media (max-width: 980px) {
  .dap-ftr__inner { grid-template-columns: 1fr; }
  .dap-ftr__news { flex-direction: column; align-items: stretch; }
  .dap-ftr__news-form input { width: 100%; }
}