/* ═════════════════════════════════════════════════════════════════
   ROOMAN · PATH-1 MODERNISATION LAYER
   Additive stylesheet — sits on top of stakeholder.css / pathway.css
   Adds: font-pairing, scroll-reveal, glass nav, card lifts,
         dark mode, gradient polish, hero parallax.
   ═════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* ---------- ROOMAN LOGO ---------- */
.rooman-logo-img {
  height: 52px;
  width: auto;
  max-width: 260px;
  display: block;
  object-fit: contain;
}
.logo, .brand, .nav-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}
/* In the dark nav footer, brighten the logo so it stays readable */
footer.site .rooman-logo-img,
.site-foot .rooman-logo-img,
html[data-theme="dark"] .rooman-logo-img {
  filter: brightness(1.18) saturate(1.05);
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 6px 10px;
}
@media (max-width: 640px) {
  .rooman-logo-img { height: 42px; max-width: 200px; }
}

/* ---------- FONT PAIRING ---------- */
html { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; }
body { font-family: inherit; }
h1, h2, h3, .hero h1, .hero-persona h1, .hero-pathway h1, .jobs-hero h1,
.section-head h2, .section-title, .foot-brand, .feature-card h4, .card h3,
.next-inner h3 {
  font-family: 'Lora', 'Inter', Georgia, serif;
  letter-spacing: -0.4px;
}

/* ---------- DARK-MODE TOKENS ---------- */
:root {
  --modern-bg:        #ffffff;
  --modern-bg-soft:   #f7f9f8;
  --modern-ink:       #1f2937;
  --modern-body:      #374151;
  --modern-muted:     #6b7280;
  --modern-line:      #e5e7eb;
  --modern-card:      #ffffff;
  --modern-shadow:    0 10px 40px rgba(17,24,39,0.08);
  --modern-nav-bg:    rgba(255,255,255,0.75);
  --modern-nav-bg-scrolled: rgba(255,255,255,0.88);
  --ease-out:         cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"] {
  --modern-bg:        #0f141c;
  --modern-bg-soft:   #141b24;
  --modern-ink:       #f3f4f6;
  --modern-body:      #d1d5db;
  --modern-muted:     #9ca3af;
  --modern-line:      #25303d;
  --modern-card:      #1a222d;
  --modern-shadow:    0 10px 40px rgba(0,0,0,0.5);
  --modern-nav-bg:    rgba(15,20,28,0.72);
  --modern-nav-bg-scrolled: rgba(15,20,28,0.9);

  --bg: var(--modern-bg);
  --bg-soft: var(--modern-bg-soft);
  --bg-tint: #1c2836;
  --ink: var(--modern-ink);
  --body: var(--modern-body);
  --muted: var(--modern-muted);
  --line: var(--modern-line);
}

html[data-theme="dark"] body { background: var(--modern-bg); color: var(--modern-body); }
html[data-theme="dark"] section.block,
html[data-theme="dark"] section.section { background: var(--modern-bg); color: var(--modern-body); }
html[data-theme="dark"] section.block.soft,
html[data-theme="dark"] section.section.band { background: var(--modern-bg-soft); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--modern-ink); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .prog-tile,
html[data-theme="dark"] .step {
  background: var(--modern-card);
  border-color: var(--modern-line);
  color: var(--modern-body);
}
html[data-theme="dark"] .card h3, html[data-theme="dark"] .card h4,
html[data-theme="dark"] .feature-card h3, html[data-theme="dark"] .feature-card h4,
html[data-theme="dark"] .prog-tile h4, html[data-theme="dark"] .step h4 { color: var(--modern-ink); }
html[data-theme="dark"] .topbar { background: #060a10; }
html[data-theme="dark"] nav.primary,
html[data-theme="dark"] header.topbar { background: var(--modern-nav-bg); border-color: var(--modern-line); }
html[data-theme="dark"] nav.primary a,
html[data-theme="dark"] header.topbar a.brand,
html[data-theme="dark"] header.topbar nav.primary a { color: var(--modern-ink); }
html[data-theme="dark"] .audience-strip { background: var(--modern-bg); border-color: var(--modern-line); }
html[data-theme="dark"] footer.site { background: #060a10; color: var(--modern-muted); }
html[data-theme="dark"] footer.site a { color: #cbd5e1; }
html[data-theme="dark"] .next-band { background: linear-gradient(135deg, #141b24 0%, #1c2836 100%); }

/* ---------- GLASS NAVBAR ---------- */
nav.primary,
header.topbar {
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              backdrop-filter 0.35s var(--ease-out);
}
body.nav-scrolled nav.primary,
body.nav-scrolled header.topbar {
  background: var(--modern-nav-bg-scrolled) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 6px 28px rgba(17,24,39,0.08);
}

/* ---------- CARD HOVER LIFTS ---------- */
.card, .feature-card, .prog-tile, .step {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
  will-change: transform;
}
.card:hover, .feature-card:hover, .prog-tile:hover, .step:hover {
  transform: translateY(-8px);
  box-shadow: var(--modern-shadow);
}
.feature-card {
  background: var(--modern-card);
  border: 1px solid var(--modern-line);
  border-radius: 18px;
}

/* ---------- SCROLL-REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"].is-visible { transition-delay: 0.08s; }
[data-reveal-delay="2"].is-visible { transition-delay: 0.16s; }
[data-reveal-delay="3"].is-visible { transition-delay: 0.24s; }
[data-reveal-delay="4"].is-visible { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- GRADIENT POLISH ON HERO ---------- */
.hero, .hero-persona, .hero-pathway, .jobs-hero {
  position: relative;
  overflow: hidden;
}
.hero::after, .hero-persona::after, .hero-pathway::after, .jobs-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 20%, rgba(255,255,255,0.10), transparent 70%),
    radial-gradient(50% 70% at 88% 85%, rgba(0,0,0,0.22), transparent 75%);
}

/* ---------- HERO PARALLAX ---------- */
.hero.with-bg, .hero-persona.with-bg,
.hero-pathway.with-bg, .jobs-hero.with-bg {
  background-attachment: scroll;
  will-change: background-position;
}

/* ---------- DARK-MODE TOGGLE BUTTON ---------- */
#theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--modern-line);
  background: var(--modern-card);
  color: var(--modern-ink);
  font-size: 20px;
  cursor: pointer;
  z-index: 9998;
  box-shadow: var(--modern-shadow);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
#theme-toggle:hover { transform: translateY(-2px) scale(1.05); }
#theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 3px; }

/* ---------- BACK-TO-TOP ---------- */
#to-top {
  position: fixed;
  right: 18px;
  bottom: 74px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--modern-line);
  background: var(--modern-card);
  color: var(--modern-ink);
  font-size: 22px;
  cursor: pointer;
  z-index: 9997;
  box-shadow: var(--modern-shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- BUTTONS POLISH ---------- */
.btn-primary, .btn-accent, .btn-ghost {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
}
.btn-primary:hover, .btn-accent:hover { transform: translateY(-2px); }

/* ---------- AUDIENCE-STRIP chip lift ---------- */
.audience-strip .a-item { transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s; }
.audience-strip .a-item:hover { transform: translateY(-2px); }

/* ---------- SELECTION ---------- */
::selection { background: rgba(0,77,64,0.18); color: inherit; }
html[data-theme="dark"] ::selection { background: rgba(100,200,180,0.25); }

/* ---------- PRINT ---------- */
@media print {
  #theme-toggle, #to-top { display: none; }
}