/*
 * Arena Enhancement CSS — v1.2.1
 * Injected alongside the compiled Vite bundle.
 * Adds section-level color contrast, card polish, typography rhythm,
 * and responsive improvements. No content changes.
 */

/* ─── 1. SECTION BACKGROUNDS ─────────────────────────────────────────────── */
/*
  Sections are direct siblings inside a single .min-h-screen wrapper.
  The wrapper has bg rgb(249,245,236) = --paper-warm.
  We override each section's background individually.

  Palette (all light, no dark):
  --bg-hero:        #EEF1ED  (existing sage-tint — keep)
  --bg-action:      #F5F1E8  (warm parchment)
  --bg-advantage:   #EBF3EE  (light mint-sage)
  --bg-actions:     #F8F3E8  (warm cream)
  --bg-evidence:    #EEF2F5  (soft blue-grey)
  --bg-execution:   #F2EDE0  (light clay-parchment)
  --bg-difference:  #F2ECDC  (existing clay-mist — keep)
  --bg-comparison:  #F9F5EC  (existing paper-warm — keep)
  --bg-sprint:      #EBF3EE  (mint-sage, echoes advantage)
  --bg-compounding: #F5F1E8  (warm parchment, echoes action)
  --bg-begin:       #1d4d28  (existing forest — keep)
*/

/* Hero — keep existing, just ensure smooth transition */
#section-hero {
  background-color: #EEF1ED;
}

/* Quotes strip between hero and section-action */
#section-hero ~ div.py-20:first-of-type {
  background-color: #F0EDE5;
}

/* [01] Arena in Action — warm parchment */
#section-action {
  background-color: #F5F1E8;
}

/* [02] The Arena Advantage — light mint-sage */
#section-advantage {
  background-color: #EBF3EE;
}

/* [03] Clear Actions — warm cream */
#section-actions {
  background-color: #F8F3E8;
}

/* [04] Evidence — soft blue-grey */
#section-evidence {
  background-color: #EEF2F5;
}

/* [05] Guided Execution — light clay-parchment */
#section-execution {
  background-color: #F2EDE0;
}

/* [06] Arena Difference — keep existing clay-mist, refine slightly */
#section-difference {
  background-color: #F2ECDC;
}

/* [07] Comparison — keep existing paper-warm */
#section-comparison {
  background-color: #F9F5EC;
}

/* [08] The Sprint — mint-sage (echoes Advantage) */
#section-sprint {
  background-color: #EBF3EE;
}

/* [09] Compounding — warm parchment (echoes Action) */
#section-compounding {
  background-color: #F5F1E8;
}

/* [10] Begin — keep existing forest green */
#section-begin {
  /* already forest green, no change */
}

/* The reveal divs are transparent — they inherit from section */
#section-action > .reveal,
#section-advantage > .reveal,
#section-actions > .reveal,
#section-evidence > .reveal,
#section-execution > .reveal,
#section-sprint > .reveal,
#section-compounding > .reveal {
  background-color: transparent !important;
}

/* ─── 2. SECTION DIVIDERS ─────────────────────────────────────────────────── */
/* Subtle top border on each section for visual separation */
#section-action,
#section-advantage,
#section-actions,
#section-evidence,
#section-execution,
#section-sprint,
#section-compounding {
  border-top: 1px solid rgba(94, 116, 88, 0.12);
}

#section-difference,
#section-comparison {
  border-top: 1px solid rgba(94, 116, 88, 0.10);
}

/* ─── 3. QUOTE CAROUSEL — FIELD VOICES ───────────────────────────────────── */
/* The quotes strip (py-20 div between hero and section-action) */
.arena-quote {
  background: linear-gradient(135deg, #1d4d28 0%, #2a6338 100%);
  border-radius: 0.75rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 4px 20px rgba(29, 77, 40, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arena-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(29, 77, 40, 0.22);
}

/* Non-active quotes */
.arena-quote:not(.bg-forest) {
  background: #fff;
  border: 1px solid #d5dbd0;
  box-shadow: 0 2px 12px rgba(43, 35, 28, 0.06);
}

.arena-quote:not(.bg-forest):hover {
  box-shadow: 0 6px 20px rgba(43, 35, 28, 0.10);
}

/* ─── 4. SPRINT CARDS ─────────────────────────────────────────────────────── */
.sprint-card {
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(94, 116, 88, 0.15);
}

.sprint-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(43, 35, 28, 0.10);
}

/* ─── 5. FIELD INSIGHT CARDS ──────────────────────────────────────────────── */
.field-card {
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.field-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(43, 35, 28, 0.10);
}

/* ─── 6. SECTION LABEL REFINEMENTS ───────────────────────────────────────── */
.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: #5e7458;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #b56a3a;
  flex-shrink: 0;
}

/* ─── 7. COMPARISON TABLE ENHANCEMENTS ───────────────────────────────────── */
/* Make the comparison table more readable */
#section-comparison table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(43, 35, 28, 0.07);
}

#section-comparison thead th {
  padding: 0.875rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

#section-comparison tbody td {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  vertical-align: top;
  border-bottom: 1px solid rgba(211, 220, 200, 0.5);
}

#section-comparison tbody tr:last-child td {
  border-bottom: none;
}

#section-comparison tbody tr:hover td {
  background-color: rgba(94, 116, 88, 0.04);
}

/* Arena column highlight */
#section-comparison tbody td:nth-child(2) {
  background-color: rgba(29, 77, 40, 0.04);
  font-weight: 500;
}

/* ─── 8. FAQ ACCORDION ────────────────────────────────────────────────────── */
#section-difference button[class*="flex"] {
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  transition: background-color 0.15s ease;
}

#section-difference button[class*="flex"]:hover {
  background-color: rgba(94, 116, 88, 0.06);
}

/* ─── 9. CTA BUTTONS ──────────────────────────────────────────────────────── */
.btn-forest {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-forest:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29, 77, 40, 0.25);
}

.btn-clay {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-clay:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(181, 106, 58, 0.25);
}

.btn-ghost {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ─── 10. NAVIGATION ──────────────────────────────────────────────────────── */
.arena-nav {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid rgba(94, 116, 88, 0.12);
  transition: box-shadow 0.2s ease;
}

/* Nav scrolled state — add shadow */
.arena-nav.scrolled,
.arena-nav[style*="shadow"] {
  box-shadow: 0 2px 16px rgba(43, 35, 28, 0.08);
}

/* ─── 11. HERO SECTION POLISH ─────────────────────────────────────────────── */
/* Ensure the hero topography/contour lines are visible */
#section-hero {
  position: relative;
}

/* ─── 12. DISCOVERY MIRROR / EVIDENCE DIAGRAM ────────────────────────────── */
#section-evidence .reveal > div {
  position: relative;
}

/* ─── 13. ENGAGEMENT INTELLIGENCE / EXECUTION BARS ───────────────────────── */
/* Progress bar animation enhancement */
#section-execution [class*="bg-forest"],
#section-execution [class*="bg-arena"] {
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── 14. SPRINT DIAGRAM ──────────────────────────────────────────────────── */
#section-sprint .reveal > div {
  position: relative;
}

/* ─── 15. COMPOUNDING DIAGRAM ─────────────────────────────────────────────── */
#section-compounding .reveal > div {
  position: relative;
}

/* ─── 16. BEGIN / CTA SECTION ─────────────────────────────────────────────── */
#section-begin {
  position: relative;
  overflow: hidden;
}

#section-begin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(94, 116, 88, 0.3) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(181, 106, 58, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ─── 17. FOOTER AREA ─────────────────────────────────────────────────────── */
/* Subscribe section */
.py-20.bg-paper-mid,
[class*="py-20"][class*="bg-paper"] {
  background-color: #F0EDE5;
  border-top: 1px solid rgba(94, 116, 88, 0.10);
}

/* Footer */
footer,
[class*="py-16"][class*="bg-ink"],
[class*="py-16"][class*="bg-forest"] {
  /* keep existing dark footer */
}

/* ─── 18. CHAT / ASK ARENA BUTTON ─────────────────────────────────────────── */
#askBtn,
button[aria-label="Ask Arena"],
.chat-arena {
  box-shadow: 0 4px 20px rgba(29, 77, 40, 0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#askBtn:hover,
button[aria-label="Ask Arena"]:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(29, 77, 40, 0.38);
}

/* ─── 19. ANNOUNCEMENT BAR ────────────────────────────────────────────────── */
.announcement-bar {
  background: linear-gradient(90deg, #1d4d28 0%, #2a6338 50%, #1d4d28 100%);
  background-size: 200% 100%;
}

/* ─── 20. SECURITY BADGE ──────────────────────────────────────────────────── */
/* The floating security badge in the hero */
.chat-card {
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(43, 35, 28, 0.12);
  border: 1px solid rgba(94, 116, 88, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── 21. SIDE NAV DOTS ───────────────────────────────────────────────────── */
/* Right-side section navigation dots */
[class*="fixed right-6"][class*="top-1/2"] button {
  transition: transform 0.15s ease, background-color 0.15s ease;
}

[class*="fixed right-6"][class*="top-1/2"] button:hover {
  transform: scale(1.3);
}

/* ─── 22. MODAL OVERLAY ───────────────────────────────────────────────────── */
.modal-overlay {
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

/* ─── 23. COOKIE BANNER ───────────────────────────────────────────────────── */
.cookie-banner {
  border-radius: 0.875rem;
  box-shadow: 0 8px 32px rgba(43, 35, 28, 0.14);
  border: 1px solid rgba(94, 116, 88, 0.15);
}

/* ─── 24. SKIP LINK (ACCESSIBILITY) ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: #1d4d28;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ─── 25. FOCUS STYLES ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #b56a3a;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── 26. SMOOTH TRANSITIONS BETWEEN SECTIONS ────────────────────────────── */
#section-action,
#section-advantage,
#section-actions,
#section-evidence,
#section-execution,
#section-difference,
#section-comparison,
#section-sprint,
#section-compounding,
#section-begin {
  transition: background-color 0.3s ease;
}

/* ─── 27. REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 28. RESPONSIVE ENHANCEMENTS ────────────────────────────────────────── */

/* Large tablets */
@media (max-width: 1024px) {
  #section-action > .reveal > div,
  #section-advantage > .reveal > div,
  #section-actions > .reveal > div,
  #section-evidence > .reveal > div,
  #section-execution > .reveal > div,
  #section-sprint > .reveal > div,
  #section-compounding > .reveal > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #section-comparison table {
    font-size: 0.75rem;
  }
}

/* Tablets */
@media (max-width: 768px) {
  /* Section padding */
  #section-action > .reveal > div,
  #section-advantage > .reveal > div,
  #section-actions > .reveal > div,
  #section-evidence > .reveal > div,
  #section-execution > .reveal > div,
  #section-sprint > .reveal > div,
  #section-compounding > .reveal > div {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Comparison table — horizontal scroll */
  #section-comparison .overflow-x-auto,
  #section-comparison table {
    min-width: 640px;
  }

  /* Quote cards stack */
  .arena-quote {
    margin-bottom: 0.75rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  #section-action > .reveal > div,
  #section-advantage > .reveal > div,
  #section-actions > .reveal > div,
  #section-evidence > .reveal > div,
  #section-execution > .reveal > div,
  #section-sprint > .reveal > div,
  #section-compounding > .reveal > div {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Side nav dots — hide on very small screens */
  [class*="fixed right-6"][class*="top-1/2"] {
    display: none;
  }

  /* Chat button repositioned */
  [class*="fixed bottom-8 right-8"] {
    bottom: 1.25rem;
    right: 1.25rem;
  }

  /* Announcement bar text size */
  .announcement-bar {
    font-size: 0.75rem;
  }
}

/* ─── 29. PRINT STYLES ────────────────────────────────────────────────────── */
@media print {
  .arena-nav,
  [class*="fixed"],
  .cookie-banner,
  #askBtn,
  button[aria-label="Ask Arena"],
  .announcement-bar {
    display: none !important;
  }

  #section-action,
  #section-advantage,
  #section-actions,
  #section-evidence,
  #section-execution,
  #section-sprint,
  #section-compounding {
    background-color: #fff !important;
    border-top: 1px solid #ccc !important;
  }

  body {
    font-size: 11pt;
    color: #000;
  }
}

/* ─── 30. HIGH CONTRAST MODE ──────────────────────────────────────────────── */
@media (forced-colors: active) {
  .btn-forest,
  .btn-clay {
    forced-color-adjust: none;
  }
}

/* ─── 31. CHAT BUTTON — "ASK ARENA" VISIBLE LABEL ────────────────────────── */
/*
  The chat button is icon-only with aria-label="Ask Arena".
  We extend it to show a visible text label beside the icon.
  On hover the label slides in; on mobile it stays icon-only.
*/
button[aria-label="Ask Arena"] {
  width: auto !important;
  border-radius: 28px !important;
  padding: 0 16px 0 12px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
}

button[aria-label="Ask Arena"]::after {
  content: "Ask Arena";
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #f9f5ec;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Keep icon size consistent */
button[aria-label="Ask Arena"] svg {
  flex-shrink: 0;
}

/* Mobile: revert to icon-only below 640px */
@media (max-width: 640px) {
  button[aria-label="Ask Arena"] {
    width: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  button[aria-label="Ask Arena"]::after {
    display: none;
  }
}

/* ─── 32. COMPOUNDING SECTION — COACH · MENTOR · TRUSTED ALLY ────────────── */
/*
  Inject the Coach / Mentor / Trusted Ally typographic statement
  above the Compounding section heading using a positioned pseudo-element
  on the section itself. The text is styled to match the reference image:
  - "Coach." and "Mentor." in sage-green, lighter weight
  - "Trusted Ally." in near-black, heavier weight
  We use a small inline script (injected via index.html) for reliable DOM
  insertion, and this CSS handles the visual treatment.
*/
.arena-cmt-block {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.15;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

.arena-cmt-block .cmt-coach,
.arena-cmt-block .cmt-mentor,
.arena-cmt-block .cmt-trusted,
#section-begin .arena-cmt-block .cmt-coach,
#section-begin .arena-cmt-block .cmt-mentor,
#section-begin .arena-cmt-block .cmt-trusted {
  display: block !important;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
  font-weight: 400 !important;
  color: rgba(245, 241, 232, 0.92) !important;
  letter-spacing: -0.015em !important;
}

.arena-cmt-block .cmt-trusted,
#section-begin .arena-cmt-block .cmt-trusted {
  font-weight: 500 !important;
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  color: rgba(245, 241, 232, 0.92) !important;
}

/* Hide the BEGIN eyebrow when CMT block is present (uses :has if supported) */
#section-begin:has(.arena-cmt-block) p[style*="text-transform:uppercase"]:first-child,
#section-begin:has(.arena-cmt-block) p[style*="text-transform: uppercase"]:first-child,
#section-begin:has(.arena-cmt-block) .eyebrow,
#section-begin:has(.arena-cmt-block) [class*="eyebrow"],
#section-begin:has(.arena-cmt-block) p[style*="rgba(255,255,255,0.45)"] {
  display: none !important;
}

/* JS-assisted fallback class when :has() not supported */
.arena-begin-eyebrow-hidden { display: none !important; }

/* ─── 33. NAV REORDER — BRAND LINKS LEFT OF NAV ITEMS ────────────────────── */
/*
  Current order inside the hidden lg:flex div:
    [0] Platform  [1] Advantage  [2] Experience  [3] Stories
    [4] Voices    [5] Field Notes [6] FAQ
    [7] Spacer (flex:1)
    [8] BioQuant IQ + Echo div
    [9] Let's talk button

  Target order (matching Echo nav pattern):
    [8→1] BioQuant IQ + Echo  ← moved to left after logo
    [0] Platform  [1] Advantage  [2] Experience  [3] Stories
    [4] Voices    [5] Field Notes [6] FAQ
    [7] Spacer (flex:1)
    [9] Let's talk button  ← stays right

  We use CSS order property. Default order is 0 for all.
  Set brand-links div to order: -1 to move it first.
  Add a small separator between brand links and nav links.
*/

/* The brand links container (child [8]) — move to start */
nav > div > div.hidden.lg\\:flex > div:has(> a[title="BioQuant IQ — parent company"]) {
  order: -1;
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
  padding-right: 8px;
  border-right: 1px solid #e3dcc7;
  margin-right: 4px;
}

/* Fallback selector using nth-child for browsers without :has() */
@supports not (selector(:has(*))) {
  nav > div > div:nth-child(2) > div:nth-child(9) {
    order: -1;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    padding-right: 8px;
    border-right: 1px solid #e3dcc7;
    margin-right: 4px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Arena v1.2.3 — Fixes 1–5 from SuggestedChanges PDF
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fix 1: "Ask Arena" chat button — label + pill shape ─────────────────── */
/* Already implemented in v1.2.2 — ensure it's robust across all browsers */
button[aria-label="Ask Arena"],
button[hint="Ask Arena"] {
  border-radius: 28px !important;
  padding: 10px 18px 10px 14px !important;
  gap: 8px !important;
  white-space: nowrap !important;
  min-width: auto !important;
}

/* ─── Fix 2: Chat button overlap fix for Edge + Chrome ────────────────────── */
/*
  Chrome and Edge show browser UI elements (translate, accessibility widgets)
  in the bottom-right corner at z-index ~2147483647.
  We move the chat button up and left enough to avoid overlap.
  Also use env(safe-area-inset-*) for notched/padded viewports.
*/
button[aria-label="Ask Arena"],
button[hint="Ask Arena"],
/* Target the fixed chat button wrapper by its position */
body > div[id="root"] ~ * button:last-of-type,
/* Most specific: the floating chat button is typically the last fixed button */
.fixed.bottom-6.right-6 button,
[style*="position: fixed"][style*="bottom"][style*="right"] button[aria-label] {
  /* Shift up to avoid browser translate/accessibility overlay */
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important;
}

/* Target the fixed wrapper div that contains the chat button */
div.fixed.bottom-6.right-6,
div[class*="fixed"][class*="bottom"][class*="right"] {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important;
  z-index: 9999 !important;
}

/* Edge-specific: push up more to avoid Edge's sidebar/translate button */
@supports (-ms-ime-align: auto) {
  div.fixed.bottom-6.right-6,
  div[class*="fixed"][class*="bottom"][class*="right"] {
    bottom: 80px !important;
    right: 24px !important;
  }
}

/* Chrome-specific translate button avoidance (appears at ~bottom: 72px on some versions) */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  div.fixed.bottom-6.right-6,
  div[class*="fixed"][class*="bottom"][class*="right"] {
    bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}



/* ─── Fix 5: Nav hyperlink scroll — visual feedback ──────────────────────── */
/* When a nav link is "active" (scrolled to its section), highlight it */
nav a[data-scroll-intercepted="1"]:hover {
  color: #1d4d28 !important;
  opacity: 1 !important;
}

/* Smooth scroll behaviour for the whole page */
html {
  scroll-behavior: smooth;
}

/* ─