/* =========================================================================
   MyUrologyCare — base stylesheet
   Shared design tokens, layout, typography, and components.
   Mobile-first. WCAG AA. No external assets (privacy: nothing phones home).
   ========================================================================= */

:root {
  /* Palette — calm soft blue/green + warm neutrals (no navy/teal) */
  --blue:        #1d5f8a;   /* primary action */
  --blue-dark:   #164c6f;   /* hover / focus */
  --blue-soft:   #e8f1f7;   /* tinted surfaces */
  --green:       #3f7d5f;   /* secondary accent */
  --green-soft:  #e7f2ec;

  --ink:         #1f2933;   /* body text */
  --ink-soft:    #48525c;   /* secondary text */
  --paper:       #faf8f5;   /* warm page background */
  --card:        #ffffff;   /* card surfaces */
  --line:        #ddd6cc;   /* warm hairline borders */

  /* Red-flag / warning */
  --alert:       #b3261e;
  --alert-ink:   #7a1a15;
  --alert-soft:  #fdeceb;
  --alert-line:  #e0897f;

  /* Info / reassurance */
  --note-soft:   #fdf6e6;
  --note-line:   #e6cf99;

  --radius:      14px;
  --shadow:      0 1px 3px rgba(31,41,51,.08), 0 6px 18px rgba(31,41,51,.06);

  /* Self-hosted / native sans stack. To swap in Inter, drop woff2 into
     /assets/fonts, add an @font-face, and prepend it here. No CDN. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;               /* minimum body text */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Larger base type on bigger screens for older / anxious readers */
@media (min-width: 600px) { body { font-size: 19px; } }

h1, h2, h3 { line-height: 1.25; color: var(--ink); }
h1 { font-size: 1.7rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1.25rem 0 .35rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue-dark); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .75rem 1rem;
  z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 1.1rem; }

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: .6rem;
  padding-top: .8rem; padding-bottom: .8rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.15rem; color: var(--ink);
  text-decoration: none;
}
.brand svg { flex: none; }

/* Back link on interior pages */
.backlink {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 1rem 0 .25rem; font-weight: 600; text-decoration: none;
  color: var(--blue-dark);
}
.backlink:hover { text-decoration: underline; }

main { padding-bottom: 3rem; }
.lede { font-size: 1.05rem; color: var(--ink-soft); }

/* ---------- Disclaimer banner (dismissible, session-only, no storage) ---------- */
.disclaimer-banner {
  background: var(--note-soft);
  border-bottom: 1px solid var(--note-line);
}
.disclaimer-banner .wrap {
  display: flex; align-items: flex-start; gap: .75rem;
  padding-top: .7rem; padding-bottom: .7rem;
}
.disclaimer-banner p { margin: 0; font-size: .95rem; color: var(--ink); }
.disclaimer-banner strong { color: var(--alert-ink); }
.banner-dismiss {
  flex: none; margin-left: auto;
  border: 1px solid var(--note-line); background: #fff;
  color: var(--ink); border-radius: 8px;
  min-width: 44px; min-height: 44px; font-size: 1.1rem; cursor: pointer;
}
.banner-dismiss:hover { background: var(--note-soft); }

/* ---------- Homepage choice buttons ---------- */
.choice-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 620px) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
}
.choice {
  display: flex; align-items: center; gap: 1rem;
  min-height: 88px; padding: 1.1rem 1.2rem;
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.choice:hover { border-color: var(--blue); transform: translateY(-2px); }
.choice .ico {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--blue); background: var(--blue-soft); border-radius: 12px;
}
.choice .txt strong { display: block; font-size: 1.15rem; }
.choice .txt span { color: var(--ink-soft); font-size: .95rem; }
.choice.soon { opacity: .8; }
.choice.soon .ico { color: var(--green); background: var(--green-soft); }

/* ---------- Collapsible content sections (native <details>) ---------- */
.section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: .8rem 0;
  overflow: hidden;
}
.section > summary {
  list-style: none; cursor: pointer;
  padding: 1rem 1.1rem;
  font-size: 1.15rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary .chev {
  margin-left: auto; flex: none; transition: transform .15s ease;
  color: var(--blue);
}
.section[open] > summary .chev { transform: rotate(180deg); }
.section > summary:hover { background: var(--blue-soft); }
.section-body { padding: 0 1.1rem 1.1rem; }
.section-body > *:first-child { margin-top: 0; }

.section-body ul, .section-body ol { padding-left: 1.3rem; }
.section-body li { margin: .3rem 0; }

/* Numbered step lists */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  position: relative; padding: .1rem 0 .1rem 2.4rem; margin: .55rem 0;
}
ol.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}

/* "Normal vs. call" comparison */
.compare { display: grid; gap: .8rem; margin: 1rem 0; }
@media (min-width: 560px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare .col { border-radius: 12px; padding: .9rem 1rem; }
.compare .ok    { background: var(--green-soft); border: 1px solid #bcd9c8; }
.compare .watch { background: var(--alert-soft); border: 1px solid var(--alert-line); }
.compare h4 { margin: 0 0 .4rem; font-size: 1rem; }
.compare .ok h4    { color: var(--green); }
.compare .watch h4 { color: var(--alert-ink); }
.compare ul { margin: 0; padding-left: 1.2rem; }

/* Reassurance / info note */
.note {
  background: var(--note-soft); border: 1px solid var(--note-line);
  border-radius: 12px; padding: .9rem 1rem; margin: 1rem 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Red-flag panel (always visible, high emphasis) ---------- */
.redflags {
  background: var(--alert-soft);
  border: 2px solid var(--alert-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1.5rem 0;
}
.redflags h2 {
  margin: 0 0 .5rem; color: var(--alert-ink);
  display: flex; align-items: center; gap: .5rem; font-size: 1.25rem;
}
.redflags ul { margin: .3rem 0 .8rem; padding-left: 1.3rem; }
.redflags li { margin: .35rem 0; }
.redflags .callout {
  font-weight: 700; color: var(--alert-ink);
  background: #fff; border: 1px solid var(--alert-line);
  border-radius: 10px; padding: .7rem .9rem; margin: 0;
}

/* Inline emphatic callout usable inside a normal section body */
.callout-alert {
  font-weight: 700; color: var(--alert-ink);
  background: var(--alert-soft); border: 1px solid var(--alert-line);
  border-radius: 10px; padding: .7rem .9rem; margin: 1rem 0 0;
}

/* Sticky quick-access red-flag link on long pages */
.rf-jump {
  position: sticky; bottom: 1rem; margin: 1.5rem 0 0; text-align: right;
}
.rf-jump a {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--alert); color: #fff; text-decoration: none;
  padding: .6rem 1rem; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow); min-height: 44px;
}

/* ---------- Utility row of buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none; cursor: pointer;
  border: 2px solid var(--blue); background: var(--blue); color: #fff;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.ghost { background: #fff; color: var(--blue-dark); }
.btn.ghost:hover { background: var(--blue-soft); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 1.5rem 0 2.5rem;
  font-size: .9rem; color: var(--ink-soft);
}
.site-footer p { margin: 0 0 .6rem; }
.site-footer strong { color: var(--alert-ink); }

/* Screen-reader-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Print-only helpers hidden on screen */
.print-only { display: none; }