/* Root design tokens (scalable via viewport units for slide layout) */
:root {
  /* Typography scale */
  --sd-heading1-size: 7.5vw;
  --sd-heading1-line-height: 1;
  --sd-heading2-size: 5.5vw;
  --sd-heading2-line-height: 1;
  --sd-text-size: 2.4vw;
  --sd-text-line-height: 1.2;
  --sd-caption-font-size: 1vw;
  --sd-caption-line-height: 1;

  /* Color palette (ensure contrast: primary vs background > 4.5:1 ideally) */
  --sd-background-color: #42509E;
  --sd-heading-color: #F3C99D;
  --sd-text-color: #EC9EC5;
  --sd-primary-color: #F3C99D;
  --sd-caption-color: rgba(255, 255, 255, 0.7);

  /* Speaker View tokens */
  --sd-sv-timer-size: 80px;
  --sd-sv-text-size: 25px;
  --sd-sv-text-line-height: 1.2;
  --sd-sv-background-color: #242424;
  --sd-sv-text-color: rgba(255, 255, 255, 0.87);

  /* Layout helpers */
  --sd-gap: 2vw;
  --sd-border-radius-round: 100%;
  --sd-border-width: 2px;
}

/* Register custom font (ensure file name matches in custom/fonts) */
@font-face {
  font-family: 'AscentPro';
  src: url('../custom/fonts/basiqueBlack.ttf') format('truetype');
}

/* Global typography defaults */
body, .sd-slide, .split, .chapter, .picture, .speaker {
  font-family: 'AscentPro';
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'AscentPro';
  text-transform: uppercase; /* headings in uppercase */
}

/* Add logo to every slide (moved to top right) */
.sd-slide::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 200px;
  height: 200px;
  background: url("../images/devfest.svg") no-repeat center center;
  background-size: contain;
  z-index: 10;
  pointer-events: none;
  opacity: 0.95;
}

/* Speaker avatar styling */
.speaker {
  img:not(.slide-logo) {
    border: var(--sd-border-width) solid var(--sd-primary-color);
    border-radius: var(--sd-border-radius-round);
  }
}

/* Generic bordered images */
.picture {
  img:not(.slide-logo) {
    border: var(--sd-border-width) solid var(--sd-primary-color);
  }
}

/* Chapter title emphasis */
.chapter {
  h2 {
    color: var(--sd-primary-color);
  }
}

/* Split layout: two columns side by side */
.split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sd-gap);
  width: 100%;
  img,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  img {
    border: var(--sd-border-width) solid var(--sd-primary-color);
  }
  /* Optional border for SVGs using a modifier class */
  svg.bordered {
    border: var(--sd-border-width) solid var(--sd-primary-color);
  }
}

/* Child column container */
.split > div {
  width: 50%;
  padding: 2vw 1vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center svg with text */
  align-items: center;
}

/* Left column keeps text left-aligned */
.split > div:first-child {
  align-items: flex-start;
}

/* QR code sizing (scaled down on smaller viewports) */
.sd-qrcode {
  width: 600px;
  max-width: 60vw;
}

/* Accessibility utility: focus outline for keyboard navigation */
.u-focus-outline:focus {
  outline: 3px solid var(--sd-primary-color);
  outline-offset: 4px;
}

/* Fixed logo on every slide */
.slide-logo {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.slide-logo svg {
  border: none;
  box-shadow: none;
  outline: none;
}

/* Responsive adjustments for narrower screens (if viewed outside presentation mode) */
@media (max-width: 900px) {
  :root {
    --sd-heading1-size: 10vw;
    --sd-heading2-size: 7vw;
    --sd-text-size: 4vw;
  }
  .split {
    flex-direction: column;
  }
  .split > div {
    width: 100%;
  }
  .sd-qrcode {
    width: 360px;
  }
}