/* =============================================================
   Origin IT Institute — "Origin Signature" Theme
   A ground-up UI/UX, not a recolor of an existing theme. Built around
   a distinct visual signature that no other theme here uses:

     1. A diagonally split hero (crisp white/light-gray on one side,
        Deep Navy on the other) instead of a full-bleed dark or full-bleed
        light hero.
     2. A sliding underline indicator that glides beneath whichever nav
        link you're hovering/on (assets/js/theme-signature.js), instead of
        a static active-link underline.
     3. Ribbon-corner cards (a folded-corner accent) instead of plain
        square/rounded cards.
     4. Stat numbers rendered as gradient-bordered pill badges instead of
        plain gradient-clipped text.
     5. A jagged "stitched seam" edge where the footer begins, instead of
        a plain flat divider.

   Palette (exact, as specified):
     Deep Navy     #0A2540
     Origin Blue   #0066FF
     Bright Cyan   #00C2FF
     Success Green #10B981
     White         #FFFFFF
     Light Gray    #F8FAFC
   ============================================================= */

body.theme-signature {
  --ink: #0a2540;             /* Deep Navy */
  --ink-soft: #0d2f52;
  --surface: #ffffff;         /* White */
  --surface-alt: #f8fafc;     /* Light Gray */
  --muted: #55677c;
  --border: #e2e8f0;

  --purple: #0066ff;          /* Origin Blue (reused var name for compatibility) */
  --purple-dark: #0050cc;
  --blue: #00c2ff;            /* Bright Cyan */
  --blue-light: #4dd6ff;
  --green: #10b981;           /* Success Green */

  --gradient-primary: linear-gradient(120deg, #0066ff 0%, #00c2ff 100%);
  --gradient-dark: linear-gradient(155deg, #0a2540 0%, #0d2f52 55%, #063a52 100%);

  --shadow-sm: 0 2px 10px rgba(10, 37, 64, 0.07);
  --shadow-md: 0 14px 34px rgba(0, 102, 255, 0.14);
  --shadow-lg: 0 26px 60px rgba(10, 37, 64, 0.22);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 26px;

  --font-heading: 'Fraunces', 'Space Grotesk', 'Segoe UI', serif;
  --font-body: 'Manrope', 'Inter', 'Segoe UI', sans-serif;

  background: var(--surface);
  color: var(--ink);
}

body.theme-signature h1, body.theme-signature h2, body.theme-signature h3, body.theme-signature h4 {
  letter-spacing: -0.02em;
}

/* ---------- Scroll progress bar: Origin Blue -> Bright Cyan ---------- */
body.theme-signature .scroll-progress {
  background: linear-gradient(90deg, var(--purple), var(--blue));
}

/* ---------- Header: opaque navy, sliding nav indicator ---------- */
body.theme-signature .site-header {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
body.theme-signature .site-header::before {
  background: rgba(10, 37, 64, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-signature .site-header.scrolled {
  box-shadow: 0 12px 32px rgba(10,37,64,0.28);
}
body.theme-signature .site-header.scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
body.theme-signature .brand-mark { border-radius: 10px; }
/* Only the desktop layout needs a positioned ancestor for the sliding
   nav-indicator pill (theme-signature.js) below. On mobile the base
   stylesheet's `.nav-links { position: fixed; ... }` (inside its own
   @media (max-width: 900px) block) is what takes the closed dropdown
   out of document flow and off-screen — if this rule applied there
   too it would win on specificity alone and silently switch the menu
   back to `position: relative`, so the whole stacked link list would
   occupy real layout height inside the header (ballooning it) while
   still being painted off-position by the leftover transform, bleeding
   up over the ticker/header. Scope this to desktop only. */
@media (min-width: 901px) {
  body.theme-signature .nav-links { position: relative; }
}
body.theme-signature .nav-links a.active::after { content: none; } /* replaced by the sliding indicator */

/* The sliding indicator itself: a small pill injected by theme-signature.js
   and glided under whichever link is hovered, or the active link at rest. */
body.theme-signature .signature-nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  transition: transform 0.35s cubic-bezier(.65,0,.35,1), width 0.35s cubic-bezier(.65,0,.35,1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
body.theme-signature .signature-nav-indicator.visible { opacity: 1; }
@media (max-width: 900px) {
  body.theme-signature .signature-nav-indicator { display: none; } /* mobile menu stacks links; no slider needed */
}

/* ---------- Buttons: rounded-square, shimmer sweep on hover ---------- */
body.theme-signature .btn {
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.theme-signature .btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,102,255,0.3);
}
body.theme-signature .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
body.theme-signature .btn-primary:hover::after { left: 130%; }
body.theme-signature .btn-primary:hover { box-shadow: 0 16px 38px rgba(0,194,255,0.4); }
body.theme-signature .btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}
body.theme-signature .btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The "Verify a Certificate" ghost button hard-codes white text/border for
   a dark hero on every other theme. Our hero is split light+navy, and this
   CTA sits on the light side (see markup order in index.php/inner-page
   heroes) — give it a readable navy outline treatment, same fix pattern
   Nova needed for its fully-light hero. */
body.theme-signature .btn-ghost-light {
  background: #ffffff;
  border: 1.5px solid var(--border);
  color: var(--ink);
}
body.theme-signature .btn-ghost-light:hover {
  background: rgba(0,102,255,0.06);
  border-color: var(--purple);
  color: var(--purple-dark);
}

/* ---------- Hero: diagonal split — light canvas with a Deep Navy panel
   behind the right column (where the cert-preview / visual sits). ---------- */
body.theme-signature .hero,
body.theme-signature .hero-v2 {
  background: var(--surface);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
body.theme-signature .hero::before,
body.theme-signature .hero-v2::before,
body.theme-signature .hero::after,
body.theme-signature .hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  z-index: 0;
}
body.theme-signature .hero::before,
body.theme-signature .hero-v2::before {
  background: var(--gradient-dark);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}
body.theme-signature .hero::after,
body.theme-signature .hero-v2::after {
  background: radial-gradient(420px circle at 82% 30%, rgba(0,194,255,0.28), transparent 70%);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}
@media (max-width: 900px) {
  /* Below the breakpoint the hero grid stacks the text column above the
     certificate card, so the desktop's left/right diagonal (sized for a
     side-by-side layout) is replaced by a top/bottom one instead —
     otherwise it cuts across the stacked text at an arbitrary,
     content-length-dependent height. Keep the light canvas + Deep Navy
     text the desktop's light column already uses by default, then swap
     the *shape* of the same Navy diagonal panel + cyan glow from a
     left/right split to a top/bottom one below.

     Full-width diagonal Navy band, starting exactly where the light text
     content ends (--sig-split, measured live by theme-signature.js from
     the certificate card's actual position) and running to the bottom of
     the hero — a true two-tone hero like the desktop split, just stacked
     top/bottom instead of left/right, instead of a small navy shape
     hugging only the card. Falls back to a sane fixed value before JS
     has measured (e.g. no-JS, or the instant before first paint). */
  body.theme-signature .hero,
  body.theme-signature .hero-v2 { --sig-split: 640px; }
  body.theme-signature .hero::before,
  body.theme-signature .hero-v2::before,
  body.theme-signature .hero::after,
  body.theme-signature .hero-v2::after {
    content: '';
    clip-path: polygon(
      0 var(--sig-split),
      100% calc(var(--sig-split) - 56px),
      100% 100%,
      0 100%
    );
  }
  body.theme-signature .hero::before,
  body.theme-signature .hero-v2::before { background: var(--gradient-dark); }
  body.theme-signature .hero::after,
  body.theme-signature .hero-v2::after {
    background: radial-gradient(320px circle at 85% 82%, rgba(0,194,255,0.28), transparent 70%);
  }

  /* The card itself no longer needs its own accent — the hero's navy
     band now sits behind it directly. */
  body.theme-signature .hero-cert-card { position: relative; z-index: 1; margin-top: 12px; }
}
body.theme-signature .hero-grid,
body.theme-signature .hero-v2-grid,
body.theme-signature .hero-cta,
body.theme-signature .hero-stats,
body.theme-signature .hero > .container,
body.theme-signature .hero-v2 > .container { position: relative; z-index: 1; }

body.theme-signature .hero p.lead,
body.theme-signature .hero p { color: var(--muted); }
body.theme-signature .hero h1 { color: var(--ink); }
body.theme-signature .hero-stat span { color: var(--muted); }

/* A short "signature stroke" under the H1 — a small on-brand flourish
   unique to this theme (not used anywhere else). */
body.theme-signature .hero h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 999px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--purple), var(--green));
}

/* Government-certified badge / hero cert card: these live on the hero's
   light side, so they need light-surface treatment like Nova's fix. */
body.theme-signature .gov-badge {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
body.theme-signature .gov-badge strong { color: var(--ink); }
body.theme-signature .gov-badge small { color: var(--muted); }

/* Eyebrow tags on every inner-page hero hard-code an inline dark-hero
   color; override for our light-left/navy-right split hero. */
body.theme-signature .hero .eyebrow[style] {
  background: rgba(0,102,255,0.08) !important;
  border: 1px solid rgba(0,102,255,0.22) !important;
  color: var(--purple-dark) !important;
}
/* Courses page search input: same inline dark-hero styling fix. */
body.theme-signature .hero input[style*="255,255,255"] {
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
body.theme-signature .hero input[style*="255,255,255"]::placeholder { color: var(--muted) !important; }

/* The certificate preview card sits on the navy panel — keep it a crisp
   white card with a stronger shadow so it visibly "lifts" off the navy. */
body.theme-signature .hero-cert-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
body.theme-signature .hero-cert-valid { color: #0f9d70; background: rgba(16,185,129,0.12); }
body.theme-signature .hero-visual {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
body.theme-signature .hero-visual .badge-row span {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ---------- Stat numbers: gradient-bordered pill badges instead of
   plain gradient-clipped text — this theme's take on the stat counter. ---------- */
body.theme-signature .hero-stat,
body.theme-signature .stat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.theme-signature .stat-card { align-items: center; }
body.theme-signature .hero-stat strong,
body.theme-signature .stat-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(120deg, var(--purple), var(--blue)) border-box;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 1.35rem;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}
body.theme-signature .stat-card strong { font-size: 1.6rem; padding: 10px 24px; }
/* Cert count / rating cards sit on white .card backgrounds already, but a
   few stat cards elsewhere render on a dark section — swap the badge fill
   to navy so it doesn't disappear against its own background. */
body.theme-signature .section-dark .stat-card strong,
body.theme-signature .section-dark .hero-stat strong {
  background: linear-gradient(var(--ink), var(--ink)) padding-box,
              linear-gradient(120deg, var(--blue), var(--green)) border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* ---------- Cards: ribbon-corner accent + colored glow on hover ---------- */
body.theme-signature .card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Folded-corner ribbon in the top-left, this theme's signature card mark */
body.theme-signature .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 26px 26px 0 0;
  border-color: var(--purple) transparent transparent transparent;
  opacity: 0.9;
  transition: border-width 0.25s ease;
}
body.theme-signature .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,102,255,0.25);
}
body.theme-signature .card:hover::before { border-width: 34px 34px 0 0; }
body.theme-signature .tag { background: var(--surface-alt); color: var(--ink); }
body.theme-signature .tag.popular { background: rgba(16,185,129,0.12); color: #0a7a57; }
body.theme-signature .course-card .icon { background: var(--gradient-primary); }
body.theme-signature .instructor-card .avatar { background: var(--gradient-primary); }
body.theme-signature .instructor-card .role { color: var(--purple-dark); }
body.theme-signature .form-card { border-radius: var(--radius-md); }

/* Cards explicitly forced dark via inline background (e.g. About page's
   certification-value panel) already carry their own white text — just
   drop the ribbon corner there since it reads oddly on a dark panel. */
body.theme-signature .card[style*="gradient-dark"]::before { display: none; }

/* ---------- Dark sections ---------- */
body.theme-signature .section-dark { position: relative; overflow: hidden; }
body.theme-signature .section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,194,255,0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
}
body.theme-signature .section-dark > .container { position: relative; z-index: 1; }
body.theme-signature .section-dark .card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
body.theme-signature .section-dark .card::before { border-color: var(--blue) transparent transparent transparent; }

/* ---------- Forms ---------- */
body.theme-signature input:focus,
body.theme-signature select:focus,
body.theme-signature textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,194,255,0.16);
}

/* ---------- Footer: Deep Navy with a jagged "stitched seam" top edge ---------- */
body.theme-signature .site-footer {
  background: var(--ink);
  position: relative;
  margin-top: 8px;
}
body.theme-signature .site-footer::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
  background:
    linear-gradient(135deg, var(--surface) 50%, transparent 50%) 0 0 / 26px 14px repeat-x,
    linear-gradient(-135deg, var(--surface) 50%, transparent 50%) 0 0 / 26px 14px repeat-x;
  background-color: var(--ink);
}
body.theme-signature .footer-grid h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}
body.theme-signature .footer-grid h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--green));
}
body.theme-signature .footer-grid a { transition: color 0.2s ease, padding-left 0.2s ease; }
body.theme-signature .footer-grid a:hover { color: var(--blue-light); padding-left: 4px; }

/* ---------- Back-to-top ---------- */
body.theme-signature .back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 10px 26px rgba(0,102,255,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
  z-index: 998;
}
body.theme-signature .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
body.theme-signature .back-to-top:hover { transform: translateY(-4px) scale(1.05); }
@media (max-width: 640px) {
  body.theme-signature .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}

/* ---------- Scrolling ticker strip ---------- */
body.theme-signature .site-marquee {
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid rgba(0,194,255,0.2);
  font-family: var(--font-heading);
}
body.theme-signature .site-marquee-track span {
  background: none;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: #fff;
}
body.theme-signature .site-marquee-track span::after {
  content: '\25C6';
  font-size: 0.6em;
  color: var(--green);
  -webkit-text-fill-color: var(--green);
}

/* ---------- Badges (Admin-facing, shared markup) ---------- */
body.theme-signature .badge-completed { background: rgba(16,185,129,0.12); color: #0a7a57; }