/*
 * Prime Potential Neuro, LLC — site styles
 * Palette + type live in :root so branding can be swapped in one place.
 * Replace these tokens once the real logo/colors are provided.
 */

:root {
  /* Palette derived from the Prime Potential Neuro logo. */
  --color-bg: #ffffff;
  --color-surface: #f2f6fa;        /* silver-blue, from logo medallion */
  --color-surface-alt: #e6eef4;
  --color-text: #14304d;           /* deep navy, from "PRIME POTENTIAL" wordmark */
  --color-text-muted: #4a5b6e;
  --color-border: #d5dfe8;
  --color-primary: #14304d;        /* deep navy */
  --color-primary-hover: #0d2237;
  --color-primary-contrast: #ffffff;
  /* Brain-outline blue, darkened from the original #2b7ec4 for WCAG 2.1 AA.
     At #2b7ec4 this failed contrast as body-size text on every ground the site
     uses (4.30:1 on white, 3.96:1 on --color-surface, 3.67:1 on
     --color-surface-alt; AA needs 4.5:1). Same hue, ~11% darker, now 5.31 /
     4.89 / 4.53. Used only as a text colour, so nothing else shifts.
     Enforced by tests/a11y.spec.js. */
  --color-secondary: #266fac;
  --color-accent: #b8933a;         /* gold, from ring + Ohio banner */
  --color-accent-alt: #4c9d3e;     /* green, from tree/growth */
  --color-focus: #b8933a;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif Pro", Georgia, "Times New Roman", serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 40, 55, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 40, 55, 0.08);

  --container-max: 1120px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
}

* {
  box-sizing: border-box;
}

/* Smooth scrolling is opt-out for anyone who has asked the OS for less motion.
   That setting is not a stylistic preference here: vestibular symptoms are
   common after stroke, TBI and MS, which is most of who this site is for. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `padding-block`, not the `padding: x 0` shorthand this used to be. The
     shorthand also set left and right to zero, overriding the gutter
     `.container` provides -- so the logo and the menu button sat hard against
     the screen edge at every width, and the brand mark did not line up with
     the hero text 24px in. This is the only class combined with `.container`
     that sets padding, so it was the only place it happened. */
  padding-block: var(--space-4);
  gap: var(--space-4);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}
.nav-brand:hover { text-decoration: none; }

.nav-brand-logo {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a:not(.btn) {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a:not(.btn)[aria-current="page"] {
  color: var(--color-secondary);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-text);
  /* 44px is the floor for a touch target. This button was 59x33. */
  min-height: 44px;
  min-width: 44px;
  font: inherit;
  font-weight: 500;
}

@media (max-width: 800px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* Rows span the panel, so the target is the row and not the word. These
       links measured 17px tall and only as wide as their text, centred in a
       panel of dead space -- the worst case for anyone with a tremor or
       limited hand control. */
    align-items: stretch;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-4) var(--space-4);
    gap: 0;
    /* A long menu on a short phone in landscape has to be reachable. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }

  .nav-links li + li {
    border-top: 1px solid var(--color-border);
  }
  .nav-links a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: var(--space-2) var(--space-2);
    font-size: 1rem;
  }
  /* The Contact CTA keeps its button shape but stops hugging its label. */
  .nav-links a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: var(--space-3);
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-surface);
  text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-9) 0;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
/* One column by default, so a hero with no photo is laid out exactly as it
   was. `.hero-has-photo` is set by the layout only when the owner has set one,
   which keeps the two-column rule from applying to an empty second cell. */
.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.hero-has-photo .hero-grid {
  grid-template-columns: 1fr 1fr;
}

/* Without a CTA row, the intro paragraph's own bottom margin is dead space --
   nothing follows it inside the hero -- and the full space-9 bottom padding
   (tuned to clear a row of buttons) just stacks with the next section's own
   top padding. Trimmed on pages where `hero.actions` is unset. */
.hero-no-actions {
  padding-bottom: var(--space-8);
}
.hero-no-actions .hero-inner > :last-child {
  margin-bottom: 0;
}

.hero-inner {
  max-width: 780px;
}

/* A fixed ratio so the hero's height does not depend on the proportions of
   whatever gets uploaded, and nothing reflows once the image loads. */
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero-eyebrow {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.hero-mark {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  margin: 0 0 var(--space-5);
  display: block;
}
.hero p {
  font-size: 1.15rem;
  margin-bottom: var(--space-6);
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The home hero measured 1088px tall on a 390x844 screen -- taller than the
   whole viewport, so both calls to action sat below the fold behind a wall of
   text. 96px of padding top and bottom was most of the avoidable part. */
@media (max-width: 800px) {
  .hero {
    padding: var(--space-6) 0 var(--space-7);
  }
  .hero-no-actions {
    padding-bottom: var(--space-6);
  }
  .hero-mark {
    width: clamp(96px, 26vw, 140px);
    margin-bottom: var(--space-4);
  }
  /* At 0.9rem + 0.08em tracking this wrapped onto two lines on every phone. */
  .hero-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
  .hero p {
    font-size: 1.05rem;
  }
  /* Full-width stacked buttons: easier to hit than two side by side, and they
     stop the pair from splitting awkwardly across a wrap. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    text-align: center;
    padding: var(--space-4) var(--space-5);
  }
  /* Stacked, headline first. A side-by-side hero at 390px would give each
     column under 180px. */
  .hero-has-photo .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero-photo {
    /* Shallower than the desktop 4:3, which would eat 270px of an already
       tall hero before the reader reaches anything below it. */
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
  }
}

/* ---------- Page photo (owner-supplied, optional) ---------- */

/* Sits between the hero and the page body. A fixed aspect ratio means the
   layout does not depend on the proportions of whatever gets uploaded, and
   nothing reflows once the image loads. `cover` crops rather than distorts. */
.page-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-top: var(--space-7);
  background: var(--color-surface-alt);
}

@media (max-width: 800px) {
  .page-image {
    /* Taller crop on a phone: 16/7 across 358px leaves a 157px letterbox. */
    aspect-ratio: 3 / 2;
    margin-top: var(--space-5);
    border-radius: var(--radius-md);
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-8) 0;
}
.section-alt {
  background: var(--color-surface);
}
.section-header {
  max-width: 700px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.section-header .hero-eyebrow {
  display: block;
}
.section-header p {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

@media (max-width: 800px) {
  .section {
    padding: var(--space-7) 0;
  }
  /* Justified text needs width to distribute. At phone width the lines are
     short enough that it opens rivers of whitespace between words instead. */
  .section-header p {
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
  }
  .section-header {
    margin-bottom: var(--space-6);
  }
}

/* ---------- Cards / Grid ---------- */

.grid {
  display: grid;
  gap: var(--space-5);
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 800px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* Stacked cards at 2rem padding waste a lot of a 390px screen on margin. */
  .card { padding: var(--space-5); }
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin-top: 0;
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---------- Prose (About, long-form pages) ---------- */

.prose {
  max-width: 720px;
  margin: 0 auto;
}
.prose p { font-size: 1.05rem; }
.prose ul { padding-left: 1.25rem; color: var(--color-text-muted); }
.prose li { margin-bottom: var(--space-2); }
.team-name { font-weight: 700; color: var(--color-text); }

/* ---------- Contact form ---------- */

.form {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
  margin: 0 auto;
}
.form label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.form input, .form textarea, .form select {
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.form textarea { min-height: 140px; resize: vertical; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) 0 var(--space-5);
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-grid h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-grid li { margin-bottom: var(--space-2); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 800px, not 700px. At 700 the footer stayed in three columns (2fr 1fr 1fr)
   through the whole 701-800 band, well after the nav had collapsed and the
   card grids had gone single-column. One breakpoint for the whole layout. */
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* These links were 16px tall -- the text box and nothing else. */
  .footer-grid li {
    margin-bottom: 0;
  }
  .footer-grid li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}