/**
 * 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:
 *  - Desktop dropdowns (Search, Mortgages, Pro Features, Contact Us): plain
 *    :hover/:focus-within on .sn-nav-item--dropdown, matching the "hover
 *    reveals a dropdown" behavior asked for specifically (distinct from the
 *    <details> pattern used below and elsewhere in this project, e.g.
 *    search.css's .sr-filter-pill). All four nav items reuse this exact
 *    same class/markup shape — no per-item CSS needed to add another one.
 *  - 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.
 *
 * ---- "Mega menu" dropdowns, scoped to the nav items row ----
 * .sn-dropdown is positioned against .sn-nav-list (the <ul> itself) —
 * NOT .sn-header. An earlier version of this anchored to .sn-header,
 * which made the panel span the ENTIRE header (the full viewport width
 * on a wide screen, reaching under the logo on the left and the phone
 * number on the right) — wider than intended; reverted in favor of
 * .sn-nav-list once it was confirmed (by reading the actual markup
 * below, not assumed) to already be an existing element that wraps
 * EXACTLY the nav items — Search through Contact Us — and nothing else:
 * .sn-phone is <nav class="sn-nav-desktop">'s own child, a SIBLING of
 * .sn-nav-list, not nested inside it, so .sn-nav-list's own rendered box
 * (a flex row sized to its own <li> content, no explicit width) already
 * stops exactly at "Contact Us" with no logo/phone bleeding in — no new
 * wrapper element was needed, just this one position: relative rule
 * below plus .sn-dropdown's own left: 0/right: 0/width: 100% now
 * resolving against this element instead of .sn-header. Still spans
 * WIDER than any single nav item (the actual bug the "mega menu" change
 * was fixing), just correctly capped at the nav row's own width now
 * rather than the full page's.
 *
 * .sn-nav-item itself still carries no position: relative of its own
 * (see that rule's own comment below) — .sn-dropdown's nearest
 * POSITIONED ancestor needs to skip past it either way, whether landing
 * on .sn-nav-list (now) or .sn-header (before).
 *
 * No hover-chain gap: .sn-dropdown remains a DOM CHILD of
 * .sn-nav-item--dropdown throughout (only its CSS positioning CONTEXT
 * has ever changed, never its place in the markup) — :hover/:focus-within
 * on the <li> is driven by the DOM tree, not by rendered screen position,
 * so hovering the now-relocated .sn-dropdown (or anything inside it)
 * still counts as hovering .sn-nav-item--dropdown regardless of where it
 * paints. Geometrically: .sn-nav-list has no padding/border/margin of its
 * own, and every .sn-nav-link inside it is exactly 64px tall (its only
 * source of height) — so .sn-nav-list's own bottom edge (where
 * .sn-dropdown's top: 100% now starts) lands at the exact same line as
 * .sn-nav-item's own bottom edge (where the hoverable .sn-nav-link box
 * ends), same as it did against .sn-header before. Re-confirmed after
 * THIS width change too, the same way as the first: actually hovering
 * each of the 4 dropdown items and dragging the cursor diagonally down
 * into the panel to click something, not just visually inspecting the
 * new narrower width.
 *
 * ---- Search, Pro Features, Contact Us: narrow vertical-list panels ----
 * ---- Mortgages is the only one still a mega menu ----
 * Mortgages still uses the shape described above (.sn-dropdown/
 * .sn-dropdown-inner, unedited, anchored to .sn-nav-list) — its two large
 * .sn-dropdown-link--stacked icon cards genuinely want the wider panel.
 * Search, Pro Features, and Contact Us instead carry a second class on
 * both their <li> (.sn-nav-item--dropdown-list) and their .sn-dropdown
 * (.sn-dropdown--list) — see those rules, below the ones described
 * above — which together anchor a narrow, content-width panel to the
 * triggering <li> itself instead of the shared row. Deliberately new
 * ADDITIVE classes rather than any edit to .sn-dropdown, .sn-dropdown-
 * inner, or the bare .sn-nav-item--dropdown, so Mortgages is structurally
 * unable to be affected by any of this. The same hover-chain reasoning
 * above still holds with the anchor moved from .sn-nav-list to the
 * individual <li>: both share the exact same top edge and the same fixed
 * 64px height, so .sn-dropdown's top: 100% lands at the identical Y
 * coordinate either way — zero new gap. Re-verified directly (not just
 * inferred from the geometry) by hovering all four dropdowns — Search,
 * Mortgages, Pro Features, Contact Us — and dragging the cursor
 * diagonally down into each one before clicking something inside it.
 */

.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;
}

/* position: relative — the dropdown anchor. .sn-dropdown's absolute
   positioning (left: 0/right: 0/width: 100%) resolves against THIS
   element specifically, not .sn-header — see this file's own top
   docblock ("'Mega menu' dropdowns, scoped to the nav items row") for
   why .sn-nav-list, an already-existing element, is exactly the right
   width for that (Search through Contact Us, no logo/phone). */
.sn-nav-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No position: relative rule here on the bare .sn-nav-item--dropdown
   (unlike a typical dropdown-trigger pattern) — deliberately left
   position: static (the default) so .sn-dropdown's absolute positioning
   skips past this element on its way up to .sn-nav-list instead of
   anchoring to it. See this file's own top docblock for the full
   reasoning. Still true for Mortgages today, the only remaining mega
   menu. Search, Pro Features, and Contact Us are the exception, via the
   separate .sn-nav-item--dropdown-list class below (added alongside, not
   replacing, .sn-nav-item--dropdown on those three <li>s — see
   layouts/nav.php) — those three DO need their own dropdown anchored to
   their own trigger, not to the shared row, now that .sn-dropdown--list
   (below the .sn-dropdown rules) sizes their panel to content instead of
   the full nav row. Scoped to a second class rather than changing what
   the bare .sn-nav-item--dropdown rule does, so Mortgages' positioning is
   structurally unaffected. */
.sn-nav-item--dropdown-list {
  position: relative;
}

.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.
   "Pro Features" is itself a .sn-nav-item--dropdown trigger, and this
   file's own top docblock documents that EVERY .sn-nav-link must stay
   exactly 64px tall: that fixed height is what makes .sn-nav-list's
   bottom edge (where .sn-dropdown's top: 100% starts) line up exactly
   with this link's own bottom edge (the hoverable area), with no dead
   gap between them. Sizing the button box directly on THIS element
   instead would reopen exactly that gap for Pro Features' own dropdown
   — a functional regression, not just a visual one. Wrapping the button
   look around an inner, naturally content-sized span instead gets the
   compact-button look with zero effect on the <a>'s own box. */
.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;
}

/* Hover- or keyboard-focus-revealed, CSS-only — no JS toggles this.
   Positioned against .sn-nav-list (left: 0; right: 0; width: 100%), not
   .sn-nav-item — see this file's own top docblock for why this spans the
   nav items row rather than sitting pinned under one nav item (or, as an
   earlier version had it, the entire header). top: 100% lands flush
   against .sn-nav-list's own bottom edge with zero gap — see that same
   docblock for the hover-chain proof. */
.sn-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid #DCE1E8;
  box-shadow: 0 8px 24px rgba(18, 35, 61, 0.16);
}

.sn-nav-item--dropdown:hover .sn-dropdown,
.sn-nav-item--dropdown:focus-within .sn-dropdown {
  display: block;
}

/* .sn-dropdown itself owns only the panel's own background/border/
   shadow (sized off .sn-nav-list now, see that element's own comment
   above) — this owns the actual link layout inside it. No max-width/
   margin: auto here (an earlier version had one, back when .sn-dropdown
   itself spanned the full page width and needed something to keep its
   links from sprawling edge-to-edge — moot now that the panel itself is
   already capped at the nav row's own width). A plain flex-wrap row (not
   a vertical stack) — with the panel already wider than any single item
   that triggers it, a cramped single column at the left edge would waste
   that space; row-wrap uses it and still degrades gracefully to fewer
   per row as the viewport narrows. This is the base/default shape, still
   used as-is by Mortgages (the only remaining mega menu); Search, Pro
   Features, and Contact Us all override it with the narrower
   vertical-list shape below (.sn-dropdown--list), which does NOT touch
   this rule. */
.sn-dropdown-inner {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* Mortgages only — its dropdown holds exactly two large
   .sn-dropdown-link--stacked cards (see that rule's own comment), which
   otherwise sit pinned to the panel's left edge under the default
   flex-start (the right behavior for the other three dropdowns' own
   plain text-link rows, which are meant to read as a left-aligned list,
   not as a couple of cards adrift in a wide, mostly-empty bar). :has()
   scopes this to just the one dropdown that actually contains stacked
   cards, rather than recentering every dropdown's own content — same
   :has()-based scoping search.css's own .sr-filter-pill rule already
   uses elsewhere in this project. */
.sn-dropdown-inner:has(.sn-dropdown-link--stacked) {
  justify-content: center;
}

/* Search, Pro Features, and Contact Us only — a distinct modifier class
   layered on TOP of the shared .sn-dropdown/.sn-dropdown-inner rules
   above (never edited directly), specifically so Mortgages' own
   full-nav-width "mega menu" panel is structurally unable to be affected
   by this at all — it keeps using the base rules completely untouched.
   See layouts/nav.php for exactly which three <div class="sn-dropdown">
   elements carry this second class.
   right: auto is set explicitly (not just omitted) so this doesn't land
   in the CSS spec's over-constrained left/width/right case together with
   the base .sn-dropdown rule's own right: 0 — left: 0 (inherited
   from the base rule) + this rule's own width alone fully determine the
   panel's box, with zero ambiguity about which of the three the browser
   is supposed to ignore. (Pro Features and Contact Us both then override
   this same left-anchor via .sn-dropdown--list-end below — see that
   rule's own comment for why.) 220px comfortably fits the longest item
   in any of the three dropdowns ("Single Family Homes" / "Condos &
   Apartments") plus .sn-dropdown-inner's own padding below, without
   reading as an accidental leftover mega-menu width. */
.sn-dropdown--list {
  right: auto;
  width: 220px;
}

/* Vertical stack — one item per row, full width of the now-narrow panel
   — instead of the base .sn-dropdown-inner's flex-wrap row (see that
   rule's own comment for why row-wrap is still correct for the OTHER
   two dropdowns' wider panel). align-items: stretch (overriding the
   base rule's implicit flex-start) is what makes each row's hover
   background span the full panel width edge-to-edge rather than just
   hugging its own text. */
.sn-dropdown--list .sn-dropdown-inner {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
}

/* A little more vertical breathing room per row than the base 8px —
   comfortable as a full-width list row, matching this project's
   existing comfortable-row convention (e.g. .sn-nav-mobile-link's own
   14px vertical padding) rather than the base rule's tighter value,
   which was sized for a compact item sitting beside others in a wide
   row, not a standalone full-width list row. */
.sn-dropdown--list .sn-dropdown-link {
  padding: 10px 12px;
}

/* Pro Features and Contact Us only, each layered as a third class
   alongside .sn-dropdown and .sn-dropdown--list on that one <div> (see
   layouts/nav.php) — flips the anchor edge from left to right. Search
   (the FIRST nav item) always has plenty of room to ITS right, so
   hanging its panel rightward off a left: 0 anchor (the plain
   .sn-dropdown--list default) never risks running off the viewport.
   Pro Features and Contact Us are the opposite case: they're the last
   two items before .sn-phone, and .sn-inner's own max-width: 1140px
   provides zero spare centering margin at real desktop widths just
   above the 900px mobile breakpoint (a ~901px window) — a panel hanging
   rightward from either of them at that width risks running off the
   edge of the browser window entirely. right: 0 instead anchors the
   panel's own right edge to its trigger's right edge, so it hangs
   LEFTWARD, back over space the earlier nav items already occupy —
   space that's guaranteed to already be on-screen, since those items
   themselves render there regardless of viewport width. left: auto
   pairs with it for the same over-constrained-box reason
   .sn-dropdown--list's own right: auto exists (see that rule's
   comment) — right + width alone fully determine this panel's box,
   with no ambiguity. */
.sn-dropdown--list-end {
  left: auto;
  right: 0;
}

/* display: flex (not block) — lets .sn-dropdown-icon (see below) sit
   inline beside the label via gap, with no separate wrapper needed. A
   single bare text node inside a flex container lays out identically to
   display: block for every dropdown link that has no icon, so this is
   safe to apply here rather than only on the two rows that actually use
   it. */
.sn-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #12233D;
  text-decoration: none;
  white-space: nowrap;
}

.sn-dropdown-link:hover {
  background: #F7F8FA;
  color: #1E40AF;
}

/* Mortgage Pre-Qualification/Mortgage Calculator only (see
   layouts/nav.php) — 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.
   This base 16px is what the MOBILE sublist's own copies of these same
   two links still use as-is; the desktop dropdown's copies additionally
   get .sn-dropdown-icon--large layered on top (see below) instead — see
   .sn-dropdown-link--stacked's own comment for why desktop and mobile
   diverge here. flex-shrink: 0 keeps the (mobile, base-size) icon from
   being squeezed by its own label's text at a narrow viewport, the one
   place .sn-dropdown-link's flex-wrap row above could otherwise compress
   it — moot for the large desktop version, which has its own fixed
   width (see .sn-dropdown-link--stacked) nothing else competes with.
   */
.sn-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #4B5A70;
}

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

/* Desktop only (see .sn-dropdown-link--stacked below) — the icon as
   THE primary visual element for these two items, not a small
   decoration beside the text. 2.5x the base 16px — a real visual
   anchor, not a minor bump. Same viewBox/path data as the base size
   (layouts/nav.php reuses the exact same <svg> markup, just with this
   extra class added), so this is purely a rendered-size change; each
   icon's own stroke-width scales up proportionally for free (SVG
   strokes scale with the viewBox -> viewport transform by default). */
.sn-dropdown-icon--large {
  width: 40px;
  height: 40px;
}

/* Desktop-only modifier on .sn-dropdown-link, for these same two
   Mortgages items — icon on TOP, label below, rather than
   .sn-dropdown-link's own default horizontal row (icon beside text).
   Not applied to the mobile sublist's copies of these links (those keep
   the small horizontal icon+text row unchanged) — a large vertical icon
   card fits a full-width hover panel with room to spare; it doesn't fit
   .sn-nav-mobile-sublist's own compact, single-column tap-list rows
   nearly as well, and nothing asked for that list's layout to change.
   align-items: center (inherited from the base rule) still applies here
   and, in column mode, centers the icon and label horizontally rather
   than vertically — exactly what a stacked card needs, no override
   required. Fixed-ish width keeps both cards the same size regardless of
   their own label's length ("Mortgage Calculator" vs. the longer
   "Mortgage Pre-Qualification") — white-space: normal (overriding the
   base rule's nowrap) is what lets that longer label actually wrap onto
   a second line within it instead of overflowing the card. */
.sn-dropdown-link--stacked {
  flex-direction: column;
  gap: 10px;
  width: 140px;
  padding: 18px 12px;
  text-align: center;
  white-space: normal;
}

/* The label text, now secondary/supporting to the large icon above it —
   noticeably smaller than a normal .sn-dropdown-link's own 13px, and
   than the icon's own 40px, on purpose (see layouts/nav.php's own
   comment on this pairing). font-weight/color both still inherited
   from .sn-dropdown-link itself — only size/line-height need overriding
   here for the two-line-wrap case above. */
.sn-dropdown-link-label {
  font-size: 11px;
  line-height: 1.3;
}

/* 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 the Search 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) for the same reason .sn-dropdown-link uses it
   (see that rule's own comment) — the two Mortgages links' own
   .sn-dropdown-icon (see layouts/nav.php) needs it to 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;
}

/* Same icon-follows-link-hover treatment as .sn-dropdown-link's own
   version above, kept as its own rule since these two Mortgages links'
   mobile copies use .sn-nav-mobile-sublist a, not .sn-dropdown-link. */
.sn-nav-mobile-sublist a:hover .sn-dropdown-icon {
  color: #1E40AF;
}

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

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