/**
 * nav.css
 *
 * Styling for layouts/nav.php, the site-wide header. Loaded on every page
 * (see layouts/head.php) — unlike the per-page stylesheets elsewhere in
 * this project, this one has no conditional gate. Same palette as
 * search.css/listing-detail.css/home.css (#12233D text, #DCE1E8 borders,
 * #1E40AF accent) for visual consistency across the site.
 *
 * Two independent CSS-only interaction patterns, no JS for open/close:
 *  - Desktop dropdowns (Search, Mortgages, Pro Features, Contact Us): all
 *    four now share one full-width "mega menu" shape (.sn-mega — see that
 *    section further down), hover/focus-revealed via :has().
 *  - Mobile menu: a <details>/<summary> hamburger, same native-<details>
 *    toggle pattern search.css's .sr-filter-pill already established for
 *    this project rather than a checkbox hack or JS.
 */

.sn-header {
  position: relative;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid #DCE1E8;
}

.sn-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.sn-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Height fixed, width auto — keeps the logo's own aspect ratio (see the
   width/height attributes on the <img> itself, there purely so the
   browser can reserve the right box and avoid a layout shift before the
   image loads) regardless of what that ratio is. 52px comfortably fits
   within .sn-header's fixed 64px height at every viewport (3px of
   breathing room top/bottom) — nav.css has no header-height breakpoint
   of its own to match. */
.sn-logo img {
  display: block;
  height: 58px;
  width: auto;
}

/* ---- Desktop nav ---- */

.sn-nav-desktop {
  display: flex;
}

.sn-nav-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sn-nav-link {
  display: inline-flex;
  align-items: center;
  height: 64px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #12233D;
  text-decoration: none;
  white-space: nowrap;
}

/* "Pro Features" only — both copies (desktop .sn-nav-link and the
   mobile <summary>, see layouts/nav.php) — not a general nav-emphasis
   treatment. Rendered as a real filled button (.sn-pro-features-badge,
   below), not a border-only outline — an earlier border-only pass read
   as a thin blue line sitting too close to the text with no fill behind
   it, easy to miss as an actual button. font-weight lives directly on
   the <a> here, but the button look itself lives on an INNER <span>
   instead (.sn-pro-features-badge) — deliberately not on this element,
   so the button's own box-sizing has zero effect on .sn-nav-link's own
   fixed 64px height (needed so this link's hoverable area lines up
   exactly with .sn-mega's own top edge — see that section below). */
.sn-nav-link.sn-pro-features-bold {
  font-weight: 700;
}

/* The button itself — sized to its own text + padding (no explicit
   height), vertically centered inside the full 64px link via that
   link's own align-items: center (base .sn-nav-link rule), same as it
   already centers this link's plain-text content. Filled background
   (this site's established primary blue) + white text reads as a real,
   clickable button rather than a border-only outline; darkens on hover
   the same way every other filled-blue control on this site does
   (search.css's .sr-search-btn family, etc.). Horizontal padding lives
   here now (not just the <a>'s own 14px around it) so the button's own
   edges are visually where the fill actually is. */
.sn-pro-features-badge {
  display: inline-block;
  padding: 8px 16px;
  background: #1E40AF;
  color: #FFFFFF;
  border-radius: 6px;
  transition: background 0.15s ease;
}

/* Darkens the button's FILL on hover, same convention as the site's
   other filled-blue buttons. The badge's own color: #FFFFFF above stays
   in effect on hover regardless — an element's own explicit color
   always wins over an ancestor's inherited value (.sn-nav-link:hover
   sets color: #1E40AF on the <a>, below), so no separate text-color
   override is needed here. */
.sn-nav-link.sn-pro-features-bold:hover .sn-pro-features-badge {
  background: #16327F;
}

.sn-nav-link:hover {
  color: #1E40AF;
}

/* Mortgage Pre-Qualification/Mortgage Calculator's mobile sublist icons
   only (see layouts/nav.php) — the desktop mega panel's own copy of
   this same icon is .sn-mega-feature-icon instead (see that section
   below). Base size/color matches this project's existing icon
   convention, css/listing-detail.css's own .ld-share-btn svg (16px,
   #4B5A70 default, #1E40AF on hover), rather than inventing a new one.
   flex-shrink: 0 keeps it from being squeezed by its own label's text
   at a narrow viewport. */
.sn-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #4B5A70;
}

/* Icon-follows-link-hover treatment for that same mobile sublist row
   (.sn-nav-mobile-sublist a, further down) — kept as its own rule since
   that link isn't a .sn-mega-item/.sn-mega-feature-link. */
.sn-nav-mobile-sublist a:hover .sn-dropdown-icon {
  color: #1E40AF;
}

/* ---- All four desktop dropdowns: one full-width mega-menu shape ---- */
/* Search, Mortgages, Pro Features, and Contact Us all use this same
   .sn-mega panel — hover/focus-revealed, full header-bar width. See
   layouts/nav.php's own docblock for the structural writeup (why each
   panel is a SIBLING of .sn-inner rather than a descendant of its trigger <li>, and how
   data-mega-trigger/data-mega pair each trigger with its own panel now
   that there's no DOM nesting between them to rely on). This section
   covers just the CSS mechanics.

   .sn-mega is a sibling of .sn-inner (a direct child of .sn-header —
   see layouts/nav.php), not nested inside any triggering <li>. That's
   what lets left: 0; right: 0 resolve against .sn-header's own box —
   already position: relative, with no max-width of its own, so it
   already spans the full header bar edge-to-edge — instead of the
   deliberately narrower .sn-nav-list every dropdown used to resolve
   against. There is no OTHER element in this header that already has
   both position: relative AND the header's own full rendered width, so
   .sn-header is the only correct anchor.

   top: 64px, not top: 100% — deliberately not the more typical pattern.
   .sn-header's own border-bottom (1px, see that rule above) sits
   OUTSIDE its 64px content box (added by border-box after
   content+padding), so top: 100% of .sn-header's own total rendered
   box (65px, content + border) would land .sn-mega's top edge 1px BELOW
   .sn-nav-link's own bottom edge (y: 64, its only source of height) — a
   genuine (if tiny) dead-hover-gap the :has() chain below can't paper
   over. top: 64px (measured from .sn-header's own top, which has no
   padding of its own) lands .sn-mega's top edge at the EXACT same y: 64
   line .sn-nav-link's box already ends at — zero gap, not just a
   visually-imperceptible near-zero one. (This also means .sn-mega's own
   opaque background paints over .sn-header's 1px border for the panel's
   full width while open — harmless; the panel's own border-bottom below
   takes over as the visible edge in that state.

   No box-shadow here (deliberately, unlike .sn-nav-mobile-panel below,
   which keeps one) — a shadow here would read as a visible seam between
   .sn-header and the open panel; omitting it lets the two appear as one
   continuous surface, since .sn-mega's top edge already lines up exactly
   with .sn-header's own bottom edge (see the top: 64px reasoning above). */
.sn-mega {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid #DCE1E8;
}

/* The hover/focus chain, via :has() keyed off the data-mega-trigger/
   data-mega pairing (see layouts/nav.php) rather than a plain
   descendant-combinator ".trigger:hover .panel" — necessary because
   .sn-mega is never a descendant of the <li> that triggers it. Two
   pairs per dropdown, both required:
     - :has([data-mega-trigger="X"]:hover / :focus-within) — opens it
       from the trigger link itself.
     - :has([data-mega="X"]:hover / :focus-within) — keeps it open once
       the cursor/focus has moved DOWN into the panel and off the
       trigger entirely; without this second pair the panel would blink
       shut the instant the mouse crossed from the trigger link into the
       mega menu below, since at that moment the trigger's own :hover
       has already gone false and nothing else keeps the first pair
       true. Together, this closes the hover-chain gap to zero for all
       four dropdowns, the same standard the original Search-only
       version was held to. Re-verified after generalizing this to
       Mortgages/Pro Features/Contact Us too: hovering each of the 4
       triggers and dragging the cursor diagonally down into its own
       panel to click something, not just visually inspecting it. */
.sn-header:has([data-mega-trigger="search"]:hover) [data-mega="search"],
.sn-header:has([data-mega-trigger="search"]:focus-within) [data-mega="search"],
.sn-header:has([data-mega="search"]:hover) [data-mega="search"],
.sn-header:has([data-mega="search"]:focus-within) [data-mega="search"],
.sn-header:has([data-mega-trigger="mortgages"]:hover) [data-mega="mortgages"],
.sn-header:has([data-mega-trigger="mortgages"]:focus-within) [data-mega="mortgages"],
.sn-header:has([data-mega="mortgages"]:hover) [data-mega="mortgages"],
.sn-header:has([data-mega="mortgages"]:focus-within) [data-mega="mortgages"],
.sn-header:has([data-mega-trigger="pro-features"]:hover) [data-mega="pro-features"],
.sn-header:has([data-mega-trigger="pro-features"]:focus-within) [data-mega="pro-features"],
.sn-header:has([data-mega="pro-features"]:hover) [data-mega="pro-features"],
.sn-header:has([data-mega="pro-features"]:focus-within) [data-mega="pro-features"],
.sn-header:has([data-mega-trigger="contact-us"]:hover) [data-mega="contact-us"],
.sn-header:has([data-mega-trigger="contact-us"]:focus-within) [data-mega="contact-us"],
.sn-header:has([data-mega="contact-us"]:hover) [data-mega="contact-us"],
.sn-header:has([data-mega="contact-us"]:focus-within) [data-mega="contact-us"] {
  display: block;
}

/* max-width: 1140px + the same 16px side padding as .sn-inner (see that
   rule above) — keeps each mega panel's own content aligned under the
   logo/nav/phone above it, even though .sn-mega itself (above) spans
   the full edge-to-edge header width behind this content. Shared by all
   four panels' content — Search's own 3-column-plus-callout layout and
   the other three's featured-item-plus-simple-list layout (below) both
   sit inside this same wrapper. */
.sn-mega-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 48px 28px 16px;
  display: flex;
  gap: 40px;
}

/* ---- Search only: 3 categorized columns + a promo callout ---- */
/* Search alone has enough content to justify filling the panel's full
   width; the other three dropdowns' much shorter content instead uses
   .sn-mega-feature below. */

/* The 3 categorized columns, flexed together as one group so they share
   the space to the callout's left evenly — .sn-mega-callout (below) is a
   fixed width, this group takes whatever's left. */
.sn-mega-columns {
  display: flex;
  flex: 1 1 auto;
  gap: 32px;
}

.sn-mega-col {
  flex: 1 1 0;
  min-width: 0;
}

.sn-mega-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #DCE1E8;
}

.sn-mega-col-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #1E40AF;
}

.sn-mega-col-title {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  color: #12233D;
  letter-spacing: 0.02em;
}

/* Purely decorative (see layouts/nav.php — no href on the category
   heading itself, just the small arrow the reference design pairs with
   it) — not a second, redundant link stacked on top of the two/three
   real item links already right below it in the same column. */
.sn-mega-col-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #97A3B5;
}

/* The visually-distinct promo panel, set apart from the 3 plain columns
   via its own tinted background + border rather than just whitespace.
   Fixed width, not flexed like the columns — a promo callout reads best
   at a consistent size regardless of how much room the columns beside
   it happen to take up. */
.sn-mega-callout {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  background: #F3F6FC;
  border: 1px solid #DCE1E8;
  border-radius: 10px;
}

/* Pill-shaped accent badge — small, filled, rounded fully via
   border-radius: 999px. */
.sn-mega-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1E40AF;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sn-mega-callout-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #12233D;
}

.sn-mega-callout-body {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  color: #4B5A70;
  line-height: 1.5;
}

.sn-mega-callout-link {
  font-size: 13px;
  font-weight: 700;
  color: #1E40AF;
  text-decoration: none;
}

.sn-mega-callout-link:hover {
  color: #16327F;
  text-decoration: underline;
}

/* ---- Mortgages, Pro Features, Contact Us: every item at equal weight ---- */
/* An earlier version of this gave one item a large "featured" card
   (.sn-mega-featured) and rendered the rest as a plainer stacked list
   beside it (.sn-mega-list, reusing Search's own .sn-mega-item — see
   that rule's own comment, below, for why it's Search-only now).
   Retired in favor of .sn-mega-feature: every item in these three
   dropdowns is now its own instance of this ONE class, so none of them
   can end up looking smaller/plainer than another — see
   layouts/nav.php for why each dropdown has exactly two.
   Left-anchored, not stretched to fill the panel: flex: 0 0 380px (a
   fixed basis, not Search's own flex: 1 1 auto/flex: 0 0 260px pairing)
   means .sn-mega-inner's plain flex-start packing (no justify-content
   override) leaves open space to the right of the last one instead of
   forcing this much sparser content across the full panel width. */
.sn-mega-feature {
  display: flex;
  flex: 0 0 380px;
  gap: 20px;
  align-items: flex-start;
}

/* The large icon standing in for a photo — same line-art stroke style/
   weight (viewBox 24x24, stroke-width 1.8, round caps/joins) as Search's
   own .sn-mega-col-icon, just bigger, so it reads as this card's
   primary visual element rather than a small decoration. Identical size
   for every .sn-mega-feature in a dropdown — the whole point of this
   being one shared class instead of a "featured" one-off. */
.sn-mega-feature-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: #1E40AF;
}

.sn-mega-feature-content {
  display: flex;
  flex-direction: column;
  padding-top: 2px;
}

.sn-mega-feature-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #12233D;
}

.sn-mega-feature-desc {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 400;
  color: #4B5A70;
  line-height: 1.5;
}

.sn-mega-feature-link {
  font-size: 13px;
  font-weight: 700;
  color: #1E40AF;
  text-decoration: none;
}

.sn-mega-feature-link:hover {
  color: #16327F;
  text-decoration: underline;
}

/* ---- Search only ---- */
/* .sn-mega-item's own bold-title-plus-muted-description row, used by
   Search's 3 columns exclusively — Mortgages/Pro Features/Contact Us
   used to reuse this too (for their old "simple list" item, see this
   section's own top comment) but now use .sn-mega-feature for every
   item instead, so this is Search-only again. margin: 0 -10px cancels
   its own padding: 0 10px on the inline axis, so the hover background
   below can extend slightly past the title/description text without
   shifting that text's own left edge out of alignment with
   .sn-mega-col-head above it. */
.sn-mega-item {
  display: block;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
}

.sn-mega-item:hover {
  background: #F7F8FA;
}

.sn-mega-item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #12233D;
}

.sn-mega-item:hover .sn-mega-item-title {
  color: #1E40AF;
}

/* Muted gray, smaller, regular weight — deliberately a clear step down
   from .sn-mega-item-title's bold 14px. */
.sn-mega-item-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #6B7686;
  line-height: 1.4;
}

/* Real tel: link (see layouts/nav.php's docblock) — styled as a distinct
   accent-colored CTA rather than another plain .sn-nav-link. */
.sn-phone {
  display: inline-flex;
  align-items: center;
  height: 64px;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1E40AF;
  text-decoration: none;
  white-space: nowrap;
}

.sn-phone:hover {
  color: #16327F;
}

/* ---- Mobile menu ---- */

.sn-nav-mobile {
  display: none;
}

.sn-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  list-style: none;
}

.sn-hamburger::-webkit-details-marker {
  display: none;
}

.sn-hamburger::marker {
  content: '';
}

.sn-hamburger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: #12233D;
}

.sn-nav-mobile[open] .sn-hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.sn-nav-mobile[open] .sn-hamburger span:nth-child(2) {
  opacity: 0;
}

.sn-nav-mobile[open] .sn-hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.sn-nav-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid #DCE1E8;
  box-shadow: 0 8px 24px rgba(18, 35, 61, 0.16);
  padding: 8px 16px 16px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.sn-nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sn-nav-mobile-list > li {
  border-top: 1px solid #DCE1E8;
}

.sn-nav-mobile-list > li:first-child {
  border-top: none;
}

.sn-nav-mobile-link {
  display: block;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 600;
  color: #12233D;
  text-decoration: none;
}

/* Same tel: link as .sn-phone's desktop counterpart, styled to match the
   other .sn-nav-mobile-link rows but accent-colored as a CTA. */
.sn-nav-mobile-phone {
  display: block;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1E40AF;
  text-decoration: none;
}

/* Nested <details> for each dropdown's sub-links, same collapse-to-
   reveal mechanism as the outer hamburger, just scoped smaller. */
.sn-nav-mobile-sub summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 600;
  color: #12233D;
  cursor: pointer;
  list-style: none;
}

/* Mobile copy of the "Pro Features"-only bold + button treatment — the
   button look itself is the SAME .sn-pro-features-badge span/rule the
   desktop copy uses (see that rule's own comment above), so this just
   needs to bold the summary text — no fixed-height/hover-geometry
   constraint here to work around (this is a plain stacked
   <details>/<summary> accordion row, not a hover-triggered dropdown
   trigger). The "+"/"−" toggle indicator (::after, below) sits outside
   the badge span, unaffected, still at this row's own right edge via
   the base rule's justify-content: space-between. */
.sn-nav-mobile-sub summary.sn-pro-features-bold {
  font-weight: 700;
}

.sn-nav-mobile-sub summary::-webkit-details-marker {
  display: none;
}

.sn-nav-mobile-sub summary::marker {
  content: '';
}

.sn-nav-mobile-sub summary::after {
  content: '+';
  font-size: 18px;
  color: #4B5A70;
}

.sn-nav-mobile-sub[open] summary::after {
  content: '\2212';
}

.sn-nav-mobile-sublist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 12px;
}

.sn-nav-mobile-sublist li + li {
  margin-top: 2px;
}

/* display: flex (not block) — lets the two Mortgages links' own
   .sn-dropdown-icon (see layouts/nav.php) sit inline beside the label;
   every other sublist link with no icon lays out identically to
   display: block either way. */
.sn-nav-mobile-sublist a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 500;
  color: #4B5A70;
  text-decoration: none;
}

.sn-nav-mobile-sublist a:hover {
  color: #1E40AF;
}

@media (max-width: 900px) {
  .sn-nav-desktop {
    display: none;
  }

  .sn-nav-mobile {
    display: block;
  }

  /* Belt-and-suspenders, not strictly load-bearing: none of the
     [data-mega-trigger] triggers can be :hover/:focus-within'd once
     .sn-nav-desktop (their own ancestor) is display: none above, so the
     :has() chain driving any .sn-mega open can never fire here
     regardless. Stated explicitly anyway, matching this file's own
     habit elsewhere of not leaving a desktop-only panel's mobile
     behavior merely implied. */
  .sn-mega {
    display: none;
  }
}