/* ============================================================
   Matt Smith Realty Shared Shell v1.0 - header.css

   A 56px-tall fixed top bar injected across the three adult
   Matt Smith surfaces (Hub, Polygon Search, DisclosureIQ) and
   the CaliPOI parent surface. Never injected into CaliPOI kid
   mode. Never injected into the Find Homes BoldTrail page.

   This file assumes msr-tokens.css has loaded first. To stay
   robust when tokens fail to load (offline cache miss, slow
   CDN), the most important variables are duplicated below as
   fallbacks. Tools may choose to vendor msr-tokens.css inline
   to avoid that risk altogether.

   Self-contained: no framework dependencies, no external icon
   fonts. All glyphs are inline SVG injected by header.js.
   ============================================================ */

:root {
  /* Fallbacks if msr-tokens.css did not load. Real tokens win. */
  --shell-bg:     #08111E;
  --shell-fg:     #FAF7F2;
  --shell-accent: #C9A961;
  --shell-height: 56px;
}

/* The shell sits above everything; tools may need to pad their
   own first scroll container. header.js sets body padding-top
   automatically. */
.msr-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: var(--shell-height);
  background: var(--shell-bg);
  color: var(--shell-fg);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Brand block (left) */
.msr-shell-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.msr-shell-brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--shell-accent);
  text-transform: uppercase;
}

.msr-shell-brand-sub {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  margin-top: 3px;
}

/* Nav (right, desktop) */
.msr-shell-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.msr-shell-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: rgba(250, 247, 242, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}

.msr-shell-nav a:hover,
.msr-shell-nav a:focus-visible {
  color: var(--shell-fg);
  background: rgba(201, 169, 97, 0.08);
  outline: none;
}

.msr-shell-nav a:focus-visible {
  box-shadow: 0 0 0 2px var(--shell-accent);
}

/* Hover gold underline */
.msr-shell-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: var(--shell-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.msr-shell-nav a:hover::after,
.msr-shell-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Active tool: stronger gold underline + brighter text */
.msr-shell-nav a[aria-current="page"] {
  color: var(--shell-fg);
}

.msr-shell-nav a[aria-current="page"]::after {
  height: 2px;
  background: var(--shell-accent);
  transform: scaleX(1);
  box-shadow: 0 0 6px rgba(201, 169, 97, 0.35);
}

/* Inline SVG icons sit before the label */
.msr-shell-nav-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.msr-shell-nav a[aria-current="page"] .msr-shell-nav-icon {
  opacity: 1;
}

/* Hamburger button (mobile only) */
.msr-shell-burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--shell-fg);
  border-radius: 6px;
}

.msr-shell-burger:focus-visible {
  outline: 2px solid var(--shell-accent);
  outline-offset: 2px;
}

.msr-shell-burger svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Mobile breakpoint */
@media (max-width: 720px) {
  .msr-shell {
    padding: 0 16px;
  }

  .msr-shell-brand-name {
    font-size: 14px;
    letter-spacing: 2.5px;
  }

  .msr-shell-brand-sub {
    display: none;
  }

  .msr-shell-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .msr-shell-nav {
    position: fixed;
    top: var(--shell-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--shell-bg);
    border-bottom: 1px solid rgba(201, 169, 97, 0.18);
    padding: 8px 12px 16px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .msr-shell-nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .msr-shell-nav a {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 8px;
  }

  .msr-shell-nav a::after {
    left: 16px;
    right: auto;
    width: 24px;
    bottom: 8px;
  }

  .msr-shell-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* Reduced motion: drop transitions */
@media (prefers-reduced-motion: reduce) {
  .msr-shell-nav a,
  .msr-shell-nav a::after,
  .msr-shell-nav {
    transition: none !important;
  }
}

/* High-contrast: bolder underline on active item */
@media (forced-colors: active) {
  .msr-shell {
    border-bottom: 1px solid CanvasText;
  }
  .msr-shell-nav a[aria-current="page"]::after {
    background: CanvasText;
  }
}

/* When the host page already has its own sticky top bar (e.g.
   Polygon Search's .site-header), header.js sets this attribute
   on <body>. We add a CSS hook so per-tool stylesheets can
   compensate without touching the shell rules. */
body[data-msr-shell-padded="true"] {
  /* header.js writes padding-top inline; this attribute exists
     only as a selector hook for per-tool overrides. */
}