/*
 * TTCSPL "Course Outline" design skin — matches the AI World PDF outlines.
 * Palette: red #F0402A · saffron #F79A2B · blue #29AAE1 on ink #0B1220,
 * light surfaces #F6F8FB, hairlines #E7EAF0. Headings: Sora.
 * Loaded after style.css so it wins the cascade.
 */

:root{
  --tt-red:#F0402A;
  --tt-orange:#F79A2B;
  --tt-blue:#29AAE1;
  --tt-ink:#0B1220;
  --tt-navy:#0d1526;
  --tt-soft:#F6F8FB;
  --tt-line:#E7EAF0;
  --tt-muted:#5A6577;
  /* remap legacy tokens so old CSS picks up the new palette */
  --coral:var(--tt-red);
  --coral-hover:#d83318;
  --teal:var(--tt-blue);
  --secondary:var(--tt-blue);
  --secondary-container:var(--tt-blue);
  --primary:var(--tt-ink);
  --primary-container:#141e33;
  --surface:#ffffff;
  --surface-container-low:var(--tt-soft);
  --surface-container:#eef2f7;
  --slate:#242f42;
}

body{background:var(--tt-soft);color:#242f42}
h1,h2,h3,h4,h5,.section-header h2{font-family:'Sora','Inter',sans-serif;letter-spacing:-.01em;color:var(--tt-ink)}

/* ── tri-color brand bar (PDF footer bar) ── */
.tt-tribar{display:flex;height:6px;border-radius:99px;overflow:hidden}
.tt-tribar i{flex:1}
.tt-tribar i:nth-child(1){background:var(--tt-red)}
.tt-tribar i:nth-child(2){background:var(--tt-orange)}
.tt-tribar i:nth-child(3){background:var(--tt-blue)}

/* ── HEADER: dark navy cover-style bar ── */
.header{background:var(--tt-navy);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 2px 20px rgba(4,10,26,.45)}
.header .header-nav a{color:#c9d3e8}
.header .header-nav a:hover,.header .header-nav a.active{color:#fff}
.header .header-nav > a.active,.header .nav-item > a.active{color:var(--tt-orange)}
.header .header-logo-link{color:#fff}
.header .logo-mark{background:linear-gradient(135deg,var(--tt-red),var(--tt-orange));color:#fff}
.header .chevron{stroke:#c9d3e8}
.header .mobile-menu{color:#fff}
/* keep dropdown panels light for readability */
.header .dropdown{background:#fff;border:1px solid var(--tt-line);box-shadow:0 24px 48px -18px rgba(6,14,35,.35)}
@media (max-width:1023px){
  .header .header-nav{background:var(--tt-navy)}
  .header .header-nav a{color:#dbe4f5}
}

/* ── BUTTONS: PDF pill style ── */
.btn-coral,a.btn-coral{background:linear-gradient(120deg,var(--tt-red),var(--tt-orange));border:none;border-radius:99px;font-weight:700;box-shadow:0 10px 26px -10px rgba(240,64,42,.55);color:#fff}
.btn-coral:hover,a.btn-coral:hover{background:linear-gradient(120deg,#d83318,#e88d1d);transform:translateY(-1px)}
.btn-outline{border-radius:99px}
.btn-white,.btn-white-outline{border-radius:99px;font-weight:700}

/* ── SECTION HEADERS: letterspaced kicker + two-tone title ── */
.section-header h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800}
.section-header h2::after{content:"";display:block;width:64px;height:5px;margin:16px auto 0;border-radius:99px;background:linear-gradient(90deg,var(--tt-red) 0 33%,var(--tt-orange) 33% 66%,var(--tt-blue) 66% 100%)}
.section-header p{color:var(--tt-muted)}

/* ── CARDS: PDF outline cards (soft border, 14px radius) ── */
.pillar-card,.service-card,.webinar-card,.testimonial-card,.stat-block{
  background:#fff;border:1px solid var(--tt-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(14,19,32,.04);
}
.pillar-card:hover,.service-card:hover,.webinar-card:hover,.testimonial-card:hover{border-color:#d7dde8}
.card-link{color:var(--tt-blue);font-weight:700}
.card-link:hover{color:var(--tt-red)}

/* category left-bar, like PDF card headers */
.pillar-card h3{position:relative;padding-left:14px}
.pillar-card h3::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:99px;background:var(--tt-orange)}
.pillar-card.ai h3::before{background:var(--tt-red)}
.pillar-card.google h3::before{background:var(--tt-blue)}

/* ── WEBINAR tags → PDF category pills ── */
.webinar-tag,.webinar-tag.upcoming{background:var(--tt-red);color:#fff;border-radius:99px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;padding:5px 12px}

/* ── stat blocks: colored number blocks vibe ── */
.stat-block .stat-icon{background:linear-gradient(135deg,var(--tt-blue),#1b8fc4);color:#fff;border-radius:12px}

/* ── MS partner / CTA bands → dark "hands-on lab" banner ── */
.ms-partner,.cta-band{background:radial-gradient(600px 300px at 85% 20%,rgba(41,170,225,.28),transparent 60%),var(--tt-navy);border-radius:0}
.cta-band h2,.ms-partner h3{color:#fff}
.cta-band p,.ms-partner p{color:#c3cce6}

/* ── FOOTER: PDF cover footer ── */
.footer{background:var(--tt-navy);border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--tt-red) 0 33%,var(--tt-orange) 33% 66%,var(--tt-blue) 66% 100%) 1}
.footer,.footer p,.footer .footer-contact-item{color:#a9b4cd}
.footer h3{color:var(--tt-orange);font-family:'Sora',sans-serif}
.footer h4{color:#fff;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.footer a{color:#c9d3e8}
.footer a:hover{color:var(--tt-orange)}
.footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.custom-footer-policies{color:#8b97bd}
.custom-footer-policies a{color:#8b97bd}
.custom-footer-policies a:hover{color:var(--tt-orange)}

/* ── hero action rows: buttons on one line, equal height ── */
.hero-btns{display:flex !important;gap:12px !important;align-items:stretch !important;flex-wrap:wrap}
.hero-btns a,.hero-btns button{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:99px !important;padding:13px 26px !important;font-weight:700 !important;line-height:1 !important;
}
.hero-btns .btn-teal{
  background:rgba(255,255,255,.06) !important;border:1.5px solid var(--tt-blue) !important;color:#fff !important;
}
.hero-btns .btn-teal:hover{background:rgba(41,170,225,.18) !important}

/* ── equal-height cards: pin CTA buttons to the same level ── */
.webinar-card{display:flex;flex-direction:column}
.webinar-card .webinar-meta{flex:1}
.webinar-card .btn-coral,.webinar-card a.btn-coral{margin-top:auto}
.level-card{display:flex;flex-direction:column}
.level-card .level-list{flex:1}
.level-card .pp-enquire{margin-top:auto;align-self:stretch;justify-content:center;text-align:center}

/* ── header dropdown: dark navy panel with readable light text ── */
.header .dropdown{background:#141e33;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 48px -18px rgba(2,8,23,.7)}
.header .dropdown a{color:#e7ecfb!important}
.header .dropdown a:hover{color:#fff!important;background:rgba(255,255,255,.08)}
.header .drop-group-label{color:var(--tt-orange)!important;font-weight:800;letter-spacing:.1em}

/* ── footer brand logo ── */
.footer .footer-logo-link{display:inline-block;margin-bottom:14px}
.footer .footer-logo{height:56px;width:auto;display:block}

/* ════════════════════════════════════════════════════════════
   INNER-PAGE UNIFICATION — course & solution templates carry
   per-page inline <style> blocks (green/purple/etc. heroes).
   These !important rules bring every page onto the homepage's
   dark-navy + red/orange/blue PDF cover language.
   ════════════════════════════════════════════════════════════ */

/* dark hero canvas — same as homepage cover (course & solution templates only) */
body[class*="page-template-page-course-"] .hero,
body[class*="page-template-page-sol-"] .hero,
body[class*="page-template-page-course-"] .outcomes,
body[class*="page-template-page-sol-"] .outcomes{
  background:
    radial-gradient(700px 520px at 85% 12%, rgba(247,154,43,.16), transparent 62%),
    radial-gradient(620px 480px at -6% 92%, rgba(41,170,225,.14), transparent 60%),
    linear-gradient(165deg,#0a1020 0%,#0c1426 55%,#0a111f 100%) !important;
}
.hero h1 span{
  background:linear-gradient(100deg,var(--tt-red),var(--tt-orange) 48%,var(--tt-blue)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.hero .orb.o1{background:radial-gradient(circle,var(--tt-orange),transparent) !important}
.hero .orb.o2{background:radial-gradient(circle,var(--tt-blue),transparent) !important}
.hero-badge::before{background:var(--tt-orange) !important}

/* buttons */
.btn-primary,.btn-submit{
  background:linear-gradient(120deg,var(--tt-red),var(--tt-orange)) !important;
  border-radius:99px !important;
  box-shadow:0 10px 26px -10px rgba(240,64,42,.55) !important;
}
.btn-ghost{border-radius:99px !important}

/* section header underline → tri-color */
.sh-line{
  background:linear-gradient(90deg,var(--tt-red) 0 33%,var(--tt-orange) 33% 66%,var(--tt-blue) 66% 100%) !important;
  height:5px !important;width:64px !important;border-radius:99px !important;
}

/* section canvases */
.audience,.delivery{background:var(--tt-soft) !important}
.enquiry{background:#fdf3e7 !important} /* PDF "use cases" peach panel */
.curriculum,.related{background:#fff !important}

/* cards: PDF outline card style */
.aud-card,.del-card,.curr-module,.rel-card,.eq-form,.eq-detail,.stats-inner{
  border:1px solid var(--tt-line) !important;border-radius:14px !important;
}
.curr-module{background:#fff !important}
.cm-header{background:var(--tt-soft) !important;border-bottom:1px solid var(--tt-line) !important}
.cm-num{background:linear-gradient(135deg,var(--tt-red),var(--tt-orange)) !important;border-radius:10px !important}
.cm-topics li::before{color:var(--tt-orange) !important}
.oc-icon::before{background:linear-gradient(135deg,var(--tt-orange),var(--tt-blue)) !important}
.aud-card:hover,.curr-module:hover,.rel-card:hover{border-color:#d7dde8 !important}
.rel-card::before{background:linear-gradient(90deg,var(--tt-red) 0 33%,var(--tt-orange) 33% 66%,var(--tt-blue) 66% 100%) !important}

/* stats band numbers in brand ink */
.stat-num{color:var(--tt-ink) !important;font-family:'Sora','Inter',sans-serif !important}

/* enquiry form focus + CTA block */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--tt-blue) !important;box-shadow:0 0 0 3px rgba(41,170,225,.18) !important;
}
.cta-block{background:
  radial-gradient(400px 200px at 85% 20%, rgba(41,170,225,.25), transparent 60%),
  var(--tt-navy) !important;border-radius:14px !important}
.cta-line a{color:var(--tt-orange) !important}

/* generic pill accents that pages tint per-product */
.pill,.hero-pills .pill{border-radius:99px !important}

/* ── Contact Form 7: PDF-style inputs ── */
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 textarea,.wpcf7 select{
  border:1px solid var(--tt-line);border-radius:10px;background:#fff;
}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{border-color:var(--tt-blue);outline:none;box-shadow:0 0 0 3px rgba(41,170,225,.18)}
.wpcf7 input[type="submit"]{background:linear-gradient(120deg,var(--tt-red),var(--tt-orange));border:none;border-radius:99px;color:#fff;font-weight:700;padding:13px 30px;cursor:pointer;box-shadow:0 10px 26px -10px rgba(240,64,42,.55)}
.wpcf7 input[type="submit"]:hover{filter:brightness(.95)}