/* STQRY training decks: Reveal.js at 1920x1080.
   White slides with navy type and a bar in the product colour; the title
   slide is the product colour with the Q cropped off its edge; the closing
   slide is navy with the tagline. */

@import url("training.css");

.reveal-viewport { background: var(--paper); }
.reveal { font-family: var(--sans); font-size: 46px; color: var(--navy); }
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; padding: 110px 120px 80px; box-sizing: border-box; }
.reveal .slides section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--accent); }
.reveal h1, .reveal h2, .reveal h3 { font-family: var(--serif); font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0 0 0.6em; text-transform: none; }
.reveal h1 { font-size: 96px; }
.reveal h2 { font-size: 72px; }
.reveal h3 { font-size: 52px; }
.reveal p, .reveal li { line-height: 1.4; }
.reveal ul, .reveal ol { margin-left: 1.1em; }
.reveal li + li { margin-top: 0.35em; }
.reveal img { max-height: 640px; border-radius: 8px; }
.reveal a { color: var(--navy); }
.reveal table { font-size: 32px; }
.reveal .markdown-alert { font-size: 34px; }

.reveal .slides section.title, .reveal .slides section.closing { display: flex !important; flex-direction: column; justify-content: center; overflow: hidden; }
.reveal .slides section.title { background: var(--accent); color: var(--paper); }
.reveal .slides section.title::before { display: none; }
.reveal .slides section.title::after {
  content: ""; position: absolute; right: -180px; top: -120px; width: 900px; height: 1100px;
  background: var(--paper); opacity: 0.16;
  -webkit-mask: url("../img/q.png") center / contain no-repeat; mask: url("../img/q.png") center / contain no-repeat;
}
.reveal .slides section.title h1 { color: inherit; font-size: 110px; max-width: 1300px; position: relative; z-index: 1; }
.reveal .slides section.title .course { font-size: 44px; margin: 0 0 0.6em; position: relative; z-index: 1; }
.reveal .slides section.title ul { font-size: 36px; position: relative; z-index: 1; }
.reveal .slides section.title .logo { position: absolute; left: 120px; bottom: 80px; height: 64px; }
.on-light .reveal .slides section.title { color: var(--navy); }
.on-light .reveal .slides section.title::after { background: var(--navy); opacity: 0.1; }

.reveal .slides section.closing { background: var(--navy); color: var(--paper); }
.reveal .slides section.closing::before { background: var(--accent); }
.reveal .slides section.closing p { font-family: var(--serif); font-weight: 700; font-size: 84px; line-height: 1.1; max-width: 1300px; }
.reveal .slides section.closing .logo { height: 72px; width: auto; align-self: flex-start; margin-top: 1.5em; }
.reveal .closing .exits { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 0.4em; }
.reveal .closing .exits .button { font-size: 34px; padding: 22px 44px; text-decoration: none; }
.reveal .closing .exits .button:not(.secondary) { background: var(--paper); color: var(--navy); }
.reveal .closing .exits .button.secondary { color: var(--paper); box-shadow: inset 0 0 0 3px currentColor; }

/* Always there, out of the way: back to the lesson. */
.exit-slides { position: fixed; top: 14px; right: 18px; z-index: 30; font: 700 15px/1 var(--sans); color: var(--navy-70); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 80%, transparent); }
.exit-slides:hover, .exit-slides:focus-visible { color: var(--navy); background: var(--paper); }

.reveal .controls { color: var(--accent); }
.reveal .progress { color: var(--accent); height: 6px; }
/* Bottom-left, clear of the arrow controls; it's a link, so drop the lesson underline. */
.reveal .slide-number { left: 16px; right: auto; bottom: 12px; background: transparent; color: var(--navy-70); font-family: var(--sans); font-size: 18px; }
.reveal .slide-number a { color: inherit; text-decoration: none; }

/* Layouts, picked per slide with <!-- slide: name --> in the module. */

/* photo: the slide's first image fills the screen; the text sits on a navy
   panel at the bottom left so it reads over any picture. */
.reveal .slides section.layout-photo { display: flex !important; flex-direction: column; justify-content: flex-end; padding: 80px 100px; }
.reveal .slides section.layout-photo::before { display: none; }
.reveal .photo-caption { align-self: flex-start; max-width: 1050px; background: color-mix(in srgb, var(--navy) 88%, transparent); color: var(--paper); padding: 48px 56px 28px; border-radius: 12px; border-left: 14px solid var(--accent); }
.reveal .photo-caption h1, .reveal .photo-caption h2 { color: var(--paper); font-size: 76px; margin-bottom: 0.35em; }

/* split: words on the left, a picture or diagram on the right. */
.reveal .slides section.layout-split { display: grid !important; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: 80px; align-items: center; }
.reveal .layout-split > h1, .reveal .layout-split > h2 { grid-column: 1 / -1; align-self: start; }
.reveal .split-media img, .reveal .split-media svg { width: 100%; max-height: 820px; height: auto; }
.reveal .split-media p { margin: 0; }

/* statement: one sentence, big, on the product colour. */
.reveal .slides section.layout-statement { display: flex !important; flex-direction: column; justify-content: center; background: var(--accent); color: var(--paper); }
.on-light .reveal .slides section.layout-statement { color: var(--navy); }
.reveal .slides section.layout-statement::before { display: none; }
.reveal .slides section.layout-statement h1, .reveal .slides section.layout-statement h2 { font-size: 120px; max-width: 1500px; color: inherit; }
.reveal .slides section.layout-statement p { font-size: 56px; max-width: 1400px; }

/* numbers: a row of big figures, each with a short label under it. */
.reveal .layout-numbers ul { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 60px; }
.reveal .layout-numbers li { margin: 0; border-top: 14px solid var(--accent); padding-top: 32px; font-size: 40px; line-height: 1.3; }
.reveal .layout-numbers li strong { display: block; font-family: var(--serif); font-size: 170px; line-height: 1; margin-bottom: 20px; }
.reveal .layout-numbers > p { font-size: 34px; color: var(--navy-70); margin-top: 1.5em; }

/* quiz: questions first, the answers on the next click. */
.reveal .layout-quiz ul, .reveal .layout-quiz ol { font-size: 50px; }
.reveal .answers { margin-top: 1em; padding: 36px 48px 12px; background: var(--accent-12); border-left: 12px solid var(--accent); border-radius: 0 12px 12px 0; font-size: 34px; }

/* Diagrams are inline SVG: brand fonts, product colour. */
.reveal svg.diagram { width: auto; max-width: 100%; height: 660px; }
.reveal .split-media svg.diagram { width: 100%; height: auto; max-height: 820px; }

/* A slide with a full-width diagram: heading and text take what they need,
   and the diagram scales into the rest, so adding a line never pushes it
   off the bottom. */
.reveal .slides section.layout-diagram { display: flex !important; flex-direction: column; }
.reveal .layout-diagram > p:has(> svg.diagram) { flex: 1 1 auto; min-height: 0; margin: 0.4em 0 0; display: flex; }
.reveal .layout-diagram svg.diagram { height: 100%; max-height: 660px; width: auto; max-width: 100%; }

/* An address on a slide shouldn't break at its hyphen. */
.reveal .slides a { white-space: nowrap; }

/* Reveal's reset.css sets font: inherit on everything, which strips bold
   and italic from **labels** and *titles* on slides. Put them back. */
.reveal strong, .reveal b { font-weight: 700; }
.reveal em, .reveal i { font-style: italic; }