/* Kept separate from the header's .mobile-nav. Import after the page styles. */
.mobile-bottom-nav { display:none; }

@media (max-width:680px) {
  body.mobile-nav-enabled {
    --mobile-nav-height:calc(82px + env(safe-area-inset-bottom, 0px));
    padding-bottom:calc(var(--mobile-nav-height) + 16px);
  }
  body.mobile-nav-enabled .mobile-bottom-nav:not([hidden]) {
    position:fixed;
    display:block;
    z-index:45;
    inset-inline:0;
    bottom:0;
    padding:7px max(8px, env(safe-area-inset-right, 0px)) max(7px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-top:1px solid #d6ddd4;
    background:#fafbf7f5;
    color:#142429;
    box-shadow:0 -8px 30px #1424290c;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  body.mobile-nav-enabled .mobile-bottom-nav-list {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    width:100%;
    max-width:540px;
    margin:0 auto;
    padding:0;
    list-style:none;
  }
  body.mobile-nav-enabled .mobile-bottom-nav-list li { min-width:0;display:flex; }
  body.mobile-nav-enabled .mobile-bottom-nav-link {
    position:relative;
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:4px;
    min-width:44px;
    min-height:66px;
    padding:5px 3px;
    border-radius:12px;
    color:#43534f;
    font-size:10px;
    font-weight:650;
    line-height:1.28;
    text-align:center;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background .18s,color .18s;
  }
  body.mobile-nav-enabled .mobile-bottom-nav-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:38px;
    height:29px;
    border-radius:9px;
    transition:background .18s,transform .18s;
  }
  body.mobile-nav-enabled .mobile-bottom-nav-icon svg { display:block;width:23px;height:23px; }
  body.mobile-nav-enabled .mobile-bottom-nav-label {
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    text-wrap:balance;
  }
  body.mobile-nav-enabled .mobile-bottom-nav-link[aria-current] { color:#173e32;background:#e6eee3; }
  body.mobile-nav-enabled .mobile-bottom-nav-link[aria-current] .mobile-bottom-nav-icon { background:#d4e4ce; }
  body.mobile-nav-enabled .mobile-bottom-nav-quote { color:#142429;background:#f5cf89; }
  body.mobile-nav-enabled .mobile-bottom-nav-quote[aria-current] { color:#142429;background:#edb346; }
  body.mobile-nav-enabled .mobile-bottom-nav-link:active .mobile-bottom-nav-icon { transform:scale(.92); }
  body.mobile-nav-enabled .mobile-bottom-nav-link:focus-visible { outline:3px solid #996109;outline-offset:1px; }
  body.mobile-nav-enabled .mobile-quote-shortcut { display:none !important; }
  body.mobile-nav-enabled .floating-contact {
    bottom:calc(var(--mobile-nav-height) + 12px);
    inset-inline-start:auto;
    inset-inline-end:max(14px, env(safe-area-inset-right, 0px));
    gap:8px;
  }
  body.mobile-nav-enabled .floating-contact .float-button { width:44px;height:44px;min-width:44px;min-height:44px; }
  body.mobile-nav-enabled .floating-contact .float-button svg { width:22px;height:22px; }
  body.mobile-nav-enabled.mobile-nav-focus-region .floating-contact,
  body.mobile-nav-enabled.mobile-nav-editing .floating-contact,
  body.mobile-nav-enabled.mobile-nav-editing .mobile-bottom-nav,
  body.mobile-nav-enabled:has(dialog[open]) .mobile-bottom-nav,
  body.mobile-nav-enabled:has(dialog[open]) .floating-contact { display:none !important; }
  body.mobile-nav-enabled .contact-section { scroll-margin-bottom:calc(var(--mobile-nav-height) + 16px); }
}

@media (max-width:360px) {
  body.mobile-nav-enabled .mobile-bottom-nav-link { font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  body.mobile-nav-enabled .mobile-bottom-nav-link,
  body.mobile-nav-enabled .mobile-bottom-nav-icon { transition:none; }
}
