/* HCP Order & Reimbursement redesign (SERB-272)
   Self-contained styles for /Professional/How-to-Order. Loaded only on this page.
   Mirrors hcp_dosing_redesign.css conventions (design tokens, container,
   non-interactive blue sup). The HCP section loads main_style.css, so typography
   is pinned explicitly rather than inherited. Values read directly from Figma
   node 4043-21711. */

.vg-hcp {
  --vg-darkest-blue: #08213D;
  --vg-dark-blue: #12365E;
  --vg-yellow: #EDDD24;
  --vg-text: #333333;
  --vg-link: #337AB7;
  --vg-light-gray: #D1D1D1;
  --vg-table-gray: #e2e2e7;
  --vg-border: #979797;
  --vg-font-black: 'Gotham-Black', Arial, sans-serif;
  --vg-font-medium: 'Gotham-Medium', Arial, sans-serif;
  --vg-font-book: 'Gotham-Book', Arial, sans-serif;
  color: var(--vg-text);
}

.vg-hcp * { box-sizing: border-box; }

.vg-hcp__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 42px;
}

.vg-hcp__section { padding: 48px 0 64px; }

/* Superscript registration marks (®/™) — wrapped in <sup> by the global sup-wrap
   script. Inherit the surrounding text color so each mark matches its context:
   white inside the blue callout, dark body text elsewhere. (This page has no
   reference numerals, so there are no intentionally-blue sups to preserve.) */
.vg-hcp sup {
  font-size: 0.55em;
  vertical-align: super;
  top: 0;
  color: inherit;
}

/* Links inherit the section link color; reference-style numerals would be blue
   sups, but this page only has real anchor links + an email link. */
.vg-hcp a {
  color: var(--vg-link);
  text-decoration: underline;
}

/* SERB-319 (reopen): tel: phone-number links render in the body text color
   (black) to match the surrounding copy per Figma — not the blue link color.
   Needs `.vg-hcp a.vg-hcp__tel` (0,2,1) to out-specify `.vg-hcp a` (0,1,1);
   the blue-box tel stays white via the later `.vg-hcp__callout-list a` rule. */
.vg-hcp a.vg-hcp__tel { color: var(--vg-text); }

/* ---------- H1 ---------- */
.vg-hcp__h1 {
  font-family: var(--vg-font-black);
  font-size: 40px;
  line-height: 63px;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--vg-dark-blue);
  margin: 0 0 8px;
}

/* ---------- H2 (section headings) ---------- */
.vg-hcp__h2 {
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 1.3;
  font-weight: normal;
  color: var(--vg-dark-blue);
  margin: 0 0 24px;
}
.vg-hcp__h2--supply { margin: 48px 0 20px; }
.vg-hcp__h2--reimb { margin: 48px 0 8px; }

/* ---------- H3 (For inpatient / outpatient / To enroll) ---------- */
.vg-hcp__h3 {
  font-family: var(--vg-font-black);
  font-size: 18px;
  line-height: 26px;
  font-weight: normal;
  color: var(--vg-text);
  margin: 32px 0 16px;
}

/* ---------- Lede line (How to order …) ---------- */
.vg-hcp__lede {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-dark-blue);
  margin: 0 0 16px;
}

/* ---------- BLUE INPATIENT CALLOUT ---------- */
.vg-hcp__callout-label {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-dark-blue);
  margin: 0 0 12px;
}

.vg-hcp__callout {
  background: var(--vg-link);
  color: #fff;
  border-radius: 4px;
  padding: 24px 28px;
  max-width: 654px;
}

/* ---------- BULLET LISTS — yellow triangle / yellow dash (SERB-316) ---------- */
.vg-hcp__callout-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: #fff;
}
/* SERB-319 (reopen, client correction): the bullets INSIDE the blue ordering box
   are round WHITE dots — NOT the global yellow right-facing triangle. Neutralize
   the inherited yellow-triangle list-image marker and render a white filled disc
   instead (white because the callout background is blue). This overrides ONLY the
   in-box list; `.vg-hcp__list` elsewhere on the page keeps its yellow triangle. */
.vg-hcp ul.vg-hcp__callout-list > li {
  list-style-image: none;           /* drop the inherited yellow-triangle glyph */
  list-style-type: disc;            /* round filled dot */
  list-style-position: outside;
  margin: 0 0 14px;
  padding-left: 11px;
}
.vg-hcp ul.vg-hcp__callout-list > li::marker {
  color: #fff;                      /* white dot on the blue box */
}
.vg-hcp__callout-list > li:last-child { margin-bottom: 0; }
/* White links inside the blue callout box must out-specify `.vg-hcp a.vg-hcp__tel`
   (0,2,1) so the in-box tel link stays white on blue, not body-text dark. */
.vg-hcp .vg-hcp__callout-list a { color: #fff; text-decoration: underline; }

/* ---------- STANDARD BULLET LISTS ---------- */
.vg-hcp__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-text);
}
/* Yellow triangle as native list marker (SERB-316). */
.vg-hcp__list > li {
  list-style-image: url('/img/redesign/yellow-triangle.svg');
  list-style-position: outside;
  padding-left: 11px;
  margin: 0 0 14px;
}
.vg-hcp__list > li:last-child { margin-bottom: 0; }

/* Sub-list — yellow en-dash markers. */
.vg-hcp__sublist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 0 22px;
}
/* Yellow en-dash native list marker (SERB-316). */
.vg-hcp__sublist > li {
  list-style-image: none;
  list-style-type: "\2013"; /* en dash */
  margin: 0;
}
.vg-hcp__sublist > li::marker {
  color: var(--vg-yellow);
  font-weight: 700;
}

/* ---------- YELLOW BUTTON ---------- */
.vg-hcp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 16px 22px;
  background: var(--vg-yellow);
  color: var(--vg-darkest-blue) !important;
  font-family: var(--vg-font-medium);
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  text-align: center;
}
.vg-hcp__btn:hover,
.vg-hcp__btn:focus { color: var(--vg-darkest-blue); text-decoration: none; }

/* ---------- SUPPLY TABLE ---------- */
.vg-hcp__table-wrap { overflow-x: auto; }

.vg-hcp__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-text);
  table-layout: fixed;
}

.vg-hcp__table th,
.vg-hcp__table td {
  border: 1px solid var(--vg-border);
  padding: 14px 16px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

/* Yellow header row. */
.vg-hcp__table thead th {
  background: var(--vg-yellow);
  color: var(--vg-text);
}

/* Name column (row header) — left aligned body text. */
.vg-hcp__table tbody .is-name {
  text-align: center;
}

/* ---------- REIMBURSEMENT PARAGRAPH ---------- */
.vg-hcp__reimb-text {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-text);
  margin: 0;
}
.vg-hcp__email { color: var(--vg-link); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .vg-hcp__container { padding: 0 24px; }
  .vg-hcp__h1 { font-size: 30px; line-height: 1.3; }
  .vg-hcp__callout { max-width: none; }
}