/* =========================================================================
   The Cyber GRC Course: minimal theme layer.

   Design intent: stay as close to stock Material for MkDocs as possible so
   the built-in light/dark (default/slate) palettes work without fighting.
   This file therefore styles ONLY the bespoke components that Material has
   no equivalent for: the lesson "spec strip", the custom admonitions
   (technical / scaldimet / takeaway / ciso), the quiz, and the progress widget.

   Every colour below is taken from Material's own CSS variables, so each
   component follows the active colour scheme automatically. There are NO
   palette, header, font, or typography overrides.
   ========================================================================= */

/* ---- Lesson "spec strip" (the calibration-certificate header) ---------- */
.lesson-strip {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  border-top: 2px solid var(--md-accent-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding: .7rem 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  align-items: baseline;
}
.lesson-strip .ls-id    { color: var(--md-accent-fg-color); font-weight: 700; }
.lesson-strip .ls-title { color: var(--md-default-fg-color); text-transform: none; letter-spacing: 0; font-size: .72rem; }

/* ---- Custom admonitions ------------------------------------------------
   Each sets only a left-border colour and an icon. The title-bar background
   is a light tint of that same colour via color-mix, so it adapts to both
   schemes. Material supplies everything else.                              */

/* TECHNICAL EXPLAINER (neutral, primary colour) */
.md-typeset .admonition.technical,
.md-typeset details.technical { border-color: var(--md-primary-fg-color); }
.md-typeset .technical > .admonition-title,
.md-typeset .technical > summary {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .03em;
}
.md-typeset .technical > .admonition-title::before,
.md-typeset .technical > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--technical); mask-image: var(--md-admonition-icon--technical);
}
:root { --md-admonition-icon--technical: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 4a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1Zm0 11.5a1.25 1.25 0 1 1 1.25-1.25A1.25 1.25 0 0 1 12 17.5Z"/></svg>'); }

/* Scaldimet CASE (accent colour, the case-study brand) */
.md-typeset .admonition.scaldimet,
.md-typeset details.scaldimet { border-color: var(--md-accent-fg-color); }
.md-typeset .scaldimet > .admonition-title,
.md-typeset .scaldimet > summary {
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .03em;
}
.md-typeset .scaldimet > .admonition-title::before,
.md-typeset .scaldimet > summary::before {
  background-color: var(--md-accent-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--scaldimet); mask-image: var(--md-admonition-icon--scaldimet);
}
:root { --md-admonition-icon--scaldimet: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9 12 2 2 9v2h2v9h6v-6h4v6h6v-9h2Z"/></svg>'); }

/* TAKEAWAY (accent colour, stronger tint) */
.md-typeset .admonition.takeaway,
.md-typeset details.takeaway { border-color: var(--md-accent-fg-color); }
.md-typeset .takeaway > .admonition-title {
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 22%, transparent);
  font-weight: 700;
}
.md-typeset .takeaway > .admonition-title::before {
  background-color: var(--md-accent-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--takeaway); mask-image: var(--md-admonition-icon--takeaway);
}
:root { --md-admonition-icon--takeaway: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 21h6v-1H9v1Zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z"/></svg>'); }

/* TRY IT IN CISO ASSISTANT (used from Module 3+; monospace, code-surface) */
.md-typeset .admonition.ciso,
.md-typeset details.ciso {
  border-color: var(--md-primary-fg-color);
  background-color: var(--md-code-bg-color);
}
.md-typeset .ciso > .admonition-title,
.md-typeset .ciso > summary {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .04em;
}
.md-typeset .ciso > .admonition-title::before,
.md-typeset .ciso > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--ciso); mask-image: var(--md-admonition-icon--ciso);
}
:root { --md-admonition-icon--ciso: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-7v2h3v2H7v-2h3v-2H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm2 3v8h14V7H5Z"/></svg>'); }

/* ---- Quiz (rendered by assets/quiz.js) --------------------------------- */
.grc-quiz {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--md-accent-fg-color);
  border-radius: .1rem;
  padding: 1.2rem 1.4rem;
  margin: 2.2rem 0;
}
.grc-quiz__eyebrow {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--md-accent-fg-color); margin: 0 0 .2rem 0;
}
.grc-quiz__q { margin: 1.2rem 0 .5rem; font-weight: 600; }
.grc-quiz__q:first-of-type { margin-top: .5rem; }
.grc-quiz__opt {
  display: block; padding: .5rem .75rem; margin: .35rem 0;
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: .1rem;
  cursor: pointer; transition: border-color .12s;
}
.grc-quiz__opt:hover { border-color: var(--md-accent-fg-color); }
.grc-quiz__opt input { margin-right: .6rem; accent-color: var(--md-accent-fg-color); }
.grc-quiz__opt.is-correct { border-color: #43a047; background: rgba(67,160,71,.14); }
.grc-quiz__opt.is-wrong   { border-color: #e53935; background: rgba(229,57,53,.12); }
.grc-quiz__explain {
  font-size: .72rem; color: var(--md-default-fg-color--light);
  margin: .3rem 0 0 .2rem; padding-left: .8rem;
  border-left: 2px solid var(--md-default-fg-color--lightest); display: none;
}
.grc-quiz__explain.show { display: block; }
.grc-quiz__btn {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  background: var(--md-accent-fg-color); color: var(--md-primary-bg-color, #fff);
  border: none; padding: .55rem 1.1rem; border-radius: .1rem; cursor: pointer; margin-top: 1.1rem;
}
.grc-quiz__btn:hover { filter: brightness(1.08); }
.grc-quiz__score {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  margin-top: 1rem; font-size: .78rem; color: var(--md-accent-fg-color);
}

/* ---- Progress widget (rendered by assets/progress.js) ------------------ */
.grc-progress {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .62rem; letter-spacing: .03em;
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: .1rem;
  padding: .35rem .6rem; margin: 1rem 0;
  display: inline-flex; align-items: center; gap: .5rem;
}

.grc-progress__bar { 
  display: inline-block;
  width: 120px; 
  height: 5px; 
  background: var(--md-default-fg-color--lightest); 
  border-radius: .1rem; 
  overflow: hidden; 
}

.grc-progress__fill { 
  display: block;
  height: 100%; 
  background: var(--md-accent-fg-color, var(--md-primary-fg-color, #00b0ff)); 
  width: 0; 
  transition: width .4s ease; 
}
.grc-chapter-done {
  font-family: var(--md-code-font-family, ui-monospace, monospace); font-size: .64rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--md-accent-fg-color);
}

@media (prefers-reduced-motion: reduce) {
  .grc-progress__fill { transition: none; }
}

/* ---- Per-module progress (home page) and nav completion tick ----------- */
.grc-mod {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .6rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: .1rem;
  padding: .05rem .4rem; margin-left: .4rem; white-space: nowrap;
}
.grc-mod.is-complete { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }


/* ---- Per-module progress (home page) and nav completion tick ----------- */
.grc-mod {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .6rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: .1rem;
  padding: .05rem .4rem; margin-left: .4rem; white-space: nowrap;
}
.grc-mod.is-complete { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
.grc-nav-tick {
  color: var(--md-accent-fg-color);
  font-weight: 700;
  margin-right: .35rem;
  display: inline-block;
}
.grc-nav-tick.is-hidden {
  visibility: hidden;
}

/* =========================================================================
   HOME PAGE ONLY: full-bleed hero, dark "what to expect" band, dashboard.
   Used on index.md (which sets hide: navigation + toc). Sections span the
   viewport via the standard full-bleed breakout, since Material centres the
   content column. The dark band is fixed-dark in BOTH default and slate
   palettes by design; it is a deliberate element, not theme-driven.
   ========================================================================= */

/* Drop the empty placeholder boxes until progress.js fills them in. */
.md-typeset .grc-progress:empty,
.md-typeset .grc-mod:empty { display: none; }

/* Full-bleed breakout for the two banded sections. */
.grc-hero,
.grc-expect {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---- Hero (industry image) --------------------------------------------- */
/* Set --grc-hero-image to your photo to replace the fallback gradient.     */
:root { --grc-hero-image: none; } /* e.g. url('assets/hero-industry.jpg') */

.grc-hero {
  min-height: 80vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: .9rem;
  padding: 5rem 1.2rem 4rem;
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(12,16,22,.55), rgba(12,16,22,.82)),
    var(--grc-hero-image),
    linear-gradient(135deg, #1b2531 0%, #2f3e4d 55%, #1b2531 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.grc-hero__eyebrow {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--md-accent-fg-color); margin: 0;
}
.md-typeset .grc-hero__title {
  color: #fff; font-weight: 800; line-height: 1.05; margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
}
.grc-hero__sub {
  max-width: 40rem; margin: 0; color: #d7e0ea;
  font-size: clamp(.95rem, 2.2vw, 1.2rem); line-height: 1.5;
}
.grc-hero__sub strong { color: #fff; }
.grc-hero__cta { margin-top: .6rem; }
.md-typeset .grc-hero__cta .md-button { margin: 0; }
.grc-hero__scroll {
  margin-top: 1.4rem; width: .8rem; height: .8rem;
  border-right: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
  transform: rotate(45deg);
  animation: grc-bounce 1.8s ease-in-out infinite;
}
.grc-hero__desc {
  margin: -.3rem 0 0;
  font-size: .82rem;
  color: #9fb0bf;
  letter-spacing: .01em;
}
@keyframes grc-bounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(7px) rotate(45deg); }
}

/* ---- Dark "what to expect" band ---------------------------------------- */
.grc-expect {
  background: #10151c; color: #b8c4d0;
  padding: 4.5rem 1.2rem;
  margin-bottom: 2.5rem;
}
.grc-expect__inner { max-width: 54rem; margin: 0 auto; }
.grc-expect__kicker {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--md-accent-fg-color); margin: 0 0 .5rem;
}
.md-typeset .grc-expect h2 { color: #fff; margin-top: 0; }
.grc-expect__lead { font-size: 1.02rem; line-height: 1.7; color: #cdd8e3; }
.grc-expect__lead strong { color: #fff; }
.grc-expect__grid {
  display: grid; gap: 1.2rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.grc-expect__card {
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: .1rem; padding: 1.1rem 1.2rem;
  background: rgba(255,255,255,.02);
}
.grc-expect__card h3 { color: #fff; font-size: .92rem; margin: 0 0 .4rem; }
.grc-expect__card p  { color: #97a4b1; font-size: .84rem; margin: 0; line-height: 1.55; }

/* ---- Learner dashboard ------------------------------------------------- */
.grc-dash { margin: 1.4rem 0 2.6rem; }
.grc-dash__path {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grc-dash__aside { margin-top: .7rem; margin-bottom: .7rem;}

.md-typeset .grc-card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .9rem 1rem 1rem; text-decoration: none;
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--md-default-fg-color--lightest);
  border-radius: .1rem;
  transition: border-color .12s, transform .12s;
}
.md-typeset .grc-card:hover {
  border-top-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}
.grc-card__head { display: flex; align-items: baseline; gap: .55rem; }
.grc-card__num {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  color: var(--md-accent-fg-color);
}
.grc-card__name { font-weight: 700; font-size: .98rem; }
.grc-card__desc {
  font-size: .8rem; line-height: 1.5; margin: 0; flex: 1 1 auto;
  color: var(--md-default-fg-color--light);
}
.grc-card .grc-mod { align-self: flex-start; margin-left: 0; }
.grc-card--standalone { border-top-color: var(--md-primary-fg-color); }

@media (prefers-reduced-motion: reduce) {
  .grc-hero__scroll { animation: none; }
  .grc-card { transition: none; }
}

/* ---- Disabled Card Variant ------------------------------------------- */
.grc-card-disabled .grc-card__num {
  color: var(--md-default-fg-color--light);
}

.md-typeset .grc-card-disabled:hover {
  border-top-color: var(--md-default-fg-color--lightest);
  transform: none;
  cursor: not-allowed;
}

.grc-card-disabled .grc-card__name {
  color: var(--md-default-fg-color--light);
}

/* ---- Profile Path Selector -------------------------------------------- */
.grc-profiles {
  margin: 1.5rem 0 1rem;
}

.grc-profiles__title {
  font-size: .85rem;
  margin-bottom: .6rem;
  color: var(--md-default-fg-color);
}

.grc-profiles__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.grc-profile-btn {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .1rem;
  padding: .4rem .8rem;
  cursor: pointer;
  transition: all .15s ease;
}

.grc-profile-btn:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.grc-profile-btn.is-active {
  background: var(--md-accent-fg-color);
  color: var(--md-primary-bg-color, #fff);
  border-color: var(--md-accent-fg-color);
}

/* ---- Card Interactive Highlight States --------------------------------- */
.md-typeset .grc-card.is-dimmed {
  opacity: .35;
  filter: grayscale(80%);
  transform: none !important;
}

.md-typeset .grc-card.is-highlighted {
  opacity: 1;
  filter: none;
  border-color: var(--md-accent-fg-color);
  border-top-width: 3px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--md-accent-fg-color) 25%, transparent);
}

/* ---- Progress row + reset button (home page) --------------------------- */
.grc-progress-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem; margin: 1rem 0;
}
.grc-progress-row .grc-progress { margin: 0; }
.grc-reset {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .1rem; padding: .32rem .65rem; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.grc-reset:hover { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }

/* ---- Author note ("Why this course exists") --------------------------- */
/* A quiet, distinct panel: accent left-border + faint accent tint, built
   from Material variables so it adapts to both palettes. Deliberately
   understated (no portrait, no large type) to read as a note, not a pitch. */
.md-typeset .grc-author {
  margin: 2.8rem 0;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: .1rem;
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 6%, transparent);
  font-size: .7rem;
}
.grc-author__eyebrow {
  font-family: var(--md-code-font-family, ui-monospace, monospace);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--md-accent-fg-color);
  margin: 0 0 .15rem;
}
.md-typeset .grc-author__title {
  margin: 0 0 .9rem;
  font-size: 1.35rem;
}
.md-typeset .grc-author .grc-author__lead {
  font-size: .92rem;
  color: var(--md-default-fg-color);
}
.md-typeset .grc-author p { line-height: 1.7; }
.md-typeset .grc-author p:last-child { margin-bottom: 0; }
.grc-author__signature {
  margin-top: 2rem;
  text-align: right;
  font-family: var(--md-code-font-family);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--md-default-fg-color--light);
}