/**
 * UGent theme for reveal.js 6.x
 *
 * Derived from the official UGent 2016 house style (huisstijl2016), but written
 * as plain CSS against reveal.js' --r-* custom properties: no Bootstrap, no SCSS
 * build step. Only the design tokens (colour palette, Panno typography) and the
 * assets (Panno webfonts, UGent logo) are carried over.
 *
 * Tokens ported from  sass/_settings.scss
 * Type rules ported from  sass/base/_typography.scss
 *
 * Usage: link dist/reset.css and dist/reveal.css from reveal.js first, then this
 * file. See README.md.
 */

/* ==========================================================================
   1. Panno webfonts  (ported from sass/partials/_fonts.scss)
   The 2016 house style ships woff/ttf/eot only; the IE-only eot sources are
   dropped here. Names are kept identical to the house style so that markup and
   snippets copied from UGent sites keep working.
   ========================================================================== */

@font-face {
  font-family: 'PannoTextNormal';
  src: url('fonts/panno/ugentpannotext-normal-web.woff') format('woff'),
       url('fonts/panno/ugentpannotext-normal-web.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PannoTextLight';
  src: url('fonts/panno/ugentpannotext-semilight-web.woff') format('woff'),
       url('fonts/panno/ugentpannotext-semilight-web.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PannoTextMedium';
  src: url('fonts/panno/ugentpannotext-medium-web.woff') format('woff'),
       url('fonts/panno/ugentpannotext-medium-web.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PannoTextSemiBold';
  src: url('fonts/panno/ugentpannotext-semibold-web.woff') format('woff'),
       url('fonts/panno/ugentpannotext-semibold-web.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. UGent design tokens  (ported from sass/_settings.scss)
   ========================================================================== */

:root {
  --ugent-blue: #1E64C8;      /* $brand-primary   */
  --ugent-yellow: #FFD200;    /* $brand-secondary */
  --ugent-pale: #e9f0fa;      /* $brand-tertiary  */
  --ugent-black: #202020;     /* $black           */
  --ugent-white: #fff;        /* $white           */
  --ugent-grey: #646464;      /* $dark-text-color */
  --ugent-border: #CCCCCC;    /* $border-color    */
  --ugent-accent: #2D8CA8;    /* $brand-faculty3  */

  --ugent-font-body: 'PannoTextLight', Arial, sans-serif;
  --ugent-font-normal: 'PannoTextNormal', Arial, sans-serif;
  --ugent-font-heading: 'PannoTextMedium', Arial, sans-serif;
  --ugent-font-semibold: 'PannoTextSemiBold', Arial, sans-serif;
}

/* ==========================================================================
   3. reveal.js theme mapping
   The house style is a light theme (white ground, blue headings); this theme
   deliberately commits to that single look rather than offering a dark variant.
   Sizes are scaled up from the web tokens for projection.
   ========================================================================== */

:root {
  /* v6 exposes both --r-background and --r-background-color */
  --r-background: var(--ugent-white);
  --r-background-color: var(--ugent-white);

  --r-main-font: var(--ugent-font-body);
  --r-main-font-size: 38px;
  --r-main-color: var(--ugent-black);

  --r-block-margin: 20px;

  --r-heading-margin: 0 0 24px 0;
  --r-heading-font: var(--ugent-font-heading);
  --r-heading-color: var(--ugent-blue);
  --r-heading-line-height: 1.15;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: none;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: normal;

  --r-heading1-text-shadow: none;
  --r-heading1-size: 2.1em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1.15em;
  --r-heading4-size: 0.9em;

  --r-code-font: 'SFMono-Regular', Menlo, Consolas, monospace;

  --r-link-color: var(--ugent-blue);
  --r-link-color-hover: #164a96;
  --r-link-color-dark: #164a96;

  --r-selection-background-color: var(--ugent-yellow);
  --r-selection-color: var(--ugent-black);

  --r-overlay-element-bg-color: 30, 100, 200;
  --r-overlay-element-fg-color: 255, 255, 255;
}

/* --------------------------------------------------------------------------
   3b. The consuming layer.
   reveal.css itself consumes none of the --r-* properties: the selectors that
   read them live in the theme file. A theme written from scratch therefore has
   to supply them. These rules mirror the ones generated by reveal's own
   css/theme/template/theme.scss.
   -------------------------------------------------------------------------- */

.reveal-viewport {
  background: var(--r-background);
  background-color: var(--r-background-color);
}

.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  color: var(--r-main-color);
  font-weight: normal;
}

.reveal ::selection {
  color: var(--r-selection-color);
  background: var(--r-selection-background-color);
  text-shadow: none;
}

.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); text-shadow: var(--r-heading1-text-shadow); }
.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 p {
  margin: var(--r-block-margin) 0;
  line-height: 1.3;
}

.reveal a {
  color: var(--r-link-color);
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
}

.reveal pre,
.reveal code {
  font-family: var(--r-code-font);
}

/* h4 is uppercase in the house style (sass/base/_typography.scss) */
.reveal h4 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ugent-grey);
}

/* .lead — the house style's intro paragraph */
.reveal .lead {
  font-family: var(--ugent-font-normal);
  color: var(--ugent-grey);
}

.reveal strong,
.reveal b {
  font-family: var(--ugent-font-semibold);
  font-weight: normal;
}

/* Links carry a subtle underline rather than reveal's plain text link */
.reveal a {
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 100, 200, 0.35);
}

.reveal a:hover {
  border-bottom-color: var(--ugent-blue);
}

/* Chrome: UGent blue progress bar and controls */
.reveal .progress {
  color: var(--ugent-blue);
  height: 4px;
}

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

/* Navigation arrows need to stay visible against anything behind them: the
   white deck background, a full-bleed portal iframe, and the blue closing
   slide. reveal draws each arrow as two rotated bars (::before / ::after) and
   recolours them white over a dark slide, but at low opacity that white all
   but disappears on UGent blue.

   Outlining the bars in black works on every background, since the outline is
   drawn regardless of what colour reveal gives the bars. drop-shadow follows
   the rotated bars' actual shape, where a `border` would box each bar
   separately and read as a smear. Four offsets approximate an outline on all
   sides. Opacity is raised too — reveal's own 0.3 for the inactive direction
   is what makes the arrow vanish in the first place. */
.reveal .controls .controls-arrow {
  filter:
    drop-shadow( 1px  0    0 var(--ugent-black))
    drop-shadow(-1px  0    0 var(--ugent-black))
    drop-shadow( 0    1px  0 var(--ugent-black))
    drop-shadow( 0   -1px  0 var(--ugent-black));
}

/* reveal's `controlsBackArrows: 'faded'` default drops the back arrow to
   opacity .3, which is what makes it vanish on the blue slide. Lift it, but
   only for arrows reveal has marked .enabled — buttons it deliberately hides
   (no slide in that direction) stay hidden.

   The :not(.rtl) mirrors reveal's own selector — without it this rule loses on
   specificity and the arrow stays at .3. */
.reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
.reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
  opacity: 0.75;
}

.reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
.reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
  opacity: 1;
}

/* ==========================================================================
   4. UGent slide furniture (generic — no presentation-specific content)
   ========================================================================== */

/* --- Title slide --------------------------------------------------------- */

.reveal .ugent-title {
  text-align: left;
}

/* Names which demo this deck is, above the shared paper title. */
.reveal .ugent-title .deck-subtitle {
  font-family: var(--ugent-font-semibold);
  font-size: 0.86em;
  line-height: 1.2;
  color: var(--ugent-black);
  margin: 0 0 14px;
}

.reveal .ugent-title h1 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 0;
}

/* the yellow accent rule of the house style */
.reveal .ugent-title h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 8px;
  margin: 28px 0 26px;
  background: var(--ugent-yellow);
}

.reveal .ugent-title .authors {
  font-family: var(--ugent-font-normal);
  font-size: 0.62em;
  line-height: 1.5;
  color: var(--ugent-black);
  margin: 0 0 14px;
}

.reveal .ugent-title .affiliations {
  font-size: 0.46em;
  line-height: 1.55;
  color: var(--ugent-grey);
  margin: 0 0 34px;
}

.reveal .ugent-title .conference {
  font-family: var(--ugent-font-semibold);
  font-size: 0.46em;
  color: var(--ugent-blue);
  margin: 0;
}

/* superscript affiliation markers */
.reveal .ugent-title sup {
  font-size: 0.62em;
  color: var(--ugent-blue);
  vertical-align: super;
}

/* --- Section / accent slides --------------------------------------------- */

.reveal .bg-primary {
  background: var(--ugent-blue);
}

.reveal .bg-primary,
.reveal .bg-primary h1,
.reveal .bg-primary h2,
.reveal .bg-primary h3 {
  color: var(--ugent-white);
}

.reveal .bg-tertiary {
  background: var(--ugent-pale);
}

/* A .bg-primary slide paints only the slide box, which is inset from the screen.
   This paints the whole viewport behind it so the blue runs edge to edge. */
.reveal-viewport:has(.slides section.bg-primary.present) {
  background-color: var(--ugent-blue);
}

/* --- Closing slide -------------------------------------------------------- */

.reveal .ugent-closing {
  text-align: center;
}

.reveal .ugent-closing h2 {
  font-size: 2.2em;
  color: var(--ugent-white);
  margin-bottom: 0;
}

/* the yellow accent rule, centred */
.reveal .ugent-closing h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 8px;
  margin: 30px auto 34px;
  background: var(--ugent-yellow);
}

.reveal .ugent-closing .read-more {
  font-family: var(--ugent-font-normal);
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ugent-yellow);
  margin: 0 0 16px;
}

.reveal .ugent-closing .paper-title {
  font-family: var(--ugent-font-semibold);
  font-size: 0.82em;
  line-height: 1.3;
  color: var(--ugent-white);
  max-width: 88%;
  margin: 0 auto 20px;
}

.reveal .ugent-closing .paper-ref {
  font-size: 0.5em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 80%;
  margin: 0 auto;
}

.reveal .ugent-closing .paper-ref a {
  color: var(--ugent-yellow);
  border-bottom-color: rgba(255, 210, 0, 0.4);
}

.reveal .ugent-closing .paper-ref a:hover {
  color: var(--ugent-yellow);
  border-bottom-color: var(--ugent-yellow);
}

/* --- Content slides ------------------------------------------------------- */

/* Left-aligned body slide with a heading.

   Vertical placement is left to reveal, which centres slide content by setting
   `top` as an inline style on the <section> — stylesheet rules cannot override
   that, and reveal likewise forces `display: block` on the section, so neither
   flex nor grid can be applied to the section itself. Layout that needs a
   formatting context therefore goes on a wrapper inside the slide (see
   .two-col). Sizing the type so the slide fills its box is what keeps it from
   looking top- or bottom-heavy. */
.reveal .content-slide {
  text-align: left;
}

.reveal .content-slide .lead {
  font-size: 0.82em;
  line-height: 1.4;
  margin: 0 0 44px;
}

/* Two columns of equal width. reveal sets `display: block` inline on the
   <section>, so the grid goes on a wrapper inside the slide, not the slide.
   minmax(0, 1fr) rather than 1fr: a bare 1fr floors at the content's min-content
   width, which lets long prose push the columns wider than the slide. */
.reveal .two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px 50px;
  align-items: start;
}

/* A titled block of body text. */
.reveal .block {
  border-top: 4px solid var(--ugent-yellow);
  padding-top: 16px;
}

.reveal .block h3 {
  font-size: 0.7em;
  line-height: 1.25;
  color: var(--ugent-blue);
  margin: 0 0 10px;
}

.reveal .block p {
  font-size: 0.6em;
  line-height: 1.45;
  color: var(--ugent-black);
  margin: 0;
}

.reveal .block .muted {
  color: var(--ugent-grey);
}

/* --- Two portals over one shared architecture ----------------------------- */

/* Shows two sibling portals side by side above the architecture they share.
   The deck's own portal carries .is-active; the other stays as context.
   Like .two-col this must go on a wrapper inside the slide, and uses
   minmax(0, 1fr) so long text cannot push the columns past the slide width. */
.reveal .portal-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  margin-bottom: 26px;
}

.reveal .portal-card {
  background: var(--ugent-pale);
  border: 2px solid transparent;
  border-top: 5px solid var(--ugent-border);
  padding: 20px 24px;
}

.reveal .portal-card h3 {
  font-size: 0.78em;
  line-height: 1.2;
  color: var(--ugent-blue);
  margin: 0 0 8px;
}

.reveal .portal-card p {
  font-size: 0.55em;
  line-height: 1.4;
  color: var(--ugent-black);
  margin: 0;
}

/* Push the meta line to the bottom so both cards align on it regardless of how
   long each descriptor runs. */
.reveal .portal-card {
  display: flex;
  flex-direction: column;
}

.reveal .portal-card p {
  flex: 1 1 auto;
}

.reveal .portal-card .portal-meta {
  display: block;
  font-family: var(--ugent-font-normal);
  font-size: 0.44em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ugent-grey);
  margin-top: 14px;
}

/* The portal this deck is about. */
.reveal .portal-card.is-active {
  background: var(--ugent-white);
  border-color: var(--ugent-blue);
  border-top-color: var(--ugent-yellow);
}

/* The architecture both portals share, spanning the full width below them. */
.reveal .shared-arch {
  background: var(--ugent-blue);
  color: var(--ugent-white);
  padding: 20px 24px;
  text-align: center;
}

.reveal .shared-arch .arch-label {
  display: block;
  font-family: var(--ugent-font-normal);
  font-size: 0.44em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ugent-yellow);
  margin-bottom: 10px;
}

.reveal .shared-arch .arch-flow {
  font-family: var(--ugent-font-semibold);
  font-size: 0.62em;
  line-height: 1.3;
  color: var(--ugent-white);
  margin: 0;
}

/* the → between the stages */
.reveal .shared-arch .arch-sep {
  color: var(--ugent-yellow);
  margin: 0 12px;
}

/* --- Figures ------------------------------------------------------------- */

/* Figure slides: image scaled to fit, with a caption below.

   reveal sets `display: block` inline on each <section>, so a flex layout on the
   section itself is overridden — the image is sized against the slide box
   instead. reveal also lays slides out in a fixed coordinate space (the `height`
   passed to Reveal.initialize) and then scales the whole deck, so the budget is
   in px of that space, not vh: vh would track the browser window instead.

   --figure-max-h is that vertical budget, and is usually what limits the image.
   Keep it under the slide height minus heading and caption, with margin for
   font-loading variation — 720px measured against a 900px slide, one-line
   caption. Raise it per-slide when a wide diagram is left too small. */
.reveal .figure-slide {
  --figure-max-h: 720px;
  --figure-max-w: 100%;
}

.reveal .figure-slide h2 {
  margin-bottom: 14px;
}

.reveal .figure-slide img {
  display: block;
  width: auto;
  max-width: var(--figure-max-w);
  max-height: var(--figure-max-h);
  object-fit: contain;
  margin: 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Figure slide with no caption can use the full remaining height */
.reveal .figure-slide.figure-only {
  --figure-max-h: 720px;
}

/* Wide diagrams with a long (two-line) caption. The caption costs more vertical
   room, but the image is short enough that a generous height budget still lets
   it grow out to the full slide width rather than being pinned by its height. */
/* A wide diagram fills the slide width at a smaller height than a tall one, so
   it needs no extra height budget — only a caption that does not run the full
   width of the slide underneath it. */
.reveal .figure-slide.figure-wide .caption {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.reveal figcaption,
.reveal .caption {
  flex: 0 0 auto;
  font-size: 0.42em;
  line-height: 1.45;
  color: var(--ugent-grey);
  margin-top: 16px;
}

/* reveal's default image chrome is off-brand */
.reveal section img {
  border: 0;
  background: none;
  box-shadow: none;
}

/* --- Full-bleed slides (e.g. a live-demo iframe) -------------------------- */

/* Lets a slide fill the viewport edge to edge, overriding reveal's padding. */
.reveal .slides section.no-pad {
  padding: 0;
  height: 100%;
}

/* --- URL banner over a full-bleed iframe ---------------------------------- */

/* Shows the address of an embedded service large enough to read from the back
   of a room — an endpoint's own header typically sets it in ~14px, which does
   not project, and a cross-origin iframe cannot be restyled from here.

   This element must live OUTSIDE .slides. reveal transforms .slides to scale the
   deck, and a transformed ancestor becomes the containing block for `fixed`
   descendants — so a banner inside a slide cannot reach the screen edges over a
   full-bleed iframe, and its type would be scaled rather than true screen px.
   Drive it from the slide with data-url / data-url-label; see README. */
.reveal .url-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 20px 32px;
  background: var(--ugent-blue);
  color: var(--ugent-white);
  font-family: var(--ugent-font-semibold);
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  word-break: break-all;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 40;
}

.reveal .url-banner[hidden] {
  display: none;
}

/* Lead-in label above the address, e.g. "PUBLIC SPARQL ENDPOINT" */
.reveal .url-banner .url-label {
  display: block;
  font-family: var(--ugent-font-normal);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ugent-yellow);
  margin-bottom: 6px;
}

/* --- Persistent corner logo ---------------------------------------------- */

/* Placed outside .slides so it is not scaled/transformed with slide content.
   Hidden on the title slide (which carries its own larger logo) and on
   full-bleed slides. */
/* Bottom-LEFT: reveal's navigation arrows sit bottom-right and the logo would
   collide with them. */
.reveal .slide-logo {
  position: absolute;
  left: 28px;
  bottom: 22px;
  width: 62px;
  height: auto;
  z-index: 30;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* The logo is UGent blue, so it disappears on a blue slide — invert it there. */
.reveal .slide-logo.on-dark {
  filter: brightness(0) invert(1);
}

/* Title slide logo */
.reveal .ugent-title .title-logo {
  width: 88px;
  height: auto;
  margin: 0 0 42px;
  display: block;
}

/* Print / PDF export: keep the white ground */
@media print {
  .reveal .slide-logo {
    display: none;
  }
}