/* West Hartford AI — shared foundation: tokens, base reset, header, footer.
   SINGLE SOURCE OF TRUTH for index.html and about.html. Page-specific styles
   stay in each page's inline <style>. Edit chrome (header/footer/colors/type
   scale) here once; both pages update. */

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

:root {
  /* Colors */
  --bg: #f9f7f4;
  --text: #2d2a26;
  --text-secondary: #4f4940;
  --text-muted: #9a7b5f;
  --text-faint: #8a8276;
  --accent: #b0402e;
  --accent-hover: #9a3527;
  --accent-light: #e8896f;
  --accent-underline: #e3b3a8; /* faded accent for link/heading underlines */
  --rule: #e7e0d6;
  --card-bg: #ffffff;
  --field-bg: #faf8f5;
  --field-border: #ded6ca;
  --footer-bg: #2d2a26;
  --footer-text: #d8cfc4;
  --footer-muted: #8a8276;
  --cream-on-dark: #f4ece3;

  /* Fonts */
  --display: 'Bitter', Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Fluid typography */
  --fs-body: clamp(1rem, 0.9rem + 0.35vw, 1.094rem);
  --fs-intro: clamp(1rem, 0.88rem + 0.4vw, 1.094rem);
  --fs-h1: clamp(1.75rem, 1.2rem + 1.8vw, 2.375rem);
  --fs-format-title: clamp(1rem, 0.85rem + 0.5vw, 1.188rem);
  --fs-format-desc: clamp(0.875rem, 0.8rem + 0.3vw, 0.969rem);
  --fs-card-title: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  --fs-label: clamp(0.625rem, 0.58rem + 0.15vw, 0.688rem);
  --fs-input: clamp(0.875rem, 0.82rem + 0.2vw, 0.938rem);
  --fs-button: clamp(0.875rem, 0.82rem + 0.2vw, 0.938rem);
  --fs-time: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
  --fs-meta: clamp(0.75rem, 0.7rem + 0.15vw, 0.844rem);
  --fs-note: clamp(0.813rem, 0.77rem + 0.15vw, 0.906rem);

  /* Spacing scale */
  --space-xs: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);
  --space-sm: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem);
  --space-md: clamp(0.875rem, 0.7rem + 0.5vw, 1.125rem);
  --space-lg: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --space-xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --space-2xl: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
}

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

body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: #f3d9d2; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(249, 247, 244, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 17px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: baseline;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.563rem);
  text-decoration: none;
}

.logo-weha { font-family: var(--display); font-weight: 700; color: var(--accent); }
.logo-ai { font-family: var(--mono); font-weight: 600; color: var(--text); }

/* Header nav link — index uses .nav-about ("About Us"), about uses .nav-back
   ("← Back home"); identical styling, different label/target. */
.nav-about,
.nav-back {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-underline);
  margin-right: var(--space-lg);
}
.nav-about:hover,
.nav-back:hover { color: var(--accent); }

.container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-2xl) 28px 0;
}

h1 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

/* Footer */
footer {
  background: var(--footer-bg);
  margin-top: var(--space-2xl);
  padding: 40px 28px;
}

.footer-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Left brand block: logo with the location flush-left beneath it. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.footer-logo {
  display: flex;
  align-items: baseline;
  font-size: clamp(1.188rem, 1rem + 0.6vw, 1.438rem);
  text-decoration: none;
}
.footer-logo .logo-weha { color: var(--accent-light); }
.footer-logo .logo-ai { color: var(--cream-on-dark); }

.footer-location {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--footer-text);
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--mono);
  font-size: var(--fs-meta);
}
.footer-links a {
  color: var(--footer-text);
  text-decoration: none;
  border-bottom: 1px solid #4a463f;
}
.footer-links a:hover { color: var(--cream-on-dark); }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  color: #f9f7f4; /* cream — contrasts the dark footer */
  transition: color 0.15s ease;
}
.footer-linkedin:hover { color: var(--accent-light); }
.footer-linkedin svg { width: 28px; height: 28px; display: block; }

/* Legal + about page prose.
   Page titles use the shared <h1> rule above — no per-page override, so the heading
   margin is consistent across index, about, privacy, terms.
   .legal table rules are used by privacy only; harmless on pages without tables. */
.updated { font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-muted);
  margin-bottom: var(--space-xl); }
.legal { color: var(--text-secondary); }
.legal h2 { font-family: var(--display); font-weight: 700; color: var(--text);
  font-size: var(--fs-card-title); line-height: 1.2; margin: var(--space-xl) 0 var(--space-sm); }
.legal h3 { font-family: var(--body); font-weight: 600; color: var(--text);
  font-size: var(--fs-intro); margin: var(--space-lg) 0 var(--space-xs); }
.legal p, .legal li { font-size: var(--fs-body); line-height: 1.72; margin-bottom: var(--space-sm); }
.legal ul { padding-left: 1.3em; margin-bottom: var(--space-md); }
.legal li { margin-bottom: var(--space-xs); }
.legal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-underline); }
.legal a:hover { border-bottom-color: var(--accent); }
.legal strong { color: var(--text); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0 var(--space-md);
  font-size: var(--fs-note); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px;
  border-bottom: 1px solid var(--rule); }
.legal th { font-family: var(--mono); font-weight: 600; color: var(--text);
  font-size: var(--fs-meta); letter-spacing: 0.02em; }
.legal section + section { margin-top: var(--space-2xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--rule); }
.placeholder { background: #f3e6df; color: #7a4a2b; font-family: var(--mono);
  font-size: 0.85em; padding: 1px 5px; border-radius: 4px; }

/* ---- Forms & signup card ----
   SHARED form layer: the signup card, form grid, fields, labels, inputs,
   button, validation states, success message, and the radio/button/checkbox
   controls. Single source of truth for index.html, /present, and future
   form pages (e.g. /workshops) so they CANNOT drift. Page-specific overrides
   (popup, survey media queries) stay in each page's inline <style>. */

.signup-card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  margin: var(--space-xl) 0;
  padding: var(--space-xl);
  box-shadow: 0 18px 44px -32px rgba(45, 42, 38, 0.30);
}

form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  form {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

form label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--fs-input);
  font-family: var(--body);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  background: var(--field-bg);
  transition: border-color 0.15s, background-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card-bg);
}

.optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #c4b8a6;
}

form button {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
  padding: 15px var(--space-lg);
  font-size: var(--fs-button);
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

form button:hover {
  background: var(--accent-hover);
}

form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Validation error states */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error .radio-group {
  border-color: #c53030;
}

.form-field.has-error input,
.form-field.has-error textarea {
  background: #fff5f5;
}

.form-field.has-error .radio-indicator {
  border-color: #c53030;
}

.error-message {
  display: none;
  font-family: var(--body);
  font-size: 0.813rem;
  color: #c53030;
  margin-top: 6px;
}

.form-field.has-error .error-message {
  display: block;
}

.form-error {
  display: none;
  grid-column: 1 / -1;
  font-family: var(--body);
  font-size: 0.875rem;
  color: #c53030;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 9px;
  padding: 12px 14px;
  text-align: center;
}

.form-error.visible {
  display: block;
}

.success-message {
  font-family: var(--display);
  font-size: var(--fs-body);
  color: var(--accent);
  text-align: center;
  padding: var(--space-md) 0;
  grid-column: 1 / -1;
  line-height: 2;
}

.success-message a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.success-message a:hover {
  color: var(--text);
}

/* Radio group for session selection */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 0.25rem;
  padding-left: 14px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
  position: relative;
}

.radio-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-indicator {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--field-border);
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
  flex: 0 0 auto;
}

.radio-indicator::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
}

.radio-option:hover .radio-indicator {
  border-color: var(--accent);
}

.radio-option input:checked + .radio-indicator {
  border-color: var(--accent);
}

.radio-option input:checked + .radio-indicator::after {
  opacity: 1;
}

.radio-label {
  font-family: var(--body);
  font-size: var(--fs-input);
  color: var(--text);
}

/* Button-style selection (survey single-select) */
.button-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.button-option {
  display: block;
  cursor: pointer;
  position: relative;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
}

.button-option input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.button-option span {
  display: block;
  padding: var(--space-sm);
  font-family: var(--body);
  font-size: var(--fs-input);
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.button-option input:checked + span {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--card-bg);
}

.button-option:hover span {
  border-color: var(--accent);
}

/* Checkbox-style selection (survey multi-select) */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-sm);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  position: relative;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
}

.checkbox-option:hover {
  border-color: var(--accent);
}

.checkbox-option.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--card-bg);
}

.checkbox-option input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.checkbox-option .checkbox-indicator {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.checkbox-option.selected .checkbox-indicator {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox-option .checkbox-indicator svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.checkbox-option.selected .checkbox-indicator svg {
  opacity: 1;
}

.checkbox-option .checkbox-label {
  font-family: var(--body);
  font-size: var(--fs-input);
  color: var(--text);
}