/* Post-build Figma corrections. Kept separate so generated Tailwind cannot
   rewrite WordPress block classes that share utility-like names. */
/* Decorative only: keep Gutenberg's core/details serialisation pristine so
 * summaries remain directly editable and never trigger invalid-content UI. */

.tg-research summary::after {
  width: 16px;
  height: 16px;
  content: "";
  flex: none;
  background: currentColor;
  clip-path: polygon(28% 12%, 72% 50%, 28% 88%);
  opacity: .72;
}

.tg-research details[open] summary::after {
  transform: rotate(90deg);
}

/* Page-frame rules are deliberately kept in one readable source-of-truth
   layer. They are shared by the seeded Gutenberg components, rather than
   relying on per-page inline styles. */
.tg-stage-opening {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  min-height: 600px;
}

.tg-stage-referral-bridge {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Stage 2 gains two lead-in lines that belong to the block below them rather
   than to a card: the conversation starters introduce the pair of prompts, and
   the testing intro introduces the comparison table. Both are ordinary prose
   sections, so they take the referral bridge's centred measure -- and the
   testing intro the 920px one the pathway below it already uses, so its
   sentences do not run wider than anything else in the column. */
.tg-stage-conversation-starters {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.tg-stage-testing-intro {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.tg-stage-conversation-starters p,
.tg-stage-testing-intro p {
  font-size: 16px;
  line-height: 24px;
}

/* The table and the pathway draw their own titles at 24px/32px and centred;
   this heading introduces the pair, so it matches them. */
.tg-stage-testing-intro h2 {
  margin: 0 0 16px;
  font:
    400 24px/32px Raleway,
    sans-serif;
}

.tg-stage--three .tg-numbered-row__number,
.tg-stage--three .tg-tip-card__number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tg-coral) 34%, var(--tg-paper)), color-mix(in srgb, var(--tg-orange) 34%, var(--tg-paper)));
  border-radius: 50%;
  font-size: 11px;
}

.tg-resource-item + .tg-resource-item {
  margin-top: 12px;
}

/* Shared site frame ------------------------------------------------------- */
.site-brand {
  gap: 4px;
  padding-bottom: 6px;
}

/* The italic descender in “genetic!” needs its own line-box breathing room. */
.site-brand__name {
  padding-bottom: .08em;
  line-height: 1.1;
}

/* Figma's footer (node 5043:1356) is a 2px rule over 10px of padding, with the
   columns bottom-aligned. The base rule in style.css already carries that, so
   what was here — a 1px rule and 24px/20px padding — only held the two out of
   step; the shell tokens now decide it in one place. */
.site-footer {
  border-top: var(--tg-shell-rule) solid var(--tg-line);
}

/* Stage one: the investigation figure is an illustration layer, not a
   foreground column.  Keeping it inside a named panel lets Gutenberg editors
   replace the image without changing the card component. */
.tg-stage-opening--investigation {
  display: block;
  min-height: 0;
}

.wp-block-tg-stage-opening .tg-stage-investigation-road {
  top: var(--tg-opening-road-y, -156px);
  left: calc(50% + var(--tg-opening-road-x, 0%));
  transform: translateX(-50%) scale(var(--tg-opening-road-scale, 1));
  transform-origin: center top;
}
.wp-block-tg-stage-opening .tg-stage-investigation-art {
  top: var(--tg-opening-family-y, 0px);
  left: calc(50% + var(--tg-opening-family-x, 0px));
  transform: translateX(-50%) scale(var(--tg-opening-family-scale, 1));
  transform-origin: center top;
}

.tg-stage-opening--investigation .tg-stage-opening__copy {
  max-width: 720px;
  margin: 0 auto;
}

.tg-stage-investigation-road {
  position: absolute;
  z-index: 0;
  top: -156px;
  left: 50%;
  display: block;
  width: 1220px !important;
  height: auto !important;
  max-width: none;
  margin: 0;
  opacity: .72;
  pointer-events: none;
  transform: translateX(-50%);
}

.tg-stage-investigation-road img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

.tg-stage-investigation-art {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  display: block;
  width: 520px !important;
  height: auto !important;
  max-width: none;
  margin: 0;
  opacity: .86;
  pointer-events: none;
  transform: translateX(-50%);
}

.tg-stage-investigation-art img {
  display: block;
  width: 520px !important;
  height: auto !important;
  max-width: none !important;
}

.tg-stage-resources .tg-stage-card {
  min-height: 144px;
  padding: 20px 56px 20px 20px;
  border-radius: 6px;
}

.tg-stage--one .tg-stage-opening--investigation {
  grid-template-columns: minmax(0, 560px) 360px;
  align-items: start;
  justify-content: space-between;
  width: min(1040px, 100%);
  min-height: 600px;
  margin: 0 auto;
  gap: 64px;
}

/* The reusable opening block keeps the exact Stage 1 composition available
   to editors without making the page itself a block. */
.tg-stage--one .wp-block-tg-stage-opening.tg-stage-opening--investigation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) 360px;
  align-items: start;
  justify-content: space-between;
  width: min(1040px, 100%);
  min-height: 600px;
  margin: 0 auto;
  gap: 64px;
}
.tg-stage--one .wp-block-tg-stage-opening .tg-stage-investigation-road { z-index: 0; }
.tg-stage--one .wp-block-tg-stage-opening .tg-stage-investigation-art { position: relative; z-index: 1; grid-column: 2; width: 360px !important; height: 600px !important; object-fit: cover; object-position: left center; opacity: 1; transform: none; }
.tg-stage--one .wp-block-tg-stage-opening .tg-stage-opening__copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; width: 100%; max-width: 560px; padding-top: 64px; margin: 0; text-align: left; }

/* Stage pages follow the homepage pattern: every root content block owns the
   same geometry in the editor and the live page. There is deliberately no
   page-level Gutenberg block or template-only stage wrapper. */
.tg-stage__intro,
.tg-stage__main {
  width: min(1200px, calc(100% - 80px));
  margin-right: auto;
  margin-left: auto;
}
.tg-stage__main { display: flex; flex-direction: column; gap: 32px; padding-bottom: 52px; }
.wp-block-tg-stage-opening.tg-stage-opening--investigation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) 360px;
  align-items: start;
  justify-content: space-between;
  width: min(1040px, 100%);
  min-height: 600px;
  margin: 0 auto;
  gap: 64px;
}
.wp-block-tg-stage-opening .tg-stage-investigation-road { z-index: 0; }
.wp-block-tg-stage-opening .tg-stage-investigation-art { position: relative; z-index: 1; grid-column: 2; width: 360px !important; height: 600px !important; object-fit: cover; object-position: left center; opacity: 1; transform: none; }
.wp-block-tg-stage-opening .tg-stage-opening__copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; width: 100%; max-width: 560px; padding-top: 64px; margin: 0; text-align: left; }
@media (max-width: 700px) {
  .tg-stage__intro, .tg-stage__main { width: min(100% - 32px, 960px); }
  .wp-block-tg-stage-opening.tg-stage-opening--investigation { display: block; min-height: 0; }
  .wp-block-tg-stage-opening .tg-stage-investigation-art { position: relative; display: block; width: 100% !important; height: auto !important; margin: 24px auto 0; }
  .wp-block-tg-stage-opening .tg-stage-opening__copy { padding-top: 0; }
}

.tg-stage--one .tg-stage-opening--investigation .tg-stage-opening__copy {
  width: 100%;
  max-width: 560px;
  padding-top: 64px;
  margin: 0;
  text-align: left;
}

.tg-stage--one .tg-stage-opening--investigation .tg-stage-opening__illustration,
.tg-stage--one .tg-stage-opening--investigation .tg-stage-opening__illustration img {
  width: 360px !important;
  height: 600px !important;
  max-width: none !important;
  margin: 0;
  overflow: hidden;
  object-fit: cover;
  object-position: left center;
  transform: none;
}

.tg-stage--one .tg-stage-one-cards {
  width: min(1040px, 100%);
  margin: 0 auto;
  gap: 48px;
}

.tg-stage--one .tg-stage-one-cards h3 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.tg-stage--one .tg-stage-one-cards .tg-stage-card {
  padding: 24px;
  border-radius: 6px !important;
}

/* Homepage journey scene: both Figma exports share the same 4096px coordinate
   space.  Rendering them inside one scene at the same origin and scale keeps
   the road wrapped around the family at every desktop width. */
.tg-roadmap {
  --tg-roadmap-card-width: 504px;
  --tg-roadmap-card-left: 95px;
  --tg-roadmap-card-right-left: 559px;
  /* Figma's family layer is placed within the road canvas, not at its raw
     export origin. Keeping this as tokens makes the scene straightforward to
     tune later without changing its structure. */
  --tg-roadmap-family-x: var(--tg-home-family-desktop-x, -20px);
  --tg-roadmap-family-y: var(--tg-home-family-desktop-y, 200px);
  --tg-roadmap-family-scale: var(--tg-home-family-desktop-scale, 1);
  position: relative;
  isolation: isolate;
  width: var(--tg-column);
  min-height: 0;
  padding: 0;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.tg-roadmap__art,
.tg-roadmap__family,
.tg-roadmap__art img,
.tg-roadmap__family img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0;
  pointer-events: none;
  transform: none;
}

.tg-roadmap__art {
  z-index: 0;
}

.tg-roadmap__family {
  z-index: 1;
  top: var(--tg-roadmap-family-y);
  left: var(--tg-roadmap-family-x);
  transform: scale(var(--tg-roadmap-family-scale));
  transform-origin: top left;
}

.tg-roadmap__family img {
  top: 0;
  left: 0;
}

.tg-roadmap__cards {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
}

.tg-roadmap__cards .tg-road-card {
  position: absolute;
  width: var(--tg-roadmap-card-width);
  padding: 16px;
  margin: 0;
}

.tg-roadmap__cards .tg-road-card:nth-child(1) {
  top: 55px;
  left: var(--tg-roadmap-card-left);
}

.tg-roadmap__cards .tg-road-card:nth-child(2) {
  top: 186px;
  left: var(--tg-roadmap-card-right-left);
}

.tg-roadmap__cards .tg-road-card:nth-child(3) {
  top: 341px;
  left: var(--tg-roadmap-card-left);
}

@media (max-width: 700px) {
  .tg-roadmap {
    --tg-roadmap-family-x: var(--tg-home-family-mobile-x, 0px);
    --tg-roadmap-family-y: var(--tg-home-family-mobile-y, 0px);
    --tg-roadmap-family-scale: var(--tg-home-family-mobile-scale, 1);
    width: min(100% - 32px, 600px);
    min-height: 0;
    aspect-ratio: auto;
    padding-top: 150px;
    overflow: hidden;
  }

  .tg-roadmap__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .tg-roadmap__cards .tg-road-card,
  .tg-roadmap__cards .tg-road-card:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    align-self: stretch;
    width: 100%;
  }
}

@media (max-width: 700px) {

  .tg-stage-opening {
    min-height: 0;
  }

  .tg-stage-investigation-art {
    width: min(440px, 92vw) !important;
  }
}

/* Gold-standard component composition shared by the live page and Gutenberg.
 * Component-owned paint and type live in Studio CSS; these rules only place
 * the reusable components within each page's Figma composition. */
.tg-stage--one .tg-stage-one-cards,
.tg-stage--one .wp-block-tg-two-column-section--stage-one {
  width: var(--tg-column);
  margin-right: auto;
  margin-left: auto;
}
.tg-stage--one .tg-stage-one-cards { gap: 40px; }
.tg-stage--one .tg-stage-one-cards > .tg-stage-card--bullets h3 {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.tg-stage--one .tg-stage-one-cards > .tg-stage-card--standard h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
.tg-stage--one .tg-stage-one-cards > .tg-stage-card {
  padding: 16px;
  border-radius: 6px;
}
.tg-stage--one .tg-stage-checklist > .tg-checklist-row {
  width: min(840px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.tg-stage-resources .tg-stage-card.tg-stage-resource-card {
  min-height: 146px;
  padding: 16px;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .tg-stage--one .tg-stage-one-cards,
  .tg-stage--one .wp-block-tg-two-column-section--stage-one,
  .tg-stage-resources {
    width: min(100% - 32px, 1200px);
  }
  .tg-stage--one .tg-stage-one-cards,
  .tg-stage--one .tg-stage-feature-grid,
  .tg-stage-resource-grid {
    grid-template-columns: 1fr;
  }
  .tg-stage--one .tg-stage-one-cards { gap: 32px; }
}

/* Page 4 typography and rhythm from the product-page frames. */
.tg-stage--three .tg-stage__main { gap: 48px; }
.tg-stage--three .tg-numbered-row__number,
.tg-stage--three .tg-tip-card__number {
  width: 36px;
  height: 36px;
  color: var(--tg-muted);
  background: transparent;
  border-radius: 0;
  font: 700 16px/24px Raleway, sans-serif;
}
.tg-stage--three .tg-stage-feelings > .wp-block-paragraph {
  max-width: 1200px;
  margin: 0 0 24px;
  color: var(--tg-muted);
  text-align: left;
  font: 400 18px/28px Raleway, sans-serif;
}
.tg-stage--three .tg-stage-feelings .tg-stage-card h3 {
  margin: 0 0 16px;
  color: var(--tg-foreground);
  font: 400 20px/28px Raleway, sans-serif;
}
.tg-stage--three .tg-stage-feelings .tg-stage-card li {
  font: 400 16px/24px Raleway, sans-serif;
}

@media (max-width: 700px) {
  .tg-stage--three .tg-stage-feelings > .wp-block-paragraph,
  .tg-stage--three .tg-tip-card > p:last-child {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Stage 2 — "How do I refer someone for genetics consultation?"

   Stage 2 now renders entirely from the tg/* block library, so its geometry
   lives with those components. These rules exist only where a shared theme
   selector would otherwise win on source order, because the block stylesheets
   are enqueued before the theme's.
   Figma: file rnkdZT3XxvhEmRDaZJMJgM, node 5019:232.
   --------------------------------------------------------------------------- */

/* Figma spaces Stage 2's sections 60px apart, not the 32px shared default. */
.tg-stage__main--stage-two {
  gap: 60px;
}

/* Sections fill the 1200px main column rather than insetting a second gutter. */
.tg-stage__main--stage-two > .wp-block-tg-two-column-section {
  width: 100%;
}

/* The conversation opening stacks centred copy above the illustration. The
   shared .tg-stage-opening / .tg-stage-investigation-art rules above are
   Stage 1's two-column composition and must not reach this variant. */
.wp-block-tg-stage-opening.tg-stage-opening--conversation {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
  min-height: 0;
  margin-inline: auto;
}

/* Figma "How do i refer someone for genetic consultation" Desktop-1 draws the
   hero as a 600 x 388 slot (node 5231:527), centred under the intro. The
   supplied artwork carries a tall transparent margin above the figures, so the
   crop is pulled to the bottom rather than centred, matching Figma's fill. */
.wp-block-tg-stage-opening.tg-stage-opening--conversation .tg-stage-investigation-art {
  position: static;
  z-index: auto;
  order: 99;
  grid-column: auto;
  box-sizing: border-box;
  width: min(600px, 100%) !important;
  height: auto !important;
  aspect-ratio: 600 / 388;
  margin-top: 40px;
  opacity: 1;
  object-fit: cover;
  object-position: 50% 92%;
  transform: none;
}

@media (max-width: 700px) {
  /* iPhone 17 frame (5231:528): the hero fills the column at the same ratio. */
  .wp-block-tg-stage-opening.tg-stage-opening--conversation .tg-stage-investigation-art {
    width: 100% !important;
    margin-top: 24px;
  }
}

/* Figma centres the bridge paragraph in a 640px measure. */
.tg-stage-referral-bridge {
  max-width: 640px;
}

/* Prompt cards: Figma uses an 8px radius and a 20px heading gap in the prose
   columns, where the shared stage-card rules set 4px and 12px. */
.tg-stage-card--prompt {
  border-radius: 8px;
}

.tg-stage-card--plain h3 {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   Stage 3 — "How can I support families after genetic testing?"
   Figma: file rnkdZT3XxvhEmRDaZJMJgM, node 5019:411.
   As with Stage 2, these rules exist only where a shared theme selector would
   otherwise win on source order.
   --------------------------------------------------------------------------- */

.tg-stage__main--stage-three {
  gap: 48px;
}

/* Sections fill the 1200px main column instead of insetting a second gutter. */
.tg-stage__main--stage-three .wp-block-tg-two-column-section,
.tg-stage__main--stage-three .wp-block-tg-resource-grid.tg-resource-grid--subgroup {
  width: 100%;
}

/* Opening: Figma insets this section to 920px and pairs the role card with the
   explanatory copy at a 20px gutter. */
.wp-block-tg-two-column-section.tg-two-column-section--stage-three-role {
  width: min(920px, 100%);
  margin-inline: auto;
}

.tg-two-column-section--stage-three-role .tg-two-column-section__columns,
.tg-two-column-section--stage-three-feelings .tg-two-column-section__columns {
  gap: 20px;
  align-items: stretch;
}

.tg-stage-card--role {
  height: 100%;
  border-radius: 8px;
}

.tg-stage-card--role .tg-stage-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tg-stage-card--role h3 {
  margin: 0;
  font:
    400 20px/28px Raleway,
    sans-serif;
}

/* Feelings: Figma's two panels carry no card chrome. */
.tg-stage-feel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.tg-stage-feel > h2 {
  margin: 0;
  font:
    300 30px/36px Raleway,
    sans-serif;
}

.tg-stage-feel > p {
  max-width: 1200px;
  margin: 0;
  color: var(--tg-muted, #737373);
  font:
    400 18px/28px Raleway,
    sans-serif;
}

.tg-stage-card--feelings {
  height: 100%;
  padding: 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
}

.tg-stage-card--feelings .tg-stage-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tg-stage-card--feelings h3 {
  margin: 0;
  font:
    400 18px/28px Raleway,
    sans-serif;
}

/* The two panels' dot points line up with each other whatever their headings
   do. The headings say the same thing bar one word, so at most widths they
   wrap to the same number of lines -- but from about 940px to 1030px the left
   one fits on two lines while the right needs three, which dropped the right
   column's bullets 28px below the left's.

   Heading, first bullet and second bullet therefore become three rows of the
   columns grid, subgridded down through the column and the card, so each row
   is as tall as the taller of the two panels. The card's 16px padding insets
   both panels by the same amount, so it does not disturb that.

   Every step is a child combinator, which is what confines this to the front
   end: in the editor the column, the card and its body each sit behind a
   block-editor wrapper, so the chain does not match and the card keeps the
   flex column below. The media query is the complement of the one that stacks
   the section -- once the two panels sit one above the other they are both in
   column 1, and sharing rows would lay them on top of each other. */
@media (min-width: 701px) {
  .tg-two-column-section--stage-three-feelings .tg-two-column-section__columns {
    grid-template-rows: auto auto auto;
    row-gap: 24px;
  }

  .tg-two-column-section--stage-three-feelings
    .tg-two-column-section__columns
    > .tg-column,
  .tg-two-column-section--stage-three-feelings
    .tg-two-column-section__columns
    > .tg-column
    > .tg-stage-card--feelings,
  .tg-two-column-section--stage-three-feelings
    .tg-two-column-section__columns
    > .tg-column
    > .tg-stage-card--feelings
    > .tg-stage-card__body {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
}

/* Resources: one heading over two named sub-groups, 20px apart as in Figma. */
.tg-stage-resource-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tg-stage-resource-groups > h2 {
  margin: 0;
  font:
    400 24px/32px Raleway,
    sans-serif;
  text-align: center;
}


/* Phone rhythm -----------------------------------------------------------
   Figma's iPhone frame (file 1RTEK3Ye8ttrF2R6hgoVaC, node 5147:38575) opens
   the page 20px under the header rule and runs every section 20px apart,
   where the desktop composition uses 44px and 32-60px. On a phone that
   difference is most of a screen of empty paper between one section and the
   next, so the reduced rhythm applies to every page rather than only the one
   Figma drew.

   The block sits at the end of the file because it has to out-order the
   per-stage gaps above it and the component stylesheets, which `blocks.php`
   injects inline ahead of this one. 700px is where every component already
   switches to its stacked layout. */
@media (max-width: 700px) {
  :root {
    /* tg/page-title and tg/intro both open on this. */
    --tg-page-top: 0px;
  }

  .tg-stage__main,
  .tg-stage--three .tg-stage__main,
  .tg-stage__main--stage-two,
  .tg-stage__main--stage-three {
    gap: 20px;
    padding-bottom: 32px;
  }

  /* Inside the stage column the gap is the whole story: a section that also
     carries its own margin would otherwise sit 20px further from its
     neighbour than the one beside it. */
  .tg-stage__main > *,
  .tg-stage__main > .wp-block-tg-resource-grid.tg-resource-grid {
    margin-top: 0;
    margin-bottom: 0;
  }

  .tg-page-title {
    margin-bottom: 20px;
  }

  /* The homepage is not a flex column, so its sections keep their own
     margins and each one is named. */
  .tg-intro {
    gap: 20px;
  }
  .wp-block-tg-roadmap-scene.tg-roadmap-scene {
    margin-top: 20px;
  }
  /* tg/two-column-section writes its bottom margin as an inline custom
     property, so the margin itself is what has to be overridden, not the
     variable. Only the homepage's sections are reached: the stage pages' sit
     in .tg-stage__main, whose gap already spaces them. */
  #main > .wp-block-tg-two-column-section {
    margin-bottom: 20px;
  }

  .tg-stage-resource-groups {
    gap: 20px;
  }
}