/* Fonts */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/maple-mono@5.2.5/index.min.css');

@font-face {
  font-family: 'TsangerJinKai';
  src: url('https://raw.githubusercontent.com/pingfan-hu/resources/main/fonts/TsangerJinKai02-W04.ttf') format('truetype');
}

/* TsangerJinKai draws ×, − and arrows as full-width CJK glyphs; serve those codepoints from Palatino */
@font-face {
  font-family: 'SymbolFix';
  src: local('Palatino'), local('Palatino Linotype'), local('Book Antiqua');
  unicode-range: U+003D, U+00D7, U+2013-2014, U+2018-201F, U+2190-2193, U+2212;
}

.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: 'SymbolFix', 'TsangerJinKai', sans-serif;
}

.reveal code,
.reveal pre,
.reveal pre code {
  font-family: 'Maple Mono', monospace;
}

/* Table */
th {
  font-size: 24px;
}

.reveal table th,
.reveal table td {
  vertical-align: middle;
}

.centered-container {
  text-align: center;
  margin-top: 0.5em;
  color: #FF5733;
  border: 2px solid #333;
  padding: 10px;
  max-width: 90%;
  margin: 5px auto;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.centered-container-dark {
  text-align: center;
  margin-top: 0.5em;
  color: #2C3E50;
  border: 2px solid #3DA18A;
  padding: 10px;
  max-width: 90%;
  margin: 5px auto;
  border-radius: 8px;
  background-color: rgba(248, 247, 240, 0.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Approach panel on Research Questions slides */
.approach {
  max-width: 80%;
  margin: 1em auto 0;
  background-color: #DFE8EC;
  border: 1px solid rgba(44, 62, 80, 0.35);
  border-radius: 12px;
  padding: 12px 30px 16px;
  text-align: center;
  font-size: 28px;
  line-height: 1.5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.approach-title {
  font-weight: bold;
  font-size: 32px;
  color: #ED6D46;
}

.approach hr {
  border: none;
  border-top: 2px solid #ED6D46;
  opacity: 0.45;
  margin: 6px auto 10px;
}

.approach ol {
  text-align: left;
  margin: 0 auto;
  width: fit-content;
}

.approach ol li {
  margin: 6px 0;
}

.grid-container {
  display: grid;
  gap: 10px;
  height: 50vh;
  align-items: center;
  justify-content: center;
}

.quarto-figure {
  margin-bottom: 0;
}

:root {
  --r-block-margin: 5px;
}

/* Title-slide logo is a CSS background ON the #title-slide section (image set via
   `style: "... background-image: url(figs/logo.png)"` in title-slide-attributes),
   NOT Reveal's data-background layer. That keeps it INSIDE the scaled .slides stage,
   so it sizes, positions, and scales relative to the slide content. */
#title-slide {
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: right 7% center;
}

/* The theme caps title text at 58%, tuned for its default 28% logo. This
   deck's logo is 25% at `right 7%`, so the circle starts ~68% across the
   stage; widen the cap accordingly so the long subtitle lines don't wrap. */
#title-slide > h1.title,
#title-slide > .quarto-title-authors {
  max-width: 66%;
}

.custom-title-slide h1 {
  position: relative;
  top: 5vh;
  font-size: 1.3em !important;
}

.custom-title-slide .quarto-title-author-name {
  position: relative;
  top: 5vh;
  font-size: 0.9em !important;
}

.reveal .slide-background-content {
  background-position: 50% 80%;
}
.reveal a {
  color: #3DA18A !important;
}

.reveal a:hover {
  color: #236257 !important;
}

.bubble-left {
  display: inline-block;
  padding: 10px 20px;
  background-color: #DFE4FF;
  border-radius: 5px;
  position: absolute;
  margin-left: 20px;
  width: fit-content;
}

.bubble-left::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent #DFE4FF transparent transparent;
}

.bubble-top {
  display: inline-block;
  padding: 10px 20px;
  background-color: #DFE4FF;
  border-radius: 5px;
  position: absolute;
  left: 55%;
  transform: translateX(-50%);
  width: fit-content;
}

.bubble-top::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #DFE4FF transparent;
}

iframe {
  margin-bottom: 0.5em;
}

.four-by-three-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  height: 30vh;
  align-items: center;
  justify-content: center;
  margin: 1em;
}

.four-by-three-grid > * {
  border: 2px solid #2C8475;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #2C8475;
  font-weight: bold;
}

.light-centered {
  text-align: center;
}

.dark-centered {
  background-color: #2C3E50 !important;
  color: #F8F7F0 !important;
  text-align: center;
}

.reveal .dark-centered h1,
.reveal .dark-centered h2,
.reveal .dark-centered h3,
.reveal .dark-centered h4,
.reveal .dark-centered h5,
.reveal .dark-centered h6 {
  color: #F8F7F0 !important;
}

.reveal .dark-centered code {
  color: #FFB84D !important;
}

.black-centered {
  background-color: #000000 !important;
  color: #F8F7F0 !important;
  text-align: center;
}

.round-image {
  border-radius: 50%;
  object-fit: cover;
}

.purple-border {
  border: 2px solid #5654A2;
}

/* Reveal centers lists as inline-blocks on centered slides, so each list's
   left edge depends on its own width and the two bullet groups on the Survey
   Fielding slide land at different indents. On slides marked .left-lists,
   lists become normal blocks pinned to one shared left edge instead; the 2em
   margin keeps the bullets indented relative to the group headings. */
.reveal .left-lists ul {
  display: block;
  margin-left: 2.5em;
}

.img-middle img {
  vertical-align: middle;
  margin-right: 15px;
}

/* Center the About Me heading over the text column only: offset the h2's
   box by the photo column width (34%) so its centering axis matches the
   66% text column beside the photo. */
.reveal #about-me h2 {
  margin-left: 34%;
}

/* Spread the top-level bullets vertically so the text block fills a height
   comparable to the photo, and center the columns against each other so any
   remaining mismatch splits evenly above and below. The theme renders
   .columns as inline (not flex) with inline-block columns, so centering
   needs vertical-align, not align-items. */
.reveal #about-me .column {
  vertical-align: middle;
}
.reveal #about-me .column > ul > li + li {
  margin-top: 1em;
}
.reveal #about-me .column ol > li + li {
  margin-top: 0.6em;
}

.reveal .spaced-list ul > li {
  margin-bottom: 0.8em !important;
}

.reveal .thanks-nav a {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.reveal .thanks-nav a:hover {
  background-color: #C8DCF4;
}
.reveal .thanks-nav a:active {
  background-color: #AECBEC;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
}

.reveal .thanks-card:hover {
  background-color: #C8DCF4;
}