/* ==========================================================================
   site.css — unified stylesheet for the practice website
   Authored by Kimi K3 MCP (moonshotai/kimi-k3), session kimi_09699c773c62.

   Replaces four per-page inline <style> blocks and gives the eleven
   generated article pages (which carry no classes) a complete design.
   Plain CSS, no imports, no webfonts: renders identically offline and
   under a strict CSP allowing only 'self'.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   A token changed once here changes every page at once — that is the whole
   point of a unified stylesheet. The previous arrangement (one inline block
   per page) required editing four files to change one colour, which is why
   the pages had already drifted apart.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f6f0e7;
  --color-text: #162338;
  --color-muted: #3d4a5e;
  --color-link: #1c3f6e;
  --color-link-hover: #0f2a4a;
  --color-focus: #c2761a;
  --color-border: #d9cdbd;
  --color-button-bg: #162338;
  --color-button-text: #f6f0e7;
  --color-button-hover-bg: #23385c;
  --color-button-hover-text: #fffaf3;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --measure: 65ch;
  --radius: 0.375rem;

  /* System stacks only. A webfont on a medical site is a third-party
     request on a page a distressed person is reading — and a
     render-blocking one at that. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #11161f;
    --color-text: #f2ede4;
    --color-muted: #c3bab0;
    --color-link: #9ec7f0;
    --color-link-hover: #c4ddf8;
    --color-focus: #e2a94f;
    --color-border: #303a48;
    --color-button-bg: #f6f0e7;
    --color-button-text: #11161f;
    --color-button-hover-bg: #e8ded2;
    --color-button-hover-text: #11161f;
  }
}


/* --------------------------------------------------------------------------
   2. Base — mobile first
   The base rules are written for a narrow phone; wider layouts are layered
   on with min-width queries below. body carries horizontal padding at EVERY
   width so text never touches the screen edge — that edge-to-edge text on
   the generated article pages is the specific bug this file fixes.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Nothing may cause horizontal overflow of body. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 var(--space-3);
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   3. Accessibility
   The doctor's staff area is keyboard-operated; an invisible focus ring
   makes it unusable. Outlines are never removed without being replaced.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   4. Element-level rules
   The generated article pages use bare semantic elements with no classes,
   so the design must live on the elements themselves.
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  /* Extra space ABOVE so sections read as sections. */
  margin-top: var(--space-5);
}

h3 {
  font-size: 1.2rem;
  margin-top: var(--space-4);
}

/* Bottom margin only, never top, to avoid margin-collapse surprises. */
p {
  margin: 0 0 var(--space-3);
}

/* A single unbreakable string (long URL, compound word) is enough to make
   an entire article horizontally scrollable on a phone. */
main, article, section, p, li, blockquote {
  overflow-wrap: anywhere;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-5);
}

article, section {
  margin: 0 0 var(--space-4);
}

header {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-link-hover);
}

/* Nav links drop the underline: their role is clear from position. */
nav a {
  display: inline-block;
  min-height: 44px; /* WCAG 2.2 Target Size */
  padding: var(--space-2) var(--space-2);
  text-decoration: none;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border);
  color: var(--color-muted);
}

hr {
  margin: var(--space-5) auto;
  max-width: var(--measure);
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* Custom marker in the focus colour, matching the existing .help-list
   treatment, applied to ALL unordered lists so unclassed articles match
   the hand-written pages. */
ul {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

ul li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

ul li::before {
  content: "\2022";
  position: absolute;
  left: var(--space-2);
  color: var(--color-focus);
  font-weight: 700;
}

/* Nav lists keep their flex layout and must not get prose markers. */
nav ul li {
  padding-left: 0;
  margin-bottom: 0;
}

nav ul li::before {
  content: none;
}

ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

ol li {
  margin-bottom: var(--space-2);
}


/* --------------------------------------------------------------------------
   5. Class hooks — home page
   These classes already exist in the hand-written markup; each gets a rule
   so nothing regresses when the inline blocks are removed.
   -------------------------------------------------------------------------- */
.wrapper {
  max-width: var(--measure);
  margin: 0 auto;
}

.site-header {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.practice-name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2);
  text-decoration: none;
}

.hero {
  padding: var(--space-5) 0;
}

.cta-link {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  text-decoration: none; /* role is clear from shape */
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cta-link:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
}

.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-5);
}

.help-list {
  /* Inherits the global ul treatment; kept as a hook for spacing. */
  margin-bottom: var(--space-4);
}

.expect {
  margin-bottom: var(--space-4);
}

.languages {
  color: var(--color-muted);
}

.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.9375rem;
}


/* --------------------------------------------------------------------------
   6. Class hooks — profile page
   -------------------------------------------------------------------------- */
.intro {
  margin-bottom: var(--space-4);
}

.profile-photo {
  /* Modest and rounded; must not dominate the page on a phone. */
  max-width: 12rem;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.title {
  color: var(--color-muted);
  margin-top: calc(-1 * var(--space-2));
}


/* --------------------------------------------------------------------------
   7. Class hooks — appointment request page
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--measure);
  margin: 0 auto;
}

.lead {
  font-size: 1.1875rem;
  margin-bottom: var(--space-4);
}

.form-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px; /* WCAG 2.2 Target Size */
  font-weight: 400;
}

.button-primary {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button-primary:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
}

.hint {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* The crisis-information panel. It must remain visually distinct at every
   breakpoint and in dark mode, because it is the part of the page that
   matters most to the reader in the worst moment. */
.emergency-block {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-focus);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: color-mix(in srgb, var(--color-focus) 10%, var(--color-bg));
}

.privacy-line {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: var(--space-4);
}


/* --------------------------------------------------------------------------
   8. Wider viewports
   Base rules above are for phones; these only add breathing room.
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
  body {
    padding: 0 var(--space-4);
  }

  h1 {
    font-size: 2.375rem;
  }

  .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

@media (min-width: 64rem) {
  body {
    padding: 0 var(--space-5);
  }

  h1 {
    font-size: 2.75rem;
  }

  main, .site-main {
    padding-top: var(--space-5);
  }
}


/* --------------------------------------------------------------------------
   9. Print
   A patient printing an article to bring to an appointment should get
   something readable — and a printed link that hides its destination is
   useless, so prose link URLs are exposed in parentheses.
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    padding: 0;
    font-size: 12pt;
  }

  .site-nav,
  .cta-link {
    display: none;
  }

  a {
    color: #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .emergency-block {
    border-left-color: #000;
    background: none;
  }
}