/* New Heights brand layer for the sample tools.
   Loaded last on every tool page. The tools keep their own layout and
   behaviour; this sets the type, the paper/ink/yellow palette, a single
   4px radius and sentence-case labels so they read as the same brand as
   the main site. Colours inside each tool's CSS were already mapped from
   the old maroon/lavender/lime theme to these tokens. */

@font-face { font-family: 'Source Sans 3'; src: url('assets/fonts/source-sans-3-normal-latin.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('assets/fonts/source-sans-3-italic-latin.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'A Pompadour Display'; src: url('assets/fonts/a-pompadour-display-sample.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --nh-paper: #f5f3eb;
  --nh-paper-2: #eceadf;
  --nh-paper-3: #e3e1d3;
  --nh-white: #fbfaf6;
  --nh-ink: #242722;
  --nh-muted: #5f625a;
  --nh-line: #d3d5c8;
  --nh-yellow: #efed58;
  --nh-olive: #6b6c12;
  --nh-display: 'A Pompadour Display', Georgia, serif;
  --nh-font: 'Source Sans 3', system-ui, sans-serif;
}

html, body { font-family: var(--nh-font); -webkit-font-smoothing: antialiased; }
body { background: var(--nh-paper); color: var(--nh-ink); }
::selection { background: var(--nh-yellow); color: var(--nh-ink); }
:focus-visible { outline: 3px solid var(--nh-olive) !important; outline-offset: 3px; }
input, select, textarea, button { font-family: inherit; }

/* Display face for the big headings in every tool. The sample face only
   ships Latin letters and basic punctuation, which covers these titles. */
h1, .records-header h1, .interview-header h1, main h1,
.coverage h2, .calendar-title, .page-title { font-family: var(--nh-display) !important; font-weight: 400 !important; letter-spacing: 0 !important; font-synthesis: none; }
h1 { line-height: 1.06; }
h2, h3 { letter-spacing: 0; }

/* Sentence-case labels instead of tracked capitals. */
.eyebrow, .legend-title, .brand-caption, .field-label, .pill, .badge, .preview,
.brand small, .brand > span, header small, .record-detail-summary dt, .contact-notes strong,
.demo-toolbar p, .portfolio-logo {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.eyebrow { color: var(--nh-olive) !important; font-weight: 600 !important; font-size: 14px !important; }

/* One radius everywhere except true circles (avatars, dots, pins). */
button, input, select, textarea, .button, [class*="btn"], [class*="card"], [class*="panel"], [class*="chip"],
.pill, .badge, .slot, .tab, [role="tab"], dialog, .leaflet-control, .leaflet-bar a, .leaflet-popup-content-wrapper {
  border-radius: 4px !important;
}

/* Buttons: ink fill with a yellow hover edge, like the main site. */
button:not(.leaflet-control *):not([class*="avatar"]) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }

/* Sample workspace toolbar shared by every tool. */
.demo-toolbar { background: var(--nh-ink) !important; color: var(--nh-paper) !important; font-family: var(--nh-font) !important; }
.demo-toolbar p { color: #bdbfb3 !important; font-size: 13px !important; }
.demo-toolbar nav a { color: var(--nh-paper) !important; font-family: var(--nh-font) !important; }
.demo-toolbar nav a[aria-current="page"] { color: var(--nh-yellow) !important; text-decoration-color: var(--nh-yellow) !important; }
.demo-toolbar button { background: transparent !important; color: var(--nh-paper) !important; border: 1px solid #55584c !important; font-family: var(--nh-font) !important; font-weight: 600 !important; }
.demo-toolbar button:hover { border-color: var(--nh-yellow) !important; color: var(--nh-yellow) !important; }
.demo-logo-placeholder, .logo-placeholder, .portfolio-logo, [class*="logo-placeholder"] {
  font-family: var(--nh-display) !important; font-size: 18px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: var(--nh-yellow) !important; color: var(--nh-ink) !important; border: 1px dashed var(--nh-ink) !important;
}

/* Shadows: flatter, ink-tinted. */
[class*="card"], [class*="panel"], .leaflet-popup-content-wrapper { box-shadow: 0 1px 0 rgba(36, 39, 34, .06) !important; }

/* The interview intake injects a plain link above the app; give it the brand's treatment. */
#root > p:first-child { margin: 0; }
#root > p:first-child a { color: var(--nh-yellow); font-weight: 600; text-underline-offset: 4px; }
.demo-logo-placeholder, .logo-placeholder, .portfolio-logo, [class*="logo-placeholder"] { white-space: nowrap; padding-inline: 10px !important; }