/* ==========================================================================
   CS Concepts — custom styling
   Tuned for readability on a 1080p screen recording (large type, high contrast)
   and colour-coded by CISSP domain.
   ========================================================================== */

:root {
  --r-background-color: #0b1220;
  --r-main-color: #e5e7eb;
  --r-heading-color: #ffffff;
  --r-link-color: #7dd3fc;
  --r-link-color-hover: #bae6fd;
  --r-selection-background-color: #334155;
  --r-main-font-size: 40px;
  --r-heading-font-weight: 700;
}

.reveal { font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }

.reveal h1 { font-size: 2.1em; line-height: 1.1; letter-spacing: -0.5px; }
.reveal h2 { font-size: 1.5em; color: var(--accent, #7dd3fc); margin-bottom: 0.6em; }
.reveal ul { display: inline-block; text-align: left; width: 88%; }
.reveal li { margin: 0.35em 0; line-height: 1.35; }
.reveal b { color: var(--accent, #ffffff); }

/* Title slide */
.reveal .title { font-size: 3.2em; margin-bottom: 0.1em; }
.reveal .subtitle { font-size: 1.1em; color: #94a3b8; margin-bottom: 1.4em; }
.reveal .nav-hint {
  display: flex; gap: 1.6em; justify-content: center; flex-wrap: wrap;
  font-size: 0.5em; color: #64748b;
}
.reveal .nav-hint kbd {
  background: #1e293b; color: #cbd5e1; border-radius: 4px;
  padding: 1px 7px; font-family: monospace; font-size: 0.95em;
}

/* Domain title slides */
.reveal .domain-num {
  text-transform: uppercase; letter-spacing: 3px; font-size: 0.55em;
  color: var(--accent, #94a3b8); margin-bottom: 0.2em; font-weight: 700;
}
.reveal .domain-tag { font-size: 0.6em; color: #94a3b8; margin-top: 0.8em; max-width: 70%; margin-left: auto; margin-right: auto; }

/* Concept slides get a coloured top rule + a light footnote style */
.reveal .concept h2 { border-bottom: 3px solid var(--accent, #334155); padding-bottom: 0.25em; display: inline-block; }
.reveal .note { font-size: 0.62em; color: #94a3b8; font-style: italic; margin-top: 1em; }

/* Per-domain accent colours (used by --accent above) */
.reveal .d1 { --accent: #ef4444; }  /* Security & Risk Management       */
.reveal .d2 { --accent: #f97316; }  /* Asset Security                  */
.reveal .d3 { --accent: #eab308; }  /* Security Architecture & Eng.    */
.reveal .d4 { --accent: #22c55e; }  /* Communication & Network Sec.    */
.reveal .d5 { --accent: #06b6d4; }  /* Identity & Access Management     */
.reveal .d6 { --accent: #3b82f6; }  /* Security Assessment & Testing    */
.reveal .d7 { --accent: #8b5cf6; }  /* Security Operations             */
.reveal .d8 { --accent: #ec4899; }  /* Software Development Security    */

/* Also colour the domain title slide heading with its accent */
.reveal .domain > section:first-child h1 { color: var(--accent, #ffffff); }

/* Persistent domain badge (bottom-left) */
#domain-badge {
  position: fixed; bottom: 14px; left: 18px; z-index: 40;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px; letter-spacing: 0.3px; color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148,163,184,0.2);
  padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}

/* ==========================================================================
   Reusable presentation components (usable by any concept slide)
   ========================================================================== */

.reveal .kicker {
  text-transform: uppercase; letter-spacing: 3px; font-size: 0.5em;
  color: var(--accent, #94a3b8); font-weight: 700; margin-bottom: 0.3em;
}
.reveal .lead { font-size: 0.9em; color: #f1f5f9; margin: 0.2em auto 0.7em; max-width: 82%; }
.reveal .muted { color: #94a3b8; }

/* Callout boxes (accent = domain colour by default) */
.reveal .callout {
  border-left: 5px solid var(--accent, #64748b);
  background: rgba(148, 163, 184, 0.08); border-radius: 8px;
  padding: 0.5em 0.85em; font-size: 0.66em; text-align: left;
  margin: 0.45em auto; max-width: 82%;
}
.reveal .callout.warn { border-left-color: #f97316; background: rgba(249, 115, 22, 0.10); }
.reveal .callout.good { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.10); }
.reveal .callout .c-title { display: block; font-weight: 700; color: #fff; margin-bottom: 0.15em; }

/* Two-column comparison cards */
.reveal .cols { display: flex; gap: 1em; justify-content: center; align-items: stretch; max-width: 92%; margin: 0.3em auto; }
.reveal .cols > div { flex: 1; background: rgba(148, 163, 184, 0.06); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 10px; padding: 0.6em 0.85em; }
.reveal .cols h3 { font-size: 0.6em; margin: 0 0 0.35em; color: var(--accent, #7dd3fc); }
.reveal .cols ul { width: 100%; font-size: 0.58em; }

/* Owner -> Object -> ACL flow */
.reveal .flow { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin: 0.4em 0 0.7em; }
.reveal .flow .node { background: #111a2e; border: 2px solid var(--accent, #334155); border-radius: 10px; padding: 0.4em 0.75em; font-size: 0.58em; min-width: 2.4em; }
.reveal .flow .node small { display: block; color: #94a3b8; font-size: 0.72em; margin-top: 0.15em; }
.reveal .flow .arrow { color: var(--accent, #64748b); font-size: 0.85em; }

/* ACL mini-table */
.reveal table.acl { font-size: 0.55em; margin: 0.3em auto; border-collapse: collapse; }
.reveal table.acl th, .reveal table.acl td { border: 1px solid rgba(148, 163, 184, 0.25); padding: 0.25em 0.75em; text-align: center; }
.reveal table.acl th { background: rgba(6, 182, 212, 0.15); color: #e0f2fe; }
.reveal table.acl td.subj { text-align: left; color: #e5e7eb; }
.reveal table.acl .yes { color: #22c55e; font-weight: 700; }
.reveal table.acl .no  { color: #ef4444; font-weight: 700; }

/* Numbered weakness rows */
.reveal .wk { display: flex; gap: 0.55em; align-items: flex-start; text-align: left; max-width: 82%; margin: 0.4em auto; font-size: 0.66em; }
.reveal .wk .n { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f97316; color: #0b1220; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.reveal .wk b { color: #fff; }

/* Takeaway / transition */
.reveal .takeaway { border: 1px dashed var(--accent, #64748b); border-radius: 10px; padding: 0.5em 0.95em; font-size: 0.7em; max-width: 80%; margin: 0.5em auto; background: rgba(6, 182, 212, 0.06); }
.reveal .next { margin-top: 0.7em; font-size: 0.6em; color: var(--accent, #7dd3fc); font-weight: 600; }

/* --------------------------------------------------------------------------
   Single-slide concept layout — put an ENTIRE concept on one slide.
   Compact heading + a 2-column card grid that reveals card-by-card on arrows.
   -------------------------------------------------------------------------- */
/* Top-align these slides and spread their blocks over the FULL canvas height,
   overriding reveal's global vertical centering (which otherwise clusters the
   content in the middle with large empty margins top and bottom). */
.reveal .slides section.single {
  top: 0 !important;                 /* beats reveal's inline centering offset */
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;    /* header -> cards -> footer, spread apart */
  padding: 3% 3.5% 2.5%;
  box-sizing: border-box;
}
.reveal .concept.single .hdr { flex: 0 0 auto; }

.reveal .concept.single h2 { font-size: 1.5em; margin-bottom: 0.15em; }
.reveal .concept.single .lead { font-size: 0.72em; margin: 0.2em auto 0; max-width: 92%; }

.reveal .card-grid {
  flex: 1 1 auto;                    /* the grid takes the freed middle space */
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em;
  max-width: 96%; margin: 0 auto; align-content: center; width: 100%;
}
.reveal .info-card {
  background: rgba(148, 163, 184, 0.06); border: 1px solid rgba(148, 163, 184, 0.16);
  border-left: 4px solid var(--accent, #7dd3fc); border-radius: 10px;
  padding: 0.7em 0.95em; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.reveal .info-card.good { border-left-color: #22c55e; }
.reveal .info-card.warn { border-left-color: #f97316; }
.reveal .info-card h3 {
  font-size: 0.54em; margin: 0 0 0.45em; color: var(--accent, #7dd3fc);
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
}
.reveal .info-card.good h3 { color: #4ade80; }
.reveal .info-card.warn h3 { color: #fb923c; }
.reveal .info-card ul { width: 100%; font-size: 0.62em; margin: 0; }
.reveal .info-card li { margin: 0.4em 0; line-height: 1.35; }
.reveal .info-card b { color: #ffffff; }

.reveal .concept.single .foot {
  flex: 0 0 auto;
  font-size: 0.64em; color: #cbd5e1; margin: 0 auto; max-width: 92%;
}
.reveal .concept.single .foot b { color: var(--accent, #7dd3fc); }