/* Shared clinic dock — one quiet porcelain surface across every public page. */

/* How much room the dock occupies at the bottom of the viewport, published on
   :root rather than on .az-fab because the things that must clear it are not
   inside it: #backToTop in src/index.css and the plateau stage in shyen.css.
   src/index.css already referenced this variable — nothing defined it, so its
   82px fallback was silently doing the work while the same number sat hardcoded
   elsewhere. One definition now, so the two cannot drift apart. */
:root { --az-fab-clearance: 82px; }

.az-fab {
  --az-ink: #112115;
  --az-green: #245b43;
  --az-green-deep: #174735;
  --az-border: #b9cdbf;
  --az-pale: #eef5e8;
  --az-pistachio: #becb6d;
  --az-white: #fffefb;
  --az-size: 52px;
  --az-bottom: 24px;
  --az-edge: 16px;
  --az-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  z-index: 70;
  right: 0;
  bottom: calc(var(--az-bottom) + env(safe-area-inset-bottom, 0px));
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: calc(100vw - 2 * var(--az-edge));
  height: auto;
  margin-inline: auto;
  padding: 7px;
  overflow: visible;
  border: 1px solid var(--az-border);
  border-radius: 24px;
  background: rgba(255, 254, 251, 0.97);
  box-shadow:
    0 18px 42px -22px rgba(9, 24, 20, 0.40),
    0 5px 16px -10px rgba(9, 24, 20, 0.18),
    inset 0 1px 0 #fff;
  color: var(--az-ink);
  direction: ltr;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.az-fab::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(36, 91, 67, 0.05);
  pointer-events: none;
}

.az-fab__language-wrap {
  position: relative;
  display: flex;
  padding-inline-end: 6px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid #dce7df;
}

.az-fab__btn {
  position: relative;
  width: var(--az-size);
  min-width: 44px;
  height: var(--az-size);
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--az-green-deep);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms var(--az-ease),
    transform 220ms var(--az-ease),
    width 260ms var(--az-ease),
    padding 260ms var(--az-ease);
}

.az-fab__btn:hover {
  border-color: #bdd1c2;
  background: var(--az-pale);
  color: var(--az-ink);
  box-shadow: none;
}

.az-fab__btn:active {
  background: #e3eedf;
  transform: translateY(0) scale(0.97);
}

.az-fab__btn:focus-visible,
.az-fab__opt:focus-visible {
  outline: 3px solid var(--az-green-deep);
  outline-offset: 2px;
  box-shadow: none;
}

.az-fab__icon,
.az-fab__btn > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
}

.az-fab__icon svg,
.az-fab__btn > svg,
.az-fab__btn img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

/* Lucide glyphs are strokes on an empty fill. Stated here so no inherited
   `fill: currentColor` can ever turn one into a solid blob. Scoped to the icon
   slot and the chevron so the flag SVGs — which are real fills — keep theirs. */
.az-fab__icon > svg,
.az-fab__chev {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The flag is a direct child of the language button, so `.az-fab__btn > svg`
   (0,1,1) was beating `.az-flag` (0,1,0) and rendering every flag as a 24x24
   square — the French tricolore came out visibly stretched. */
.az-fab__lang > .az-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 22px;
}

.az-fab__btn--chat {
  border-color: #9eba9f;
  background: #edf5e7;
  color: #174735;
}

.az-fab__btn--chat::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50a65f;
  box-shadow: 0 0 0 2px #edf5e7;
}

.az-fab--measuring .az-fab__btn,
.az-fab--measuring .az-fab__label { transition: none; }

.az-fab__label {
  display: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* Tier 1 — every tile shows its short label beside its icon.
   Tier 2 — the fallback when tier 1 does not fit: only the chat tile keeps its
   label, which is exactly what shipped before this change. Neither tier applies
   below 640px; see fitLabels() in scripts/i18n/build-floating-nav.mjs. */
.az-fab--labelled .az-fab__btn {
  width: auto;
  padding-inline: 11px 13px;
  gap: 8px;
  border-radius: 16px;
}

.az-fab--labelled .az-fab__label,
.az-fab--labelled-chat .az-fab__btn--chat .az-fab__label { display: block; }

.az-fab--labelled-chat .az-fab__btn--chat { width: auto; padding: 0 14px; gap: 8px; }

/* Tier 1b — the same labels at tighter metrics, so a 768-830px tablet keeps its
   words instead of dropping all the way back to icons. */
.az-fab--labelled-compact .az-fab__btn {
  width: auto;
  padding-inline: 9px 10px;
  gap: 6px;
  border-radius: 15px;
}
.az-fab--labelled-compact .az-fab__label {
  display: block;
  font-size: 12.5px;
}
.az-fab--labelled-compact .az-fab__icon,
.az-fab--labelled-compact .az-fab__icon svg,
.az-fab--labelled-compact .az-fab__icon img { width: 20px; height: 20px; flex-basis: 20px; }
.az-fab--labelled-compact .az-fab__langcode { font-size: 12px; }
.az-fab--labelled-compact .az-fab__btn--action .az-fab__tip,
.az-fab--labelled-compact .az-fab__btn--brand .az-fab__tip { display: none; }
.az-fab--labelled-compact .az-fab__btn--brand .az-fab__label { color: var(--az-green-deep); }
.az-fab--labelled-compact { gap: 2px; }

[dir="rtl"] .az-fab__btn--action,
[dir="rtl"] .az-fab__btn--brand,
[dir="rtl"] .az-fab__lang,
[dir="rtl"] .az-fab__opt { direction: rtl; }

/* A visible label makes the hover tooltip redundant — and a tooltip repeating
   the text under the cursor reads as noise. Keep it only where the visible text
   is an abbreviation of something longer (the language pill shows just "FR"). */
.az-fab--labelled .az-fab__btn--action .az-fab__tip,
.az-fab--labelled .az-fab__btn--brand .az-fab__tip,
.az-fab--labelled-chat .az-fab__btn--chat .az-fab__tip { display: none; }

.az-fab--labelled .az-fab__btn--brand .az-fab__label { color: var(--az-green-deep); }

.az-fab__btn--brand { background: transparent; }
.az-fab__btn--brand img { width: 25px; height: 25px; object-fit: contain; }

.az-fab__lang {
  width: auto;
  min-width: 0;
  padding: 0 10px 0 9px;
  gap: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--az-ink);
  font-family: inherit;
  cursor: pointer;
}

.az-fab__langcode {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.az-fab__lang[aria-expanded="true"] {
  border-color: #cfe0d2;
  background: var(--az-pale);
}

.az-fab__lang .az-fab__chev {
  width: 12px;
  height: 12px;
  margin-inline-start: -1px;
  color: #6f8474;
  transform-origin: center center;
  transition: transform 220ms var(--az-ease);
}

.az-fab__lang[aria-expanded="true"] .az-fab__chev { transform: rotate(180deg); }

.az-fab__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  min-width: 202px;
  padding: 7px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--az-border);
  border-radius: 18px;
  background: rgba(255, 254, 251, 0.98);
  box-shadow: 0 24px 60px -22px rgba(9, 24, 20, 0.55), inset 0 1px 0 #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 180ms ease, transform 220ms var(--az-ease);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.az-fab__menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.az-fab__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--az-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.az-fab__native { flex: 0 1 auto; }

.az-fab__opt:hover { background: #f1f6ec; }
.az-fab__opt[aria-current="true"] {
  background: var(--az-pale);
  font-weight: 650;
}

/* The current language is marked with a check, not a loose dot floating at the
   far edge of the row. */
.az-fab__mark {
  display: none;
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--az-green);
}
.az-fab__mark svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.az-fab__opt[aria-current="true"] .az-fab__mark { display: block; }

.az-fab__opt[lang="ar"] .az-fab__native { direction: rtl; }

/* Soft-edged chips rather than the old hard rectangle with its dark 1px ring.
   NOT circular: these flags are drawn to each country's real construction, and
   cropping a 3:2 triband to a circle shows the whole middle band beside half of
   each outer one — the French flag renders with a double-width white stripe. */
.az-flag {
  width: 21px;
  height: 14px;
  flex: 0 0 21px;
  display: block;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(9, 24, 20, 0.14), 0 1px 2px rgba(9, 24, 20, 0.10);
  object-fit: cover;
}

.az-fab__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 46vw;
  padding: 7px 10px;
  border: 1px solid #244c3b;
  border-radius: 9px;
  background: #153b2e;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(9, 24, 20, 0.7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 150ms ease, transform 180ms var(--az-ease);
}

@media (max-width: 640px) {
  .az-fab__tip { display: none; }
}

.az-fab__btn:hover .az-fab__tip,
.az-fab__btn:focus-visible .az-fab__tip,
.az-fab__lang:hover .az-fab__tip,
.az-fab__lang:focus-visible .az-fab__tip {
  opacity: 1;
  transform: translateX(-50%);
}

@media (hover: none) { .az-fab__tip { display: none; } }

/* Two affordances at once — a tooltip on top of the open dropdown — is noise. */
.az-fab__lang[aria-expanded="true"] .az-fab__tip { display: none; }

.az-fab {
  transition: box-shadow 220ms ease, border-color 180ms ease;
}

@media (max-width: 640px) {
  .az-fab {
    --az-size: 46px;
    --az-bottom: 14px;
    gap: 2px;
    padding: 5px;
    border-radius: 19px;
  }
  .az-fab__language-wrap { padding-inline-end: 3px; margin-inline-end: 0; }
  .az-fab__btn { border-radius: 13px; }
  .az-fab__lang {
    min-width: 46px;
    padding: 0 9px;
    gap: 0;
  }
  .az-fab__lang > span,
  .az-fab__lang .az-fab__chev { display: none; }
  .az-fab__btn--chat::after { top: 7px; right: 7px; }
  .az-fab__icon,
  .az-fab__btn > svg,
  .az-fab__icon svg,
  .az-fab__btn img { width: 22px; height: 22px; }
  .az-fab__menu { bottom: calc(100% + 10px); }
}

@media (max-width: 380px) {
  .az-fab { --az-edge: 8px; gap: 0; padding: 5px; }
  .az-fab__language-wrap { padding-inline-end: 0; }
  .az-fab__btn,
  .az-fab__lang { width: 44px; min-width: 44px; }
}

@media (max-width: 350px) {
  .az-fab { --az-edge: 6px; gap: 0; padding: 4px; }
  .az-fab__language-wrap { padding-inline-end: 0; }
  .az-fab__btn,
  .az-fab__lang { min-width: 44px; width: 44px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .az-fab,
  .az-fab__menu { background: #fffefb; }
}

@media (prefers-reduced-motion: reduce) {
  .az-fab,
  .az-fab__btn,
  .az-fab__menu,
  .az-fab__tip,
  .az-fab__chev { transition-duration: 0.01ms !important; }
  .az-fab__btn:hover { transform: none; }
}

/* ── Veiled state: the dock waits until the hero is scrolled past ─────────────
   Set by armHeroReveal() in scripts/i18n/build-floating-nav.mjs, and only on
   pages that actually have a hero — blog, service and article pages have none,
   so the dock stays immediately visible there exactly as before.

   The transition list repeats box-shadow and border-color from the base rule on
   purpose: `transition` is a shorthand, so declaring it again here would
   otherwise drop the dock's existing hover transitions.

   visibility (not opacity alone) is what removes the dock from the tab order and
   the accessibility tree while it is off screen, so nothing is focusable but
   invisible. Its change is delayed by the slide duration on the way out so the
   movement is still seen, and immediate on the way in. translate3d keeps the
   compositor hint the base rule sets up with will-change. */
.az-fab {
  transition:
    box-shadow 220ms ease,
    border-color 180ms ease,
    opacity 280ms var(--az-ease),
    transform 280ms var(--az-ease),
    visibility 0s linear 0s;
}

.az-fab--veiled {
  opacity: 0;
  transform: translate3d(0, calc(100% + var(--az-bottom) + 16px), 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    box-shadow 220ms ease,
    border-color 180ms ease,
    opacity 280ms var(--az-ease),
    transform 280ms var(--az-ease),
    visibility 0s linear 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .az-fab,
  .az-fab--veiled {
    transition: opacity 1ms linear, visibility 0s linear;
  }
  .az-fab--veiled { transform: translateZ(0); }
}