/* GEMCAP · site navigation. PORTED from The Marketing Cartel's approved nav (experimentos/E11 site:
   public/sg/components.css §11 and components.desktop.css §4-5, Nav.astro, MenuSheet.astro), Arthur 2026-10-03:
   "o menu de pilula, a gente tem um otimo modelo" - same structure, behaviour and fixes, GEMCAP tokens.
   Desktop (>=1024px): a frosted bar floating over the page (radius 24px, "not 100% round"), the page links grouped in
   a capsule with a sliding navy pill (#19) and a depth-flip on the words (#33); one dropdown viewport that morphs
   between menus (#20). Phone (<1024px): a frosted top bar (logo, call, menu) and the menu as a bottom sheet.
   Only transform and opacity animate. Needs tokens.css. */

:root {
  --nav-top: 16px;
  --nav-h: 60px;
  --topbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --z-nav: 100;
  --z-dropdown: 110;
  --frost-bg: rgb(255 255 255 / 0.8);
  --frost-line: rgb(11 31 68 / 0.09);
  --frost-blur: 8px;
  --panel-bg: #FFFFFF;
  --highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.55);
  --nav-shadow: 0 6px 16px -4px rgb(11 31 68 / 0.12), 0 2px 4px -1px rgb(11 31 68 / 0.07);
  --nav-shadow-3: 0 18px 40px -12px rgb(11 31 68 / 0.2), 0 6px 12px -4px rgb(11 31 68 / 0.08);
  --d-micro: 150ms;
  --d-ui: 240ms;
  --d-spring: 420ms;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  /* spring (stiffness 350, damping 32, mass 1; 0.55% overshoot), sampled over 420ms - TMC #20 */
  --e-spring: linear(0, .0445, .1476, .2758, .408, .5317, .6404, .7317, .8058, .8638, .9081, .9408, .9644,
    .9807, .9916, .9985, 1.0026, 1.0047, 1.0055, 1.0055, 1.0051, 1.0044, 1.0037, 1.003, 1);
}
@media (prefers-reduced-motion: reduce) { :root { --d-micro: 1ms; --d-ui: 120ms; --d-spring: 1ms; } }

/* icons in the bar, the dropdown and the sheet: Lucide line style (the hero review page set this inline) */
.site-nav svg, .sheet svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- phone (<1024px): top bar + bottom sheet ---------- */
.nav__menu, .nav__menu-nojs, .nav__call, .menu-sheet { display: none; }
@media (max-width: 1023.98px) {
  html { scroll-padding-top: calc(8px + var(--topbar-h) + var(--space-4)); scrollbar-gutter: stable; }
  /* GEMCAP: the top bar floats as a rounded bar like the desktop one (TMC's is full width): over the full-screen hero
     photo it keeps the picture running to the corners instead of laying a pale strip across the sky */
  .site-nav {
    position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 8px) 8px auto 8px; z-index: var(--z-nav);
    border-radius: 24px;
    background: var(--frost-bg);
    -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(140%);
    backdrop-filter: blur(var(--frost-blur)) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--frost-line), var(--highlight-top), var(--nav-shadow);
  }
  .nav { display: flex; align-items: center; gap: 8px; height: var(--topbar-h); padding-inline: calc(var(--gutter) - 8px) 6px; }   /* logo on the gutter line */
  .nav__logo { display: inline-flex; align-items: center; height: 44px; margin-right: auto; }
  .nav__logo img { height: 32px; width: auto; }
  .nav__logo .full { display: none; }
  .nav__capsule, .nav__actions > .btn, .nav__dispatch, .nav-panel, .nav-bridge { display: none; }
  .nav__actions { display: flex; align-items: center; gap: 8px; }
  .nav__call, .nav__menu, .nav__menu-nojs {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill);
    background: none; color: var(--color-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav__call { background: var(--color-tint-blue); color: var(--color-blue); }
  .nav__call svg, .nav__menu svg, .nav__menu-nojs svg { width: 22px; height: 22px; }
  .nav__call:active, .nav__menu:active { transform: scale(.94); }
  .js .nav__menu-nojs, html:not(.js) .nav__menu { display: none; }

  /* bottom sheet: a native modal <dialog> that rises from the bottom (transform only) */
  .menu-sheet { display: block; }
  .menu-sheet:not([open]) { display: none; }
  .sheet {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: min(88svh, 760px);
    margin: 0; padding: 0 var(--gutter); border: 0; border-radius: 24px 24px 0 0;
    background: var(--panel-bg); color: var(--color-ink); box-shadow: var(--nav-shadow-3);
    overflow: auto; overscroll-behavior: contain;
    transform: translateY(0);
    transition: transform var(--d-ui) var(--e-out), overlay var(--d-ui) allow-discrete, display var(--d-ui) allow-discrete;
  }
  .sheet:not([open]) { transform: translateY(100%); }
  @starting-style { .sheet[open] { transform: translateY(100%); } }
  .sheet::backdrop { background: rgb(7 22 52 / .45); opacity: 1; transition: opacity var(--d-ui) var(--e-out), overlay var(--d-ui) allow-discrete, display var(--d-ui) allow-discrete; }
  .sheet:not([open])::backdrop { opacity: 0; }
  @starting-style { .sheet[open]::backdrop { opacity: 0; } }
  html.has-sheet { overflow: hidden; }
  .sheet__grip { width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--color-border-input); opacity: .5; }
  .sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-inline: calc(-1 * var(--gutter)); padding: 4px calc(var(--gutter) - 6px) 4px var(--gutter); background: var(--panel-bg); }
  .sheet__title { font: 700 var(--text-label) / 1.2 var(--font-text); color: var(--color-ink); }
  .sheet__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); cursor: pointer; }
  .sheet__close svg { width: 22px; height: 22px; }
  .sheet__foot { position: sticky; bottom: 0; display: grid; gap: var(--space-1); margin: var(--space-6) calc(-1 * var(--gutter)) 0; padding: var(--space-3) var(--gutter) calc(var(--space-2) + var(--safe-b)); background: var(--panel-bg); box-shadow: 0 -1px 0 var(--color-hairline); }
  .sheet__foot .btn { width: 100%; justify-content: center; }
  .sheet__tel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font: 600 var(--text-body) / 1 var(--font-text); color: var(--color-ink); text-decoration: none; }
  .sheet__tel svg { width: 18px; height: 18px; color: var(--color-blue); }

  /* the menu: Services as tiles (4 = 2x2), the rest as rows */
  .menu__group { margin: var(--space-5) 0 var(--space-2); font: 700 var(--text-small) / 1.2 var(--font-text); color: var(--color-ink-muted); }
  .menu > .menu__group:first-child { margin-top: var(--space-1); }
  .menu__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .menu__tiles > li { display: grid; }
  .menu-tile {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
    min-height: 88px; padding: 14px; border-radius: 16px;
    background: var(--color-surface-1); font: 700 var(--text-body) / 1.2 var(--font-text); color: var(--color-ink); text-decoration: none;
  }
  .menu-tile__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--color-tint-blue); color: var(--color-blue); }
  .menu-tile__icon svg { width: 18px; height: 18px; }
  .menu__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-hairline); }
  .menu-row { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid var(--color-hairline); font: 600 1.0625rem / 1.2 var(--font-text); color: var(--color-ink); text-decoration: none; }
  .menu-tile:active, .menu-row:active { transform: scale(.98); }
  @media (prefers-reduced-motion: reduce) {
    .sheet, .sheet::backdrop { transition: none; }
    .nav__call:active, .nav__menu:active, .menu-tile:active, .menu-row:active { transform: none; }
  }
}

/* ---------- desktop (>=1024px): frosted bar · capsule + sliding pill · depth-flip · morphing dropdown ---------- */
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-4)); }
  .site-nav {
    position: fixed; top: var(--nav-top); left: 0; right: 0; z-index: var(--z-nav);
    display: flex; justify-content: center;
    padding-inline: max(8px, calc(var(--gutter) - 16px));   /* the logo (16px inside the bar) lands on the page's left line */
    pointer-events: none;
  }
  .nav {
    position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5);
    width: min(100%, calc(var(--container) + 32px)); height: var(--nav-h); padding: 0 8px 0 16px;
    border-radius: 24px;
    background: var(--frost-bg);
    -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(140%);
    backdrop-filter: blur(var(--frost-blur)) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--frost-line), var(--highlight-top), var(--nav-shadow);
    pointer-events: auto;
  }
  .nav__logo { display: inline-flex; align-items: center; justify-self: start; height: 44px; }
  .nav__logo img { height: 40px; width: auto; }
  .nav__logo .compact { display: none; }
  .nav__logo:focus-visible { border-radius: var(--radius-sm); }

  .nav__capsule { position: relative; padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface-1); box-shadow: inset 0 0 0 1px var(--color-wash); }
  .nav__links { position: relative; z-index: 1; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

  /* the sliding pill: three compositor-only parts (left cap, stretchable middle, right cap) so its width can change
     without animating width. nav.js writes --x, --w, --h, --mid-scale. The middle is 100px wide scaled by
     (w - h)/100, not 1px: at 125%/150% OS scaling Chrome rounded a 1px layer before scaling (TMC, 25/09). */
  .nav__pill { --x: 0px; --w: 72px; --h: 36px; position: absolute; top: 4px; left: 0; height: var(--h); width: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--d-micro) var(--e-out); }
  .nav__pill.is-ready { opacity: 1; }
  .nav__pill > i { position: absolute; top: 0; left: 0; height: var(--h); background: var(--color-ink); transform-origin: 0 50%; transition: transform var(--d-spring) var(--e-spring); }
  .nav__pill > .cap-l, .nav__pill > .cap-r { width: var(--h); border-radius: var(--radius-pill); }
  .nav__pill > .cap-l { transform: translateX(var(--x)); }
  .nav__pill > .mid { width: 100px; transform: translateX(calc(var(--x) + var(--h) / 2)) scaleX(var(--mid-scale, .36)); }
  .nav__pill > .cap-r { transform: translateX(calc(var(--x) + var(--w) - var(--h))); }
  .nav__pill.no-anim > i { transition: none; }

  .nav__link {
    position: relative; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px;
    border: 0; border-radius: var(--radius-pill); background: none;
    font: 600 .9375rem / 1 var(--font-text); color: var(--color-ink); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__link:focus-visible { outline-offset: 1px; }
  .nav__chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-ui) var(--e-out); }
  .site-nav .nav__chev { stroke-width: 2.5; }   /* beats the .site-nav svg line style (1.75) above */
  .nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

  /* depth-flip: two copies of the word on a tiny cube; the back face carries the inverse colour, so the flip IS the
     colour change when the pill arrives (no colour transition anywhere) */
  .flip { position: relative; display: inline-grid; perspective: 240px; }
  .flip > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; backface-visibility: hidden; transition: transform var(--d-ui) var(--e-out), opacity var(--d-ui) var(--e-out); }
  .flip__front { transform-origin: 50% 0%; }
  .nav__ico { width: 17px; height: 17px; flex: none; }   /* Portal: the user icon beside the word */
  .flip__back { color: var(--color-canvas); transform-origin: 50% 100%; transform: translateY(70%) rotateX(-80deg); opacity: 0; }
  .nav__link[data-pill-on] .flip__front { transform: translateY(-70%) rotateX(80deg); opacity: 0; }
  .nav__link[data-pill-on] .flip__back { transform: none; opacity: 1; }
  .nav__chev-wrap { position: relative; display: inline-grid; }
  .nav__chev-wrap > svg { grid-area: 1 / 1; transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); }
  .nav__chev-wrap > .on-pill { color: var(--color-canvas); opacity: 0; }
  .nav__link[data-pill-on] .nav__chev-wrap > .off-pill { opacity: 0; }
  .nav__link[data-pill-on] .nav__chev-wrap > .on-pill { opacity: 1; }

  .nav__actions { display: flex; align-items: center; justify-self: end; gap: var(--space-4); }
  .nav__dispatch { display: grid; line-height: 1.15; color: var(--color-ink); text-decoration: none; }
  .nav__dispatch small { font-size: 13px; font-weight: 600; color: var(--color-ink-muted); }
  .nav__dispatch b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nav__actions .btn { min-height: 44px; padding-inline: var(--space-5); }
  @media (max-width: 1199.98px) { .nav__dispatch { display: none; } }   /* below 1200px the bar keeps logo, links, CTA */

  /* dropdown: one frosted viewport that morphs (FLIP) between menus */
  .nav-panel {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: var(--z-dropdown);
    visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: 50% 0;
    transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear var(--d-ui);
    pointer-events: none;
    will-change: transform;   /* own layer: at 125% scaling the box sat on a half device pixel (TMC, 28/09) */
  }
  .nav-panel[data-open="true"] { visibility: visible; opacity: 1; transform: none; transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s; pointer-events: auto; }
  .nav-panel__shell { position: absolute; inset: 0; border-radius: 24px; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--frost-line), var(--highlight-top), var(--nav-shadow-3); transform-origin: 0 0; will-change: transform; }
  .nav-panel__inner { position: relative; }
  .nav-panel [data-panel] { position: absolute; top: 0; left: 0; width: max-content; padding: 10px; opacity: 0; visibility: hidden; transform: translateX(var(--from, 16px)); transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear var(--d-ui); }
  .nav-panel [data-panel][data-active="true"] { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-ui) var(--e-out) 60ms, transform var(--d-ui) var(--e-out) 60ms, visibility 0s; }
  .nav-panel.is-morph [data-panel] { transition: opacity 90ms var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear 90ms; }
  .nav-panel.is-morph [data-panel][data-active="true"] { transition: opacity 160ms var(--e-out) 110ms, transform var(--d-ui) var(--e-out) 110ms, visibility 0s; }
  .nav-panel__grid { display: grid; grid-template-columns: repeat(2, 272px); gap: 2px; }   /* titles on one line */
  .nav-panel__grid--1 { grid-template-columns: minmax(250px, 1fr); }
  .nav-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px 14px 12px 12px; border-radius: 16px; isolation: isolate; color: var(--color-ink); text-decoration: none; }
  .nav-item--row { align-items: center; }
  .nav-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-wash); opacity: 0; transition: opacity var(--d-micro) var(--e-out); }
  .nav-item:focus-visible::before { opacity: 1; }
  @media (hover: hover) and (pointer: fine) { .nav-item:hover::before { opacity: 1; } }
  .nav-item__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-tint-blue); color: var(--color-blue); }
  .nav-item__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .nav-item__title { display: block; font: 700 .9375rem / 1.25 var(--font-text); color: var(--color-ink); }
  .nav-item__desc { display: block; margin-top: 3px; font: 400 .8125rem / 1.35 var(--font-text); color: var(--color-ink-muted); }
  .nav-bridge { position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

  /* reduced motion: opacity only. No depth-flip (the colour change is an opacity swap), no dropdown slide or scale,
     no FLIP morph (nav.js skips its transforms too), the pill and the chevron simply jump */
  @media (prefers-reduced-motion: reduce) {
    .flip > span { transition: opacity var(--d-ui) var(--e-out); }
    .flip__front, .flip__back, .nav__link[data-pill-on] .flip__front, .nav__link[data-pill-on] .flip__back { transform: none; }
    .nav__chev, .nav__chev-wrap > svg { transition: none; }
    .nav__pill > i { transition: none; }
    .nav-panel, .nav-panel[data-open="true"] { transform: none; will-change: auto; }
    .nav-panel__shell { transition: none; will-change: auto; }
    .nav-panel [data-panel], .nav-panel [data-panel][data-active="true"] { transform: none; }
    .nav-panel [data-panel], .nav-panel.is-morph [data-panel] { transition: opacity var(--d-ui) var(--e-out), visibility 0s linear var(--d-ui); }
    .nav-panel [data-panel][data-active="true"], .nav-panel.is-morph [data-panel][data-active="true"] { transition: opacity var(--d-ui) var(--e-out), visibility 0s; }
  }
}

/* ---------- theme toggle (TMC's, 2026-10-05): sun in the light theme, moon in the dark one; a 44px round button in the
   phone bar and beside "Get a quote" on desktop. The icon follows the theme in CSS (no flash before nav.js labels it);
   without script the button could not work, so it is not shown. ---------- */
.nav__logo > span { display: flex; align-items: center; }
.theme-toggle {
  position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html:not(.js) .theme-toggle { display: none; }
.theme-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-wash); opacity: 0; transition: opacity var(--d-micro) var(--e-out); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover::before { opacity: 1; } }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform var(--d-ui) var(--e-spring), opacity var(--d-ui) var(--e-out); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: opacity var(--d-ui) ease; }
  .theme-toggle svg, :root .theme-toggle .i-sun, :root .theme-toggle .i-moon { transform: none !important; }
  .theme-toggle:active { transform: none; }
}