/* ============================================================
   Shams Convention — Marble field, header, drawer, footer, dock
   Depends on: tokens.css, base.css
   ============================================================ */

/* ---------- Marble field ----------------------------------
   The Stitch files put `background-attachment: fixed` on <body>.
   iOS Safari ignores it outright and Android repaints the whole
   backdrop on every scroll frame, which shows up as INP. A fixed
   element behind the content is the cheap, correct version — the
   compositor parks it on its own layer and never repaints it.   */

.marble {
  position: fixed;
  inset: 0;
  z-index: var(--z-marble);
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(252, 249, 248, .82), rgba(252, 249, 248, .94)),
    url('../assets/texture/marble.webp');
  background-size: auto, cover;
  background-position: center;
}

@media (max-width: 767px) {
  .marble { background-image:
    linear-gradient(to bottom, rgba(252, 249, 248, .86), rgba(252, 249, 248, .96)),
    url('../assets/texture/marble-sm.webp'); }
}

/* ---------- Header ---------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(249, 249, 249, .72);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.header.is-scrolled {
  background: rgba(249, 249, 249, .88);
  border-bottom-color: var(--glass-border);
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
  padding-block: var(--s-1);
}

/* ---------- Brand mark ------------------------------------ */

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition: transform var(--dur) var(--ease-out);
}

.brand:hover .brand__mark { transform: translateY(-2px) scale(1.04); }

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  letter-spacing: .18em;
  color: var(--bronze-deep);
  white-space: nowrap;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  opacity: .75;
  margin-top: 3px;
  white-space: nowrap;
}

/* ---------- Desktop nav ----------------------------------- */

.nav { display: none; }

@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--s-4); }
}

.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  text-decoration: none;
  padding-block: var(--s-1);
  transition: color var(--dur-fast) var(--ease);
}

/* Underline grows from the centre — cheap, and it animates transform
   rather than width, so it stays off the layout path. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover { color: var(--bronze-deep); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current='page'] {
  color: var(--bronze-deep);
  font-weight: var(--fw-bold);
}

.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* Scoped to .header so this beats `.btn { display: inline-flex }` in
   components.css, which loads later at the same specificity. */
.header .header__cta { display: none; }
@media (min-width: 900px) { .header .header__cta { display: inline-flex; } }

/* ---------- Drawer toggle --------------------------------- */

.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border-radius: var(--r);
  color: var(--bronze-deep);
}

@media (min-width: 900px) { .burger { display: none; } }

.burger__bars { position: relative; width: 22px; height: 2px; }

.burger__bars, .burger__bars::before, .burger__bars::after {
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.burger__bars::before, .burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
}

.burger__bars::before { top: -7px; }
.burger__bars::after  { top: 7px; }

.burger[aria-expanded='true'] .burger__bars { background: transparent; }
.burger[aria-expanded='true'] .burger__bars::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile drawer --------------------------------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(27, 28, 28, .38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* visibility is stepped, not smoothly interpolated: at t=0 of a
     hidden -> visible transition it still computes as hidden. Delaying it
     by the full duration on close and applying it instantly on open gives
     the fade both ways AND keeps the panel focusable the moment it opens.
     Transitioning visibility normally is what silently breaks .focus(). */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(340px, 86vw);
  padding: var(--s-3) var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border-left: 1px solid var(--outline-variant);
  box-shadow: -20px 0 60px rgba(85, 95, 78, .16);
  transform: translateX(100%);
  visibility: hidden;
  /* Same reasoning as .drawer-scrim above — visibility must land instantly
     on open or the first link inside cannot receive focus. */
  transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  overflow-y: auto;
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease-out), visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: var(--s-2);
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bronze-deep);
  border-radius: var(--r);
}

.drawer__link {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-surface);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}

.drawer__link:hover { color: var(--bronze-deep); padding-left: var(--s-1); }

.drawer__link[aria-current='page'] {
  color: var(--bronze-deep);
  border-bottom-color: var(--bronze);
}

.drawer__foot { margin-top: var(--s-4); display: grid; gap: var(--s-2); }

/* ---------- Mobile action dock ----------------------------
   The one conversion action, permanently one tap away on phones. */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-dock);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--outline-variant);
  border-top: 1px solid var(--outline-variant);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 900px) { .dock { display: none; } }

.dock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem var(--s-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-decoration: none;
  background: var(--surface-lowest);
  color: var(--on-surface);
  transition: background-color var(--dur-fast) var(--ease);
}

.dock__btn:active { background: var(--surface-high); }
.dock__btn--primary { background: var(--primary); color: var(--on-primary); }
.dock__btn--primary:active { background: var(--primary-container); }
.dock__btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Keep the dock from covering the end of the page on phones. */
@media (max-width: 899px) {
  body { padding-bottom: 60px; }
}

/* ---------- Floating WhatsApp button ----------------------
   Desktop only. Below 900px the dock above already puts WhatsApp
   permanently one tap away, and showing both would mean two WhatsApp
   calls-to-action on screen at once. */

.wa-fab {
  position: fixed;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  z-index: var(--z-dock);
  display: none;
  align-items: center;
  height: 56px;
  padding-inline: 15px;
  border-radius: var(--r-full);
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 24px var(--wa-shadow);
  transition: background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* Shown from the moment the page loads, at every scroll position.

   Gated on .js (set inline in <head>) rather than shown unconditionally,
   because the href ships as "#" and contacts() in main.js hydrates it from
   SITE.whatsapp. With scripting off the button would be a dead control, so
   it is better not to render it at all. */
@media (min-width: 900px) {
  .js .wa-fab { display: inline-flex; }
}

.wa-fab:hover { background: var(--wa-hover); box-shadow: 0 10px 30px var(--wa-shadow); }
.wa-fab:active { transform: translateY(1px); }
.wa-fab svg { width: 26px; height: 26px; flex-shrink: 0; }

/* Collapsed to an icon, expanding on hover or keyboard focus. The label is
   aria-hidden — the anchor carries its own aria-label, so a screen reader
   gets one clean name rather than clipped decorative text. */
.wa-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  transition: max-width var(--dur) var(--ease-out),
              margin-left var(--dur) var(--ease-out);
}

.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label { max-width: 10rem; margin-left: .5rem; }

.wa-fab:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 3px; }

/* ---------- Page shell ------------------------------------ */

.page-head {
  padding-top: var(--section-gap);
  padding-bottom: var(--s-6);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: var(--on-surface-variant);
}

.breadcrumb a { color: var(--on-surface-variant); text-decoration: none; }
.breadcrumb a:hover { color: var(--bronze-deep); text-decoration: underline; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .5rem; opacity: .5; }
.breadcrumb ol { display: contents; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb [aria-current='page'] { color: var(--bronze-deep); }

/* ---------- Footer ---------------------------------------- */

.footer {
  margin-top: var(--section-gap);
  background: var(--surface-lowest);
  border-top: 1px solid var(--outline-variant);
}

.footer__inner {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-8) var(--s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s-8); }
}

.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: var(--s-2);
}

.footer__links { display: grid; gap: .625rem; }

.footer__links a {
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease);
}

.footer__links a:hover { color: var(--bronze-deep); text-decoration: underline; }

.footer__brand { display: grid; gap: var(--s-2); }
.footer__brand .brand__mark { width: 44px; height: 44px; }

/* The floating WhatsApp button is fixed bottom-right, so at full scroll it
   lands on this row — the last thing on the page. Reserve enough room that
   it never clips the text mid-word. Desktop only; the button does not
   exist below 900px.

   Note this element carries BOTH .container and .footer__bar, so a bare
   padding-right here replaces the container's --margin-page rather than
   adding to it. Hence the calc. */
@media (min-width: 900px) {
  .footer__bar { padding-right: calc(var(--margin-page) + 56px); }
}

.footer__bar {
  border-top: 1px solid var(--outline-variant);
  padding-block: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--on-surface-variant);
}