/* ════════════════════════════════════════════════════════════════
 * OPA case study — stylesheet entry point.
 *
 * Like NIOCCS, OPA reuses the shared editorial design system wholesale
 * (sections, typography, cards, callouts, comic figures). Those partials
 * live under assets/css/shared/ and are imported directly so every page
 * stays visually in sync. OPA-specific work is two things:
 *   1. a brand theme — Aegean navy + Greek gold (this file, below)
 *   2. new components — _opa-components.css (showcase tabs, 6+1 issue
 *      grid, adaptation table, feature rows, scaffold placeholders)
 *
 * THEME MODEL — navy on light, gold on dark.
 * Gold (#EECD22) is luminous on the dark sections but has almost no
 * contrast on white, so the accent flips by surface: navy carries light
 * surfaces (emphasis underlines, labels, badges) and gold carries the
 * dark ones (hero glow, dark-card badges, active tab underline). This is
 * also the Greek-flag pairing, so it reads as Mediterranean rather than
 * arbitrary. These rules sit AFTER the @imports so they win on source
 * order; the shared ODH/NIOCCS partials are untouched.
 * ════════════════════════════════════════════════════════════════ */

@import url('../shared/_base.css?v=20260522-1');  /* type foundations, hero glow, body */
@import url('../shared/nav.css');                  /* shared nav: structure + light theme */
@import url('../shared/_nav.css');                 /* dark-theme nav colour overrides */
@import url('../shared/_eu-system.css?v=20260525-1'); /* sections, headings, paper, callouts */
@import url('../shared/_goal-cards.css');          /* light + dark card grids */
@import url('../shared/_roles.css');               /* role / principle icon cards */
@import url('../shared/_comic.css');               /* comic figures + zoom lightbox */
@import url('../shared/_persona.css');             /* persona / user-group switcher */
@import url('../shared/_responsive.css');          /* shared responsive tiers */
@import url('./_opa-components.css?v=20260601-31');  /* OPA-only components + placeholders */
@import url('../shared/_footer.css?v=20260601-1');  /* shared dark site footer */
@import url('../shared/_case-study.css?v=20260519-2'); /* shared case-study styles */

/* ─── OPA brand tokens ───────────────────────────────────────────
   RGB triplets so any opacity can be applied: rgba(var(--opa-gold-500-rgb), 0.16).
   Sampled from the live site (opaavonin.com) and extended into 400/500/600
   steps. Navy 400 is a lightened "Aegean" tone for use on dark surfaces
   where the true navy would disappear into the near-black background. */
:root {
  --opa-gold-400-rgb: 245, 215, 80;   /* bright — glows on dark */
  --opa-gold-500-rgb: 238, 205, 34;   /* brand gold */
  --opa-gold-600-rgb: 198, 166, 16;   /* deep — borders + low-alpha tints */

  --opa-navy-400-rgb: 74, 124, 158;   /* lightened navy */
  --opa-navy-500-rgb: 10, 62, 97;     /* brand navy */
  --opa-navy-600-rgb: 6, 42, 66;      /* deep navy */

  --opa-aegean-rgb: 91, 155, 213;     /* bright sky-blue — Phase 2 accent on dark */
  --opa-mist-rgb: 203, 220, 233;      /* pale blue tint */
  --opa-brand-blue-rgb: 43, 96, 145;  /* the restaurant's ocean-blue banner hue */

  /* Editorial accent token read by .eu-emphasis (shared _eu-system.css).
     The restaurant's ocean-blue on light surfaces; dark sections flip to
     gold below. */
  --eu-accent: rgba(var(--opa-brand-blue-rgb), 0.95);
}

/* Footer accent — OPA gold on the shared dark footer. */
.site-footer { --footer-accent-rgb: var(--opa-gold-400-rgb); }

/* On dark + hero surfaces the emphasis underline flips to gold. */
.eu-section-dark,
.eu-section-glow,
.hero-section {
  --eu-accent: rgba(var(--opa-gold-400-rgb), 0.95);
}

/* ─── Hero radial glow — warm gold core fading to Aegean navy ─────
   Mediterranean "sunset over the Aegean": a gold center bleeding into
   deep navy at the edges, on the near-black hero base. */
.hero-glow::before {
  background: radial-gradient(ellipse 80% 70% at 50% 25%,
      rgba(var(--opa-gold-400-rgb), 0.34) 0%,
      rgba(var(--opa-gold-500-rgb), 0.24) 18%,
      rgba(var(--opa-navy-400-rgb), 0.22) 42%,
      rgba(var(--opa-navy-500-rgb), 0.14) 65%,
      rgba(var(--opa-navy-600-rgb), 0) 90%);
}

/* Tighter, slightly cooler glow for the Strategy section. */
.eu-section-glow .hero-glow::before {
  background: radial-gradient(ellipse 48% 62% at 50% 16%,
      rgba(var(--opa-gold-400-rgb), 0.30) 0%,
      rgba(var(--opa-gold-500-rgb), 0.20) 20%,
      rgba(var(--opa-navy-400-rgb), 0.18) 44%,
      rgba(var(--opa-navy-500-rgb), 0.11) 66%,
      rgba(var(--opa-navy-600-rgb), 0) 90%);
}

/* ─── Accent re-skins of shared classes ──────────────────────────
   The shared partials hardcode the ODH cyan (rgba(0,174,255)); re-tone
   every accent that shows on the OPA page. Failure red (issue badges,
   system-fail callouts) is intentionally left red — it signals problems,
   not the project accent. */

/* h1 accent span — navy on light, gold on dark. */
.eu-h1-accent { color: rgba(var(--opa-navy-500-rgb), 1); }
.eu-section-dark .eu-h1-accent,
.eu-section-glow .eu-h1-accent { color: rgba(var(--opa-gold-400-rgb), 1); }

/* "OPA" project title — coloured to match the restaurant's brand blue. */
.opa-brandmark { color: rgba(var(--opa-brand-blue-rgb), 1); }

/* Live-site link under the OPA heading — clickable for recruiters. */
.opa-site-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: rgba(var(--opa-brand-blue-rgb), 1);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(var(--opa-brand-blue-rgb), 0.32);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.opa-site-link:hover { border-color: rgba(var(--opa-brand-blue-rgb), 0.9); }
.opa-site-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Primary card badges — navy on light surfaces, gold on dark. */
.eu-goal-badge.is-primary {
  background: rgba(var(--opa-navy-500-rgb), 0.10);
  color: rgba(var(--opa-navy-500-rgb), 0.95);
}
.eu-goal-badge-dark.is-primary {
  background: rgba(var(--opa-gold-500-rgb), 0.15);
  color: rgba(var(--opa-gold-400-rgb), 0.95);
}

/* Role / principle icon badges (_roles.css hardcodes ODH cyan). */
.role-badge {
  background: rgba(var(--opa-navy-500-rgb), 0.10);
  color: rgba(var(--opa-navy-500-rgb), 0.95);
}

/* Zoomable comic on dark sections — swap the blue ambient glow for gold. */
.comic-zoomable.is-elevated-dark {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.80),
    0 16px 48px rgba(0, 0, 0, 0.60),
    0 0 60px rgba(var(--opa-gold-500-rgb), 0.14);
}
.comic-zoomable.is-elevated-dark:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.20),
    0 12px 32px rgba(0, 0, 0, 0.90),
    0 24px 64px rgba(0, 0, 0, 0.70),
    0 0 80px rgba(var(--opa-gold-500-rgb), 0.28);
}

/* Header brand mark — gold on the dark nav (mirrors NIOCCS=teal idea). */
.brand-badge svg { color: rgba(var(--opa-gold-500-rgb), 0.95); }

/* ─── Persona switcher — OPA states (customer / owner) ────────────
   The shared component only ships ODH's patient/vendor keys, so add the
   show + active-tab rules for OPA's two personas. Customer gets the gold
   accent (the pop colour), Owner the Aegean blue — the same customer-vs-
   business pairing the page leans on elsewhere. The "Needs" accent bar is
   retoned to gold; the "Challenges" bar keeps the shared red. */
.persona-switcher[data-persona="customer"] .persona-card[data-persona="customer"],
.persona-switcher[data-persona="owner"] .persona-card[data-persona="owner"] {
  display: grid;
}
.persona-switcher[data-persona="customer"] .persona-tab[data-persona="customer"] {
  color: #ffffff;
  border-color: rgba(var(--opa-gold-500-rgb), 0.95);
  background: rgba(var(--opa-gold-500-rgb), 0.12);
}
.persona-switcher[data-persona="owner"] .persona-tab[data-persona="owner"] {
  color: #ffffff;
  border-color: rgba(var(--opa-aegean-rgb), 0.95);
  background: rgba(var(--opa-aegean-rgb), 0.14);
}
.persona-label::before {
  background: rgba(var(--opa-gold-500-rgb), 0.95);
}

/* Persona video placeholder — retone the cyan glow + "AI-rendered" chip
   to gold (the thumb shows the gradient placeholder until a real clip
   is dropped at the data-video-src path). */
.persona-video-thumb {
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--opa-gold-500-rgb), 0.16), transparent 55%),
    linear-gradient(160deg, #2a2f35 0%, #16191d 100%);
}
.persona-video-tag {
  border-color: rgba(var(--opa-gold-500-rgb), 0.75);
}
.persona-video:hover .persona-video-tag {
  border-color: rgba(var(--opa-gold-400-rgb), 0.95);
}

/* ════════════════════════════════════════════════════════════════
 * SYNTHESIS LINE — mid-weight statement (between body copy and a large
 * callout). Lifted from the NIOCCS page; retoned to the OPA accent.
 * ════════════════════════════════════════════════════════════════ */
.eu-synthesis {
  font-family: 'Cal Sans', sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(60, 64, 67, 0.95);
  max-width: 820px;
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 4px solid rgba(var(--opa-gold-500-rgb), 0.95);
}
.eu-section-dark .eu-synthesis {
  color: rgba(255, 255, 255, 0.92);
  border-left-color: rgba(var(--opa-gold-400-rgb), 0.95);
}

/* Tighten an eyebrow used as a mid-section label above an h2. */
.eu-divider-dark + .eu-eyebrow { margin-top: 64px; }
.eu-eyebrow + .eu-h2 { margin-top: 16px; }

/* Top-align dark cards so icon + title share a baseline across a row
   with differing subtitle lengths (matches the NIOCCS fix). */
.eu-goal-item-dark { justify-content: flex-start; }

/* ─── Multi-card layout helpers ──────────────────────────────────
   The locked .is-lg block sets flex-wrap:nowrap (built for 3-card rows).
   OPA's constraint + business-context sets carry SIX cards, so opt back
   into wrapping — they flow to 3-per-row, two rows. */
.eu-goal-list.opa-constraints {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 28px;
}

/* Even 3-column grid for the Phase-2 operations cards (6 cards → 3×2).
   Overrides the shared flex list so rows stay balanced instead of
   wrapping 4 + 2. Cards stretch to the cell width. */
.eu-goal-list.opa-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
.eu-goal-list.opa-grid-3 .eu-goal-item { max-width: none; }

@media (max-width: 1000px) {
  .eu-goal-list.opa-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 750px) {
  .eu-goal-list.opa-grid-3 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
 * TWO-PHASE STRATEGY — phase eyebrow + phase headings
 *
 * Same chapter-marker pattern as NIOCCS. OPA's pairing: Phase 1 = gold
 * (the foundation), Phase 2 = Aegean sky-blue (operations & visibility).
 * Both are luminous on the dark glow base; neither collides with the
 * red-for-failure semantics.
 * ════════════════════════════════════════════════════════════════ */
.phase-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 8px 20px;
}
.phase-eyebrow + .eu-h2 { margin-top: 18px; }

/* Phase 1 — gold. */
.phase-eyebrow.is-phase-1 { color: rgba(var(--opa-gold-400-rgb), 0.95); }
.eu-section-dark .eu-h2.is-phase-1 {
  color: rgba(var(--opa-gold-400-rgb), 0.95);
  text-shadow:
    0 2px 0 rgba(var(--opa-gold-600-rgb), 0.40),
    0 4px 14px rgba(0, 0, 0, 0.38);
}
.is-phase-1 .eu-goal-badge-dark.is-primary {
  background: rgba(var(--opa-gold-500-rgb), 0.15);
  color: rgba(var(--opa-gold-400-rgb), 0.95);
}

/* Phase 2 — Aegean sky-blue. */
.phase-eyebrow.is-phase-2 { color: rgba(var(--opa-aegean-rgb), 0.95); }
.eu-section-dark .eu-h2.is-phase-2 {
  color: rgba(var(--opa-aegean-rgb), 0.95);
  text-shadow:
    0 2px 0 rgba(var(--opa-navy-500-rgb), 0.45),
    0 4px 14px rgba(0, 0, 0, 0.38);
}
.is-phase-2 .eu-goal-badge-dark.is-primary {
  background: rgba(var(--opa-aegean-rgb), 0.15);
  color: rgba(var(--opa-aegean-rgb), 0.95);
}

/* ════════════════════════════════════════════════════════════════
 * IMPACT & RESULTS — outcome metrics (Edmund-Yu-style hierarchy).
 * TWO large hero cards carry the headline business impacts (both
 * ratios, so both get a donut); FOUR small cards below act as
 * supporting evidence (number + label only). Gold accent on dark.
 * Donut arcs + count-ups are revealed on scroll by opa.js (.is-shown).
 * ════════════════════════════════════════════════════════════════ */
.opa-metrics { margin-top: 64px; }

/* Shared card shell */
.opa-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.65);
}

/* ─── Tier 1: two large hero cards ──────────────────────────────── */
.opa-metric-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.opa-metric--lg {
  flex-direction: row;
  align-items: center;
  justify-content: space-between; /* title/caption left, donut right (Edmund layout) */
  text-align: left;
  gap: 28px;
  padding: 46px 42px;
}
.opa-metric-lg-body { min-width: 0; flex: 1 1 auto; }

/* ─── Tier 2: four small supporting cards ───────────────────────── */
.opa-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.opa-metric--sm { padding: 30px 20px; }
.opa-metric-sm-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(var(--opa-gold-400-rgb), 0.98);
  text-shadow: 0 0 22px rgba(var(--opa-gold-400-rgb), 0.25);
}
.opa-metric-sm-num .opa-donut-unit { font-size: 28px; }
.opa-metric-sm-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 14px;
}

/* ─── Donut (ratio metrics) ─────────────────────────────────────── */
.opa-donut {
  position: relative;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
}
.opa-donut-svg { width: 100%; height: 100%; }
.opa-donut-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 9;
}
.opa-donut-arc {
  fill: none;
  stroke: rgba(var(--opa-gold-400-rgb), 0.95);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  /* Hidden until revealed: full offset = empty ring */
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 8px rgba(var(--opa-gold-400-rgb), 0.35));
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.opa-metrics.is-shown .opa-donut-arc {
  stroke-dashoffset: calc(100 - var(--pct, 0));
}
.opa-donut-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.01em;
  color: #fff;
}
.opa-donut-num { display: inline-flex; align-items: baseline; } /* keep number + % on one line */
.opa-donut-unit { font-size: 21px; font-weight: 600; margin-left: 1px; opacity: 0.85; }
/* Tiny caption under the donut number — mirrors Edmund's "By Retail Investors" */
.opa-donut-sub {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── Hero label + caption ──────────────────────────────────────────
   These are HERO-ONLY (small cards use .opa-metric-sm-label), so the
   type scales with the larger card: a big title leads, caption supports. */
.opa-metric-label {
  /* Cal Sans titles — matches the "Main Failures" card convention site-wide.
     Large, short noun phrases (Edmund proportion): the title leads the card. */
  font-family: 'Cal Sans', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.08;
  color: rgba(255, 255, 255, 0.98);
  margin: 0 0 12px;
}
.opa-metric-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  max-width: 36ch;
}

.opa-metric-foot {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.40);
  text-align: center;
  margin: 20px 0 0;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .opa-metric-hero { grid-template-columns: 1fr; }
  .opa-metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .opa-metric--lg {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 36px 26px;
  }
  .opa-metric-caption { max-width: none; }
  .opa-metric-label { font-size: 32px; }
  .opa-metric-sm-num { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .opa-donut-arc { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
 * WIDE-SCREEN (>2047px) — grow the content column (matches NIOCCS).
 * ════════════════════════════════════════════════════════════════ */
@media (min-width: 2048px) {
  .eu-wrapper,
  .hero-section .container {
    max-width: min(70vw, 1800px);
  }
  /* The constraint cards are fixed-width (325px, no grow), so the widened
     wrapper lets a 4th/5th squeeze onto row 1. Cap the list to exactly
     three columns (3×325 + 2×28 gap) so it stays a clean 3 × 2. */
  .eu-goal-list.opa-constraints { max-width: 1031px; }
}