/* ==========================================================================
   Code College — Cybersecurity theme
   Brings the older cyber pages (tracks, modules overview, module pages,
   apply + thank-you) in line with the new /cybersecurity-bootcamps/ page:
   light purple/cyan hero, purple primary buttons, 10px corners, cyan accents.
   Loaded AFTER each page's own <style>, and scoped to <body class="cc-cyber">
   so it only affects pages that opt in.
   ========================================================================== */

body.cc-cyber{
  /* re-map the old navy palette onto the Code College purple palette */
  --navy:#3f1d50;
  --navy-mid:#80379B;
  --navy-light:#9B50B5;
  --navy-xlight:#EDD9F5;
  --navy-xxlight:#F9F0FC;
  --cyan-light:#e6f9fb;
  --cc-purple:#80379B; --cc-purple-dk:#5f2873; --cc-purple-lt:#F9F0FC;
  --cc-cyan:#00C6D7; --cc-cyan-dk:#0098a6; --cc-cyan-lt:#e6f9fb;
  --cc-ink:#1d1a22; --cc-ink-2:#4a4552; --cc-ink-3:#6f6a78; --cc-line:#e6e2ea;
  --cc-hero-bg:linear-gradient(160deg,#fff 0%,#F9F0FC 60%,#e6f9fb 100%);
  --cc-dark-bg:linear-gradient(135deg,#80379B 0%,#5f2873 100%);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- Page sub-nav (purple bar under the site menu) ---------- */
body.cc-cyber .sub-nav{background:var(--cc-purple)}
body.cc-cyber .sub-nav__cta{background:#fff;color:var(--cc-purple);border-radius:10px;font-weight:800}
body.cc-cyber .sub-nav__cta:hover{opacity:.92}
body.cc-cyber .sub-nav__link.active{background:rgba(255,255,255,.18);color:#fff}

/* ---------- Buttons: 10px corners, purple primary ---------- */
body.cc-cyber .btn,
body.cc-cyber .enrol-btn,
body.cc-cyber .pricing-btn,
body.cc-cyber .btn-submit{border-radius:10px}
body.cc-cyber .btn-cyan,
body.cc-cyber .btn-navy,
body.cc-cyber .btn-primary,
body.cc-cyber .pricing-btn.navy,
body.cc-cyber .btn-submit{background:var(--cc-purple);color:#fff;border-color:var(--cc-purple)}
body.cc-cyber .btn-cyan:hover,
body.cc-cyber .btn-navy:hover,
body.cc-cyber .btn-primary:hover,
body.cc-cyber .pricing-btn.navy:hover,
body.cc-cyber .btn-submit:hover{background:var(--cc-purple-dk)}
body.cc-cyber .btn-outline-navy{color:var(--cc-purple);border-color:var(--cc-purple)}
body.cc-cyber .btn-outline-navy:hover{background:var(--cc-purple-lt)}

/* ---------- Light hero (all page types) ---------- */
body.cc-cyber .hero,
body.cc-cyber #hero,
body.cc-cyber .page-hero{background:var(--cc-hero-bg)!important;color:var(--cc-ink)}
body.cc-cyber .hero::before,body.cc-cyber .hero::after,
body.cc-cyber #hero::before,body.cc-cyber #hero::after{display:none}
body.cc-cyber .hero h1,body.cc-cyber .hero__h1,
body.cc-cyber .hero-title,body.cc-cyber .page-hero h1{color:var(--cc-ink)}
body.cc-cyber .hero__h1 span,body.cc-cyber .hero-title span{color:var(--cc-purple)}
body.cc-cyber .hero__certs,body.cc-cyber .hero-sub{color:var(--cc-purple)}
body.cc-cyber .hero__sub,body.cc-cyber .hero-desc,
body.cc-cyber #hero .hero-sub,body.cc-cyber .page-hero p{color:var(--cc-ink-2)}
body.cc-cyber .hero a:not(.btn),body.cc-cyber #hero a:not(.btn){color:var(--cc-purple)}
/* badges / eyebrows / tool chips inside the hero */
body.cc-cyber .hero__badge,body.cc-cyber .hero-badge,body.cc-cyber .hero-eyebrow{
  background:#fff;border:1px solid var(--cc-line);color:var(--cc-purple);backdrop-filter:none}
body.cc-cyber .hero__badge-dot{background:var(--cc-cyan)}
body.cc-cyber .hero__tag,body.cc-cyber .hero-tag{
  background:var(--cc-cyan-lt);border:0;color:var(--cc-cyan-dk);font-weight:700}
body.cc-cyber .module-num-badge{background:var(--cc-purple);color:#fff}
/* hero buttons: white-on-dark styles become purple-on-light */
body.cc-cyber .hero .btn-white,body.cc-cyber #hero .btn-white{background:var(--cc-purple);color:#fff}
body.cc-cyber .hero .btn-white:hover,body.cc-cyber #hero .btn-white:hover{background:var(--cc-purple-dk)}
body.cc-cyber .hero .btn-outline,body.cc-cyber #hero .btn-outline{
  background:#fff;color:var(--cc-purple);border:2px solid var(--cc-purple)}
body.cc-cyber .hero .btn-outline:hover,body.cc-cyber #hero .btn-outline:hover{background:var(--cc-purple-lt)}
/* overview hero "at a glance" card → white card with cyan top edge (as on the bootcamp page) */
body.cc-cyber .hero-card{background:#fff;border:1px solid var(--cc-line);border-top:5px solid var(--cc-cyan);
  box-shadow:0 6px 24px rgba(40,20,50,.08);backdrop-filter:none}
body.cc-cyber .hero-card-title{color:var(--cc-ink)}
body.cc-cyber .hero-stat-label{color:var(--cc-ink-3)}
body.cc-cyber .hero-stat-value{color:var(--cc-ink)}

/* ---------- Stats strips → light strip, purple numbers ---------- */
body.cc-cyber .stats-bar,
body.cc-cyber #stats{background:#fff!important;border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line);backdrop-filter:none;color:var(--cc-ink)}
body.cc-cyber .stats-bar__value,body.cc-cyber .stat-val,body.cc-cyber .stat-value{color:var(--cc-purple)}
body.cc-cyber .stats-bar__label,body.cc-cyber .stat-lbl,body.cc-cyber .stat-label{color:var(--cc-ink-3)}

/* ---------- Section labels → eyebrow text like the bootcamp page ---------- */
body.cc-cyber .section-label,
body.cc-cyber .section-label--cyan,
body.cc-cyber .tag:not(.tag--navy):not(.tag--cyan){background:transparent;color:var(--cc-purple);padding-left:0;padding-right:0;letter-spacing:.08em}
body.cc-cyber .tag--navy{background:var(--cc-purple-lt);color:var(--cc-purple)}
body.cc-cyber .tag--cyan{background:var(--cc-cyan-lt);color:var(--cc-cyan-dk)}

/* ---------- Module pages: replace per-module colours with the purple theme ---------- */
body.cc-cyber .topic-num{background:var(--cc-purple)!important}
body.cc-cyber .prereq-banner{background:var(--cc-purple-lt)!important;border-left-color:var(--cc-purple)!important}
body.cc-cyber .prereq-banner strong{color:var(--cc-purple)!important}
body.cc-cyber .next-mod-card{background:var(--cc-purple-lt)!important;border-color:#e3cfe9!important}
body.cc-cyber .enrol-btn{background:var(--cc-purple)!important;color:#fff!important}
body.cc-cyber .enrol-btn:hover{background:var(--cc-purple-dk)!important}

/* ---------- Dark call-to-action / feature blocks → purple gradient ---------- */
body.cc-cyber .apply-cta,
body.cc-cyber .cta-section,
body.cc-cyber #careers,
body.cc-cyber .fullcamp{background:var(--cc-dark-bg)!important}
body.cc-cyber .apply-cta .btn-cyan,
body.cc-cyber .cta-section .btn-white,
body.cc-cyber .fullcamp .btn-cyan,
body.cc-cyber #careers .btn-cyan{background:var(--cc-cyan);color:#062c30}
body.cc-cyber .apply-cta .btn-cyan:hover,
body.cc-cyber .cta-section .btn-white:hover{background:#3fd8e5}

/* ---------- Overview page cards ---------- */
body.cc-cyber .track-card.pentest,
body.cc-cyber .track-card.soc,
body.cc-cyber .track-card.grc{background:var(--cc-dark-bg)}
body.cc-cyber .pricing-card.professional{background:var(--cc-dark-bg)}
body.cc-cyber .pricing-card.elite{background:linear-gradient(135deg,#3f1d50,#5f2873)}
body.cc-cyber .popular-badge{background:var(--cc-cyan);color:#062c30}

/* ---------- Forms (apply page) ---------- */
body.cc-cyber .radio-option input[type=radio]:checked ~ .radio-dot{border-color:var(--cc-purple);background:var(--cc-purple)}
body.cc-cyber input:focus,body.cc-cyber select:focus,body.cc-cyber textarea:focus{border-color:var(--cc-purple);outline-color:var(--cc-purple)}
body.cc-cyber .step-num{background:var(--cc-purple)}

/* ---------- Shared extras injected by cyber-common.js ---------- */
.cc-intake{background:#e6f9fb;font-size:.9rem;color:#4a4552;font-family:"Inter",system-ui,sans-serif}
.cc-intake__in{max-width:1160px;margin:0 auto;padding:8px 20px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;text-align:center}
.cc-intake a{color:#80379B;font-weight:700}
.cc-subnav{background:#80379B}
.cc-subnav__in{max-width:1160px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.cc-subnav__brand{font-family:"Nunito",sans-serif;font-weight:900;color:#fff;text-decoration:none;white-space:nowrap;font-size:.95rem}
.cc-subnav__links{display:flex;gap:4px;overflow-x:auto}
.cc-subnav__links a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.86rem;padding:5px 10px;border-radius:6px;white-space:nowrap}
.cc-subnav__links a:hover,.cc-subnav__links a.active{background:rgba(255,255,255,.16);color:#fff}
.cc-subnav__cta{background:#fff;color:#80379B;border-radius:10px;padding:.45em 1em;font-weight:800;font-size:.88rem;text-decoration:none;font-family:"Nunito",sans-serif;white-space:nowrap}
@media(max-width:900px){.cc-subnav__links{display:none}}
.cc-mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid #e6e2ea;padding:10px 12px;display:none;gap:10px}
.cc-mbar a{flex:1;display:flex;align-items:center;justify-content:center;padding:.75em;border-radius:10px;font-weight:800;text-decoration:none;font-family:"Nunito",sans-serif}
.cc-mbar .wa{background:#25D366;color:#fff}.cc-mbar .ap{background:#80379B;color:#fff}
@media(max-width:760px){.cc-mbar{display:flex}body.cc-cyber{padding-bottom:70px}}
.cc-wa{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.cc-wa svg{width:30px;height:30px;fill:#fff}
@media(max-width:760px){.cc-wa{display:none}}

/* Overview page uses --navy-light as a pale tint (other pages use it as a mid tone) */
body.cc-cyber.cc-overview{--navy-light:#EDD9F5}

/* Certification pages: hero trust items + right-hand card on the light hero */
body.cc-cyber .hero__trust-item{color:var(--cc-ink-2)}
body.cc-cyber .hero__card{background:#fff!important;border:1px solid var(--cc-line);border-top:5px solid var(--cc-cyan);box-shadow:0 6px 24px rgba(40,20,50,.08);color:var(--cc-ink);backdrop-filter:none}
body.cc-cyber .hero__card *{color:inherit}
body.cc-cyber .hero__card-label{color:var(--cc-purple)!important}
body.cc-cyber .hero__card-sub{color:var(--cc-ink-3)!important}
/* Apply page note under the hero, stat labels on bootcamp pages */
body.cc-cyber .page-hero__note{color:var(--cc-ink-3)}
body.cc-cyber .stat-lbl{color:var(--cc-ink-3)}

/* Bootcamp pages: two-column pricing cards stack on phones */
@media(max-width:560px){body.cc-cyber div:has(> .pricing-card){grid-template-columns:1fr!important}}
@media(max-width:700px){body.cc-cyber .container div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}}