/* ============================================================
   Design System — Practical Privacy & Security
   ============================================================ */

/* ---- Tokens ---- */
:root {
  --color-bg:        #0a1628;
  --color-surface:   #112033;
  --color-surface-2: #1a2942;
  --color-border:    #1f3148;
  --color-text:      #ffffff;
  --color-text-dim:  #94a3b8;
  --color-accent:    #2dd4bf;
  --color-warn:      #fb923c;
  --color-danger:    #f87171;
  --color-good:      #2dd4bf;

  --font-display: 'Archivo Black', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-hero:   clamp(3rem, 6vw, 5rem);
  --text-title:  clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:     clamp(1.25rem, 2vw, 1.5rem);
  --text-body:   clamp(1.0625rem, 1.6vw, 1.25rem);
  --text-small:  1rem;
  --text-tiny:   0.875rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* ---- Reveal.js base overrides ---- */
.reveal-viewport {
  background: var(--color-bg);
}

.reveal {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--color-text);
  text-transform: none;
  text-shadow: none;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  word-wrap: break-word;
}

.reveal p,
.reveal li {
  line-height: 1.55;
  margin: 0;
}

.reveal ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin: 0;
}

.reveal ul li + li {
  margin-top: var(--space-2);
}

.reveal strong {
  font-weight: 700;
  color: var(--color-text);
}

.reveal a {
  color: var(--color-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-text-dim) 40%, transparent);
  transition: color 0.15s, text-decoration-color 0.15s;
}

.reveal a:hover,
.reveal a:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.reveal .slides section {
  text-align: left;
  top: 0 !important;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

.reveal .progress {
  height: 3px;
}

.reveal .progress span {
  background: var(--color-accent);
}

.reveal .controls {
  color: var(--color-accent);
}

.reveal .slide-number {
  background: transparent;
  color: var(--color-text-dim);
  font-family: var(--font-body);
  font-size: var(--text-small);
}

/* ---- Accessibility ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ---- Slide wrapper ---- */
.slide-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-10);
  gap: var(--space-4);
  box-sizing: border-box;
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

/* ---- Slide header row (title + optional decorative icon) ---- */
.slide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}

.slide-header-text {
  flex: 1;
  min-width: 0;
}

.slide-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.05;
  margin: 0;
}

.slide-subtitle {
  font-size: var(--text-h2);
  color: var(--color-accent);
  font-weight: 400;
  margin: var(--space-1) 0 0;
  line-height: 1.4;
}

.slide-intro {
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.6;
  flex-shrink: 0;
}

.slide-footer {
  font-size: var(--text-small);
  color: var(--color-text-dim);
  text-align: center;
  font-style: italic;
  margin-top: auto;
  padding-top: var(--space-2);
  flex-shrink: 0;
}

.slide-footer.accent {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
}

/* Decorative corner icon (top-right, large, semi-transparent) */
.slide-deco {
  color: var(--color-accent);
  opacity: 0.7;
  font-size: 5.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -0.25rem;
}

/* ---- Card base ---- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-accent);
  box-sizing: border-box;
}

.card--warn {
  border-left-color: var(--color-warn);
}

.card--danger {
  border-left-color: var(--color-danger);
}

.card__title {
  font-size: var(--text-h2);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  line-height: 1.3;
}

.card--warn .card__title {
  color: var(--color-warn);
}

.card__body {
  color: var(--color-text);
  line-height: 1.5;
  font-size: var(--text-body);
}

.card__list {
  color: var(--color-text);
  line-height: 1.5;
  padding-left: var(--space-6);
  margin: 0;
  font-size: var(--text-body);
}

.card__list li + li {
  margin-top: var(--space-2);
}

.card__sub {
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.card__sub:first-child {
  margin-top: 0;
}

/* ============================================================
   Layout: Title — Slide 1
   ============================================================ */
.layout-title {
  justify-content: center;
  padding-left: calc(var(--space-10) + 8px);
}

.title-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.layout-title .slide-title {
  font-size: 7.5rem;
  line-height: 1.0;
}

.layout-title .slide-subtitle {
  font-size: 1.6rem;
  margin-top: var(--space-6);
}

.title-shield {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-size: 16rem;
  opacity: 0.9;
  line-height: 1;
}

/* ============================================================
   Layout: Stat Trio — Slide 2
   ============================================================ */
.layout-stat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}

.stat-card i {
  font-size: 3.5rem;
  color: var(--color-accent);
}

.stat-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  color: var(--color-accent);
  font-weight: 900;
  line-height: 1;
}

.stat-card p {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.4;
}

/* ============================================================
   Layout: Card Grid — Slides 3, 7, 8, 14, 15
   ============================================================ */
.layout-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.layout-card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   Layout: Two Column — Slides 4, 12
   ============================================================ */
.layout-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
}

.two-col-panel {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.two-col-panel__bar {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-h2);
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid transparent;
}

.two-col-panel__bar--accent {
  color: var(--color-accent);
  background: rgba(45, 212, 191, 0.1);
  border-bottom-color: var(--color-accent);
}

.two-col-panel__bar--warn {
  color: var(--color-warn);
  background: rgba(251, 146, 60, 0.1);
  border-bottom-color: var(--color-warn);
}

.two-col-panel__body {
  padding: var(--space-6) var(--space-8);
  flex: 1;
  font-size: var(--text-body);
}

.two-col-panel__body ul {
  padding-left: var(--space-6);
  margin: 0;
}

.two-col-panel__body li + li {
  margin-top: var(--space-3);
}

.two-col-panel__footer {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: 2.5rem;
  color: var(--color-accent);
}

.two-col-panel__footer--warn {
  color: var(--color-warn);
}

/* ============================================================
   Layout: Step Trio — Slide 5
   ============================================================ */
.layout-step-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  flex: 1;
  min-height: 0;
}

.step-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.step-number {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-body);
}

.step-desc {
  color: var(--color-text-dim);
  font-size: var(--text-body);
  line-height: 1.55;
}

/* ============================================================
   Layout: Tier List — Slide 6
   ============================================================ */
.layout-tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.tier-intro {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}

.tier-intro__heading {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-h2);
  display: block;
}

.tier-intro__body {
  color: var(--color-text);
  font-size: var(--text-body);
  margin-top: var(--space-1);
  line-height: 1.5;
}

.tier-row {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}

.tier-row--best  { border-left: 4px solid var(--color-accent); background: var(--color-surface-2); }
.tier-row--great { border-left: 4px solid var(--color-accent); }
.tier-row--ok    { border-left: 4px solid var(--color-warn); }
.tier-row--weak  { border-left: 4px solid var(--color-danger); }

.tier-label {
  font-size: var(--text-small);
  font-weight: 700;
  min-width: 4.5rem;
  text-align: right;
  flex-shrink: 0;
}

.tier-label--best  { color: var(--color-accent); }
.tier-label--great { color: var(--color-accent); }
.tier-label--ok    { color: var(--color-warn); }
.tier-label--weak  { color: var(--color-danger); }

.tier-content__title {
  font-size: var(--text-h2);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  display: block;
}

.tier-content__desc {
  color: var(--color-text-dim);
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ============================================================
   Layout: Section Blocks — Slides 9, 11
   ============================================================ */
.layout-section-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.section-blocks-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.section-blocks-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   Layout: Stat List — Slide 10
   ============================================================ */
.layout-stat-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  flex: 1;
  min-height: 0;
}

.big-stat {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 17rem;
}

.big-stat__number {
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--color-accent);
  font-weight: 900;
  line-height: 1;
}

.big-stat__caption {
  color: var(--color-text-dim);
  font-size: var(--text-small);
  line-height: 1.5;
  margin-top: var(--space-4);
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.stat-list-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
}

.stat-list-item i {
  color: var(--color-accent);
  font-size: 1.375rem;
  flex-shrink: 0;
  width: 1.75rem;
  text-align: center;
}

.stat-list-item p {
  font-size: var(--text-body);
  color: var(--color-text);
}

/* ============================================================
   Layout: Flag List — Slide 13
   ============================================================ */
.layout-flag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.flag-row {
  background: var(--color-surface);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: 13rem 1fr;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}

.flag-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.3;
}

.flag-label i {
  color: var(--color-danger);
  flex-shrink: 0;
}

.flag-desc {
  color: var(--color-text-dim);
  font-size: var(--text-body);
  line-height: 1.5;
}

/* ============================================================
   Layout: References — Slide 16
   ============================================================ */
.layout-references {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
  align-content: start;
}

.ref-entry {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5, 1.25rem);
}

.ref-entry__name {
  font-weight: 700;
  color: var(--color-text);
  display: block;
  font-size: var(--text-body);
}

.ref-entry__url {
  color: var(--color-accent);
  font-family: monospace;
  font-size: var(--text-small);
  display: block;
  margin-top: var(--space-1);
}

.ref-entry--empty {
  background: transparent;
  border: none;
}

/* ============================================================
   Layout: Checklist — Slide 15
   ============================================================ */
.layout-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}

.check-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.check-item i {
  color: var(--color-accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.check-item p {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.4;
}