/**
 * Shared stylesheet for new Figma-based pages.
 *
 * Everything these pages need beyond Tailwind utilities lives here.
 * Design tokens mirror the Figma colour styles. Page-specific rules
 * stay scoped to a page root (e.g. .ttd-page).
 */

/* The theme's global CSS sets html { font-size: 62.5% } (1rem = 10px).
   Tailwind's rem-based utilities assume 1rem = 16px, so restore the root
   size on pages that include this stylesheet. */
html:has(.ttd-page) {
  font-size: 16px;
}

.ttd-page {
  --ttd-dark-blue: #003478;
  --ttd-blue-tint-1: #0071CE;
  --ttd-blue-tint-2: #00AEEF;
  --ttd-text: #444444;
  --ttd-mist: #F9F9F9;
  --ttd-orange: #F5A81C;
  --ttd-green: #47A141;
  --ttd-bar-grey: #DBDBDB;
  --ttd-border: #DBDBDB;
  /* Chart.js easeOutQuart — shared by the audience swap and FAQ accordion. */
  --ttd-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ttd-dur: 0.8s;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ttd-text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* Figma container: content spans x=128..1238 (1110px) on the 1366 frame.
   1158px max-width + 24px side padding lands content at exactly 128px
   on a 1366 viewport and keeps sane gutters on smaller screens. */
.ttd-page .tw-container {
  max-width: 1158px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Emily's Material dropdown icon, scoped to this page's shared navigation. */
body.page-template-template-text-to-data-redesign #menu-primary-navigation .caret {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-bottom: 0 !important;
  border: 0;
  background: url('../img/redesign/text-to-data/material-arrow-drop-down.svg') center / contain no-repeat;
  vertical-align: middle;
}

/* Eyebrow tags — Figma "Tag" style (14px, upper case, tracked) */
.ttd-page .ttd-tag {
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  font-weight: 400;
}

.ttd-page .ttd-tag-preserve-case {
  text-transform: none;
}

/* Section headings */
.ttd-page .ttd-h2 {
  font-size: 32px;
  line-height: 42px;
  font-weight: 600;
  color: var(--ttd-dark-blue);
}

.ttd-page .ttd-h3 {
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ttd-dark-blue);
}

/* Buttons — Figma components, no drop shadows.
   Primary: solid #0071CE, no stroke.
   Outline (hero): 1px inside stroke #003478, transparent fill.
   Outline tint (callout): 1px inside stroke #0071CE.
   White (on dark): solid white fill, no stroke.
   Outline light (on dark): 1px inside white stroke.
   Complete border shorthands so leftover UA/theme side-widths cannot paint. */
.ttd-page .ttd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ttd-page .ttd-btn-primary {
  background: var(--ttd-blue-tint-1);
  color: #ffffff;
  border: 0;
}

.ttd-page .ttd-btn-primary:hover {
  background: #005fb0;
  color: #ffffff;
}

.ttd-page .ttd-btn-white {
  background: #ffffff;
  color: var(--ttd-dark-blue);
  border: 0;
}

.ttd-page .ttd-btn-white:hover {
  color: var(--ttd-blue-tint-1);
}

.ttd-page .ttd-btn-outline {
  background: transparent;
  color: var(--ttd-dark-blue);
  border: 1px solid var(--ttd-dark-blue);
}

.ttd-page .ttd-btn-outline:hover {
  color: var(--ttd-blue-tint-1);
  border-color: var(--ttd-blue-tint-1);
}

.ttd-page .ttd-btn-outline-tint {
  background: transparent;
  color: var(--ttd-blue-tint-1);
  border: 1px solid var(--ttd-blue-tint-1);
}

.ttd-page .ttd-btn-outline-tint:hover {
  color: #005fb0;
  border-color: #005fb0;
}

.ttd-page .ttd-btn-outline-light {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.ttd-page .ttd-btn-outline-light:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .85);
}

/* The Problem band — 1px #DBDBDB hairlines top and bottom (Figma 2371:2777). */
.ttd-page .ttd-problem {
  border: 0;
  border-top: 1px solid var(--ttd-border);
  border-bottom: 1px solid var(--ttd-border);
}

/* ------------------------------------------------------------------ */
/* How It Works cards                                                  */
/* ------------------------------------------------------------------ */
/*
  Tailwind's divide/border utilities set border-style on every side.
  Without Tailwind preflight, unused sides keep the UA/theme width
  (~1.5px) and the rows render as boxed cells instead of hairlines.
  These rules set complete shorthands so only the intended edges paint.
*/

.ttd-page .ttd-hiw-card {
  min-height: 350px;
  padding: 16px 20px 20px;
  border-radius: 18px;
  box-sizing: border-box;
}

.ttd-page .ttd-hiw-card--dark {
  background: transparent;
  /* Figma stroke is 1px white, aligned outside the 350px rect. */
  box-shadow: 0 0 0 1px #ffffff;
}

.ttd-page .ttd-hiw-card--light {
  background: #F9F9F9;
  box-shadow: none;
}

.ttd-page .ttd-hiw-desc {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 28px;
}

.ttd-page .ttd-hiw-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.ttd-page .ttd-hiw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-top: 1px solid #ffffff;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.ttd-page .ttd-hiw-row:last-child {
  border-bottom: 1px solid #ffffff;
}

.ttd-page .ttd-hiw-card--light .ttd-hiw-row,
.ttd-page .ttd-hiw-card--light .ttd-hiw-row:last-child {
  border-top-color: #DBDBDB;
  border-bottom-color: #DBDBDB;
}

.ttd-page .ttd-hiw-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.ttd-page .ttd-hiw-svg {
  display: block;
  width: 24px;
  height: 24px;
}

.ttd-page .ttd-hiw-row-text {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.ttd-page .ttd-hiw-card--dark .ttd-hiw-row-text {
  color: #ffffff;
}

.ttd-page .ttd-hiw-card--dark .ttd-hiw-row-text strong {
  font-weight: 600;
}

.ttd-page .ttd-hiw-card--light .ttd-hiw-row-text {
  color: #444444;
}

.ttd-page .ttd-hiw-card--light .ttd-hiw-row-text strong {
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Code extraction demo (medcomp-widget) — page blend                  */
/* ------------------------------------------------------------------ */

.ttd-page .ttd-demo medcomp-widget {
  display: block;
}

.ttd-page .ttd-dev-terminal {
  min-width: 0;
  overflow: hidden;
}
/* Theme styles pre with wrapping and a background; keep the command on its lines and scroll instead. */
.ttd-page .ttd-dev-code {
  overflow-x: auto;
  background: none;
  border: 0;
  font-family: inherit;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}
.ttd-page .ttd-dev-code code {
  font: inherit;
  white-space: inherit;
  background: none;
  padding: 0;
}
.ttd-page .ttd-sh-cmd { color: var(--ttd-dark-blue); font-weight: 600; }
.ttd-page .ttd-sh-flag { color: var(--ttd-blue-tint-1); }
.ttd-page .ttd-sh-str { color: #2E7D32; }
.ttd-page .ttd-sh-cont { color: #9CA3AF; }

/* ------------------------------------------------------------------ */
/* WHO IT IS FOR — choose-your-audience tabbed card                    */
/* ------------------------------------------------------------------ */

.ttd-page .ttd-audience-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ttd-page .ttd-audience-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ttd-dark-blue);
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 28px;
  color: var(--ttd-dark-blue);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ttd-page .ttd-audience-item:hover {
  background: #fff;
}

.ttd-page .ttd-audience-item[aria-selected="true"] {
  background: var(--ttd-blue-tint-1);
  border-color: var(--ttd-blue-tint-1);
  color: #fff;
}

.ttd-page .ttd-audience-stage {
  display: grid;
  overflow: hidden;
}

.ttd-page .ttd-audience-panel {
  grid-area: 1 / 1;
  border: 1px solid var(--ttd-border);
  border-radius: 8px;
  background: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
}

.ttd-page .ttd-audience-stage.is-ready .ttd-audience-panel {
  transition:
    opacity var(--ttd-dur) var(--ttd-ease),
    transform var(--ttd-dur) var(--ttd-ease),
    visibility 0s linear var(--ttd-dur);
}

.ttd-page .ttd-audience-panel.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.ttd-page .ttd-audience-stage.is-ready .ttd-audience-panel.is-active {
  transition-delay: 0s;
}

/* FAQ accordion */
.ttd-page .ttd-faq-item {
  border-bottom: 1px solid var(--ttd-border);
}

.ttd-page .ttd-faq-item:first-child {
  border-top: 1px solid var(--ttd-border);
}

.ttd-page .ttd-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  line-height: 28px;
  color: var(--ttd-text);
  cursor: pointer;
}

.ttd-page .ttd-faq-q:hover {
  color: var(--ttd-dark-blue);
}

.ttd-page .ttd-faq-q svg {
  flex: none;
  transition: transform var(--ttd-dur) var(--ttd-ease);
}

.ttd-page .ttd-faq-item.open .ttd-faq-q svg {
  transform: rotate(180deg);
}

.ttd-page .ttd-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ttd-dur) var(--ttd-ease);
}

.ttd-page .ttd-faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 16px;
  font-size: 16px;
  line-height: 28px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--ttd-dur) var(--ttd-ease),
    transform var(--ttd-dur) var(--ttd-ease);
}

.ttd-page .ttd-faq-item.open .ttd-faq-a {
  grid-template-rows: 1fr;
}

.ttd-page .ttd-faq-item.open .ttd-faq-a-inner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ttd-page .ttd-audience-panel,
  .ttd-page .ttd-faq-a,
  .ttd-page .ttd-faq-a-inner,
  .ttd-page .ttd-faq-q svg {
    transition: none;
  }
}

/* Accuracy chart */
.ttd-page .ttd-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 1067px;
  margin-left: auto;
  margin-right: auto;
}
.ttd-page .ttd-chart-inner { height: 100%; }

/* ------------------------------------------------------------------ */
/* Tablet and mobile (below Tailwind lg). Desktop stays untouched.     */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .ttd-page .ttd-hiw-row {
    height: auto;
    min-height: 48px;
    padding: 10px 0;
  }
  .ttd-page .ttd-hiw-row-text {
    line-height: 24px;
  }

  .ttd-page .ttd-stats .tw-grid > div {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
  }

  .ttd-page .ttd-dev-copy {
    align-self: stretch;
  }

  .ttd-page .ttd-faq-layout {
    flex-direction: column;
  }
  .ttd-page .ttd-faq-layout > div:first-child {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (below Tailwind md).                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ttd-page .ttd-hero h1 {
    font-size: 34px;
    line-height: 42px;
  }
  .ttd-page .ttd-hero p:not(.ttd-tag) {
    font-size: 18px;
    line-height: 28px;
  }
  .ttd-page .ttd-h2 {
    font-size: 26px;
    line-height: 34px;
  }
  .ttd-page .ttd-h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .ttd-page .ttd-problem .tw-grid > div {
    text-align: left;
  }
  .ttd-page .ttd-problem .tw-grid > div > div:first-child {
    margin-inline: 0;
  }

  .ttd-page .ttd-audience-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 8px;
  }
  .ttd-page .ttd-audience-item {
    flex: 0 0 120px;
    width: 120px;
    padding: 0 4px;
    font-size: 13px;
    white-space: nowrap;
  }

  .ttd-page .ttd-audience-panel {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ttd-page .ttd-chart-wrap {
    height: 320px;
    overflow-x: auto;
  }
  .ttd-page .ttd-chart-inner {
    min-width: 800px;
  }

  .ttd-page .ttd-stats .tw-grid > div > span {
    font-size: 56px;
    line-height: 60px;
  }

  .ttd-page .ttd-hero-actions,
  .ttd-page .ttd-callout-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .ttd-page .ttd-hero-actions > a,
  .ttd-page .ttd-callout-actions > a {
    width: 100%;
  }
  .ttd-page .ttd-dev-actions {
    flex-direction: column;
    gap: 12px;
    order: 2;
    margin-top: 24px;
    width: 100%;
  }
  .ttd-page .ttd-dev-actions > a {
    width: 100%;
  }
  .ttd-page .ttd-dev-copy { display: contents; }
  .ttd-page .ttd-dev-layout { align-items: stretch; gap: 0; }
  .ttd-page .ttd-dev-terminal { order: 1; margin-top: 24px; }
  .ttd-page .ttd-dev-code {
    padding: 16px;
    font-size: 13px;
    line-height: 24px;
  }
}