/* ==========================================================================
   ISACA-FIRST REDESIGN (T18, Nov 2026)
   --------------------------------------------------------------------------
   Components for the ISACA-first pages: trust bar in the header, hero
   credential card, trust strip, risk statistics, CISA/CISM course cards,
   facts boxes, Pass Assurance, DoD 8140 table and the footer ATO block.
   Loaded after vis-nav.css on every page (build.py adds the <link>).

   Logo rules followed here (ISACA brand guidance):
   - Official artwork only, never recoloured, stretched or cropped.
   - Logos sit on white with clear space around them (the "chip"), never
     on a busy background and never inside a sentence.
   - Certification logos at least 30px tall on screen.
   ========================================================================== */

/* ---------- ISACA logo chip (white plate with clear space) ---------------- */
.vis-isaca-chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#fff;border-radius:6px;padding:1px 6px;line-height:0}
.vis-isaca-chip img{height:30px;width:auto;max-width:none}
.vis-isaca-chip.vis-isaca-chip-lg{padding:4px 10px;border-radius:8px}
.vis-isaca-chip.vis-isaca-chip-lg img{height:44px}

/* ---------- Header trust bar (replaces the address/email topbar) ---------- */
#topbar.vis-topbar-ato{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
#topbar.vis-topbar-ato .vis-tb-ato{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:14px;
  color:rgba(255,255,255,.88);text-decoration:none;white-space:nowrap}
#topbar.vis-topbar-ato .vis-tb-ato:hover .vis-tb-ato-text{color:#fff}
#topbar.vis-topbar-ato .vis-tb-ato strong{font-weight:600;color:#fff}
#topbar.vis-topbar-ato .vis-tb-sep{margin:0 8px;opacity:.55}
#topbar.vis-topbar-ato .topbar-widget{padding-right:22px}
@media (max-width:1199.98px){#topbar.vis-topbar-ato .vis-tb-more{display:none}}

/* ---------- Main menu: six items, two mega panels ------------------------- */
/* The T16 hover bridge was sized for "Services" as the 2nd item. With two
   mega parents it would cover neighbouring links, so keep it to the link's
   own width and drop the diagonal wedge. Straight down still stays open. */
@media (min-width:993px){
  header:not(.header-mobile) #mainmenu.vis-menu-isaca > li.vis-mega-parent:hover > a.menu-item::before{left:-14px;right:-14px}
  header:not(.header-mobile) #mainmenu.vis-menu-isaca > li.vis-mega-parent:hover > a.menu-item::after{display:none}
}

/* ---------- Homepage hero ----------------------------------------------------- */
#subheader.vis-hero{padding:190px 0 96px}
.vis-hero .vis-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,15,26,.94) 0%,rgba(8,15,26,.82) 55%,rgba(8,15,26,.6) 100%)}
.vis-hero .container{position:relative;z-index:2}
#subheader.vis-hero h1{font-size:54px;line-height:1.12;letter-spacing:-.02em;margin-bottom:22px}
.vis-hero .vis-hero-lead{font-size:20px;line-height:1.55;color:rgba(255,255,255,.86);max-width:640px;margin-bottom:28px}
.vis-hero .vis-hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.vis-hero .vis-hero-kicker:before{content:"";flex:0 0 28px;height:2px;background:var(--primary-color)}
.vis-hero .btn-main{margin:0 10px 12px 0}
.vis-hero-note{font-size:15px;color:rgba(255,255,255,.75);margin:6px 0 0}
.vis-hero-note a{color:#fff;font-weight:600;text-decoration:underline}
@media (max-width:991.98px){
  #subheader.vis-hero{padding:150px 0 70px}
  #subheader.vis-hero h1{font-size:38px}
  .vis-hero .vis-hero-lead{font-size:18px}
}
@media (max-width:575.98px){#subheader.vis-hero h1{font-size:32px}.vis-hero .vis-hero-kicker{font-size:12px;letter-spacing:.05em}.vis-hero .vis-hero-kicker:before{flex-basis:18px}}

/* ---------- Hero course picker (ISACA header + one clickable row per course) ---- */
/* The certification logos sit inside course rows with who-it's-for, dates and price,
   so the card reads as a choice to make rather than a wall of logos. */
.vis-pick{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);color:#334155}
.vis-pick-head{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid rgba(8,15,26,.08);text-decoration:none}
.vis-pick-head img{height:46px;width:auto;flex:0 0 auto}
.vis-pick-head span{border-left:1px solid rgba(8,15,26,.15);padding-left:16px;font-family:var(--heading-font);font-weight:700;
  font-size:15px;line-height:1.25;color:var(--bg-dark-1)}
.vis-pick-row{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid rgba(8,15,26,.07);
  color:inherit;text-decoration:none;transition:background .2s ease}
.vis-pick-row:hover{background:#f8fafc}
.vis-pick-row img{height:92px;width:auto;flex:0 0 auto}
.vis-pick-body{flex:1 1 auto;min-width:0}
.vis-pick-body strong{display:block;font-family:var(--heading-font);font-size:20px;font-weight:600;line-height:1.2;
  color:var(--bg-dark-1);margin-bottom:3px}
.vis-pick-body small{display:block;font-size:14px;line-height:1.4;color:#475569;margin-bottom:6px}
.vis-pick-body em{display:block;font-style:normal;font-size:13px;font-weight:600;line-height:1.4;color:var(--secondary-color)}
.vis-pick-row i{flex:0 0 auto;color:#94a3b8;transition:transform .2s ease,color .2s ease}
.vis-pick-row:hover i{transform:translateX(4px);color:var(--primary-color)}
.vis-pick-row:hover strong{color:var(--secondary-color)}
.vis-pick-foot{display:flex;align-items:center;gap:10px;padding:13px 24px;background:#f6f7f9;font-size:14px;color:#475569}
.vis-pick-foot i{color:var(--primary-color)}
@media (max-width:575.98px){
  .vis-pick-head,.vis-pick-row,.vis-pick-foot{padding-left:16px;padding-right:16px}
  .vis-pick-head img{height:38px}
  .vis-pick-row{gap:14px}
  .vis-pick-row img{height:78px}
  .vis-pick-row i{display:none}
}

/* Smaller logo blocks used on course and 8140 pages */
.vis-logo-plate{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;
  padding:14px;box-shadow:0 10px 30px rgba(8,15,26,.10)}
.vis-logo-plate img{height:170px;width:auto}
.vis-logo-plate.vis-logo-plate-sm img{height:110px}
.vis-logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* ---------- Trust strip under the hero --------------------------------------- */
.vis-trust{padding:30px 0;background:#fff;border-bottom:1px solid rgba(8,15,26,.07)}
.vis-trust-item{display:flex;gap:14px;align-items:flex-start;height:100%}
.vis-trust-item i{flex:0 0 44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--primary-color);background:rgba(var(--primary-color-rgb),.10)}
.vis-trust-item strong{display:block;font-family:var(--heading-font);font-size:17px;color:var(--heading-font-color);line-height:1.3;margin-bottom:3px}
.vis-trust-item span{display:block;font-size:14px;line-height:1.45}
.vis-trust-item a{color:inherit}

/* ---------- Risk statistics -------------------------------------------------- */
.vis-stat{height:100%;padding:28px 26px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.vis-stat-num{font-family:var(--heading-font);font-size:56px;font-weight:700;line-height:1;color:var(--primary-color);margin-bottom:12px}
.vis-stat-label{font-size:17px;line-height:1.45;color:#fff;margin-bottom:10px}
.vis-stat-src{font-size:13px;opacity:.7}
.vis-stat-src a{color:inherit;text-decoration:underline}
.bg-light .vis-stat,.vis-stat.vis-stat-light{background:#fff;border-color:rgba(8,15,26,.08)}
.bg-light .vis-stat-label,.vis-stat.vis-stat-light .vis-stat-label{color:var(--heading-font-color)}

/* ---------- CISA / CISM course cards ----------------------------------------- */
.vis-course-card{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:32px 30px;
  box-shadow:0 14px 40px rgba(8,15,26,.08);border:1px solid rgba(8,15,26,.06)}
.vis-course-head{display:flex;gap:22px;align-items:center;margin-bottom:18px}
.vis-course-head img{height:140px;width:auto;flex:0 0 auto}
.vis-course-head h3{margin-bottom:6px}
.vis-course-for{font-size:15px;line-height:1.5;margin:0}
.vis-course-card .ul-check{margin-bottom:18px}
.vis-course-card .vis-course-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:575.98px){.vis-course-head{flex-direction:column;align-items:flex-start}.vis-course-head img{height:120px}}

/* Facts list (next dates, format, price ...) */
.vis-facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 20px;font-size:15px}
.vis-facts dt{font-weight:600;color:var(--heading-font-color)}
.vis-facts dd{margin:0}
.vis-facts dd a{color:var(--secondary-color);font-weight:600}
.vis-facts dd a:hover{color:var(--primary-color)}
.section-dark .vis-facts dt,.text-light .vis-facts dt{color:#fff}

.vis-facts-box{border-radius:14px;background:#f6f7f9;border:1px solid rgba(8,15,26,.07);padding:26px 26px 10px}
.vis-facts-box h2,.vis-facts-box h3{margin-bottom:14px}

/* ---------- Pass Assurance ----------------------------------------------------- */
.vis-pa-promise{font-family:var(--heading-font);font-size:28px;line-height:1.35;font-weight:600;color:#fff;margin-bottom:18px}
.vis-pa-list{list-style:none;margin:0 0 18px;padding:0;counter-reset:pa}
.vis-pa-list li{position:relative;padding:12px 0 12px 48px;border-bottom:1px solid rgba(255,255,255,.10);counter-increment:pa;line-height:1.5}
.vis-pa-list li:before{content:counter(pa);position:absolute;left:0;top:10px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;background:var(--primary-color);color:#fff}
.bg-light .vis-pa-list li,.vis-pa-list.vis-pa-light li{border-bottom-color:rgba(8,15,26,.08)}
.vis-pa-pay{border-radius:14px;padding:26px;background:var(--primary-color);color:#fff}
.vis-pa-pay h3,.vis-pa-pay p,.vis-pa-pay li{color:#fff}
.vis-pa-pay .vis-pa-amount{font-family:var(--heading-font);font-size:40px;font-weight:700;line-height:1.1;margin-bottom:6px}

/* ---------- DoD 8140 table ------------------------------------------------------ */
.vis-8140-table{font-size:15px}
.vis-8140-table td:first-child{width:46%}
.vis-8140-table td.vis-lvl{white-space:nowrap}
.vis-lvl-tag{display:inline-block;font-size:13px;font-weight:600;padding:2px 10px;border-radius:20px;margin:2px 4px 2px 0;
  background:rgba(var(--primary-color-rgb),.12);color:var(--secondary-color)}
.vis-lvl-none{opacity:.5}

/* ---------- Text-only certification list (no logos by design) ------------------ */
.vis-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.vis-pills li{font-size:15px;line-height:1.4;padding:6px 14px;border-radius:20px;background:#fff;
  border:1px solid rgba(8,15,26,.12);color:var(--heading-font-color)}
.section-dark .vis-pills li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}

/* ---------- Section helpers ---------------------------------------------------- */
.vis-answer{font-size:19px;line-height:1.6;color:var(--heading-font-color);border-left:4px solid var(--primary-color);
  padding:4px 0 4px 20px;margin-bottom:26px}
.section-dark .vis-answer{color:#fff}
.vis-updated{font-size:14px;opacity:.75}
.vis-src-list{font-size:14px;line-height:1.6;padding-left:18px}
.vis-src-list a{color:var(--secondary-color)}
.vis-cta-band{border-radius:16px;padding:36px 34px;background:var(--bg-dark-2);color:#fff}
.vis-cta-band h2{color:#fff}
.link-prose a{text-decoration:underline}

/* ---------- Footer ATO block and trademark line ---------------------------------- */
footer .vis-ft-ato{display:inline-flex;align-items:center;gap:12px;margin:4px 0 22px;text-decoration:none}
footer .vis-ft-ato-text{font-family:var(--heading-font);font-weight:600;font-size:15px;line-height:1.3;color:#fff;max-width:130px}
footer .vis-tm-line{font-size:13px;line-height:1.5;opacity:.65;margin:10px 0 0;text-align:center}

/* ---------- Hero motion (T18) -------------------------------------------------------
   Network canvas (js/vis-hero.js), a slow glow, staggered entrance, rotating
   "Built for" roles and a live dot on the cohort lines. All of it is switched
   off for visitors who ask for reduced motion. */
.vis-hero .vis-hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.vis-hero .vis-hero-net.is-on{opacity:.9}
.vis-hero .vis-hero-glow{position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:radial-gradient(38% 42% at 72% 38%,rgba(249,115,22,.16),transparent 70%),
             radial-gradient(34% 38% at 22% 78%,rgba(56,189,248,.12),transparent 70%);
  animation:visGlow 18s ease-in-out infinite alternate}
@keyframes visGlow{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.08)}100%{transform:translate3d(3%,-2%,0) scale(1.02)}}

.vis-in{animation:visIn .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes visIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

.vis-hero-roles{display:flex;align-items:center;gap:10px;font-family:var(--heading-font);font-size:22px;font-weight:600;
  color:rgba(255,255,255,.9);margin:-6px 0 18px}
.vis-roles-label{color:rgba(255,255,255,.65);font-weight:500}
.vis-roles{display:inline-block;height:1.5em;line-height:1.5em;overflow:hidden;vertical-align:bottom}
.vis-roles-track{display:flex;flex-direction:column;animation:visRoles 12.5s cubic-bezier(.7,0,.3,1) infinite}
.vis-roles-track span{display:block;height:1.5em;color:var(--primary-color);white-space:nowrap}
@keyframes visRoles{
  0%,16%{transform:translateY(0)}
  20%,36%{transform:translateY(-1.5em)}
  40%,56%{transform:translateY(-3em)}
  60%,76%{transform:translateY(-4.5em)}
  80%,96%{transform:translateY(-6em)}
  100%{transform:translateY(-7.5em)}
}
@media (max-width:575.98px){.vis-hero-roles{font-size:18px}}

.vis-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:8px;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:visLive 2s ease-out infinite}
@keyframes visLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

@media (prefers-reduced-motion:reduce){
  .vis-in,.vis-hero .vis-hero-glow,.vis-live,.vis-roles-track{animation:none !important}
  .vis-hero .vis-hero-net{display:none}
}