/* Find My Nursery — floating header styles.
   Namespaced under #fmn-floating-header so nothing here can leak into or
   clash with the rest of the Astra/Elementor site. */

/* Guaranteed floating gap (added 15 Sep 2026, per Gameed - "needs a tiny
   space between the nav and the top of the screen so it looks like it's
   floating"). Was a flat 4vh everywhere, which is fine on normal desktop/
   mobile heights but can shrink close to nothing on very short viewports
   (landscape phones, small embedded windows) - at 4vh the pill can end up
   reading as flush against the top edge instead of floating above it.
   max() keeps the same 4vh look on typical screens but guarantees at
   least 16px of real clearance no matter how short the viewport gets.
   Defined once on :root (not scoped to #fmn-floating-header) since the
   breadcrumb-clearance rule below also needs the same value and that
   element lives outside the header's own DOM subtree. */
:root {
  --fmn-header-top: max(16px, 4vh);
}

/* Hide Astra's own native header (added 13 Sep 2026 — see the long comment
   in inc/fmn-floating-header.php for why this is CSS-hidden rather than
   removed via remove_action(): Astra 4.13.9 registers its real header
   through its Header Builder class in a way this child theme can't safely
   reach/remove without risking a fatal. Confirmed live these are the two
   real wrapper elements Astra renders (desktop + mobile variants). display:none
   fully collapses them — no leftover blank space above our fixed pill. */
#ast-desktop-header,
#ast-mobile-header {
  display: none !important;
}

#fmn-floating-header,
#fmn-floating-header * {
  box-sizing: border-box;
}

/* 15 Sept 2026 — real bug found on /for-school-networks/: a browser's
   default a:visited colour (usually a dull blue/purple) beats a plain
   class selector on specificity, so any nav link the visitor's browser
   has already visited (e.g. School Partners, after clicking through
   during testing) silently loses its intended dark colour and renders in
   the browser's own visited-link blue instead — looked like "the
   background is making the text white/off" but it's actually this. Only
   the 4 classes below print their text directly on the <a> itself (the
   others wrap their label in a child <span>, which :visited can't reach
   anyway, so they were never actually at risk). None had a :visited rule
   anywhere in this file — restating each one's own colour fixes it for
   good, on every page this header renders on, not just this one. */
#fmn-floating-header .fmn-nav-label:visited,
#fmn-floating-header .fmn-mobile-drill-title:visited,
#fmn-floating-header .fmn-panel-head-title:visited,
#fmn-floating-header .fmn-mobile-row-label:visited {
  color: #1e293b;
}
#fmn-floating-header .fmn-mobile-row-label.is-link:visited {
  color: #217a2c;
}
#fmn-floating-header a {
  text-decoration: none;
}

/* ---------- breadcrumb clearance (added 13 Sep 2026) ----------
   CC found the real element: Astra/Yoast render breadcrumbs as their own
   in-flow header row, .main-header-bar.ast-header-breadcrumb, which is a
   SEPARATE element from #ast-desktop-header/#ast-mobile-header (those are
   hidden above) and is NOT covered by that rule. Because our pill is
   position:fixed with zero in-flow height, this breadcrumb row renders
   right at the very top of the page and sits underneath the floating pill.
   Push it down to clear the pill's collapsed resting position (top: 4vh,
   ~54px tall) plus a visual gap, without touching Astra/Yoast's own
   breadcrumb template.
   Widened 15 Sep 2026 (54px -> 80px) to cover the new scroll-driven
   expand/collapse behaviour (fmn-floating-header.js): desktop now starts
   in the OPEN "nav" mode at the very top of the page, which is 80px tall,
   not the small pill's 54px. Clearance has to fit whichever state is
   tallest so the breadcrumb text is never briefly covered before the
   first scroll collapses it back down. */
.main-header-bar.ast-header-breadcrumb {
  /* Gap trimmed from 28px to 14px after live review (13 Sep 2026) —
     original had noticeably too much clearance below the pill. */
  padding-top: calc(var(--fmn-header-top) + 80px + 14px) !important;
  /* Transparent trial (added 15 Sep 2026, per Gameed - the flat white bar
     this row sits on read as a dead "white strip" at the top of every
     page, on top of/before the real page content. Astra ships this row
     with its own solid white background by default; overriding it here
     to transparent lets whatever's actually behind it (hero image, page
     background, GROW ECD wash, etc.) show through instead, without
     touching the padding-top above - so the breadcrumb text/links still
     sit at the same clear distance below the fixed pill and can't
     overlap it. This is an explicit trial: if it reads worse against any
     given page's real background, revert just this one declaration
     (background-color: transparent !important) back out - nothing else
     in this rule needs to change. */
  background-color: transparent !important;
  background: transparent !important;
}

/* ---------- hardening against theme-wide resets ----------
   Astra (and plenty of plugins) ship global `button`/`svg` styling meant
   for their own UI (a themed background/accent colour on every <button>,
   a `fill: currentColor; stroke: none` reset meant for solid icon-font
   SVGs). Our elements are plain <button>/<svg> tags, so without enough
   specificity those global rules win, which is exactly what produced the
   "blue button" and "empty circle" bugs. Re-declaring the same properties
   here, scoped to #fmn-floating-header and its portalled dropdowns/mobile
   panel, with !important, guarantees our own values always win regardless
   of what else the theme or a plugin declares. */
#fmn-floating-header button,
.fmn-dropdown button,
.fmn-mobile-view button {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  border-radius: 0 !important; /* individual buttons set their own radius below */
  -webkit-appearance: none !important;
  appearance: none !important;
}
#fmn-floating-header button:focus,
#fmn-floating-header button:focus-visible,
.fmn-dropdown button:focus,
.fmn-mobile-view button:focus {
  outline: 2px solid rgba(76, 175, 80, 0.5) !important;
  outline-offset: 2px;
}
#fmn-floating-header svg,
.fmn-dropdown svg,
.fmn-mobile-view svg {
  fill: none !important; /* our icons are stroke-drawn; a theme's icon-font
    reset forcing a fill can paint over/hide them entirely */
  /* Real bug found live 13 Sep 2026 (the "empty circle" X buttons): every
     icon svg sits inside a display:flex button/row with no flex-shrink set,
     so the browser's flex algorithm was shrinking the svg to 0 WIDTH (height,
     the cross axis, stayed correct — that mismatch is what gave it away).
     flex-shrink:0 stops it being treated as a shrinkable flex item at all. */
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.fmn-floating-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* the header itself takes no layout space - it floats */
  z-index: 999;
  font-family: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica Neue, sans-serif;
}

/* Not sticky on mobile while collapsed (added 14 Sep 2026, per live
   feedback) — the resting pill should scroll away with the page like a
   normal header, not float on screen the whole time you browse. Scoped to
   .fmn-is-collapsed only (toggled from the JS's existing mode-state
   tracking, see updateCollapsedClass() in fmn-floating-header.js) so an
   actually-OPEN panel stays position:fixed and can't scroll away
   mid-interaction — this component has no scroll-lock while open. Desktop
   is untouched; this only applies at the same 640px breakpoint the JS
   already uses to decide mobile vs. desktop mode. */
@media (max-width: 640px) {
  .fmn-floating-header.fmn-is-collapsed {
    position: absolute;
  }
  .fmn-floating-header.fmn-is-collapsed .fmn-island-wrap,
  .fmn-floating-header.fmn-is-collapsed .fmn-goo-stage {
    position: absolute;
  }
}

/* ---------- liquid-goo overlay: melts the bar + dropdown into one shape ---------- */
.fmn-goo-stage {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  filter: url(#fmn-liquid-goo);
}
.fmn-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 640ms cubic-bezier(0.22, 1, 0.36, 1), height 640ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease 220ms;
}
.fmn-goo-bar {
  position: absolute;
  top: var(--fmn-header-top);
  left: 50%;
  transform: translateX(-50%);
  width: 272px;
  height: 50px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.72);
}
.fmn-goo-dropdown {
  position: absolute;
  width: 280px;
  height: 70px;
  border-radius: 0 0 20px 20px;
  background: rgba(255, 255, 255, 0.72);
  left: 50%;
  top: calc(var(--fmn-header-top) + 66px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 160ms ease;
}
.fmn-goo-dropdown.is-open {
  opacity: 1;
}

/* ---------- the bar itself ---------- */
.fmn-island-wrap {
  position: fixed;
  top: var(--fmn-header-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.fmn-island {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0 22px;
  /* 25px, not 32px (14 Sept 2026 fix): this is the actual resting radius
     the JS spring computes for a 50px-tall pill (min(h/2, 32) = 25) once it
     runs a single tick - but the very first paint, before the deferred
     script executes, used to show this CSS value instead. 32px vs 25px on
     a 50px pill reads as a small but real corner-radius snap the instant
     JS took over. Matching it here means first paint already looks like
     what JS would have set anyway - nothing to snap to. */
  border-radius: 25px;
  width: 272px;
  height: 50px;
  /* The open/close animation itself (rewritten 22 Sep 2026 - Gameed:
     "on mobile it slows, on desktop it breaks through"). This used to be
     driven frame-by-frame from JS by a hand-rolled spring, which had a
     bug that made its SPEED depend on the device's frame rate - see the
     long writeup on sizeTo() in fmn-floating-header.js. A CSS transition
     is wall-clock: 380ms is 380ms on a 30fps phone and on a 120Hz Mac
     alike, and the browser schedules it itself rather than needing a JS
     callback on the main thread every frame.
     Easing is the same easeOutQuint already used by .fmn-blob below -
     quick off the mark, settling gently, and deliberately WITHOUT the old
     spring's overshoot, which was part of what read as a wobble.
     `contain: layout` matters as much as the transition does: width/height
     are layout properties, so each frame costs a reflow. Containment
     promises the browser that nothing inside this box can affect layout
     outside it, so that reflow stays scoped to the header instead of
     rippling out into the rest of the page on every frame. */
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1), height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms ease;
  contain: layout;
}
/* Applied for one frame at page load so the header simply IS the right
   size on arrival instead of animating into it. See sizeInstantly(). */
.fmn-island.fmn-no-motion {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .fmn-island {
    transition: none;
  }
}
@media (max-width: 640px) {
  /* Width flash fix (14 Sept 2026, reported live on mobile): the JS's own
     init block already sets the CORRECT mobile resting width (264px, see
     MOBILE_DIMS.collapsed in the .js file) via inline style the moment it
     runs - but that's a deferred script, so the browser's FIRST PAINT still
     used this file's old unconditional 272px (the desktop width) for a
     stretch of time, then visibly snapped 8px narrower once JS executed.
     Giving mobile its own resting width here means first paint already
     matches what JS would set anyway, so there's nothing left to snap. */
  .fmn-island {
    width: 264px;
  }
}
.fmn-island:hover {
  transform: scale(1.015);
}

/* Pulsing green ring, collapsed state only (added 14 Sep 2026, cosmetic —
   makes the closed pill stand out more against light backgrounds). The
   .fmn-is-collapsed class is toggled from the JS's own mode-state changes
   (updateCollapsedClass() in fmn-floating-header.js), not a CSS-only
   selector, so it turns off the instant the pill opens and comes back the
   instant it's fully closed again — matches how every other state in this
   component already works. */
.fmn-island.fmn-is-collapsed {
  animation: fmn-pulse-ring 2.4s ease-in-out infinite;
}
@keyframes fmn-pulse-ring {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(46, 157, 58, 0.55);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(46, 157, 58, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fmn-island.fmn-is-collapsed {
    animation: none;
    box-shadow: 0 0 0 2px rgba(46, 157, 58, 0.45);
  }
}

.fmn-island-skin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  overflow: hidden;
  /* 22 Sep 2026, per Gameed ("almost there on mobile it has this flash") -
     the mid-gradient stop used to dip to 0.6 opacity, and backdrop-filter's
     saturate(220%) amplified whatever showed through that gap by 2.2x. On
     most of the page that's invisible (backgrounds are white/near-white,
     so amplifying their saturation does nothing visible) - but the mobile
     panel opens directly over the gold "South Africa's Largest..." corner
     ribbon (.fmn-hero-ribbon, #f5b920, sits right behind the header at
     z-index 5/15), and that solid, fully-saturated gold bled through as an
     intense yellow smear the instant the panel grew large enough to cover
     it - reads as a "flash" appearing out of nowhere since the small
     collapsed pill never overlapped the ribbon to begin with. Raised the
     dip to 0.78 (matching the top stop) and eased saturate down to 150% -
     still enough lift to read as glass, not enough to amplify a solid
     background color into a visible tint. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.78) 46%,
    rgba(255, 255, 255, 0.82) 100%
  );
  backdrop-filter: blur(32px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(150%) brightness(1.08);
  box-shadow: 0 22px 50px -18px rgba(30, 41, 59, 0.3), 0 2px 0 rgba(255, 255, 255, 0.75) inset,
    0 -12px 22px -16px rgba(30, 41, 59, 0.12) inset, inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition: filter 260ms ease;
}
/* ---------- mobile render-cost cuts (22 Sep 2026) ----------
   Added alongside the CSS-transition rewrite above, because that rewrite
   guarantees the animation's DURATION but not its smoothness - the browser
   still has to fit a reflow plus a backdrop re-blur into each frame, and on
   a mid-range phone the old cost made that impossible. Two things were
   dominating that budget on mobile, and neither buys anything there:

   1. .fmn-goo-stage carries `filter: url(#fmn-liquid-goo)` over a
      position:fixed, inset:0 box - a full-VIEWPORT SVG filter, running
      permanently on every page, animating or not. Its entire job is melting
      the DROPDOWN panels into the bar, and dropdowns are desktop-only
      (.fmn-nav-links is display:none below 640px; mobile uses the
      drill-down views instead). So on a phone this is pure cost for zero
      visible effect. The JS still writes to the blob/goo elements - those
      writes just become invisible no-ops, no errors.
   2. blur(32px) is the single most expensive thing left: a backdrop-filter
      forces everything behind the element to be re-sampled and re-blurred,
      and it has to redo that every frame while the box is resizing. 18px is
      barely distinguishable from 32px on a ~375px-wide screen but costs
      meaningfully less. Saturation comes down with it, which also keeps the
      gold hero ribbon from bleeding through (see the .fmn-island-skin
      comment above). Desktop keeps the full-strength treatment. */
@media (max-width: 640px) {
  .fmn-goo-stage {
    display: none;
  }
  .fmn-island-skin {
    backdrop-filter: blur(18px) saturate(140%) brightness(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(1.05);
  }
}

.fmn-island-skin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0.3) 100%
  );
  mix-blend-mode: overlay;
}
.fmn-island:hover .fmn-island-skin {
  filter: brightness(1.03);
}

.fmn-mode {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
}
.fmn-mode[hidden] {
  display: none;
}

/* Fixed 22 Sep 2026, per Gameed's live feedback ("opens up in a sequence...
   hak hak hak hak") - real bug, not intended. Root cause: .fmn-mode-nav is
   width:100%, so as the island's own width springs open (272px -> 1040px),
   this row's width - and the space-between gaps between its children -
   recompute on EVERY animation frame. With more content than fits at the
   narrow starting width, the flex box can't actually satisfy
   space-between (there's a deficit, not slack), so children pack from the
   left with the overflow past the right edge clipped by the island's own
   overflow:hidden. As the box widens, that clip boundary sweeps rightward
   AND the items keep re-flowing into new positions each frame - the
   combination reads as items snapping into place one at a time.
   First fix attempt (opacity: 0 -> 1 on a delay) made this WORSE per
   Gameed's follow-up report ("disappears then reappears... still has that
   break") - it just replaced the snapping with its own two-step
   pop: invisible while growing, then an abrupt fade-in partway through.
   Real fix: stop the content from ever reflowing during the animation at
   all. fmn-floating-header.js now sets this row's width to its FINAL
   target size (not 100%) the instant a mode opens - see setModeContentWidth()
   - so the row is laid out once, at full size, from frame one. Only the
   outer island (a plain rounded rect, no text in it) actually animates;
   what's inside is static and simply gets progressively revealed as the
   clip window grows around it, the same way a camera iris or a blind
   opening reveals a picture that was never moving to begin with. */
.fmn-mode-nav,
.fmn-mode-search,
.fmn-mode-mobile {
  flex-shrink: 0;
}

.fmn-mode-collapsed {
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
/* Real FMN pin mark in the closed pill, replacing the plain green dot
   (14 Sept 2026) - sized to sit at the same visual weight as the 9px dot
   it replaced and the 14px title text next to it, not a full logo. */
.fmn-collapsed-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.fmn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
  flex-shrink: 0;
}
.fmn-collapsed-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.fmn-collapsed-sub {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.fmn-mode-nav {
  justify-content: space-between;
}
.fmn-logo-link {
  display: block;
  flex-shrink: 0;
}
.fmn-logo {
  height: 36px;
  width: auto;
  display: block;
  cursor: pointer;
  opacity: 0.93;
  filter: drop-shadow(0 1px 1.5px rgba(30, 41, 59, 0.1));
}
.fmn-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.fmn-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}
.fmn-nav-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  cursor: pointer;
}
.fmn-nav-chevron {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px 6px 3px;
  display: flex;
}

.fmn-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fmn-search-pill,
#fmn-floating-header .fmn-search-pill {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 15px;
  border-radius: 999px !important;
  background: rgba(76, 175, 80, 0.12) !important;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
}
.fmn-search-pill span {
  font-size: 14px;
  font-weight: 700;
  color: #217a2c !important;
}

/* 15 Sept 2026 — Services We Offer swaps the header's search pill for a
   "Claim Your School" CTA instead (that page's whole job is driving
   claims, not search). Styled to match the old gyn-header's solid-green
   CTA button treatment (--green / --green-dark) rather than the soft
   outlined search pill, so it reads as a real call-to-action. */
.fmn-claim-cta-pill,
#fmn-floating-header .fmn-claim-cta-pill {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px !important;
  background: #2e9e3a !important;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  text-decoration: none !important;
  transition: background 0.2s;
}
.fmn-claim-cta-pill:hover,
#fmn-floating-header .fmn-claim-cta-pill:hover {
  background: #217a2c !important;
}
.fmn-claim-cta-pill span,
#fmn-floating-header .fmn-claim-cta-pill span {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff !important;
}
#fmn-floating-header .fmn-claim-cta-pill:visited,
#fmn-floating-header .fmn-claim-cta-pill:visited span {
  color: #ffffff !important;
}
.fmn-icon-btn,
#fmn-floating-header .fmn-icon-btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  background: rgba(30, 41, 59, 0.06) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Bug fix (14 Sept 2026): the leading search icon used to be a bare <svg>
   with no way to submit the form (see fmn-floating-header.php comment on
   the same date - typing a search and pressing Enter did nothing, since
   the form has two text fields and no submit button, so no browser
   implicitly submits it on Enter). Now a real type="submit" button, reusing
   .fmn-icon-btn's reset (appearance/border/sizing) but overriding its grey
   circular backdrop back to transparent/flush so it still reads as a plain
   leading icon, not a standalone icon button like the close (X) button. */
.fmn-search-submit,
#fmn-floating-header .fmn-search-submit {
  background: transparent !important;
  width: auto;
  height: auto;
}

.fmn-mode-search {
  align-items: center;
  gap: 12px;
}
.fmn-search-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fmn-search-field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
.fmn-search-field::placeholder {
  color: #94a3b8;
  font-weight: 600;
}
.fmn-search-divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: rgba(30, 41, 59, 0.12);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  /* Fixed 13 Sep 2026 — two side-by-side text fields (name + suburb) in the
     same ~300px-wide mobile pill left each too narrow to type/read in
     ("capped" per live review). Stack them: icon + name field + close
     button share row 1 (name field still flex:1/min-width:0, so it takes
     whatever room is left), suburb field wraps to its own full-width row 2
     via flex-basis:100% + order. The JS-side search-mode height already
     grows on mobile to fit the extra row (see dims() in the .js file). */
  .fmn-search-form {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .fmn-search-divider {
    display: none;
  }
  .fmn-search-field-near {
    order: 5;
    flex: 1 1 100%;
  }
  .fmn-search-field,
  .fmn-search-field-near {
    font-size: 14px;
  }
}

/* ---------- dropdowns: a real child of .fmn-island-wrap, top:100% ---------- */
.fmn-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 280px;
  padding: 10px 6px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.78) 100%);
  backdrop-filter: blur(32px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.08);
  box-shadow: 0 18px 34px -12px rgba(30, 41, 59, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.fmn-dropdown[hidden] {
  display: none;
}
.fmn-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fmn-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
}
.fmn-panel-head-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  padding-left: 6px;
  cursor: pointer;
  transition: color 150ms ease;
}
.fmn-panel-head-title:hover {
  color: #217a2c;
}
.fmn-panel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fmn-panel-row:hover {
  background: rgba(76, 175, 80, 0.1);
}
.fmn-panel-row-label {
  color: #217a2c;
}
.fmn-panel-row-arrow {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 150ms ease, transform 150ms ease;
}
.fmn-panel-row:hover .fmn-panel-row-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* click-off-to-close layer. Kept fully invisible (added 15 Sep 2026, per
   Gameed - the rgba(15,23,42,0.12) tint read as a visible "dim" over the
   whole page any time the nav panel opened, which he flagged as unwanted).
   Still does its job: it's a full-viewport layer that only becomes
   pointer-events:auto once the panel is open, so clicking anywhere on the
   page outside the panel still closes it via the existing JS listener -
   removing the visible tint doesn't touch that behaviour, it only stops
   the page from visibly darkening while it's there. */
.fmn-scrim {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.fmn-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- mobile mode ----------
   Same pill, but it grows TALL instead of WIDE and the menu stacks as rows;
   tapping an item with children swaps the card's own content for that
   submenu (drill-down) instead of dropping a separate panel below it -
   there's no spare width for a flyout to sit next to anything on a phone.
   Which mode ("nav" vs "mobile") actually opens is decided in JS by
   viewport width at the moment the pill is tapped; this CSS only styles
   the mobile mode's own internals; whichever mode is inactive stays
   [hidden] regardless of screen size. */
.fmn-mode-mobile {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.fmn-mobile-view {
  width: 100%;
}
.fmn-mobile-view[hidden] {
  display: none;
}
.fmn-mobile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
}
.fmn-mobile-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.fmn-mobile-divider {
  height: 1px;
  background: rgba(30, 41, 59, 0.08);
  margin: 6px 4px;
}
.fmn-mobile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px;
  border-radius: 14px;
}
.fmn-mobile-row-label {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}
.fmn-mobile-row-label.is-link {
  color: #217a2c;
}
.fmn-mobile-drill-btn,
#fmn-floating-header .fmn-mobile-drill-btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: rgba(30, 41, 59, 0.05) !important;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.fmn-mobile-drill-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  cursor: pointer;
}
.fmn-mobile-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.fmn-mobile-sub-row:active {
  background: rgba(76, 175, 80, 0.1);
}
.fmn-mobile-sub-row-label {
  font-size: 15px;
  font-weight: 600;
  color: #217a2c;
}
.fmn-mobile-search-pill {
  width: 100%;
  justify-content: center;
}

/* Below 640px the desktop nav row physically can't fit (logo + 4 links +
   search pill + close, all on one line) - hide it as a safety net even
   though JS is what actually decides which mode opens. */
@media (max-width: 640px) {
  .fmn-nav-links {
    display: none;
  }
}