@import url("fonts.css");
/* wanoo — reveal.js theme for slides.wanoo.me
   Two variants, picked on <html data-look="…">:
     forkit25 : navy + magenta→coral section slides (Fork It 2025 decks)
     neon26   : deep navy + cyan/orange glow (2026 decks)            */

:root {
  --bg: #23214a;
  --fg: #f4f3fb;
  --muted: #b9b6d6;
  --accent: #e2185b;
  --accent-2: #ff7a59;
  --hi: #d8f31a;            /* Fork It yellow-green */
  --rule: linear-gradient(90deg, var(--accent), var(--accent-2));
  --section-bg: linear-gradient(135deg, #b0124f 0%, #e2185b 45%, #ff8a5c 100%);
  --card: rgba(255, 255, 255, .05);
  --card-border: rgba(255, 255, 255, .14);
  --font: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

html[data-look="neon26"] {
  --bg: #0a1430;
  --fg: #ffffff;
  --muted: #9fb0d4;
  --accent: #22c3ee;
  --accent-2: #ff7a3d;
  --rule: var(--accent);
  --section-bg: radial-gradient(ellipse at 80% 20%, #13306b 0%, #0a1430 60%);
  --card: rgba(34, 195, 238, .06);
  --card-border: rgba(34, 195, 238, .55);
}

.reveal-viewport { background: var(--bg); }
.reveal {
  font-family: var(--font);
  font-size: 34px;
  color: var(--fg);
  line-height: 1.35;
}
.reveal .slides { text-align: left; }

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-transform: none;
  margin: 0 0 .6em;
}
.reveal h1 { font-size: 2.4em; }
.reveal h2 { font-size: 1.55em; }
.reveal h3 { font-size: 1em; color: var(--muted); font-weight: 600; margin-bottom: .3em; }

/* underline rule under slide titles */
.reveal h2::after {
  content: "";
  display: block;
  width: 3.2em;
  height: 5px;
  margin-top: .3em;
  border-radius: 3px;
  background: var(--rule);
}
.reveal .center h2::after, .reveal .center h1::after { margin-left: auto; margin-right: auto; }
.reveal .no-rule h2::after { display: none; }

.reveal p { margin: 0 0 .7em; }
.reveal ul { margin: 0 0 .6em 1em; }
.reveal li { margin: .28em 0; }
.reveal li::marker { color: var(--accent-2); }
.reveal small, .reveal .muted { color: var(--muted); }
.reveal strong { color: var(--fg); }
.reveal em.hi, .reveal .hi { color: var(--accent-2); font-style: normal; }
.reveal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.reveal code { font-family: var(--mono); font-size: .85em; background: var(--card); padding: .05em .3em; border-radius: 4px; }

/* layouts */
.reveal .center { text-align: center; }
.reveal .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: start; }
.reveal .cols-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 1.2em; align-items: center; }
.reveal .small { font-size: .78em; }
.reveal .tiny { font-size: .6em; }
.reveal img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.reveal .shots { display: flex; gap: .6em; justify-content: center; }
.reveal .shots img { height: 9.5em; width: auto; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.reveal .logos { display: flex; gap: .9em; align-items: center; flex-wrap: wrap; margin-top: .8em; }
.reveal .logos img { height: 2.4em; width: auto; border-radius: 6px; background: #fff; padding: .15em; }

/* poster title slide: the image is a reveal background (data-background-image) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "who am I" */
.reveal .whoami { display: grid; grid-template-columns: 1fr 6em; gap: 1em; align-items: start; }
.reveal .whoami img { width: 6em; border-radius: 50%; }

/* section dividers */
.reveal section.divider h1, .reveal section.divider h2 { font-size: 2.3em; }
.reveal section.divider h2::after { display: none; }
.reveal section.divider .kicker { color: rgba(255,255,255,.7); font-size: .7em; margin-bottom: .2em; }

/* statements (big punchlines) */
.reveal .statement { font-size: 1.7em; font-weight: 700; line-height: 1.15; }
.reveal .statement .hi { display: block; margin-top: .5em; }
.reveal .statement .bar { display: block; width: 4em; height: 6px; background: var(--accent-2); border-radius: 3px; margin: .5em 0; }
.reveal .center .statement .bar { margin-left: auto; margin-right: auto; }

/* boxes / diagrams (neon26) */
.reveal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; max-width: 21em; margin: 1em auto 0; }
.reveal .box {
  border: 2px solid var(--card-border);
  background: var(--card);
  border-radius: 12px;
  padding: .55em .8em;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  box-shadow: 0 0 18px rgba(34, 195, 238, .18);
}
.reveal .box.warm { color: var(--accent-2); border-color: rgba(255,122,61,.7); box-shadow: 0 0 18px rgba(255,122,61,.18); }
.reveal .flow { display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: 1.2em; flex-wrap: wrap; }
.reveal .flow .box { font-size: .75em; min-width: 5.5em; }
.reveal .arrow { color: var(--muted); font-size: 1.1em; }
.reveal .caption { color: var(--muted); font-size: .6em; text-align: center; margin-top: 1.1em; }

.reveal .loop { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; gap: .4em 1em; width: 14em; margin: 1em auto 0; align-items: center; text-align: center; }
.reveal .loop .box { font-size: .8em; }
.reveal .loop .mid { color: var(--muted); font-size: .55em; }

.reveal .wheel { position: relative; width: 12em; height: 8.5em; margin: .8em auto 0; }
.reveal .wheel .box { position: absolute; font-size: .72em; min-width: 6em; transform: translate(-50%, -50%); }
.reveal .wheel .n { left: 50%; top: 8%; }
.reveal .wheel .e { left: 85%; top: 50%; }
.reveal .wheel .s { left: 50%; top: 92%; }
.reveal .wheel .w { left: 15%; top: 50%; }
.reveal .wheel .c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-size: 1.4em; }

.reveal .perimeter { border: 2px solid var(--accent); border-radius: 14px; padding: .7em .9em .6em; margin: 1em auto 0; max-width: 22em; box-shadow: 0 0 26px rgba(34,195,238,.2); }
.reveal .perimeter .label { color: var(--accent); font-size: .5em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6em; }
.reveal .perimeter .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.reveal .perimeter .box { font-size: .62em; padding: .6em .3em; }

.reveal .pipeline { display: flex; align-items: stretch; gap: .35em; margin: 1.1em auto 0; justify-content: center; }
.reveal .pipeline .stage { border: 1px solid var(--card-border); background: var(--card); border-radius: 8px; padding: .6em .4em; font-size: .45em; color: var(--muted); width: 6.5em; text-align: center; display: flex; align-items: center; justify-content: center; }
.reveal .pipeline .io { font-size: .5em; width: 7em; color: var(--fg); font-weight: 700; }
.reveal .pipeline .io.out { border: 2px solid var(--accent); box-shadow: 0 0 18px rgba(34,195,238,.25); }

/* footer brand */
.reveal .brand { position: absolute; bottom: -1.2em; right: 0; font-size: .45em; color: var(--muted); }

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

@media print {
  .reveal-viewport { background: var(--bg) !important; }
}

/* back-to-catalog link */
.home-link {
  position: fixed; top: 14px; left: 16px; z-index: 30;
  font: 600 13px/1 var(--font); color: var(--muted); text-decoration: none;
  opacity: .55; transition: opacity .2s;
}
.home-link:hover { opacity: 1; }
@media print { .home-link { display: none; } }
.video-link { left: auto; right: 16px; color: var(--accent-2); opacity: .8; }

/* ---------- moodle19: MoodleMoot 2019 (white slides, light-blue footer band) ---------- */
html[data-look="moodle19"] {
  --bg: #ffffff;
  --fg: #333840;
  --muted: #6b7280;
  --accent: #326ce5;          /* Kubernetes blue */
  --accent-2: #f98012;        /* Moodle orange */
  --rule: var(--accent-2);
  --section-bg: #a8d8ef;
  --card: #f4f8fb;
  --card-border: #d6e6f0;
}
html[data-look="moodle19"] .reveal { font-size: 32px; }
html[data-look="moodle19"] .reveal h2 { color: #2b2f36; }
html[data-look="moodle19"] .reveal .controls { color: var(--accent); }
html[data-look="moodle19"] .home-link { color: #4a5563; }

/* light-blue footer band with the MoodleMoot wordmark, hidden on the poster slide */
html[data-look="moodle19"] .moodle-band {
  position: fixed; left: 0; right: 0; bottom: 0; height: 7vh; min-height: 34px; z-index: 5;
  background: #a8d8ef; display: flex; align-items: center; padding-left: 2.2vw; pointer-events: none;
  transition: opacity .3s;
}
html[data-look="moodle19"] .moodle-band img { height: 52%; width: auto; border-radius: 0; }
html[data-look="moodle19"] body.on-poster .moodle-band { opacity: 0; }
html[data-look="moodle19"] .reveal .slides { margin-top: -3vh; }

/* centred tool logo + subtitle, as in the original deck */
html[data-look="moodle19"] .reveal .logo-head { text-align: center; margin-bottom: .6em; }
html[data-look="moodle19"] .reveal .logo-head img { height: 1.7em; width: auto; border-radius: 0; display: block; margin: 0 auto .15em; }
html[data-look="moodle19"] .reveal .logo-head img.k8s { height: 2.5em; }
html[data-look="moodle19"] .reveal .logo-head p { margin: 0; color: var(--muted); font-size: .72em; }
html[data-look="moodle19"] .reveal .figure { display: block; margin: 0 auto; max-height: 410px; width: auto; border-radius: 6px; }
html[data-look="moodle19"] .reveal .defs li { font-size: .74em; }
html[data-look="moodle19"] .reveal .defs strong { color: var(--accent); }

/* presentation slide */
html[data-look="moodle19"] .reveal .bio { display: grid; grid-template-columns: 6.5em 1fr; gap: 1.1em; align-items: center; }
html[data-look="moodle19"] .reveal .bio img { width: 6.5em; border-radius: 50%; }
html[data-look="moodle19"] .reveal .bio ul { list-style: none; margin: 0; }
html[data-look="moodle19"] .reveal .bio li::before { content: "❖ "; color: var(--accent-2); }
html[data-look="moodle19"] .reveal .mlf { display: grid; grid-template-columns: 1fr 5.5em; gap: 1em; align-items: center; margin-top: 1.1em; padding: .7em 1em; background: var(--card); border-radius: 12px; }
html[data-look="moodle19"] .reveal .mlf ul { list-style: none; margin: 0; font-size: .7em; }
html[data-look="moodle19"] .reveal .mlf img { width: 5.5em; border-radius: 0; }

/* the "Orchestrateur" stamp over the docker limits */
html[data-look="moodle19"] .reveal .stamped { position: relative; display: grid; grid-template-columns: 1fr 5.5em; gap: 1em; align-items: center; }
html[data-look="moodle19"] .reveal .stamp {
  position: absolute; left: 14%; top: 34%; transform: rotate(-32deg);
  font-size: 1.55em; font-weight: 800; letter-spacing: .04em; color: var(--accent);
  border: 5px double var(--accent); border-radius: 10px; padding: .05em .4em; opacity: .9;
  background: rgba(255, 255, 255, .55);
}
html[data-look="moodle19"] .reveal .stamped img { border-radius: 0; }

/* pets vs cattle */
html[data-look="moodle19"] .reveal .versus { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
html[data-look="moodle19"] .reveal .versus figure { margin: 0; text-align: center; }
html[data-look="moodle19"] .reveal .versus img { width: 100%; height: 8.2em; object-fit: cover; border-radius: 6px; }
html[data-look="moodle19"] .reveal .versus figcaption { font-size: 1.2em; font-weight: 700; color: var(--accent); margin-top: .1em; }

/* hard-way steps */
html[data-look="moodle19"] .reveal .steps { columns: 2; column-gap: 2em; font-size: .62em; margin: 0 0 0 1.5em; }
html[data-look="moodle19"] .reveal .steps li { margin: .12em 0; }
html[data-look="moodle19"] .reveal .steps li.gap { list-style: none; color: var(--muted); }

/* Rancher: four coloured call-outs */
html[data-look="moodle19"] .reveal .callouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin: .4em 0 .9em; }
html[data-look="moodle19"] .reveal .callouts div {
  color: #fff; font-size: .52em; font-weight: 700; text-align: center; padding: .9em .6em 2.4em;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 58% 86%, 50% 100%, 42% 86%, 0 86%); min-height: 10em;
}
html[data-look="moodle19"] .reveal .callouts ul { text-align: left; margin: .4em 0 0 1.1em; font-weight: 600; }
html[data-look="moodle19"] .reveal .callouts li::marker { color: #fff; }
html[data-look="moodle19"] .reveal .callouts .c1 { background: #22b8b8; }
html[data-look="moodle19"] .reveal .callouts .c2 { background: #1f8ee0; }
html[data-look="moodle19"] .reveal .callouts .c3 { background: #f7941d; }
html[data-look="moodle19"] .reveal .callouts .c4 { background: #f05a28; }

html[data-look="moodle19"] .reveal section.divider h1 { color: #fff; font-weight: 400; }

/* ---------- light / dark: every look follows the visitor's theme ----------
   Each look keeps its native palette by default and gains the opposite one:
   forkit25 & neon26 are dark natively, moodle19 is light natively.          */
@media (prefers-color-scheme: light) {
  html[data-look="forkit25"]:not([data-theme="dark"]) {
    --bg: #f6f4fb; --fg: #23214a; --muted: #5f5b85;
    --card: rgba(35, 33, 74, .05); --card-border: rgba(35, 33, 74, .16);
  }
  html[data-look="neon26"]:not([data-theme="dark"]) {
    --bg: #f1f6fc; --fg: #0a1430; --muted: #4a5b80; --accent: #0a86b8; --accent-2: #e0621c;
    --section-bg: radial-gradient(ellipse at 80% 20%, #dbe9fb 0%, #f1f6fc 60%);
    --card: rgba(10, 134, 184, .06); --card-border: rgba(10, 134, 184, .5);
  }
}
html[data-look="forkit25"][data-theme="light"] {
  --bg: #f6f4fb; --fg: #23214a; --muted: #5f5b85;
  --card: rgba(35, 33, 74, .05); --card-border: rgba(35, 33, 74, .16);
}
html[data-look="neon26"][data-theme="light"] {
  --bg: #f1f6fc; --fg: #0a1430; --muted: #4a5b80; --accent: #0a86b8; --accent-2: #e0621c;
  --section-bg: radial-gradient(ellipse at 80% 20%, #dbe9fb 0%, #f1f6fc 60%);
  --card: rgba(10, 134, 184, .06); --card-border: rgba(10, 134, 184, .5);
}
@media (prefers-color-scheme: dark) {
  html[data-look="moodle19"]:not([data-theme="light"]) {
    --bg: #161b22; --fg: #dfe5ec; --muted: #9aa6b4; --accent: #6e9bff;
    --card: #1f2630; --card-border: #2f3a47;
  }
  html[data-look="moodle19"]:not([data-theme="light"]) .reveal h2 { color: var(--fg); }
  html[data-look="moodle19"]:not([data-theme="light"]) .home-link { color: var(--muted); }
}
html[data-look="moodle19"][data-theme="dark"] {
  --bg: #161b22; --fg: #dfe5ec; --muted: #9aa6b4; --accent: #6e9bff;
  --card: #1f2630; --card-border: #2f3a47;
}
html[data-look="moodle19"][data-theme="dark"] .reveal h2 { color: var(--fg); }
html[data-look="moodle19"][data-theme="dark"] .home-link { color: var(--muted); }

/* theme toggle inside decks, next to "← all talks" */
.theme-toggle.in-deck {
  position: fixed; top: 9px; left: 104px; z-index: 30;
  font: 600 13px/1 var(--font); color: var(--muted); background: none; border: 0; padding: 5px 6px;
  opacity: .55; cursor: pointer; transition: opacity .2s;
}
.theme-toggle.in-deck:hover, .theme-toggle.in-deck:focus-visible { opacity: 1; }
@media print { .theme-toggle.in-deck { display: none; } }