/* ==========================================================================
   PDF DOWNLOAD CARD — production stylesheet
   Trimmed from the Britannica Money Webflow base — real tokens/colors below,
   no linked webfont (system font stack per B-Money "no custom typefaces"
   directive), no unused quiz/match/multichoice CSS carried over.
   ========================================================================== */

:root {
  --max-width--main: 850px;
  --radius--main: .5em;

  --_spacing---4: 24px;
  --_spacing---3: 16px;
  --_spacing---2: 12px;
  --_spacing---1: 8px;

  --swatches--light-200: #e9f0f2;
  --swatches--blue-500: #0063ce;
  --swatches--blue-400: #0091f4;
  --swatches--dark-900: #071c2e;
  --swatches--light-100: white;

  --_theme---base--background: var(--swatches--light-200);
  --_theme---base--text: var(--swatches--dark-900);
  --_theme---button-main--bg: var(--swatches--blue-500);
  --_theme---button-main--border: var(--swatches--blue-500);
  --_theme---button-main--text: var(--swatches--light-100);
  --_theme---button-main--bg-hover: var(--swatches--blue-400);
  --_theme---button-main--border-hover: var(--swatches--blue-400);
  --_theme---button-main--text-hover: var(--swatches--light-100);

  --_typography---size--text-2xl: 1.6rem;
  --_typography---size--text-main: 1.15rem;
  --_typography---weight--regular: 400;
  --_typography---weight--bold: 700;
  --_typography---letter-spacing--tight: -.02em;
  --_typography---letter-spacing--normal: 0em;
  --_typography---line-height--small: 1;
  --_typography---line-height--large: 1.3;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: transparent;
}

/* --- Focus state (carried from Webflow base — confirmed present) --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- Card structure --- */
.pdf-layout {
  width: 100%;
  max-width: var(--max-width--main);
  margin: 0 auto;
  padding: var(--_spacing---4);
  border-radius: var(--radius--main);
  background-color: var(--_theme---base--background);
  container-type: inline-size; /* lets .pdf-text-wrap query the card's
                                   own real rendered width below, instead
                                   of trusting browser-width media
                                   queries, which the quiz project found
                                   don't reliably track iframe width */
  container-name: pdf-card;
}

.pdf-text-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---2);
}

.pdf-text-wrap {
  flex: 1;
  min-width: 36rem; /* the resize breakpoint — see hflex discussion.
                        Only applies above the container query threshold
                        below; removed at narrower card widths so text
                        can actually shrink instead of overflowing. */
}

/* Below this pdf-layout width, force .pdf-text-wrap to claim the full
   row — with nothing left over for the button, flex-wrap is forced to
   push the button onto its own line below. min-width: 0 is set
   alongside so that, once alone on its own row, it can still shrink to
   fit genuinely narrow (mobile) widths without overflowing. */
@container pdf-card (max-width: 38rem) {
  .pdf-text-wrap {
    flex-basis: 100%;
    min-width: 0;
  }
}

.pdf-btn-wrap {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto; /* never shrink or wrap the button below its content */
}

/* --- Typography (real Webflow token values, system-font stack) --- */
.display-title {
  margin: 0 0 var(--_spacing---1) 0;
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-2xl);
  letter-spacing: var(--_typography---letter-spacing--tight);
  line-height: var(--_typography---line-height--small);
  color: var(--_theme---base--text);
  text-wrap: balance;
}

.text-sans-main {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text);
}

.text-sans-main strong { font-weight: var(--_typography---weight--bold); }
.text-sans-main em { font-style: italic; }
.text-sans-main a {
  color: var(--_theme---base--text);
  text-decoration: underline;
}

/* --- Button --- */
.button-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---2);
  padding: var(--_spacing---1) var(--_spacing---3);
  border: 1px solid var(--_theme---button-main--border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---button-main--bg);
  text-decoration: none;
  white-space: nowrap; /* button label never wraps, per hflex discussion */
}

.button-main:hover,
.button-main:focus-visible {
  background-color: var(--_theme---button-main--bg-hover);
  border-color: var(--_theme---button-main--border-hover);
}

.button-text {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---button-main--text);
}

.arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon {
  width: 1.5rem;
  height: auto;
  aspect-ratio: 51.9 / 33.71; /* matches arrow.svg's viewBox — reserves
                                  exact space so the button/card height
                                  can't shift once the image loads */
}