/* =====================================================================
   OSVI v2 shell on the blog articles (body.v2-shell): the shared top bar,
   sticky header with the Services mega menu, mobile drawer, footer and
   sticky emergency CTA sit on top of each article's own inline styles.
   Loaded after v2-base.css.
   ===================================================================== */

/* Same typeface as the homepage: Plus Jakarta Sans for all text (the articles' own styles set Arial,
   hence !important) */
body.v2-shell, body.v2-shell * {
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Headings look like the homepage's: extra-bold with slightly tight spacing */
body.v2-shell :is(h1, h2, h3, h4, h5, h6):not(.v2 *, #footer *) { font-weight: 800; letter-spacing: -0.02em; }
body.v2-shell h1:not(.v2 *, #footer *) { letter-spacing: -0.03em; }

/* never scroll sideways (the homepage does the same through `.v2 main`) */
body.v2-shell main { overflow-x: hidden; overflow-x: clip; }

/* the date / author line a shade darker so it is easy to read (#777 was just under 4.5:1) */
body.v2-shell p.meta { color: #666; }
/* the medical disclaimer was a light grey (#8a8690, 3.6:1); same darker grey as the eye-care pages */
body.v2-shell p.disclaimer { color: #625D68; }

/* "Need help urgently?" link to the Emergency page */
body.v2-shell .em-link-note { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--v2-magenta); background: #FBF4FA; border-radius: 10px; font-size: 15px; line-height: 1.6; color: var(--v2-ink-2); text-align: left; }
body.v2-shell .em-link-note a { color: var(--v2-magenta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* pictures with width/height attributes keep their shape (some articles only set width:100%) */
body.v2-shell main img[width][height] { height: auto; }