/* ============================================================
   URBANORTH — Extensions added for the live site
   New components not in site.css; layered on top.
   ============================================================ */

/* ============================================================
   ACCENT OVERRIDE — sage green replaces terracotta brand-wide.
   Single override propagates to italic emphasis, links, focus
   states, button hovers, key numerals, etc.
   ============================================================ */
:root {
  --un-accent:       #8a9d7e;   /* sage green — primary accent */
  --un-accent-2:     #6e8261;   /* darker for hover / pressed */
  --un-accent-soft:  #b8c8ad;   /* lighter — for use on dark backgrounds */
  --un-accent-wash:  #ebefe5;   /* very light tint */
}

/* ---------- FIX: when un-section/un-page + un-container are on the same element,
     the section's `padding: VAL 0` shorthand overrides un-container's
     padding-inline. Restore horizontal gutter. ---------- */
.un-section.un-container,
.un-page.un-container { padding-inline: var(--un-gutter); }
@media (max-width: 900px) {
  .un-section.un-container { padding-top: 56px; padding-bottom: 56px; }
  .un-page.un-container { padding-top: 40px; padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .un-section.un-container { padding-top: 40px; padding-bottom: 40px; }
  .un-page.un-container { padding-top: 32px; padding-bottom: 56px; }
}

/* ---------- Pipeline (in confidence) — replaces fictional projects ---------- */
.un-pipeline-note {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--un-rule-strong);
}
.un-pipeline-note .un-lead {
  margin: 0;
  max-width: 56ch;
}
.un-pipeline-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--un-sans);
  font-size: 14px;
  color: var(--un-fg-2);
  padding-top: 4px;
}
.un-pipeline-meta > div {
  display: flex;
  align-items: baseline;
}

@media (max-width: 900px) {
  .un-pipeline-note { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Contact card (right column on /contact) ---------- */
.un-contact-card {
  background: var(--un-white);
  border: 1px solid var(--un-rule);
  padding: 32px 36px;
  align-self: start;
}
.un-contact-card .un-contact-info {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.un-contact-card .un-contact-info a {
  border-bottom: 1px solid var(--un-rule);
}
.un-contact-card .un-contact-info a:hover {
  color: var(--un-accent);
  border-bottom-color: var(--un-accent);
}

@media (max-width: 600px) {
  .un-contact-card { padding: 24px; }
}

/* ---------- Mono-key inline alignment helper ---------- */
.un-contact-info .un-mono-key,
.un-pipeline-meta .un-mono-key {
  flex-shrink: 0;
}

/* ---------- Body container guards ---------- */
main { display: block; }
main > section:first-child .un-page,
main > .un-page:first-child { padding-top: 56px; }

/* ---------- Selection contrast on ink sections ---------- */
.un-section--ink ::selection { background: var(--un-accent); color: var(--un-paper); }

/* ---------- Focus-visible for keyboard accessibility ---------- */
a:focus-visible,
button:focus-visible,
.un-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--un-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- Skip-to-content link (a11y) ---------- */
.un-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--un-ink);
  color: var(--un-paper);
  padding: 12px 16px;
  font-family: var(--un-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 100;
}
.un-skip:focus { left: 12px; top: 12px; }

/* ============================================================
   TYPE OVERRIDE — h2 / page-head h1 / display-2 → sans-serif
   Reads as architectural firm rather than literary serif press.
   Italic emphasis stays in serif for refined contrast.
   Hero h1.un-display-1 keeps serif (the brand display statement).
   Service / pillar / process h3/h4 keep serif (decorative scale).
   ============================================================ */

h2,
.un-display-2,
.un-section-head h2,
.un-page-head h1 {
  font-family: var(--un-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
}

h2 em,
.un-display-2 em,
.un-section-head h2 em,
.un-page-head h1 em {
  font-family: var(--un-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;          /* serif italic visually matches surrounding sans */
  line-height: 0.92;          /* prevent the larger size from pushing line-height */
  vertical-align: -0.01em;
  letter-spacing: -0.005em;
  color: var(--un-accent);    /* sage green — explicit because parent h2 is ink-colored */
}
/* Inside the dark principle band, italic uses the SOFT sage for contrast on ink */
.un-section--ink h2 em,
.un-section--ink .un-display-2 em,
.un-principle__quote em { color: var(--un-accent-soft); }

/* Apply same sans + serif-italic pattern to the hero h1 (un-display-1) */
.un-display-1 {
  font-family: var(--un-sans);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.un-display-1 em {
  font-family: var(--un-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;          /* slightly larger ratio at display scale */
  line-height: 0.92;
  vertical-align: -0.015em;
  letter-spacing: -0.01em;
  color: var(--un-accent);
}
/* In the dark hero, the italic uses soft sage for contrast on ink */
.un-hero--ink .un-display-1 em,
.un-hero--ink .un-hero__head h1 em { color: var(--un-accent-soft); }
/* Hero rule from site.css also sets serif on h1 — override */
.un-hero__head h1 {
  font-family: var(--un-sans);
  font-weight: 500;
}
.un-hero__head h1 em {
  font-family: var(--un-serif);
  font-style: italic;
  font-weight: 400;
}

/* Slight tightening for sans display sizes — sans reads denser than serif at large sizes */
.un-display-2 { line-height: 1.06; }
.un-section-head h2 { line-height: 1.08; }
.un-page-head h1 { line-height: 1.04; }

/* Principle quote in dark band — sans with serif italic on emphasis */
.un-principle__quote { font-weight: 500; }
.un-principle__quote em { color: var(--un-accent-soft); }

/* ---------- Service mono numbers — bump contrast slightly (darker sage) ---------- */
.un-service__num { color: var(--un-accent-2); }

/* ---------- Stats — add left/right padding so content doesn't cling to dividers ---------- */
.un-stat { padding-left: 22px; padding-right: 22px; }
@media (max-width: 600px) {
  .un-stat { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Nav logo — bump height to accommodate the tagline lockup ----------
   The tagline lockup (URBANORTH | INVESTMENT & DEVELOPMENT PARTNER) needs more
   vertical room than the wordmark-only variant — the small caps tagline becomes
   illegible below ~30px logo height.
*/
.un-nav__brand img { height: 44px; display: block; }
.un-footer__brand img { height: 48px; display: block; }
.un-nav { padding-top: 16px; padding-bottom: 16px; }
.un-nav__drawer { inset: 76px 0 0 0; }   /* match new nav height for drawer */
@media (max-width: 900px) {
  .un-nav__brand img { height: 38px; }
}
@media (max-width: 600px) {
  .un-nav__brand img { height: 34px; }
  .un-footer__brand img { height: 38px; }
  .un-nav__drawer { inset: 68px 0 0 0; }
}

/* ============================================================
   DARK HERO VARIANT — un-hero--ink
   Above-the-fold dark treatment, mirroring the principle band rhythm.
   ============================================================ */

.un-hero--ink {
  background: var(--un-ink);
  color: var(--un-paper);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
  /* Subtle bottom rule to transition into the light section below */
  border-bottom: 1px solid #2a2a27;
}

.un-hero--ink .un-hero__head h1 { color: var(--un-paper); }
.un-hero--ink .un-hero__head h1 em {
  color: var(--un-accent-soft);
  font-style: italic;
}

.un-hero--ink .un-eyebrow { color: #9c9a92; }
.un-hero--ink .un-eyebrow-num { color: var(--un-accent-soft); }

.un-hero--ink .un-lead {
  color: rgba(246, 244, 239, 0.78);
}

.un-hero--ink ::selection { background: var(--un-accent); color: var(--un-paper); }

/* ---------- Light-on-dark button variants ---------- */

.un-btn--solid-light {
  background: var(--un-paper);
  color: var(--un-ink);
  border: 1px solid var(--un-paper);
}
.un-btn--solid-light:hover {
  background: var(--un-accent);
  border-color: var(--un-accent);
  color: var(--un-paper);
}
a.un-btn--solid-light { border-bottom: 1px solid var(--un-paper); }
a.un-btn--solid-light:hover { border-bottom-color: var(--un-accent); }

.un-btn--ghost-light {
  background: transparent;
  color: var(--un-paper);
  border: 0;
  border-bottom: 1px solid var(--un-paper);
  padding: 14px 4px;
}
.un-btn--ghost-light:hover {
  color: var(--un-accent-soft);
  border-bottom-color: var(--un-accent-soft);
}

/* ---------- Arch feature section — sits between dark hero and light content ---------- */
.un-arch-feature {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* When stats sit right under the dark hero, give them a little more
   breathing room above the numbers so the section doesn't feel cramped
   against the dark band. */
.un-hero + .un-section,
.un-hero--ink + .un-section {
  padding-top: clamp(72px, 7vw, 112px);
}

/* When the arch feature follows a section (e.g. stats), keep the gap tight
   so the visual rhythm above the numbers and below them feels even —
   stats section's own bottom padding (~80px) is enough breathing room. */
.un-section + .un-arch-feature {
  padding-top: 0;
}

/* ============================================================
   DARK PAGE-HEAD SECTION (used on subpages)
   Full-bleed dark band that wraps the page heading + lead.
   ============================================================ */
.un-page-head-section {
  background: var(--un-ink);
  color: var(--un-paper);
  padding: clamp(56px, 6vw, 96px) 0;
  border-bottom: 1px solid #2a2a27;
}
.un-page-head-section .un-page-head { margin-bottom: 0; }

/* When the page starts with a dark head, the following content wrapper
   should not add its own top padding. */
.un-page--no-head { padding-top: 0; }

/* ============================================================
   Comprehensive INK text-color inversions (cover all heading
   and body styles that have an explicit color in site.css).
   ============================================================ */
.un-section--ink h1,
.un-section--ink h2,
.un-section--ink h3,
.un-section--ink h4,
.un-page-head-section h1,
.un-page-head-section h2,
.un-page-head-section h3,
.un-page-head-section h4 {
  color: var(--un-paper);
}

.un-section--ink p,
.un-section--ink .un-lead,
.un-page-head-section p,
.un-page-head-section .un-lead {
  color: rgba(246, 244, 239, 0.78);
}

.un-page-head-section .un-eyebrow { color: #9c9a92; }
.un-page-head-section .un-eyebrow-num { color: var(--un-accent-soft); }

/* Italic emphasis on dark sections uses soft sage for contrast */
.un-page-head-section h1 em,
.un-page-head-section .un-display-2 em,
.un-section--ink h1 em,
.un-section--ink h2 em,
.un-section--ink .un-display-2 em {
  color: var(--un-accent-soft);
}

/* Pillars on ink — invert border + text */
.un-section--ink .un-pillar { border-top-color: rgba(246, 244, 239, 0.18); }
.un-section--ink .un-pillar h4 { color: var(--un-paper); }
.un-section--ink .un-pillar p { color: rgba(246, 244, 239, 0.65); }

/* SectionHeader on ink */
.un-section--ink .un-section-head h2 { color: var(--un-paper); }
.un-section--ink .un-section-head .un-lead { color: rgba(246, 244, 239, 0.78); }
.un-section--ink .un-section-head .un-eyebrow { color: #9c9a92; }
.un-section--ink .un-section-head .un-eyebrow-num { color: var(--un-accent-soft); }

/* Process rows on ink (Approach 5-phase) — keep this in light unless asked */
.un-section--ink .un-process__row { border-top-color: rgba(246, 244, 239, 0.18); }
.un-section--ink .un-process__row:last-child { border-bottom-color: rgba(246, 244, 239, 0.18); }
.un-section--ink .un-process h3 { color: var(--un-paper); }
.un-section--ink .un-process p { color: rgba(246, 244, 239, 0.65); }
.un-section--ink .un-process__num { color: var(--un-accent-soft); }

/* Ink-themed selection */
.un-page-head-section ::selection,
.un-section--ink ::selection { background: var(--un-accent); color: var(--un-paper); }

@media (max-width: 600px) {
  .un-hero--ink {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}