/* ==========================================================================
   PsychoDynamic Diagnosis — main.css
   Design tokens + base typography/layout.

   NOTE ON DESIGN TOKENS: These custom properties are a placeholder academic/
   clinical theme (PRD section 33) built without access to the drnasirbhat.com
   site's own CSS tokens. If/when the site's header, footer, and CSS variables
   are available, swap the values in :root below — the rest of the app is
   built entirely on these tokens, so a re-skin should not require touching
   components.css, responsive.css, or any HTML structure.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-bg: #faf8f4;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f0e9;
  --color-border: #e2ddd0;
  --color-border-strong: #c9c2af;

  --color-text: #262421;
  --color-text-muted: #5c574d;
  --color-text-faint: #655f52;

  /* ---- Color: brand / academic-clinical calm palette ---- */
  --color-primary: #2c4a52;       /* deep slate teal */
  --color-primary-dark: #1b2f35;
  --color-primary-light: #4c6f78;
  --color-accent: #a4623f;        /* muted terracotta, used sparingly */
  --color-accent-light: #c98a63;

  /* ---- Color: organization levels ---- */
  --color-neurotic: #3f7a68;
  --color-neurotic-bg: #eaf3ef;
  --color-borderline-org: #a4712f;
  --color-borderline-org-bg: #f6efe1;
  --color-psychotic: #8a4560;
  --color-psychotic-bg: #f5eaf0;

  /* ---- Color: feedback / state ---- */
  --color-focus: #1a73e8;
  --color-disclaimer-bg: #fbf3e3;
  --color-disclaimer-border: #d9b872;

  /* ---- Typography ---- */
  --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.85rem;

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Radius / shadow / motion ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(38, 36, 33, 0.06), 0 1px 3px rgba(38, 36, 33, 0.06);
  --shadow-md: 0 4px 10px rgba(38, 36, 33, 0.08), 0 2px 4px rgba(38, 36, 33, 0.06);
  --transition-fast: 140ms ease;
  --transition-normal: 220ms ease;

  /* ---- Layout ---- */
  --content-max: 1120px;
  --content-narrow: 760px;
  --header-height: 64px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--color-primary);
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-3);
  overflow-wrap: break-word;
  word-break: break-word;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

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

main { display: block; }

section {
  padding: var(--space-8) 0;
}
section + section {
  border-top: 1px solid var(--color-border);
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-6);
}

hr.rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ---- Site header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-primary-dark);
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.brand__mark { white-space: nowrap; }
.brand__mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}
.brand__parent {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* ---- Site footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: var(--space-7) 0 var(--space-6);
  margin-top: var(--space-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
}
.site-footer h5 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--color-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}