/* Top bar, header, navigation, footer, floating UI */

/* ---------- Top bar ---------- */
.topbar {
  background: var(--leaf-900); color: var(--leaf-100);
  font-size: .8rem; letter-spacing: .02em;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .6rem; }
.topbar__list { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; opacity: .85; }
.topbar__item svg { width: 15px; height: 15px; stroke: var(--leaf-300); fill: none; stroke-width: 1.7; }
.topbar__socials { display: flex; gap: .9rem; }
.topbar__socials a { opacity: .8; transition: opacity var(--dur) var(--ease-in-out), transform var(--dur) var(--ease-in-out); }
.topbar__socials a:hover { opacity: 1; transform: translateY(-2px); }
.topbar__socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 250, 243, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); background: rgba(253, 250, 243, .95); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--leaf-900); }
.logo__mark { width: 40px; height: 40px; flex: none; transition: transform var(--dur-slow) var(--ease-out-back); }
.logo:hover .logo__mark { transform: rotate(-12deg) scale(1.08); }
.logo__mark svg { width: 100%; height: 100%; }
.logo small { display: block; font-family: var(--font-body); font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--leaf-600); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  position: relative; font-size: .93rem; font-weight: 500; color: var(--ink);
  padding-block: .35rem; transition: color var(--dur) var(--ease-in-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--leaf-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-slow) var(--ease-in-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--leaf-700); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.header__actions { display: flex; align-items: center; gap: 1rem; }

/* Hamburger */
.burger { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border); display: none; place-items: center; }
.burger span { display: block; width: 20px; height: 2px; background: var(--leaf-900); border-radius: 2px; transition: transform .35s var(--ease), opacity .2s linear; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); z-index: 80;
  background: var(--cream); padding: 2rem 1.75rem;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-in-out);
  display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer__link { transition: color var(--dur) var(--ease-in-out), padding-left var(--dur-slow) var(--ease-in-out); }
.drawer__link:hover { color: var(--leaf-600); padding-left: .5rem; }
.drawer__link { font-family: var(--font-display); font-size: 1.5rem; color: var(--leaf-900); padding-block: .35rem; }
.drawer__meta { margin-top: auto; font-size: .85rem; color: var(--text-muted); }
.overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(4, 33, 26, .5);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  backdrop-filter: blur(2px);
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ---------- Footer ---------- */
.footer { background: var(--leaf-950); color: rgba(241, 249, 245, .74); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; position: relative; overflow: hidden; }
.footer .logo, .footer h3 { color: var(--cream); }
.footer__grid { display: grid; gap: 3rem; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; }
.footer h3 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.footer__links li + li { margin-top: .7rem; }
.footer__links a { transition: color var(--dur) var(--ease-in-out), padding-left var(--dur-slow) var(--ease-in-out); font-size: .93rem; }
.footer__links a:hover { color: var(--leaf-300); padding-left: 6px; }
.footer__contact li { display: flex; gap: .7rem; font-size: .93rem; margin-bottom: .85rem; }
.footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: .45rem; stroke: var(--leaf-400); fill: none; stroke-width: 1.7; }
.footer__form { display: flex; gap: .5rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-pill); padding: .35rem .35rem .35rem 1.2rem; }
.footer__form input { flex: 1; min-width: 0; background: none; border: 0; color: var(--cream); font-size: .9rem; }
.footer__form input::placeholder { color: rgba(241,249,245,.45); }
.footer__form button { width: 44px; height: 44px; border-radius: 50%; background: var(--leaf-500); display: grid; place-items: center; transition: background-color var(--dur) var(--ease-in-out), transform var(--dur-slow) var(--ease-in-out); }
.footer__form button:hover { background: var(--leaf-400); transform: rotate(-20deg); }
.footer__form svg { width: 18px; height: 18px; stroke: var(--leaf-950); fill: none; stroke-width: 2; }
.footer__socials { display: flex; gap: .75rem; margin-top: 1.5rem; }
.footer__socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; transition: background-color var(--dur) var(--ease-in-out), border-color var(--dur) var(--ease-in-out), transform var(--dur) var(--ease-in-out); }
.footer__socials a:hover { background: var(--leaf-500); border-color: var(--leaf-500); transform: translateY(-3px); }
.footer__socials svg { width: 17px; height: 17px; fill: var(--cream); }
.footer__bottom { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.footer__leaf { position: absolute; right: -60px; bottom: -70px; width: 340px; opacity: .07; pointer-events: none; }

/* ---------- Floating UI ---------- */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 55;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--leaf-700); color: var(--white);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease-in-out), transform .35s var(--ease-in-out), visibility .35s, background-color var(--dur) var(--ease-in-out);
  box-shadow: var(--shadow);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--leaf-900); transform: translateY(-4px); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  display: none; gap: .75rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(253, 250, 243, .95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-in-out);
}
.mobile-cta.is-visible { transform: translateY(0); }
/* "Book appointment" is the wider label, so it gets the room; Call only needs its own width. */
.mobile-cta .btn { padding-block: .85rem; white-space: nowrap; }
.mobile-cta .btn--ghost { flex: 0 0 auto; padding-inline: 1.5rem; }
.mobile-cta .btn:not(.btn--ghost) { flex: 1; padding-inline: 1rem; }