/*
 * header.css v1.1.5
 *
 * v1.1.5 — Mobile menu vs. listings chrome stacking. On the listings page
 *          (map mode) the fixed search rail (z:160) and Map/List pill (z:250)
 *          painted over the open hamburger overlay, because the overlay lives
 *          inside the header's z-index:100 stacking context and that chrome
 *          sits outside it. Added .lore-header:has(.lore-header__toggle:checked)
 *          { z-index:300 } so the whole header context (overlay included) lifts
 *          above page chrome while the menu is open, then reverts. One rule,
 *          :has() per ADR-081. No markup/JS change.
 *
 * LORE Search Portal — site header (Chunk D)
 *
 * Mobile-first per ADR-014. Layout is single-row top bar by default;
 * primary nav lives in a full-screen overlay toggled by a CSS-only
 * checkbox hamburger. Above var(--bp-xl) the overlay becomes an
 * inline horizontal nav and the hamburger hides.
 *
 * Design intent: Apple-clean — quiet surface, generous breathing room,
 * neutral colors on nav items (no flashy hover shifts); display font
 * (Larken) on overlay items for gravitas, body font (Articulat) on
 * desktop inline nav for utility. The login pill is the only colored
 * action; reserved hover-shift to scarlet expresses intent.
 *
 * Changelog:
 *   v1.0.0 — Initial header. Stacking bug: nav is a child of header
 *            and the header creates its own stacking context, so the
 *            overlay paints above the chrome (logo, login, X) when
 *            opened. Reported during mobile visual verification.
 *   v1.1.4 — BACKLOG §3.38 — Mobile-overlay Sign-out button rendered
 *            with default browser button chrome (gray rounded
 *            rectangle on hover) instead of matching the adjacent
 *            "My account" link styling. Root cause: the existing
 *            :hover rule set opacity + color but NOT background or
 *            border, so GeneratePress's button:hover rule (background:
 *            #555; border: 1px solid; from main.min.css) leaked
 *            through on the hover state even though the base rule
 *            won the cascade for the resting state. Fix: explicit
 *            background: transparent + border: 0 on the existing
 *            :hover/:focus-visible rule, and added :active to the
 *            selector list (convention #22 — UA-default :active
 *            background is a separate default needing its own
 *            override). Three-line CSS addition; no other rules
 *            touched.
 *   v1.1.3 — SCOPE-7.4 Phase 4.3 — extend Phase 4.2's pill text-color
 *            defense to cover :hover as well. Phase 4.2 caught :focus,
 *            :focus-visible, :active, and [aria-expanded="true"] but
 *            omitted :hover. The 'Joseph' text in the pill goes
 *            invisible on simple mouseover (no click required) —
 *            GP's button:hover color rule wins the cascade. Same
 *            defense pattern as Phase 4.2 with one more pseudo-
 *            class in the selector list.
 *
 *   v1.1.2 — SCOPE-7.4 Phase 4.2 — two browser-verify fixes:
 *            (a) Desktop user-pill text (.lore-header__user) turned
 *                cabernet/invisible when the dropdown opened or the
 *                button took focus. Most likely cause: GeneratePress
 *                injects button :focus color styling that won the
 *                cascade against our single-class .lore-header__user
 *                color: var(--color-text) declaration (the inherent
 *                inheritance vs explicit-rule problem). Defense:
 *                explicit color override on :focus and :focus-visible
 *                pseudo-classes (2-class specificity).
 *            (b) Mobile overlay rendered the nav-list and the
 *                overlay-account block side-by-side because
 *                .lore-header__nav is flex (default direction row)
 *                and contains two children when logged in. Fix:
 *                flex-direction: column at mobile. Desktop @media
 *                already overrides .lore-header__nav to its own
 *                horizontal layout so this is mobile-only.
 *
 *   v1.1.1 — SCOPE-7.4 Phase 4.1 — three browser-verify fixes:
 *            (a) Desktop user pill (.lore-header__user-wrap) was
 *                rendering on mobile alongside the hamburger,
 *                duplicating identity info already shown in the
 *                mobile overlay's identity block. Now mobile-first:
 *                base rule is `display: none`, desktop @media flips
 *                to `inline-flex`. Mirrors the inverse rule for
 *                .lore-header__overlay-account.
 *            (b) ↗ icon on the loremultifamily.com nav item wrapped
 *                to its own line on mobile overlay items because
 *                the inline-block SVG was treated as a break
 *                opportunity after the text. white-space: nowrap on
 *                .lore-header__nav-list a keeps them glued. Desktop
 *                unaffected (items are flex-rowed at list level).
 *
 *   v1.1.0 — SCOPE-7.4 Phase 4 (+ Phase 5 folded in). New rules:
 *            (a) Desktop user pill .lore-header__user (28px avatar
 *                + first-name + chevron) inside .lore-header__user-
 *                wrap, with anchored dropdown .lore-header__dropdown
 *                (right-edge anchor, 8px gap below pill, 0.5px
 *                soft-border, --radius-md, soft drop shadow, opacity-
 *                with-visibility-delay open/close per SCOPE §5.2).
 *            (b) Dropdown items My account + Sign-out (Sign-out
 *                visually secondary: muted color, border-top divider).
 *            (c) Mobile overlay identity block (.lore-header__overlay-
 *                account): 56px avatar circle + 'Signed in as Name'
 *                caption + My account link + Sign out button. Renders
 *                inside .lore-header__nav overlay when logged in;
 *                hidden on desktop via the @media block.
 *            (d) Active-page underline (.is-current on nav <li>):
 *                2px cabernet, 4px below text, desktop-only.
 *            (e) External-link arrow alignment (.lore-header__ext-
 *                icon): inline-block, vertical-align -1px, 2px left
 *                margin.
 *
 *   v1.0.1 — Fixes the stacking bug: brand and actions get
 *            position: relative + z-index: 100 so they paint above
 *            the overlay (z-index: 99) within the header's stacking
 *            context. Additionally: soft circular gray background
 *            behind the X when overlay is open (iOS modal-close
 *            affordance); strokes thicken 2px -> 2.5px.
 *
 * See DECISIONS.md ADR-013 (header logo), ADR-014 (mobile-first
 * breakpoints).
 */

/* ─── Top bar ──────────────────────────────────────────────────────── */
.lore-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
}

/* When the mobile menu is open, lift the whole header — and the full-screen
   nav overlay nested in its z-index:100 stacking context — above any page
   chrome. On the listings page in map mode the search rail (position:fixed,
   z:160) and the Map/List pill (position:fixed, z:250) sit OUTSIDE the
   header's stacking context, so they otherwise paint over the overlay and the
   hamburger doesn't read as primary. Bumping the header context to 300 while
   the menu is open lets the full-screen overlay cover them. Reverts to 100
   when the menu closes. (:has() per ADR-081; matches the CSS-only checkbox
   hamburger — .lore-header__toggle is a direct child of .lore-header.) */
.lore-header:has(.lore-header__toggle:checked) {
  z-index: 300;
}

.lore-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 64px;
  padding: 0 var(--space-4);
  max-width: 1400px;
  margin: 0 auto;
}

/* brand and actions need to paint above the overlay (nav, z=99)
   within the header's own stacking context. position: relative makes
   z-index apply. (v1.0.1 fix) */
.lore-header__brand {
  position: relative;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.lore-header__logo {
  height: 36px;
  width: auto;
  display: block;
}

/* ─── Action cluster (login + hamburger) ───────────────────────────── */
.lore-header__actions {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ─── Login pill (always visible) ──────────────────────────────────── */
.lore-header__login {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--color-cabernet);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-cabernet);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.lore-header__login:hover,
.lore-header__login:focus-visible {
  background: var(--color-cabernet);
  color: var(--color-white);
}

/* ─── Hamburger: visually-hidden checkbox + visible label ──────────── */
.lore-header__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.lore-header__burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease, border-radius 200ms ease;
}

.lore-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 200ms ease, opacity 200ms ease, height 200ms ease;
  transform-origin: center;
}

.lore-header__toggle:checked ~ .lore-header__actions .lore-header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.lore-header__toggle:checked ~ .lore-header__actions .lore-header__burger span:nth-child(2) {
  opacity: 0;
}
.lore-header__toggle:checked ~ .lore-header__actions .lore-header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.lore-header__toggle:focus-visible ~ .lore-header__actions .lore-header__burger {
  outline: 2px solid var(--color-scarlet);
  outline-offset: 2px;
}

/* When overlay is open, give the X a soft circular background so it
   reads as a close affordance; strokes thicken slightly. (v1.0.1) */
.lore-header__toggle:checked ~ .lore-header__actions .lore-header__burger {
  background: var(--color-border-soft);
  border-radius: var(--radius-round);
}
.lore-header__toggle:checked ~ .lore-header__actions .lore-header__burger span {
  height: 2.5px;
}

/* ─── Full-screen overlay nav ──────────────────────────────────────── */
.lore-header__nav {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  transform: translateY(-100%);
  transition: transform 200ms ease, visibility 0s linear 200ms;
  z-index: 99;
  display: flex;
  /* Phase 4.2 — stack nav-list and overlay-account vertically when
     logged in. Logged-out users only have nav-list as a child,
     for whom this is a no-op (single child centers either way). */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.lore-header__toggle:checked ~ .lore-header__nav {
  transform: translateY(0);
  visibility: visible;
  transition: transform 200ms ease, visibility 0s;
}

.lore-header__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.lore-header__nav-list a {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 150ms ease;
  /* Phase 4.1 — keep text + inline ↗ SVG on one line. On mobile
     overlay the text "loremultifamily.com" + trailing SVG was
     wrapping after the text, dropping the icon to a second line. */
  white-space: nowrap;
}

.lore-header__nav-list a:hover,
.lore-header__nav-list a:focus-visible {
  opacity: 0.6;
}

/* Lock body scroll while overlay is open. Targets the html element so
   the sticky-header pattern (body as flex column with overflow auto)
   isn't broken. */
html:has(.lore-header__toggle:checked) {
  overflow: hidden;
}

/* ─── External-link arrow icon (Tabler ti-arrow-up-right) ───────────── */
/* Inline SVG inside nav-list anchors. Sized 16px, inherits currentColor.
   Vertical-align -1px nudges optical baseline to match the text. */
.lore-header__ext-icon {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 2px;
}

/* ─── Active-page underline (desktop nav, SCOPE-7.4 §5.1) ───────────── */
/* The underline sits 4px below the text baseline at 2px thickness in
   cabernet. Only renders on desktop (>=1200px) inside its @media block
   below; on mobile overlay items, "active" is implicit via context (the
   user can't see other pages from the overlay), so no underline there. */

/* ─── Logged-in user pill (desktop, SCOPE-7.4 §5.2) ─────────────────── */
.lore-header__user-wrap {
  /* Mobile-first: hide the desktop pill. The mobile overlay
     renders its own identity block + account items instead.
     Desktop @media (>=1200px) flips this back to inline-flex.
     position: relative retained so the dropdown panel anchors
     correctly once the wrap is visible. */
  position: relative;
  display: none;
  align-items: center;
}

.lore-header__user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border: 0.5px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 150ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.lore-header__user:hover,
.lore-header__user:focus-visible,
.lore-header__user[aria-expanded="true"] {
  background: var(--color-surface-muted);
}

.lore-header__user:focus-visible {
  outline: 2px solid var(--color-cabernet);
  outline-offset: 2px;
}

/* Phase 4.2 — text-color defense. Something (most likely a GP
   button :focus rule) was winning the cascade and turning the
   pill text cabernet-on-cabernet when the dropdown was open.
   Explicit color on :focus and :focus-visible pseudo-classes
   (2-class specificity) wins over single-class GP rules. */
.lore-header__user:hover,
.lore-header__user:focus,
.lore-header__user:focus-visible,
.lore-header__user:active,
.lore-header__user[aria-expanded="true"] {
  color: var(--color-text);
}

.lore-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--color-linen);
  color: var(--color-cabernet);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.lore-header__user-name {
  /* Limit truncation; long first names get an ellipsis rather than push
     the dropdown anchor off the right edge of the viewport. */
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lore-header__chevron {
  /* Inline SVG; flex aligns vertically with text. */
  display: inline-block;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 150ms ease;
}

.lore-header__user[aria-expanded="true"] .lore-header__chevron {
  transform: rotate(180deg);
}

/* ─── Dropdown panel (anchored to .lore-header__user-wrap) ──────────── */
.lore-header__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  background: var(--color-white);
  border: 0.5px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms;
  z-index: 200;
}

.lore-header__dropdown[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease-out, visibility 0s;
}

.lore-header__dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 100ms ease;
}

.lore-header__dropdown-item:hover,
.lore-header__dropdown-item:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.lore-header__dropdown-item:focus-visible {
  outline: none;
}

.lore-header__dropdown-item--signout {
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-soft);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-top: 4px;
  padding-top: 12px;
}

.lore-header__dropdown-signout-form {
  margin: 0;
}

/* ─── Mobile overlay identity block + account items (logged-in) ──────── */
/* Renders inside .lore-header__nav (overlay) when logged in. Hidden on
   desktop via the @media block below. */
.lore-header__overlay-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  width: 100%;
  max-width: 320px;
}

.lore-header__overlay-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.lore-header__overlay-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  background: var(--color-linen);
  color: var(--color-cabernet);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.lore-header__overlay-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.lore-header__overlay-account-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.lore-header__overlay-account-list a {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.lore-header__overlay-account-list a:hover,
.lore-header__overlay-account-list a:focus-visible {
  opacity: 0.6;
}

.lore-header__overlay-signout-form {
  margin: 0;
}

.lore-header__overlay-signout {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.lore-header__overlay-signout:hover,
.lore-header__overlay-signout:focus-visible,
.lore-header__overlay-signout:active {
  background: transparent;
  border: 0;
  opacity: 0.6;
  color: var(--color-text-muted);
}

.lore-header__overlay-signout:focus-visible {
  outline: 2px solid var(--color-cabernet);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Desktop (>=1200px): hamburger off, nav inline ────────────────── */
@media (min-width: 1200px) {
  .lore-header__inner {
    height: 80px;
    padding: 0 var(--space-6);
  }

  .lore-header__logo {
    height: 48px;
  }

  .lore-header__burger {
    display: none;
  }

  .lore-header__nav {
    position: static;
    transform: none;
    visibility: visible;
    background: transparent;
    z-index: auto;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .lore-header__nav-list {
    flex-direction: row;
    gap: var(--space-8);
  }

  .lore-header__nav-list a {
    min-height: auto;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: 0;
  }

  /* Ensure scroll lock is released on desktop even if the checkbox
     happens to be checked from a prior mobile-width state. */
  html:has(.lore-header__toggle:checked) {
    overflow: auto;
  }

  /* Phase 4 (v1.1.0) — Active-page underline. Drawn via box-shadow inset
     on a pseudo-element to avoid the underline-clipping that text-
     decoration would suffer inside an inline-flex anchor that includes
     the ext-icon SVG. 2px cabernet, 4px below text baseline. */
  .lore-header__nav-list li.is-current a {
    position: relative;
  }
  .lore-header__nav-list li.is-current a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--color-cabernet);
  }

  /* Phase 4.1 — Desktop reveals the user pill that mobile hides.
     Counterpart to the mobile-first base rule for
     .lore-header__user-wrap. */
  .lore-header__user-wrap {
    display: inline-flex;
  }

  /* Phase 4 (v1.1.0) — Mobile overlay identity/account block hidden on
     desktop (the user pill in .lore-header__actions is the desktop UI). */
  .lore-header__overlay-account {
    display: none;
  }
}