/*
 * Odisee theme for reveal.js
 * Gebaseerd op de stijl van https://ikdoeict.gitlab.io/public/workshop/git/slides/
 */

@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; }
@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Source Sans Pro"; src: url(../fonts/source-sans-pro-latin-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; }

:root {
	--r-background-color: #2e8670;
	--r-main-font: "Source Sans Pro", Helvetica, sans-serif;
	--r-main-font-size: 34px;
	--r-main-color: #fff;
	--r-block-margin: 20px;
	--r-heading-margin: 0 0 30px 0;
	--r-heading-font: "Source Sans Pro", Helvetica, sans-serif;
	--r-heading-color: #fff;
	--r-heading-line-height: 1.2;
	--r-heading-letter-spacing: normal;
	--r-heading-text-transform: none;
	--r-heading-text-shadow: none;
	--r-heading-font-weight: 600;
	--r-heading1-size: 2.5em;
	--r-heading2-size: 1.6em;
	--r-heading3-size: 1.3em;
	--r-heading4-size: 1em;
	--r-code-font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--r-link-color: #0e1d30;
	--r-link-color-hover: #1f416b;
	--r-selection-background-color: #e73f16;
	--r-selection-color: #fff;
	--r-accent: #e73f16;
}

/* ---------- achtergrond: logo linksonder + cirkels rechtsboven ---------- */
body,
.reveal-viewport {
	background:
		url(../img/odisee-logo.png),
		radial-gradient(circle at 100% -40%, rgba(0, 0, 0, .06) 35%, transparent 30%),
		radial-gradient(circle at 72% -98%, rgba(0, 0, 0, .06) 50%, transparent 45%),
		var(--r-background-color);
	background-size: 150px auto, auto, auto, auto;
	background-repeat: no-repeat;
	background-position: 20px calc(100% - 12px), 0 0, 0 0, 0 0;
	background-color: var(--r-background-color);
	background-attachment: fixed;
}

/* ---------- basistypografie ---------- */
.reveal { font-family: var(--r-main-font); font-size: var(--r-main-font-size); font-weight: 400; color: var(--r-main-color); }
.reveal ::selection { color: var(--r-selection-color); background: var(--r-selection-background-color); }
.reveal .slides section, .reveal .slides section > section { line-height: 1.3; font-weight: inherit; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
	margin: var(--r-heading-margin);
	color: var(--r-heading-color);
	font-family: var(--r-heading-font);
	font-weight: var(--r-heading-font-weight);
	line-height: var(--r-heading-line-height);
	letter-spacing: var(--r-heading-letter-spacing);
	text-transform: var(--r-heading-text-transform);
	text-shadow: var(--r-heading-text-shadow);
	word-wrap: break-word;
}
.reveal h1 { font-size: var(--r-heading1-size); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); }
.reveal h4 { font-size: var(--r-heading4-size); }
.reveal h1:last-child, .reveal h2:last-child, .reveal h3:last-child { margin-bottom: 0; }

.reveal h3.inverted { font-weight: 600; opacity: .9; margin-bottom: 10px; }

.reveal p { margin: var(--r-block-margin) 0; line-height: 1.3; }
.reveal strong, .reveal b { font-weight: 700; }
.reveal em { font-style: italic; background-color: var(--r-accent); padding: 0 .15em; }

.reveal ol, .reveal dl, .reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; }
.reveal ul { list-style-type: disc; }
.reveal ul ul { list-style-type: square; }
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { display: block; margin-left: 40px; }
.reveal li { margin-bottom: .3em; }
.reveal ul ul li { font-size: .9em; margin-bottom: .15em; }

.reveal blockquote {
	display: block; position: relative; width: 85%;
	margin: var(--r-block-margin) auto; padding: .6em 1em;
	font-style: italic; text-align: left;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 0 2px rgba(0, 0, 0, .2);
	border-left: 6px solid rgba(255, 255, 255, .5);
}

.reveal a { color: var(--r-link-color); text-decoration: underline; text-decoration-style: dotted; transition: color .15s ease; }
.reveal a:hover { color: var(--r-link-color-hover); }

.reveal small { display: inline-block; font-size: .6em; line-height: 1.2em; vertical-align: top; }

.reveal img, .reveal video, .reveal iframe { max-width: 95%; max-height: 95%; }
.reveal img { margin: var(--r-block-margin) 0; }

/* ---------- code ---------- */
.reveal pre {
	display: block; position: relative; width: 95%;
	margin: var(--r-block-margin) auto; text-align: left;
	font-size: .55em; font-family: var(--r-code-font); line-height: 1.35em;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}
.reveal pre.bigger { font-size: .68em; }
.reveal code { font-family: var(--r-code-font); text-transform: none; tab-size: 2; }
.reveal pre code { display: block; background: #272822; color: #f8f8f2; padding: .8em 1em; overflow: auto; max-height: 500px; word-wrap: normal; border-radius: 4px; }
.reveal :not(pre) > code { background: rgba(0, 0, 0, .18); padding: .05em .3em; border-radius: 3px; font-size: .9em; }
.reveal .code-wrapper { white-space: normal; }
.reveal .code-wrapper code { white-space: pre; }
.reveal .hljs-comment { color: #40c9c9; }
.reveal .placeholder { color: #ff9ad2; font-style: italic; }

/* ---------- controls ---------- */
.reveal .controls { color: #fff; }
.reveal .progress { background: rgba(0, 0, 0, .2); color: #fff; }
.reveal .slide-number { background: rgba(0, 0, 0, .25); font-family: var(--r-main-font); }

/* ---------- hulpklassen (zoals in referentie) ---------- */
.reveal .left { text-align: left; width: 90%; margin: 0 auto; }
.reveal .h1 { font-size: var(--r-heading1-size); }
.reveal .h2 { font-size: var(--r-heading2-size); }
.reveal .visually-hidden { visibility: hidden; }
.reveal .muted { opacity: .75; }
.reveal .m-t-1 { margin-top: .5em !important; }
.reveal .m-t-2 { margin-top: 1em !important; }
.reveal .m-b-0 { margin-bottom: 0 !important; }
.reveal .text-sm { font-size: .8em; }
.reveal .text-xs { font-size: .6em; }

/* diagrammen met transparante/witte achtergrond op een witte kaart */
.reveal .card {
	display: inline-block;
	background: #fff;
	padding: 14px;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	margin: 10px 0;
	line-height: 0;
}
.reveal .card img { margin: 0; max-width: 100%; max-height: none; display: block; }

/* bronvermelding onderaan een slide */
.reveal .source { display: block; margin-top: 1em; font-size: .5em; opacity: .8; }
.reveal .source a { color: #fff; }

/* tekstlink op groene achtergrond leesbaar houden */
.reveal a.light { color: #fff; }

/* ---------- layouts ---------- */
.reveal .columns { display: flex; gap: 1.2em; align-items: center; text-align: left; }
.reveal .columns > * { flex: 1; min-width: 0; }
.reveal .columns > .narrow { flex: 0 0 34%; }
.reveal .columns > .wide { flex: 0 0 62%; }

/* labels voor cloudproviders */
.reveal .providers { list-style: none; margin-left: 0; padding: 0; }
.reveal .providers li { display: flex; align-items: baseline; gap: .6em; }
.reveal .tag {
	display: inline-block; flex: 0 0 3.6em; text-align: center;
	font-size: .65em; font-weight: 700; letter-spacing: .04em;
	padding: .15em .4em; border-radius: 3px;
	background: rgba(255, 255, 255, .92); color: #2e8670;
}

.reveal .callout {
	display: inline-block; margin-top: 1em; padding: .35em .9em;
	background: var(--r-accent); color: #fff; font-weight: 600; border-radius: 3px;
}

/* sectie-slides: foto links, titel rechts */
.reveal .section-slide .section-inner { display: flex; height: 560px; align-items: center; }
.reveal .section-slide .section-inner .photo {
	flex: 0 0 45%; height: 100%;
	background-size: cover; background-position: center;
	border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.reveal .section-slide .section-inner .title { flex: 1; text-align: left; padding-left: 1.4em; }
.reveal .section-slide .section-inner .title h2 { font-size: 2.3em; margin: 0; }
.reveal .section-slide .section-inner .title h3 { font-weight: 400; opacity: .85; margin: 0 0 .3em; font-size: 1em; text-transform: uppercase; letter-spacing: .08em; }

/* pdf/print */
@media print { .backgrounds { background-color: var(--r-background-color); } }

/* ---------- tabellen ---------- */
.reveal table { border-collapse: collapse; margin: .4em auto; font-size: .62em; text-align: left; }
.reveal table th, .reveal table td { padding: .35em .6em; border-bottom: 1px solid rgba(255, 255, 255, .25); vertical-align: top; }
.reveal table th { font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .7); }
.reveal table td:first-child { font-weight: 600; }
.reveal table.compact { font-size: .58em; }
.reveal table.responsibility { font-size: .64em; }
.reveal table tr.fragment td { transition: opacity .3s; }

/* wie beheert wat? */
.reveal table.responsibility td { text-align: center; }
.reveal table.responsibility td:first-child { text-align: left; }
.reveal td.you { background: var(--r-accent); color: #fff; }
.reveal td.cloud { background: rgba(255, 255, 255, .92); color: #2e8670; }
.reveal td.shared { background: #0e1d30; color: #fff; }

/* ja/nee labels */
.reveal .yes, .reveal .no, .reveal .maybe { display: inline-block; font-size: .75em; font-weight: 700; padding: .05em .45em; border-radius: 3px; }
.reveal .yes { background: #fff; color: #2e8670; }
.reveal .no { background: var(--r-accent); color: #fff; }
.reveal .maybe { background: #0e1d30; color: #fff; }

/* voor/tegen kolommen */
.reveal .pro, .reveal .con { padding: .6em .9em; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.reveal .pro { border-top: 6px solid #fff; }
.reveal .con { border-top: 6px solid var(--r-accent); }
.reveal .pro h4, .reveal .con h4 { margin-bottom: .4em; }
.reveal .pro ul, .reveal .con ul { font-size: .8em; margin-left: .8em; }

/* grote vraag / hook */
.reveal .big-question { font-size: 1.5em; font-weight: 600; line-height: 1.25; max-width: 85%; margin: 0 auto; }

/* inline svg diagrammen */
.reveal svg.diagram { display: block; margin: 0 auto; max-width: 100%; height: auto; font-family: var(--r-main-font); }
.reveal svg.diagram .box { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 2; }
.reveal svg.diagram .box.solid { fill: #fff; }
.reveal svg.diagram .box.accent { fill: var(--r-accent); stroke: var(--r-accent); }
.reveal svg.diagram .box.dark { fill: #0e1d30; stroke: #0e1d30; }
.reveal svg.diagram text { fill: #fff; font-size: 20px; text-anchor: middle; dominant-baseline: middle; }
.reveal svg.diagram text.dark { fill: #2e8670; }
.reveal svg.diagram text.small { font-size: 15px; opacity: .85; }
.reveal svg.diagram text.label { font-size: 15px; font-style: italic; }
.reveal svg.diagram text.title { font-size: 22px; font-weight: 700; }
.reveal svg.diagram .arrow { stroke: #fff; stroke-width: 2.5; fill: none; }
.reveal svg.diagram .arrow.dashed { stroke-dasharray: 7 5; }
.reveal svg.diagram marker path { fill: #fff; }

/* sectie-slide zonder foto */
.reveal .section-slide .section-inner .photo.graphic {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #0e1d30 0%, #1f416b 55%, var(--r-accent) 140%);
	font-size: 7em; font-weight: 700; color: rgba(255, 255, 255, .9);
}

/* quiz-kaartjes */
.reveal .quiz { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .9em; text-align: left; font-size: .7em; }
.reveal .quiz > div { background: rgba(255, 255, 255, .08); padding: .45em .7em; border-radius: 6px; border-left: 5px solid rgba(255, 255, 255, .6); }
.reveal .quiz .answer { display: block; margin-top: .25em; font-size: .85em; }

/* kleine voetnoot / disclaimer */
.reveal .footnote { display: block; margin-top: .8em; font-size: .45em; opacity: .75; }

/* ---------- keuzescherm (index.html) ---------- */
.reveal .chooser { display: flex; gap: 1.2em; justify-content: center; align-items: stretch; margin-top: 1.2em; }
.reveal a.choice {
	flex: 0 0 42%; display: block; text-align: left; text-decoration: none; color: #fff;
	padding: .8em 1em 1em; border-radius: 8px;
	background: rgba(255, 255, 255, .08); border-top: 6px solid #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	transition: background .15s ease, transform .15s ease;
}
.reveal a.choice.accent { border-top-color: var(--r-accent); }
.reveal a.choice:hover, .reveal a.choice:focus-visible { background: rgba(255, 255, 255, .18); transform: translateY(-4px); color: #fff; outline: none; }
.reveal a.choice h2 { margin: 0 0 .3em; font-size: 1.4em; }
.reveal a.choice p { margin: 0; font-size: .62em; line-height: 1.35; opacity: .9; }
.reveal a.choice .key {
	display: inline-block; margin-top: .9em; font-size: .5em; font-weight: 700; letter-spacing: .04em;
	padding: .15em .5em; border-radius: 3px; background: rgba(0, 0, 0, .25);
}

/* ---------- terug naar het keuzescherm ---------- */
.back-home {
	position: fixed; top: 12px; left: 16px; z-index: 40;
	font: 600 14px "Source Sans Pro", Helvetica, sans-serif; color: #fff; text-decoration: none;
	padding: .3em .75em; border-radius: 3px; background: rgba(0, 0, 0, .25);
	opacity: .7; transition: opacity .15s ease;
}
.back-home:hover, .back-home:focus-visible { opacity: 1; color: #fff; }
@media print { .back-home { display: none; } }