/* HCP References redesign (SERB-274)
   Self-contained styles for /Professional/References. Loaded only on this page.
   Mirrors hcp_dosing_redesign.css conventions (design tokens, container).
   The HCP section loads main_style.css, so typography is pinned explicitly
   rather than inherited (main_style.css generic li/p rules would otherwise win).
   Figma node 4043:21867: H1 Gotham-Black 40px; list Gotham-Book 16px/30px #333,
   decimal ol with 24px hanging indent; links #337AB7 underlined. */

/* main_style.css declares no bold Gotham face (only Book/Medium/Black), and
   'Gotham-Book' is a single regular-weight file — so `font-weight:bold` on text
   set in Gotham-Book has no real bold glyphs to render and falls flat. The
   Gotham-Bold.woff2 file ships in /Vistogard/Fonts but was never declared.
   Declare it here so the SERB-321 bold reference markers have a real bold face. */
@font-face {
  font-family: 'Gotham-Bold';
  src: url('../Vistogard/Fonts/Gotham-Bold.woff2') format('woff2'),
       url('../Vistogard/Fonts/Gotham-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.vg-hcp {
  --vg-dark-blue: #12365E;
  --vg-text: #333333;
  --vg-link: #337AB7;
  --vg-font-black: 'Gotham-Black', Arial, sans-serif;
  --vg-font-book: 'Gotham-Book', Arial, sans-serif;
  --vg-font-bold: 'Gotham-Bold', Arial, sans-serif;
  color: var(--vg-text);
}

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

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

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

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

/* ---------- NUMBERED CITATION LIST ---------- */
/* ol with decimal markers; 24px hanging indent (Figma ms-[24px]). Pin
   font/size/line-height on the <li> itself so main_style.css's generic
   `li` rule can't override it. */
.vg-hcp__ref-list {
  margin: 0;
  padding-left: 24px;
  list-style: decimal;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 30px;
  color: var(--vg-text);
}
.vg-hcp__ref-list > li {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 30px;
  color: var(--vg-text);
  margin: 0 0 3px;
  padding-left: 4px;
}
.vg-hcp__ref-list > li:last-child { margin-bottom: 0; }

/* SERB-321: bold the auto-generated decimal markers (1.–15.) only — not the
   citation text. ::marker inherits the list's Gotham-Book, which has no bold
   glyphs, so `font-weight` alone renders unchanged (why the prior fix failed).
   Point the marker at the real Gotham-Bold face declared above. */
.vg-hcp__ref-list > li::marker {
  font-family: var(--vg-font-bold);
  font-weight: 700;
}

/* Journal names rendered in italics (Figma uses Gotham Book Italic). */
.vg-hcp__ref-list em {
  font-style: italic;
  font-family: var(--vg-font-book);
}

/* In-citation hyperlinks: blue, underlined. */
.vg-hcp__ref-list a {
  color: var(--vg-link);
  text-decoration: underline;
  word-break: break-word;
}
.vg-hcp__ref-list a:hover { color: #08213d; }

/* Superscript markers inside citations (e.g. Adrucil®) stay inline-dark. */
.vg-hcp__ref-list sup {
  font-size: 65%;
  vertical-align: super;
  top: 0;
  color: inherit;
}

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