/* =========================
   TITLE BLOCK STYLING
   ========================= */

/* Styles the main page title inside the Quarto title banner */
.quarto-title-banner .quarto-title .title {
    font-weight: 500;              /* medium font weight */
    color: black !important;       /* forces title text to black */
}

/* Styles the description/subtitle text under the title */
#title-block-header.quarto-title-block.default .description {
    margin-top: 1em;               /* adds space above the description */
    font-weight: 400;              /* regular font weight */
    font-size: 1em;                /* sets description text size */
    color: black !important;       /* forces description text to black */
}


/* =========================
   PAGE LAYOUT
   ========================= */

/* Keeps standard article/body content left-aligned */
.page-columns .content {
  text-align: left;
}

/* Styles the scrollytelling section container */
.cr-section {
  max-width: min(100%, 1000px);    /* keeps section from getting wider than 1000px */
  margin-left: auto;               /* centers section horizontally */
  margin-right: auto;              /* centers section horizontally */
  transform: translateX(-120px);   /* shifts the whole section left */
}

/* Styles non-sticky content inside the scrollytelling section */
.cr-section > :not(.cr-sticky) {
  /* max-width: 320px !important; */ /* old optional width cap, currently disabled */
  font-size: 0.95rem !important;      /* slightly reduces text size */
  line-height: 1.5;                   /* improves readability with more vertical spacing */
}

@media (max-width: 767.98px) {
  .cr-section .narrative-col .trigger .narrative > p {
    margin-bottom: 0;
    font-size: .65rem !important;
  }
}
/* =========================
   CUSTOM FONTS
   ========================= */

/* Regular Adelle Sans */
@font-face {
  font-family: 'Adelle-Sans';
  src: url('../../../../fonts/TypeTogether - AdelleSans-Regular.otf') format('opentype');
  font-weight: normal;
}

/* Light Adelle Sans */
@font-face {
  font-family: 'Adelle-Sans-Light';
  src: url('../../../../fonts/TypeTogether - AdelleSans-Light.otf') format('opentype');
  font-weight: normal;
}

/* Bold Adelle Sans */
@font-face {
  font-family: 'Adelle-Sans';
  src: url('../../../../fonts/TypeTogether - AdelleSans-Bold.otf') format('opentype');
  font-weight: bold;
}

/* Semibold Adelle Sans */
@font-face {
  font-family: 'AdelleSans-SemiBold';
  src: url('../../../../fonts/TypeTogether - AdelleSans-SemiBold.otf') format('opentype');
  font-weight: normal;
}

/* Regular Adelle serif */
@font-face {
  font-family: 'Adelle';
  src: url('../../../../fonts/TypeTogether - Adelle-Regular.otf') format('opentype');
  font-weight: normal;
}

/* Light Adelle serif */
@font-face {
  font-family: 'AdelleLight';
  src: url('../../../../fonts/TypeTogether - Adelle-Light.otf') format('opentype');
  font-weight: normal;
}

/* Light italic Adelle serif */
@font-face {
  font-family: 'AdelleLightItalic';
  src: url('../../../../fonts/TypeTogether - Adelle-LightItalic.otf') format('opentype');
  font-weight: normal;
}

/* Regular italic Adelle serif */
@font-face {
  font-family: 'AdelleItalic';
  src: url('../../../../fonts/TypeTogether - Adelle-Italic.otf') format('opentype');
  font-weight: normal;
}


/* =========================
   GLOBAL FONT DEFAULT
   ========================= */

/* Makes Adelle Sans Light the default font for all elements */
* {
  font-family: 'Adelle-Sans-Light';
}


/* =========================
   FIGURE SPACING
   ========================= */

/* Adjusts Quarto figure positioning and removes bottom margin */
.quarto-figure {
    position: relative;
    margin-bottom: 0;
}


/* =========================
   REVEAL.JS / PRESENTATION STYLING
   ========================= */

/* Styles level-2 headings in reveal slides */
.reveal h2 {
    font-size: 1.8rem;                                  /* heading size */
    font-family: 'Adelle-Sans-Light', sans-serif !important;
    color: #000000;                                     /* black text */
}

/* Styles paragraph text in reveal slides */
.reveal p {
    font-size: 1.25rem;                                 /* paragraph size */
    font-family: 'Adelle-Sans-Light', sans-serif !important;
    color: #000000;                                     /* black text */
}


/* =========================
   CALLOUT STYLING: SPECIFIC BOXES
   callouts ids:
   perf, infra, cost, accuracy
   ========================= */

/* Styles the outer container of those specific callout boxes */
#perf.callout,
#infra.callout,
#cost.callout,
#accuracy.callout {
  border-left: 6px solid #00acb4 !important;   /* teal accent bar on the left */
  border-top: 1px solid #d9dee3 !important;    /* light gray top border */
  border-right: 1px solid #d9dee3 !important;  /* light gray right border */
  border-bottom: 1px solid #d9dee3 !important; /* light gray bottom border */
  border-radius: 6px !important;               /* rounded corners */
  background: #ffffff !important;              /* white box background */
  box-shadow: none !important;                 /* removes default shadow */
}

/* Styles the clickable header row of those specific callouts */
#perf .callout-header,
#infra .callout-header,
#cost .callout-header,
#accuracy .callout-header {
  background-color: #cceef0 !important;        /* light teal header background */
  color: #111111 !important;                   /* dark text */
  border-bottom: 0 !important;                 /* removes line between header and body */
}

/* Styles the title text inside those specific callouts */
#perf .callout-title,
#infra .callout-title,
#cost .callout-title,
#accuracy .callout-title {
  color: #111111 !important;                   /* dark text color */
  font-family: 'Adelle-Sans-Light', sans-serif !important;
  font-weight: 400 !important;                /* regular weight */
}

/* Styles the body/content area inside those specific callouts */
#perf .callout-body,
#infra .callout-body,
#cost .callout-body,
#accuracy .callout-body {
  background-color: #ffffff !important;       /* white body background */
  color: #111111 !important;                  /* dark body text */
}

/* Styles the expand/collapse arrow button */
#perf .callout-btn-toggle,
#infra .callout-btn-toggle,
#cost .callout-btn-toggle,
#accuracy .callout-btn-toggle {
  color: #111111 !important;                  /* dark arrow color */
  opacity: 1 !important;                      /* ensures arrow is fully visible */
}

/* Styles the icon shown in those specific callouts */
#perf .callout-icon,
#infra .callout-icon,
#cost .callout-icon,
#accuracy .callout-icon {
  color: #111111 !important;                  /* dark icon color */
}


/* =========================
   CALLOUT STYLING: ALL NOTE CALLOUTS
   This applies the same style to every .callout-note
   ========================= */

/* Styles all note callout containers */
.callout.callout-note {
  border-left: 6px solid #00acb4 !important;   /* teal left accent */
  border-top: 1px solid #d9dee3 !important;    /* light gray top border */
  border-right: 1px solid #d9dee3 !important;  /* light gray right border */
  border-bottom: 1px solid #d9dee3 !important; /* light gray bottom border */
  border-radius: 6px !important;               /* rounded corners */
  background: #ffffff !important;              /* white outer background */
  box-shadow: none !important;                 /* removes default shadow */
}

/* Styles the header row for all note callouts */
.callout.callout-note .callout-header {
  background-color: #cceef0 !important;        /* light teal header */
  color: #111111 !important;                   /* dark text */
  border-bottom: 0 !important;                 /* removes divider line */
}

/* Styles title text, toggle arrow, and icon in all note callouts */
.callout.callout-note .callout-title,
.callout.callout-note .callout-btn-toggle,
.callout.callout-note .callout-icon {
  color: #111111 !important;                   /* dark text/icons */
}

/* Styles the body area for all note callouts */
.callout.callout-note .callout-body {
  background-color: #ffffff !important;        /* white content background */
  color: #111111 !important;                   /* dark body text */
}