/* PharmaTrack Voice — shared styles for /voice/ pages.
   Everything is scoped under body.voice-site so nothing here can reach the
   homepage or Connected Communities. Header and footer mirror the homepage;
   the navy openings follow the homepage hero (#0a0e1a with a faint cobalt wash). */

.voice-site *, .voice-site *::before, .voice-site *::after { box-sizing: border-box; margin: 0; padding: 0; }

.voice-site {
  --cobalt:     #2454d4;
  --cobalt-hi:  #3d6ef0;
  --navy:       #0a0e1a;
  --pale:       #e8eaf0;   /* homepage hero heading */
  --pale-soft:  #a8bdd4;   /* homepage hero secondary text */
  --accent:     #6ba0ff;   /* homepage hero accent, light end */
  --accent-hi:  #9dc0ff;
  --focus-dark: #9db6ff;
  --ink:        #1a2332;
  --ink-soft:   #4a5568;
  --ink-muted:  #5a6a7a;
  --rule:       #e5e8ed;
  --paper:      #ffffff;
  --paper-alt:  #f7f8fa;
  --f: 'Instrument Sans', system-ui, sans-serif;

  font-family: var(--f);
  background: var(--paper-alt);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.voice-site a:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link — visible on keyboard focus only */
.voice-site .skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  z-index: 1000;
  padding: 12px 24px; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--cobalt);
  text-decoration: none; border-radius: 0 0 8px 0;
  white-space: nowrap;
}
.voice-site .skip-link:focus {
  position: fixed; left: 0; top: 0;
  width: auto; height: auto;
  outline: 2px solid var(--cobalt-hi);
  outline-offset: 2px;
}

/* Draft notice — compact neutral strip */
.voice-site .voice-draft {
  background: #eef1f5;
  border-bottom: 1px solid #dde2e8;
  color: var(--ink-soft);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4;
  text-align: center;
  padding: 4px 16px;
}

/* ── NAV — matches the homepage header ── */
.voice-site nav {
  position: sticky; top: 0; z-index: 100;
  height: 58px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229,232,237,0.7);
}
.voice-site .nav-logo { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.voice-site .nav-right { display: flex; align-items: center; gap: 18px; }
.voice-site .nav-demo { font-size: 14px; font-weight: 400; color: var(--ink-muted); text-decoration: none; transition: color 0.18s; }
.voice-site .nav-demo:hover { color: var(--ink); }
.voice-site .nav-pilot { color: var(--cobalt); font-weight: 600; }
.voice-site .nav-pilot:hover { color: var(--cobalt-hi); }
.voice-site .nav-voice.is-active { color: var(--ink); font-weight: 600; }

@media (min-width: 641px) and (max-width: 860px) {
  .voice-site nav { height: auto; min-height: 58px; padding: 0 20px; }
  .voice-site .nav-right { gap: 12px; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
  .voice-site .nav-demo { font-size: 13px; white-space: nowrap; }
}

/* Mobile: logo row, then the links in DOM order (natural grid flow, no
   reordering): a 2 × 2 grid below 420px, one row of four above. Cells are at
   least 44px tall; a long label wraps inside its cell. */
@media (max-width: 640px) {
  .voice-site nav {
    height: auto; min-height: 0; padding: 0;
    flex-direction: column; align-items: stretch;
  }
  .voice-site .nav-logo { display: flex; align-items: center; align-self: flex-start; min-height: 52px; padding: 0 16px; }
  .voice-site .nav-right {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
    padding: 0 16px;
    border-top: 1px solid rgba(229,232,237,0.7);
  }
  .voice-site .nav-demo {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    font-size: 13px; line-height: 1.25; text-align: center;
  }
  .voice-site .nav-hide-mobile { display: none; }
  .voice-site .nav-cc,
  .voice-site .nav-voice { font-weight: 600; color: var(--cobalt); }
  .voice-site .nav-voice.is-active { color: var(--ink); }
  .voice-site .nav-cc:hover,
  .voice-site .nav-voice:hover { color: var(--cobalt-hi); }
  .voice-site .nav-cc:focus-visible,
  .voice-site .nav-voice:focus-visible { outline-offset: -3px; border-radius: 4px; }
}
@media (max-width: 520px) {
  .voice-site .nav-logo,
  .voice-site .nav-right { padding-left: 20px; padding-right: 20px; }
}
/* One row of four links where they fit comfortably: same type and gaps as the
   homepage header (~342px of labels and gaps), so the same 420px breakpoint. */
@media (min-width: 420px) and (max-width: 640px) {
  .voice-site .nav-right { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* ── NAVY OPENING — shared by landing and article, after the homepage hero ── */
.voice-site .voice-navy {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--pale);
}
.voice-site .voice-navy::before {
  content: '';
  position: absolute; top: -220px; right: -160px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(36,84,212,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.voice-site .voice-navy > * { position: relative; }

/* Accent word — same gradient as the homepage hero's .hero-h1 .acc */
.voice-site .voice-acc {
  background: linear-gradient(95deg, #6ba0ff 0%, #3d6ef0 55%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── LANDING ── */
.voice-site .voice-landing__inner {
  max-width: 1184px; margin: 0 auto;   /* 1120px content + side padding */
  padding: 44px 32px 72px;
}
.voice-site .voice-pub {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 20px;
  margin-bottom: 36px;
}
.voice-site .voice-pub__title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--pale);
}
.voice-site .voice-pub__desc {
  font-size: 16px; font-weight: 400; line-height: 1.4;
  color: var(--pale-soft);
}

/* Text-led feature: headline held to a comfortable measure */
.voice-site .voice-feature { max-width: 760px; }
.voice-site .voice-feature__title {
  font-size: clamp(30px, calc(3.2vw + 8px), 46px);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--pale);
  margin-bottom: 20px;
}
.voice-site .voice-feature__title a,
.voice-site .voice-feature__title a:link,
.voice-site .voice-feature__title a:visited {
  color: var(--pale);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(107,160,255,0.6);
}
.voice-site .voice-feature__title a:hover {
  color: #fff;
  text-decoration-line: underline;
}
.voice-site .voice-feature__title a:focus-visible {
  color: #fff;
  outline: 2px solid var(--focus-dark);
  outline-offset: 4px;
}

/* Small gap: the read link's 44px touch target already adds space above its text */
.voice-site .voice-feature__meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ── BYLINE + PORTRAIT — the photograph unchanged, cropped to a circle in CSS.
   The photo (1776 × 2580) has little room above the head, so a plain square
   crop clips either the crown or the chin. Instead the image is scaled 1.2×
   inside the circular wrapper: the visible square is a 1480px window at the
   very top of the photo (x 131–1611), keeping the whole head, the chin and
   all of the photo's own headroom in frame at every size. ── */
.voice-site .voice-portrait {
  display: block; flex: none;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.voice-site .voice-portrait__img {
  position: absolute; top: 0; left: -8.85%;   /* 131 / 1480 */
  width: 120%; height: 174.32%;               /* 1776 / 1480, 2580 / 1480 */
  max-width: none;
  object-fit: cover;
}
.voice-site .voice-byline {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 500; color: var(--pale-soft);
}
.voice-site .voice-byline .voice-portrait { width: 44px; height: 44px; }

.voice-site .voice-read,
.voice-site .voice-read:link,
.voice-site .voice-read:visited {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 16px; font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color 0.18s;
}
.voice-site .voice-read:hover { color: var(--accent-hi); text-decoration-line: underline; }
.voice-site .voice-read:focus-visible { color: var(--accent-hi); outline: 2px solid var(--focus-dark); outline-offset: 2px; }

@media (max-width: 640px) {
  .voice-site .voice-landing__inner { padding: 32px 20px 48px; }
  .voice-site .voice-pub { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px; }
  .voice-site .voice-feature__title { font-size: clamp(30px, 8.4vw, 34px); margin-bottom: 16px; }
}

/* ── ARTICLE ── */
.voice-site .voice-column {
  max-width: 784px;   /* 720px reading column + side padding */
  margin: 0 auto;
  padding-left: 32px; padding-right: 32px;
}

.voice-site .voice-article__opening .voice-column { padding-top: 24px; padding-bottom: 44px; }

.voice-site .voice-back,
.voice-site .voice-back:link,
.voice-site .voice-back:visited {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 14px; font-weight: 500;
  color: var(--pale-soft);
  text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  margin-bottom: 14px;
  transition: color 0.18s;
}
.voice-site .voice-back:hover { color: var(--pale); text-decoration-line: underline; }
.voice-site .voice-back:focus-visible { color: var(--pale); outline: 2px solid var(--focus-dark); outline-offset: 2px; }

.voice-site .voice-article__title {
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--pale);
  margin-bottom: 16px;
}

.voice-site .voice-article__reading {
  background: var(--paper-alt);
  color: var(--ink);
}
.voice-site .voice-article__reading .voice-column { padding-top: 36px; padding-bottom: 80px; }

/* Author column — hidden until the wide layout below has room for it,
   so only one author block is ever visible */
.voice-site .voice-author { display: none; }

.voice-site .voice-article__body {
  font-size: 18px; line-height: 1.7; color: var(--ink);
  text-align: left;
}
.voice-site .voice-article__body a,
.voice-site .voice-article__body a:link,
.voice-site .voice-article__body a:visited {
  color: var(--cobalt);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.voice-site .voice-article__body a:hover { color: var(--cobalt-hi); text-decoration-thickness: 2px; }
.voice-site .voice-article__body p + p { margin-top: 1.1em; }
.voice-site .voice-article__body strong { font-weight: 600; }

/* Section headings — clear editorial breaks. Fixed px margins are the whole
   visible gap: body paragraphs carry no bottom margin (reset above, made
   explicit here) and the paragraph after a heading drops its p + p top margin. */
.voice-site .voice-article__body .voice-article__heading {
  font-family: var(--f);
  font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 36px 0 14px;
  text-wrap: balance;
}
.voice-site .voice-article__body p:has(+ .voice-article__heading) { margin-bottom: 0; }
.voice-site .voice-article__body .voice-article__heading + p { margin-top: 0; }

.voice-site .voice-article__close {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.voice-site .voice-article__note { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.voice-site .voice-call,
.voice-site .voice-call:link,
.voice-site .voice-call:visited {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--cobalt);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color 0.18s;
}
.voice-site .voice-call:hover { color: var(--cobalt-hi); }

@media (min-width: 768px) {
  .voice-site .voice-article__body { font-size: 20px; }
  .voice-site .voice-article__body .voice-article__heading { font-size: 32px; margin: 48px 0 16px; }
}
@media (max-width: 640px) {
  .voice-site .voice-column { padding-left: 20px; padding-right: 20px; }
  /* The logo already links home, so the back link is dropped (no reserved space). */
  .voice-site .voice-back,
  .voice-site .voice-back:link,
  .voice-site .voice-back:visited { display: none; }
  .voice-site .voice-article__opening .voice-column { padding-top: 16px; padding-bottom: 24px; }
  .voice-site .voice-article__title { font-size: clamp(32px, 8.6vw, 34px); }
  .voice-site .voice-article__reading .voice-column { padding-top: 20px; padding-bottom: 56px; }
}

/* Wide screens: author column in the left margin. The 720px reading column
   keeps its place under the title; the grid extends 256px (208px column +
   48px gap) to the left. Needs (720 + 2 × 256 + 2 × 32 gutter) = 1296px,
   enabled from 1320px. .voice-article__main holds the body and the closing
   notes, so the sticky author block (about 325px tall) stays in view through
   the biography and booking link; it can travel no further than the booking
   link, which keeps it well clear of the footer. */
@media (min-width: 1320px) {
  .voice-site .voice-article__byline { display: none; }
  .voice-site .voice-article__main {
    display: grid;
    grid-template-columns: 208px minmax(0, 720px);
    column-gap: 48px;
    margin-left: -256px;
  }
  .voice-site .voice-article__body,
  .voice-site .voice-article__close { grid-column: 2; }
  .voice-site .voice-author {
    display: block;
    grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
    padding-top: 6px;
    text-align: center;
    color: var(--ink-soft);
  }
  /* Vertical oval, proportions unchanged: scaled to the 208px width the
     photograph is 302px tall. Anchored to the top, the 248px oval keeps all
     of the headroom above the crown and ends just below the bracelets
     (~236px), trimming only plain sweater from the bottom. */
  .voice-site .voice-author .voice-portrait { width: 208px; height: 248px; margin: 0 auto 16px; }
  .voice-site .voice-author .voice-portrait__img {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-position: 50% 0;
  }
  .voice-site .voice-author__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
  .voice-site .voice-author__role { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
}
/* Sticky only when the whole block fits below the nav (96px offset + ~325px
   block: 6px padding, 248px oval, 16px gap, name, 4px gap, role, plus a
   margin); on shorter viewports it scrolls with the page. */
@media (min-width: 1320px) and (min-height: 504px) {
  .voice-site .voice-author {
    position: sticky;
    top: 96px;   /* clears the 58px sticky nav */
  }
}

/* ── FOOTER — matches the homepage ── */
.voice-site .voice-footer-wrap { background: var(--paper-alt); border-top: 1px solid rgba(229,232,237,0.6); }
.voice-site .voice-footer-wrap > footer {
  padding: 28px 32px 40px; max-width: 740px; margin: 0 auto;
  display: flex; align-items: center; flex-direction: column;
  text-align: center; gap: 12px;
}
.voice-site .f-logo { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.voice-site .f-tag { font-size: 13px; color: #4a5a6a; margin-top: 2px; line-height: 1.55; }
.voice-site .f-links { margin-top: 10px; }
.voice-site .f-links a { font-size: 14px; color: #4a5a6a; text-decoration: none; transition: color 0.18s; }
.voice-site .f-links a:hover { color: var(--ink); }
.voice-site .f-sep { color: #8a96a3; margin: 0 10px; }
.voice-site .f-copy { font-size: 13px; color: #4a5a6a; margin-top: 3px; }
.voice-site .f-copy a { color: #5a6a7a; text-decoration: none; }

@media (max-width: 640px) {
  .voice-site .voice-footer-wrap > footer { padding: 22px 32px 28px; }
  .voice-site .f-logo { font-size: 14px; }
  .voice-site .f-copy { font-size: 12px; }
}
@media (max-width: 520px) {
  .voice-site .voice-footer-wrap > footer { gap: 10px; padding: 18px 20px 24px; }
  .voice-site .f-copy { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-site * { transition: none !important; }
}