/* ==========================================================================
   Layout: header  (partials/site/header.blade.php)
   --------------------------------------------------------------------------
   1. Desktop header  .site-header   — white bar: wordmark logo, nav, unified
                                       number, outlined booking pill.
      Nav: hover draws a hairline from the centre; the current page wears the
      logo's aqua circle above its label (it pops in with a small spring).
   2. Mobile app bar  .appbar        — logo (or back + title) · WhatsApp · call
   Both are sticky; js/modules/header.js toggles .is-scrolled once the page
   moves, which shrinks the logo and shows a hairline. The bar's height never
   changes: a sticky bar sits in the page flow, so resizing it shifts the
   content, the browser re-anchors the scroll, the threshold flips back and
   the header stutters (and animating height re-lays out the page every
   frame). Animate only transform / opacity / shadow here.
   ========================================================================== */

/* ── 1. Desktop header ───────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--ink) 50%, transparent); }

.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--header-h);
}

.site-header__brand { flex-shrink: 0; display: block; }
.site-header__logo { width: auto; height: 58px; transition: transform var(--dur) var(--ease-out); }
.site-header.is-scrolled .site-header__logo { transform: scale(0.82); }
.site-header__logo { transform-origin: right center; }   /* shrink toward the page edge */
[dir="ltr"] .site-header__logo { transform-origin: left center; }

/* Nav */
.site-nav { flex: 1; min-width: 0; }
.site-nav ul { display: flex; justify-content: center; gap: var(--space-2); }

.site-nav__link {
    position: relative;
    display: block;
    padding: 0.9em 0.8em 0.6em;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--dur) var(--ease-out);
}
/* the logo's aqua circle over the current page */
.site-nav__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;                             /* physical centre — same in RTL and LTR */
    width: 9px;
    height: 9px;
    border: 1.6px solid var(--second);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, 5px) scale(0.5);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
/* hover: a hairline drawn from the centre */
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0.8em;
    right: 0.8em;
    bottom: 0.25em;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease-out);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link.is-active::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
.site-nav__link.is-active::after { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; }

.site-header__phone {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.site-header__phone:hover { color: var(--second-text); }

/* Tighter nav on smaller desktops so seven links still fit */
@media (max-width: 1199.98px) {
    .site-header__phone { display: none; }
    .site-header__bar { gap: var(--space-5); }
    .site-nav__link { padding-inline: 0.55em; }
    .site-nav__link::after { left: 0.55em; right: 0.55em; }
}
@media (max-width: 1079.98px) {
    .site-header__logo { height: 50px; }
    .site-nav__link { font-size: 0.82rem; padding-inline: 0.45em; }
}

/* ── 2. Mobile app bar ───────────────────────────────────────────────────── */
.appbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
    padding-inline: var(--gutter) calc(var(--gutter) - 4px);
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.appbar.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--ink) 50%, transparent); }

.appbar__side { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.appbar__side--end { justify-content: flex-end; flex-shrink: 0; }

.appbar__logo img { width: auto; height: 38px; }

.appbar__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1;
}

/* Round icon buttons (back, WhatsApp, call) — 44px tap target, hairline ring */
.appbar__btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    font-size: 1.15rem;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-out);
}
.appbar__btn:active { transform: scale(0.92); }
.appbar__btn:hover { color: var(--second-text); }