/* ================= LIQUID-GLASS BUTTON =================
 * Native rebuild of the shadcn <LiquidButton> for this PHP / Tailwind (Play
 * CDN) theme. Shared across every Struxa page template -- enqueued from
 * functions.php (struxa_page_assets), before each page's own stylesheet.
 *
 * The button is built from stacked layers so it degrades cleanly:
 *   .lg-btn__glass   -- plain backdrop blur, every browser
 *   .lg-btn__distort -- SVG turbulence displacement (Safari / Firefox only;
 *                       a transparent no-op in Chrome / Edge)
 *   .lg-btn__rim     -- the layered inset "glass edge" highlight
 *
 * Each template that uses the button also drops the matching SVG <filter>
 * (id="lg-glass") into the page once -- see any template-service-*.php just
 * after get_header().
 *
 * Glass needs a busy backdrop to read. Over a photo: use plain .lg-btn.
 * On a flat surface: add .lg-btn--ghost for a faint gold base fill.
 * ====================================================== */

.lg-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start;
  padding:1rem 2.25rem;
  border-radius:9999px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  color:#fff;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s ease;
}
.lg-btn__glass,
.lg-btn__distort,
.lg-btn__rim{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
}
.lg-btn__glass{
  z-index:-3;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px) saturate(1.35);
  backdrop-filter:blur(6px) saturate(1.35);
}
.lg-btn__distort{
  z-index:-2;
  -webkit-backdrop-filter:url("#lg-glass");
  backdrop-filter:url("#lg-glass");
}
.lg-btn__rim{
  z-index:-1;
  box-shadow:
    0 0 6px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.10),
    inset 3px 3px .5px -3px rgba(255,255,255,.9),
    inset -3px -3px .5px -3px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
}
.lg-btn__label{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.55rem;
  white-space:nowrap;
}
.lg-btn__label span{ transition:transform .3s ease; }
.lg-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -16px rgba(197,160,89,.5); }
.lg-btn:hover .lg-btn__label span{ transform:translateX(3px); }
.lg-btn:active{ transform:translateY(0) scale(.985); }
.lg-btn:focus-visible{ outline:2px solid #C5A059; outline-offset:3px; }

/* Sitting on a flat (non-photo) surface -- give the glass something to hold. */
.lg-btn--ghost{ align-self:center; }
.lg-btn--ghost .lg-btn__glass{ background:rgba(197,160,89,.09); }
.lg-btn--ghost .lg-btn__rim{
  box-shadow:
    inset 1px 1px 1px -.5px rgba(255,255,255,.35),
    inset -1px -1px 1px -.5px rgba(255,255,255,.3),
    inset 0 0 8px 4px rgba(197,160,89,.08),
    0 0 14px rgba(197,160,89,.12);
}
.lg-btn--ghost .lg-btn__label{ color:#C5A059; }
.lg-btn--ghost:hover .lg-btn__label{ color:#fff; }

/* A pair of buttons sharing a row (e.g. Contact + Back) */
.lg-btn-row{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}

@media (prefers-reduced-motion: reduce){
  .lg-btn{ transition:none; }
  .lg-btn:hover{ transform:none; }
}