/* The site menu: one bar, the same on every page (CARL website-1003; Tucker 2026-11-12).
   A compact pill sized to its contents and centered: "caddy." (dark, green dot), the links, then the light/dark
   button and Book a call, all sitting together with no wide empty gaps (Tucker found a full-width bar too wide).
   On narrow screens the links hide and the pill keeps the logo, the button and Book a call, so nothing scrolls
   sideways. Every class starts with site-nav, so no page's own styles can reach it.
   Markup lives in each page (the site is static HTML); this file is the only place it is styled.
   Colors come from meetcaddy/marketing/brand/PALETTE.md only. Dark values follow html[data-theme]. */

.site-nav {
    --sn-bg: rgba(253, 251, 243, 0.84);
    --sn-line: rgba(43, 40, 34, 0.12);
    --sn-ink: #2B2822;
    --sn-muted: rgba(43, 40, 34, 0.68);
    --sn-accent: #2D6A4F;
    --sn-btn: #2D6A4F;
    --sn-btn-hover: #37795C;
    --sn-shadow: 0 1px 2px rgba(43, 40, 34, 0.06), 0 12px 32px rgba(43, 40, 34, 0.08);
    position: sticky; top: 0; z-index: 100;
    pointer-events: none; /* only the pill takes clicks; the clear band around it lets the page show through */
    margin: 0; border: 0; background: none;
    padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: 12px;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] .site-nav {
    --sn-bg: rgba(34, 38, 43, 0.82);
    --sn-line: rgba(247, 243, 232, 0.12);
    --sn-ink: #F7F3E8;
    --sn-muted: rgba(247, 243, 232, 0.74);
    --sn-accent: #57B98A;
    --sn-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.28);
}
.site-nav, .site-nav *, .site-nav *::before, .site-nav *::after { box-sizing: border-box; }
/* Pages built on the older template lay out their content under a menu that floats over the page */
.site-nav--overlay { position: fixed; left: 0; right: 0; top: 0; }

.site-nav-inner {
    display: flex; justify-content: center; margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.site-nav-bar {
    pointer-events: auto;
    display: flex; align-items: center; gap: 28px; margin: 0; max-width: 100%;
    background: var(--sn-bg);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--sn-line); border-radius: 999px; padding: 8px 8px 8px 22px; box-shadow: var(--sn-shadow);
    min-height: 58px; /* the same height on the light-only AI Map, which has no light/dark button */
}
.site-nav-brand, .site-nav-brand:hover {
    font-family: inherit; font-weight: 700; font-size: 22px; letter-spacing: -0.04em; line-height: 1;
    color: var(--sn-ink); text-decoration: none;
}
.site-nav-brand span { color: var(--sn-accent); }
.site-nav-links { display: flex; gap: 24px; }
.site-nav-links a {
    font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: normal;
    color: var(--sn-muted); text-decoration: none;
}
.site-nav-links a:hover, .site-nav-links a[aria-current="page"] { color: var(--sn-ink); }
.site-nav-right { display: flex; align-items: center; gap: 8px; margin-left: -4px; }
.site-nav-theme {
    width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%;
    border: 1px solid var(--sn-line); background: transparent; color: var(--sn-ink); box-shadow: none;
    cursor: pointer; display: grid; place-items: center; font: inherit;
}
.site-nav-theme svg { width: 18px; height: 18px; }
.site-nav-theme .icon-moon { display: none; }
html[data-theme="dark"] .site-nav-theme .icon-sun { display: none; }
html[data-theme="dark"] .site-nav-theme .icon-moon { display: block; }
.site-nav-book, .site-nav-book:hover {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
    background: var(--sn-btn); color: #FFFFFF; text-decoration: none; border: 0; border-radius: 999px;
    font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: normal; padding: 10px 18px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.site-nav-book:hover { background: var(--sn-btn-hover); transform: translateY(-1px); }

@media (max-width: 639px) {
    .site-nav-links { display: none; }
    .site-nav-bar { gap: 18px; }
}
@media (max-width: 400px) {
    .site-nav-bar { padding-left: 16px; gap: 14px; }
    .site-nav-book, .site-nav-book:hover { padding: 9px 13px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav-book, .site-nav-book:hover { transition: none; transform: none; }
}