/*
 * Genetixcares theme — global CSS variables, resets, and base typography.
 *
 * Brand tokens are the final genetixcares palette from the GenetixCARES
 * Microsite Figma file. Single source of truth = field-library/colors.json;
 * the --brand-* vars below mirror it 1:1.
 */

:root {
  /* Brand palette — keep in sync with field-library/colors.json */
  --brand-genetix-dark-blue: #1452ad;
  --brand-primary-blue:      #1660d7;
  --brand-purple-secondary:  #7839aa;
  --brand-salmon:            #f5616b;
  --brand-light-blue:        #e1edff;
  --brand-dark-grey:         #353535;
  --brand-white:             #ffffff;

  /* Brand gradient — Blue → Purple → Salmon (Figma "Blue-Salmon"). BOLD.
     Used in hero/header background, nav top edge, footer strips, buttons, gradient text. */
  --brand-gradient: linear-gradient(90deg, var(--brand-genetix-dark-blue) 0%, var(--brand-purple-secondary) 50.481%, var(--brand-salmon) 100%);

  /* Reversed gradient (Salmon → Purple → Blue). Used where a gradient stroke
     must meet a left-to-right gradient fill flush (e.g. QTC search bar border
     meets the gradient button: input border ends in blue, button bg starts in
     blue → seamless join). */
  --brand-gradient-reverse: linear-gradient(90deg, var(--brand-salmon) 0%, var(--brand-purple-secondary) 50.481%, var(--brand-genetix-dark-blue) 100%);

  /* Soft/tinted brand gradient — low-opacity wash for section backgrounds
     (Figma "Support services" band: light-blue → soft pink → salmon tint). */
  --brand-gradient-soft: linear-gradient(90deg, rgba(225,237,255,0.43) 2.083%, rgba(235,167,181,0.13) 46.014%, rgba(245,97,107,0.1) 100%);

  /* Salmon → Purple gradient (Figma "Gradients/Salmon-Purple") — used for accent
     strokes/dividers like the card right-border. */
  --brand-gradient-salmon-purple: linear-gradient(180deg, var(--brand-salmon) 0%, var(--brand-purple-secondary) 100%);

  /* Type scale — Commuters Sans for headings, Wix Madefor Text for body/nav/buttons.
     `--type-nav-line` matches `--type-nav-size` (1.0 ratio) — nav items are
     single-line; vertical rhythm comes from parent padding, not line-height. */
  --type-h1-size: 70px;       --type-h1-line: 84px;
  --type-h2-size: 38px;       --type-h2-line: 48px;
  --type-h3-size: 34px;       --type-h3-line: 38px;
  --type-h4-size: 28px;       --type-h4-line: 36px;
  --type-h5-size: 22px;       --type-h5-line: 26px;
  --type-body-large-size: 22px;   --type-body-large-line: 28px;
  --type-body-normal-size: 18px;  --type-body-normal-line: 24px;
  --type-nav-size: 18px;          --type-nav-line: 18px;
  --type-button-size: 16px;       --type-button-line: 20px;

  /* Spacing tokens — names mirror the genetixbiotx Figma `sizes/padding/*` slugs.
     Gaps in the scale (no xs/lg/xl/xxxl) are intentional and reflect the source
     design system; do not invent intermediate values. */
  --space-xxs: 12px;
  --space-sm: 24px;
  --space-m: 32px;
  --space-xxl: 64px;
  --space-xxxxl: 80px;

  /* Grid */
  --grid-short-margin: 80px;
  --grid-large-margin: 150px;
  --grid-gutter: 30px;

  /* Compatibility aliases — let modules ported from the lyfgeniahcp theme
     (cards, treatment-center locator) resolve their --color-*/--font-* tokens
     against the genetixcares brand without rewriting their CSS. Map HCP roles
     to the nearest genetixcares brand value. */
  --color-primary:        var(--brand-genetix-dark-blue);
  --color-secondary:      var(--brand-purple-secondary);
  --color-quaternary:     var(--brand-purple-secondary);
  --color-quinary:        var(--brand-light-blue);
  --color-hover-mint:      var(--brand-light-blue);
  --color-hover-mint-tint: rgba(225, 237, 255, 0.6);
  --font-body:            'Wix Madefor Text', sans-serif;
  --font-heading-bold:    'commuters-sans', 'Commuters Sans', sans-serif;
  --font-heading-medium:  'commuters-sans', 'Commuters Sans', sans-serif;
  --font-heading-semibold:'commuters-sans', 'Commuters Sans', sans-serif;
}

/* --- Page-level resets ---
   HubSpot wraps templates in body-container-wrapper / dnd-section / row-fluid
   with default max-widths and side padding. We override these so modules render
   edge-to-edge. Each module manages its own internal max-width via its own
   container. */

/* Global box-sizing reset — padding is calculated INSIDE the box width, not added
   on top. Without this, every element with `width: 100%` AND padding would overflow
   its parent by 2× the padding value. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth animated scroll for in-page anchor jumps (nav jump-links, anchor-link
   module). Disabled for users who prefer reduced motion (accessibility). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: 'Wix Madefor Text', sans-serif;
}

.body-container-wrapper,
.body-container__wrapper,
.body-wrapper {
  max-width: none;
  padding: 0;
  margin: 0;
}

.dnd-section {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.dnd-section > .row-fluid {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.dnd-section .dnd-column {
  padding: 0;
  margin: 0;
}

/* ===========================================================================
   Base typography — maps the --type-* scale onto real elements + .h1–.h6
   utility classes. Headings use Commuters Sans (Adobe family `commuters-sans`,
   self-host `Commuters Sans`, then sans-serif). Body uses Wix Madefor Text.
   =========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'commuters-sans', 'Commuters Sans', sans-serif;
  color: var(--brand-genetix-dark-blue);
  margin: 0 0 var(--space-sm);
  font-weight: 700;
}
h1, .h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); }
h2, .h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: 400; }
h3, .h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
h4, .h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); }
h5, .h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-line); }
h6, .h6 { font-size: var(--type-body-large-size); line-height: var(--type-body-large-line); }

/* Purple sub-heading MODIFIER — apply to a real heading tag for SEO:
   <h2 class="h-subhead">, <h3 class="h-subhead">, etc. (use the H level that
   fits the page outline; the modifier only sets the visual style).
   Commuters SemiBold 28/30, Purple Secondary. Figma: "Learn more about QTCs",
   "Qualified Treatment Center locations", "Access and reimbursement resources". */
h1.h-subhead, h2.h-subhead, h3.h-subhead, h4.h-subhead, h5.h-subhead, h6.h-subhead,
.h-subhead {
  font-family: 'commuters-sans', 'Commuters Sans', sans-serif;
  font-weight: 600;   /* SemiBold — not bold */
  font-size: 28px;
  line-height: 30px;
  color: var(--brand-purple-secondary);
  margin: 0 0 var(--space-sm);
}

/* Body copy */
p {
  font-family: 'Wix Madefor Text', sans-serif;
  font-size: var(--type-body-normal-size);
  line-height: var(--type-body-normal-line);
  color: var(--brand-dark-grey);
  margin: 0 0 var(--space-xxs);
}
.body-large { font-size: var(--type-body-large-size); line-height: var(--type-body-large-line); }

/* Links */
a {
  color: var(--brand-genetix-dark-blue);
  text-decoration: underline;
  transition: color .2s ease;
}
a:hover { color: var(--brand-purple-secondary); }

/* Lists */
ul, ol {
  font-family: 'Wix Madefor Text', sans-serif;
  font-size: var(--type-body-normal-size);
  line-height: var(--type-body-normal-line);
  color: var(--brand-dark-grey);
  margin: 0 0 var(--space-xxs);
  padding-left: 1.25em;
}
li { margin-bottom: 6px; }

/* Inline emphasis */
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--brand-light-blue);
  margin: var(--space-m) 0;
}

/* Brand gradient text — opt-in. Add `text-gradient` to any heading/element
   (or via a module's Custom class / rich-text) to paint it with the brand
   gradient (blue→purple→salmon) clipped to the glyphs. `color: transparent`
   is required and intentionally overrides the base heading color. */
.text-gradient,
.text-gradient * {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Small centered fine-print / disclaimer text — Wix Madefor 14/24, black, centered
   (Figma e.g. "Eligibility for support services is determined by Genetix..."). */
.text-disclaimer {
  color: #000;
  text-align: center;
  font-family: 'Wix Madefor Text', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* Brand gradient BACKGROUNDS — opt-in element utilities.
   `.bg-gradient`      → bold blue→purple→salmon (hero-style, white text on top).
   `.bg-gradient-soft` → low-opacity tinted wash (section bands like Support services). */
.bg-gradient { background-image: var(--brand-gradient); }
.bg-gradient-soft { background-image: var(--brand-gradient-soft); }

/* ── BRAND BACKGROUND classes (type 1) ──────────────────────────────────────
   Add to a module's Custom class field. The band paints the PARENT .dnd-section
   edge-to-edge (full-width) while the column keeps content width (1140). The
   module itself stays transparent. Same :has() pattern as .round-top-corners. */
.dnd-section:has(.bg-blue-salmon)      { background-image: var(--brand-gradient-soft); }   /* soft tinted band (Figma "Blue-Salmon") */
.dnd-section:has(.bg-blue-salmon-bold) { background-image: var(--brand-gradient); }         /* bold blue→purple→salmon */
.dnd-section:has(.bg-light-blue)       { background-color: var(--brand-light-blue); }        /* solid light-blue (footer-style) */

/* ── FULL-WIDTH class (type 2) ───────────────────────────────────────────────
   Breaks a module's CONTENT out of the 1140 column to full viewport width
   (use when you want edge-to-edge content, not just background). Independent of
   the bg classes above — compose them (e.g. "bg-blue-salmon full-width"). */
.full-width {
  position: relative;
  width: 100vw;
  max-width: none;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Pill container — white card with brand-blue outline + large pill radius.
   Figma uses this on the "Support at every step" timeline + HCP-resources cards.
   Add as a Custom class on a Cards instance. */
/* .card-pill = SHAPE ONLY — white fill + large pill radius. Used on the timeline
   card, resources card, etc. Pair with .gradient-border for the gradient ring. */
.card-pill {
  background: var(--brand-white) !important;
  border-radius: 200px !important;
}

/* .gradient-border = REUSABLE 3px Blue-Salmon gradient border for ANY element
   (pills, boxes, callouts). transparent border + padding-box/border-box double
   background paints the gradient ring while keeping the element's own fill.
   Inherits whatever border-radius the element already has. */
.gradient-border {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--brand-white), var(--brand-white)) padding-box,
    var(--brand-gradient) border-box !important;
}

/* Card title styled as body-bold (Figma support-services / timeline step titles
   = Wix Madefor Text Bold 22/28 brand-blue, NOT the Commuters heading font).
   Add via a card title's Custom class field so it doesn't depend on the tag. */
.card-title-body {
  font-family: 'Wix Madefor Text', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--type-body-large-size) !important;   /* 22px */
  line-height: var(--type-body-large-line) !important;  /* 28px */
  color: var(--brand-genetix-dark-blue) !important;
}
/* Grey variant — same Wix Madefor Bold 22/28 but Dark Grey text (Figma QTC
   location names, e.g. "Hospital of the University of Pennsylvania"). */
.card-title-body.grey,
.card-title-grey {
  color: var(--brand-dark-grey) !important;
}
.card-title-grey {
  font-family: 'Wix Madefor Text', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--type-body-large-size) !important;
  line-height: var(--type-body-large-line) !important;
}

/* Keep an icon/step row on a single line (matches Figma 5-across / 3-across).
   Cards defaults to flex-wrap:wrap; this opts a specific instance out. */
.cards-nowrap { flex-wrap: nowrap !important; }
@media (max-width: 767px) { .cards-nowrap { flex-wrap: wrap !important; } }

/* Vertical step dividers for the journey timeline (Figma: thin lines between steps). */
.journey-timeline .cards__card { position: relative; }
.journey-timeline .cards__card + .cards__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  border-left: 1px solid var(--brand-light-blue);
}

/* Buttons / labels / nav use the body family per design */
button,
.btn,
.nav,
.button {
  font-family: 'Wix Madefor Text', sans-serif;
}

/* ===========================================================================
   Buttons — single source of truth. Render via partials/button-render.hubl.html
   which emits `btn <style> [icon-*] [btn-sm|btn-lg] [extra]`.
   Matches the GenetixCARES Microsite Figma button set.
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Wix Madefor Text', sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: var(--type-button-size);
  line-height: var(--type-button-line);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 32px;
  min-height: 48px;
  padding: var(--space-xxs) 30px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease, filter .4s ease;
}

/* Primary & Secondary are mirror images that swap on hover:
     Primary   default = white + gradient border + blue text + purple arrow
               hover   = gradient fill  + white text + white arrow   (= Secondary)
     Secondary default = gradient fill  + white text + purple arrow
               hover   = white + gradient border + blue text + purple arrow (= Primary)
   Both 48px (min-height on base .btn). Gradient ring = transparent border +
   padding-box/border-box double background, preserving the white fill. */

/* Primary — white fill, 3px brand-gradient border, blue text, purple arrow. */
.btn-primary {
  color: var(--brand-genetix-dark-blue);
  border: 3px solid transparent;
  background:
    linear-gradient(var(--brand-white), var(--brand-white)) padding-box,
    var(--brand-gradient) border-box;
}
.btn-primary:hover {
  color: var(--brand-white);
  border-color: transparent;
  background: var(--brand-gradient) border-box;
}

/* Secondary — brand-gradient fill, white text, purple arrow. */
.btn-secondary {
  color: var(--brand-white);
  border: 3px solid transparent;
  background: var(--brand-gradient) border-box;
}
.btn-secondary:hover {
  color: var(--brand-genetix-dark-blue);
  border-color: transparent;
  background:
    linear-gradient(var(--brand-white), var(--brand-white)) padding-box,
    var(--brand-gradient) border-box;
}
/* Arrow color overrides for both live after the base .btn.icon-arrow block below
   (equal specificity → source order wins). */

/* Tertiary — large brand-gradient fill, white label (Figma QTC callouts).
   Hover = Primary default look (white fill + gradient border + blue text). */
.btn-tertiary {
  color: var(--brand-white);
  border: 3px solid transparent;
  /* Exact Figma tertiary gradient (78deg; salmon stop sits off-canvas at -85.68%
     so it reads as purple→blue). */
  background: linear-gradient(78deg, var(--brand-salmon) -85.68%, var(--brand-purple-secondary) 44.9%, var(--brand-genetix-dark-blue) 115.33%) border-box;
  border-radius: 20px;
  padding: var(--space-sm) var(--space-m);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  font-weight: 700; /* Bold */
  text-transform: none;
  text-decoration: underline;
  min-height: 106px;
  width: 100%;   /* fills its card — card width (equal share of the row) drives sizing */
  box-sizing: border-box;
}
.btn-tertiary:hover {
  color: var(--brand-genetix-dark-blue);
  border-color: transparent;
  text-decoration: none;
  background:
    linear-gradient(var(--brand-white), var(--brand-white)) padding-box,
    var(--brand-gradient) border-box;
}

/* Sizes */
.btn-sm { padding: 8px 20px; font-size: 14px; line-height: 18px; }
.btn-lg { padding: var(--space-sm) 40px; font-size: var(--type-body-large-size); }

/* Trailing/leading icons (inline SVG mask so the icon inherits button color) */
.btn.icon-email::after,
.btn.icon-external::after,
.btn.icon-arrow::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn.icon-email::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 4h20v16H2V4zm10 7L4 6v1l8 5 8-5V6l-8 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 4h20v16H2V4zm10 7L4 6v1l8 5 8-5V6l-8 5z'/%3E%3C/svg%3E");
}
.btn.icon-external::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
}
/* Right chevron arrow — exact custom Figma SVG (viewBox 0 0 11 21, stroke-width 3,
   round caps/joins). ONE shape; color follows the button via currentColor mask,
   so it's white on dark/gradient buttons and purple on light ones automatically.
   Rendered at 9 x 17.1px to match Figma. */
.btn.icon-arrow::after {
  width: 9px;
  height: 17.1px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 21' fill='none'%3E%3Cpath d='M1.5 18.6L7.58092 12.8231C9.1683 11.3151 9.1683 8.78489 7.58092 7.27688L1.49999 1.5' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 21' fill='none'%3E%3Cpath d='M1.5 18.6L7.58092 12.8231C9.1683 11.3151 9.1683 8.78489 7.58092 7.27688L1.49999 1.5' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Arrow color overrides (placed after the base .btn.icon-arrow block so
   equal-specificity source order wins). Each style's arrow matches its look:
     Primary   default = purple (white pill)  → hover white (gradient fill)
     Secondary default = white  (gradient fill) → hover purple (= Primary look) */
.btn-primary.icon-arrow::after {
  background-color: var(--brand-purple-secondary);
}
.btn-primary:hover.icon-arrow::after {
  background-color: var(--brand-white);
}
.btn-secondary.icon-arrow::after {
  background-color: var(--brand-white);
}
.btn-secondary:hover.icon-arrow::after {
  background-color: var(--brand-purple-secondary);
}

/* External-link icon MODIFIER for text links (Access and reimbursement resources).
   Single-purpose: appends the exact Figma download-arrow SVG after the link text.
   Icon is blue (Dark Blue) by default — matches the link text color.
   Sized 13 x 15.547px per Figma. Adds NOTHING else — no color, underline,
   weight, or padding on the link itself. */
/* Access and reimbursement resources links: drop the underline on hover. */
a.link-external:hover { text-decoration: none; }
a.link-external::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 15.547px;
  margin-left: 8px;
  vertical-align: middle;
  background-color: var(--brand-genetix-dark-blue);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17.5471' fill='none'%3E%3Cpath d='M11.2919 8.04167L7.50022 11.8333L3.70856 8.04167M7.50022 11.8333L7.50022 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 13.2971L1 14.3804C1 15.577 1.83147 16.5471 2.85714 16.5471L12.1429 16.5471C13.1685 16.5471 14 15.577 14 14.3804V13.2971' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 17.5471' fill='none'%3E%3Cpath d='M11.2919 8.04167L7.50022 11.8333L3.70856 8.04167M7.50022 11.8333L7.50022 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 13.2971L1 14.3804C1 15.577 1.83147 16.5471 2.85714 16.5471L12.1429 16.5471C13.1685 16.5471 14 15.577 14 14.3804V13.2971' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Cookie Banner */
#CybotCookiebotDialogHeader {
    display: none !important;
}

li.CybotCookiebotDialogNavItem::marker {
    color: transparent !important;
}

/* ===========================================================================
   HubSpot Forms (V4 `.hsfc-*` renderer) — brand styling
   Applied site-wide so every embedded form picks up the Genetix CARES look:
   Wix Madefor body, purple-bordered inputs, gradient submit button.
   =========================================================================== */
[data-hsfc-id="Renderer"] {
  font-family: var(--font-body);
  color: var(--brand-dark-grey);
}

[data-hsfc-id="Renderer"] .hsfc-FieldLabel,
[data-hsfc-id="Renderer"] .hsfc-FieldLabel > label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--brand-dark-grey);
}

[data-hsfc-id="Renderer"] .hsfc-FieldLabel--required,
[data-hsfc-id="Renderer"] .hsfc-FieldLabel--required-symbol,
[data-hsfc-id="Renderer"] .hsfc-RequiredSymbol {
  color: var(--brand-salmon);
}

[data-hsfc-id="Renderer"] .hsfc-TextInput,
[data-hsfc-id="Renderer"] .hsfc-Combobox__Control,
[data-hsfc-id="Renderer"] textarea {
  background: var(--brand-white) !important;
  border: 2px solid var(--brand-purple-secondary) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: var(--brand-dark-grey) !important;
  min-height: 52px;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}

[data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
[data-hsfc-id="Renderer"] .hsfc-TextInput:focus-visible,
[data-hsfc-id="Renderer"] .hsfc-Combobox__Control:focus-within,
[data-hsfc-id="Renderer"] textarea:focus {
  border-color: var(--brand-genetix-dark-blue) !important;
  outline: none !important;
}

[data-hsfc-id="Renderer"] .hsfc-TextInput::placeholder,
[data-hsfc-id="Renderer"] textarea::placeholder {
  color: var(--brand-dark-grey);
  opacity: 0.5;
}

/* Phone field — hide HubSpot's flag/country picker entirely; the tel input
   alone holds the standard 2px purple border styling like every other field. */
[data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret,
[data-hsfc-id="Renderer"] .hsfc-PhoneInput > .hsfc-DropdownOptions {
  display: none !important;
}

/* Dropdown popover (Preferred method of communication, Condition).
   The .hsfc-DropdownOptions wrapper ships with its own 1px grey border + 3px
   radius + light background — visible as a thin secondary rounded rectangle
   behind the listbox. Strip it so only the listbox draws the popover. */
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List,
[data-hsfc-id="Renderer"] .hsfc-Combobox__Menu,
[data-hsfc-id="Renderer"] [role="listbox"] {
  border: 2px solid var(--brand-purple-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.18) !important;
  background: var(--brand-white) !important;
  font-family: var(--font-body) !important;
}
[data-hsfc-id="Renderer"] [role="option"] {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  color: var(--brand-dark-grey);
  padding: 10px 16px;
  background: transparent !important;
}
[data-hsfc-id="Renderer"] [role="option"][aria-selected="true"],
[data-hsfc-id="Renderer"] [role="option"]:hover,
[data-hsfc-id="Renderer"] [role="option"]:focus {
  background: transparent !important;
  color: var(--brand-purple-secondary) !important;
}

/* Body copy inside the form (intro text, consent list) — !important to override
   HubSpot's own stylesheet which falls back to Helvetica when inline styles on
   <p> set only color/size without font-family.
   Wrapped in a soft brand-gradient wash with a small border-radius. */
[data-hsfc-id="Renderer"] .hsfc-RichText {
  background: var(--brand-gradient-soft);
  border-radius: 12px;
  padding: 20px 24px;
}

[data-hsfc-id="Renderer"] .hsfc-RichText,
[data-hsfc-id="Renderer"] .hsfc-RichText p,
[data-hsfc-id="Renderer"] .hsfc-RichText ul,
[data-hsfc-id="Renderer"] .hsfc-RichText li,
[data-hsfc-id="Renderer"] .hsfc-RichText span {
  font-family: var(--font-body) !important;
  font-size: 18px;
  line-height: 24px;
  color: var(--brand-dark-grey);
}
[data-hsfc-id="Renderer"] .hsfc-RichText a {
  color: var(--brand-genetix-dark-blue);
  text-decoration: underline;
}
[data-hsfc-id="Renderer"] .hsfc-RichText a:hover {
  color: var(--brand-purple-secondary);
}

/* Submit button — gradient pill matching the QTC search button */
[data-hsfc-id="Renderer"] .hsfc-Button,
[data-hsfc-id="Renderer"] button[type="submit"] {
  background: var(--brand-gradient) !important;
  color: var(--brand-white) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  border-radius: 30px !important;
  padding: 14px 36px !important;
  min-width: 180px;
  min-height: 52px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
[data-hsfc-id="Renderer"] .hsfc-Button:hover,
[data-hsfc-id="Renderer"] button[type="submit"]:hover {
  filter: brightness(1.05);
}

/* Inline field errors */
[data-hsfc-id="Renderer"] .hsfc-FieldError,
[data-hsfc-id="Renderer"] [class*="ErrorMessage"] {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--brand-salmon);
  margin-top: 4px;
}

/* Field spacing */
[data-hsfc-id="Renderer"] .hsfc-Form__Row,
[data-hsfc-id="Renderer"] .hsfc-FieldGroup {
  margin-bottom: 20px;
}

/* Submit button row — left-align (default HubSpot is justify-content: end) */
[data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons {
  justify-content: flex-start !important;
}