/* Folkle: smooth navigation between pages.
   1. One identical header on every page (same height, logo size and menu position), so it never jumps.
   2. A soft fade between pages, with the header staying still (browser "view transitions").
   Loaded on Home, Find/Ask, Founding Parents, Share a place and My profile. */

@view-transition { navigation: none; }   /* off (Oct 23): the 0.2s browser cross-fade felt like a snap; the calm beat at the bottom of this file does every move now */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease; }
::view-transition-group(fk-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* the header block on each page, made identical on screens wider than a tablet */
@media (min-width: 861px) {
  header.top, nav.topnav, body > header:not(.top), .page > nav.nav { view-transition-name: fk-header; }

  header.top .top-in,
  nav.topnav .nav-inner,
  body > header:not(.top),
  .page > nav.nav {
    box-sizing: border-box !important;
    width: min(1120px, calc(100% - 40px)) !important; max-width: none !important;
    height: 76px !important; min-height: 76px !important;
    margin: 0 auto !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important;
  }
  header.top, nav.topnav { height: auto !important; padding: 0 !important; }

  /* the logo: same size and spot everywhere (the live folkle.co logo, 32px) */
  header.top a.logo .fk-logo, nav.topnav a.logo .fk-logo, body > header:not(.top) a.logo .fk-logo, .page > nav.nav .nav-logo .fk-logo { font-size: 32px !important; }
  header.top a.logo, nav.topnav a.logo, body > header:not(.top) a.logo, .page > nav.nav .nav-logo { display: flex !important; align-items: center !important; text-decoration: none !important; }

  /* the menu: same font, size and spacing everywhere */
  header.top nav.nav-links, nav.topnav .nav-tabs, body > header:not(.top) nav, .page > nav.nav .rx-menu {
    display: flex !important; align-items: center !important; gap: 26px !important; margin: 0 0 0 auto !important;
  }
  header.top nav.nav-links a.l, nav.topnav .nav-tabs .nav-tab:not(.cta):not(.fp-pill), body > header:not(.top) nav a:not(.nav-cta):not(.fp-pill):not(.fk-login), .page > nav.nav .rx-menu a:not(.fp-pill) {
    font: 400 15.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; padding: 6px 0 !important; margin: 0 !important;
  }
}

/* the slim top strip (launch + Founding Parents ticker): same height and color on every page */
html body .launch, html body .sf-launch-banner {
  box-sizing: border-box !important; height: 36px !important; min-height: 36px !important; padding: 0 16px !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important;
  background: #EDE3CF !important; color: #1F4535 !important; font: 400 13.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
html body .sf-launch-banner-content { height: 36px !important; width: 100% !important; padding: 0 !important; font: inherit !important; }
html body .sf-launch-banner-close { display: none !important; }   /* no dismiss: the strip stays, so the header never jumps between pages */
html body .sf-launch-banner.dismissed { display: flex !important; }

@media (min-width: 861px) {
  /* Log in (outlined) and Join Folkle (filled): one size and spacing everywhere */
  html body a.fk-login.fk-login, .page > nav.nav .nav-actions .pill-ghost {
    box-sizing: border-box !important; height: 40px !important; padding: 0 18px !important; margin: 0 0 0 10px !important;
    display: inline-flex !important; align-items: center !important; border: 1.5px solid #1F4535 !important; border-radius: 100px !important;
    background: transparent !important; color: #1F4535 !important; font: 600 14.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: 0 !important; text-decoration: none !important;
  }
  html body a.fk-login.fk-login:hover, .page > nav.nav .nav-actions .pill-ghost:hover { background: #1F4535 !important; color: #fff !important; }
  html body a.nav-cta.nav-cta, nav.topnav .nav-tab.cta, .page > nav.nav .nav-actions .pill-amber {
    box-sizing: border-box !important; height: 40px !important; padding: 0 20px !important; margin: 0 0 0 8px !important;
    display: inline-flex !important; align-items: center !important; border: 0 !important; border-radius: 100px !important;
    font: 600 14.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0 !important;
  }
  .page > nav.nav .nav-actions { display: flex !important; align-items: center !important; gap: 26px !important; margin: 0 !important; }
  html body a.fp-pill.fp-pill.fp-pill.fp-pill.fp-pill { margin: 0 !important; }
  .page > nav.nav .rx-menu { margin-left: auto !important; }
  .page > nav.nav { gap: 26px !important; }
  html body .fp-sep { margin: 0 2px !important; }
}

/* phones: the header also holds Log in + Join, so keep "Folkle" + sprig and drop the small tagline there (Find keeps it: it only has a menu button) */
@media (max-width: 480px) {
  header.top .fk-logo-tag, body > header:not(.top) .fk-logo-tag, .page > nav.nav .fk-logo-tag { display: none; }
  html body a.fk-login.fk-login, .page > nav.nav .nav-actions .pill-ghost { white-space: nowrap !important; }
  html body > header:not(.top) nav a.fp-pill.fp-pill.fp-pill.fp-pill.fp-pill { display: none !important; }   /* Founding Parents / My profile: the page title already says where you are */
  body > header:not(.top) nav a { white-space: nowrap !important; }
}

/* ---------- phones and small tablets: the same menu row on every page ---------- */
.fk-mobnav { display: none; }
@media (max-width: 860px) {
  .fk-mobnav { display: flex; justify-content: space-between; align-items: center; gap: 6px; box-sizing: border-box; width: 100%;
    padding: 2px 16px 10px; margin: 0; font: 500 14.5px DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
  body > header:not(.top) + .fk-mobnav, .page > nav.nav + .fk-mobnav { padding-top: 0; }
  .fk-mobnav a { color: #2E2E2A; text-decoration: none; padding: 6px 0; white-space: nowrap; position: relative; }
  .fk-mobnav a.cur { color: #B85A2E; font-weight: 600; }
  .fk-mobnav a.cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #D46B3D; }
  /* the old per-page phone menus give way to the shared one */
  header.top .mobnav { display: none !important; }
  nav.topnav .mobile-toggle { display: none !important; }
  /* Find/Ask: Log in + Join sit in the header like everywhere else (they used to hide inside the ☰ menu) */
  html body nav.topnav #nav-tabs { display: flex !important; position: static !important; flex-direction: row !important; align-items: center !important;
    background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; gap: 8px !important; width: auto !important; margin: 0 0 0 auto !important; }
  html body nav.topnav #nav-tabs > :not(.fk-login):not(.cta):not(.fk-sv) { display: none !important; }   /* the saved square stays (Oct 30) */
  html body nav.topnav #nav-tabs > .cta { margin: 0 !important; width: auto !important; height: 38px !important; padding: 0 16px !important; font-size: 14.5px !important; white-space: nowrap; }
  html body nav.topnav #nav-tabs > .fk-login { width: auto !important; white-space: nowrap; }
  /* Founding Parents / My profile: Log in shows next to Join, like on Home */
  html body > header:not(.top) nav a.fk-login { display: inline-flex !important; }
}
@media (max-width: 480px) {
  nav.topnav .fk-logo-tag { display: none; }
  .fk-mobnav { font-size: 14px; }
}
@media (max-width: 340px) { .fk-mobnav { font-size: 13px; padding-left: 12px; padding-right: 12px; } }

/* phones: the logo row is the same height (64px) with the same 16px sides on every page, so the menu row lines up too */
@media (max-width: 860px) {
  header.top .top-in { height: 64px !important; min-height: 64px !important; margin: 0 16px !important; width: auto !important; padding: 0 !important; }
  html body nav.topnav { padding: 0 !important; }
  html body nav.topnav .nav-inner { height: 64px !important; min-height: 64px !important; padding: 0 16px !important; max-width: none !important; display: flex !important; align-items: center !important; }
  body > header:not(.top) { box-sizing: border-box !important; height: 64px !important; min-height: 64px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; }
  .page > nav.nav { box-sizing: border-box !important; height: 64px !important; min-height: 64px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; }
  .page > .fk-mobnav { padding-left: 0 !important; padding-right: 0 !important; }
  body > header:not(.top) + .fk-mobnav, .page > nav.nav + .fk-mobnav { padding-top: 2px !important; }
}
/* tablets: keep the menu grouped on the left instead of spread across the width */
@media (min-width: 481px) and (max-width: 860px) { .fk-mobnav { justify-content: flex-start; gap: 28px; } }

/* One calm beat for every move (Khushi, Oct 23): fade out, the leaf, fade in. See scripts/folkle-nav.js */
/* the header (logo + menu) stays still; everything else fades */
html:not(.fx-arriving) body > *:not(header):not(.fk-modal):not(#fk-loader):not(script) { animation: fkPageIn .5s ease backwards; }
@keyframes fkPageIn { from { opacity: 0; } }
html.fk-fading body > *:not(header):not(.fk-modal):not(#fk-loader) { transition: opacity .35s ease; }
html.fk-leaving body > *:not(header):not(.fk-modal):not(#fk-loader) { opacity: 0; }
#fk-loader { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: fkLoaderIn .25s ease .12s both; }
#fk-loader img { width: 34px; height: 34px; animation: fkLeafPulse .9s ease-in-out infinite alternate; }
@keyframes fkLoaderIn { from { opacity: 0; } }
@keyframes fkLeafPulse { from { transform: scale(.85) rotate(-8deg); opacity: .55; } to { transform: scale(1.05) rotate(6deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html:not(.fx-arriving) body > *, #fk-loader, #fk-loader img { animation: none !important; } }

/* Phones, Find and Ask (Khushi, Oct 26): the K button is a circle, and its menu (My profile, Log out) shows when tapped.
   The rules above hid every extra thing in the top row on phones, the menu too, and stretched K into a pill. */
@media (max-width: 860px) {
  html body nav.topnav #nav-tabs > .cta.fk-hi { width: 38px !important; min-width: 0 !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; }
  html body nav.topnav #nav-tabs > div.fk-menu:not(.fk-login):not(.cta) { display: block !important; left: auto !important; right: 16px !important; width: min(260px, calc(100vw - 32px)) !important; box-sizing: border-box; }
}

/* Big screens only (wider than 1560px): the header, the Founding Parent bar and the footers use the same wider edges as Home and Find,
   so a large monitor isn't mostly empty. Laptops and phones are unchanged (Sheetal, Nov 6). */
@media (min-width: 1560px) {
  header.top .top-in,
  nav.topnav .nav-inner,
  body > header:not(.top),
  .page > nav.nav { width: min(1440px, calc(100% - 96px)) !important; }
  .topnav .nav-inner { max-width: none !important; }
  .fk-fpbar .in { max-width: 1440px !important; }
  .footer-inner, .footer-bottom { max-width: 1440px !important; }
}
/* Big screens only (Sheetal, Nov 6): wider than 1800px, the whole page grows a little, so it fills the screen and keeps its look.
   Laptops (up to 1728px wide) and phones are not touched. */
@media (min-width: 1800px) { html { zoom: 1.15; } }
@media (min-width: 2100px) { html { zoom: 1.3; } }
@media (min-width: 2400px) { html { zoom: 1.5; } }