/* ============================================================
   11th Hour — Logo button system (styles) · v23
   Pairs with logo-buttons.js, which injects the .logo-btn__frame SVG.
   Geometry is JS; colour is CSS so the frame is theme-aware.
   The gallery page loads this file without styles.css, so the two
   colour tokens are declared here with the same values.
   ============================================================ */

:root {
  --logo-ink: #111111;   /* outline + label */
  --logo-red: #e21d24;   /* corner tile — the same in both themes */
}
:root[data-theme="dark"] {
  --logo-ink: #eef0f3;
}

.logo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-body, "Roboto", system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--logo-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 16px 26px;
  min-height: 54px;
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Injected SVG frame: behind the label, never intercepts clicks. */
.logo-btn__frame { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.logo-btn__outline { stroke: var(--logo-ink); fill: none; }
.logo-btn__tile { fill: var(--logo-red); }

/* :hover and :focus-visible are separate rules on purpose — grouping them
   voids the whole rule in engines that don't parse :focus-visible. */
.logo-btn:hover { transform: translateY(-2px); }
.logo-btn:focus-visible { transform: translateY(-2px); outline: 2px solid var(--logo-red); outline-offset: 4px; }
.logo-btn:active { transform: scale(0.97); }

/* Match the focus ring shape to the soft variants. */
.logo-btn[data-logo-variant="rounded"],
.logo-btn[data-logo-variant="mixed"] { border-radius: 12px; }

/* Fixed-size icon usage (gallery / logo-only). */
.logo-btn--icon { padding: 0; min-height: 0; }

/* Smaller CTAs (nav, inline card CTAs). */
.logo-btn--sm { min-height: 40px; padding: 10px 18px; font-size: 0.72rem; letter-spacing: 0.07em; }

/* Full-width CTA (form submit). */
.logo-btn--block { width: 100%; }

/* The hero's main CTA: the canvas funnel drains into this one. */
.logo-btn--lg { min-height: 62px; min-width: 240px; padding: 18px 40px; font-size: 0.9rem; letter-spacing: 0.08em; }

/* On a dark --structure panel, in either theme: the ink flips to the
   panel's text colour; the red tile is unchanged. */
.logo-btn--on-dark { --logo-ink: var(--on-structure, #ffffff); }

/* Opens in a new tab (the booking link): a small arrow after the label. */
.logo-btn .ext { display: inline-block; margin-left: 8px; font-size: 0.9em; line-height: 1; transform: translateY(-1px); }

/* In-flight state (form submit while posting). */
.logo-btn[disabled], .logo-btn[aria-busy="true"] { cursor: progress; opacity: 0.6; transform: none; }

/* ---------- Opt-in: "the corner completes" (gallery only) ----------
   Add .logo-btn--complete and on hover/focus the outline sweeps around
   the open corner and locks the tile into the frame. At rest it's
   pixel-identical to the standard mark. No live CTA uses it. */
.logo-btn--complete .logo-btn__outline {
  stroke-dasharray: var(--lb-dash-rest);
  transition: stroke-dasharray 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logo-btn--complete:hover .logo-btn__outline { stroke-dasharray: var(--lb-dash-seal); }
.logo-btn--complete:focus-visible .logo-btn__outline { stroke-dasharray: var(--lb-dash-seal); }

@media (prefers-reduced-motion: reduce) {
  .logo-btn, .logo-btn--complete .logo-btn__outline { transition: none; }
  .logo-btn:hover, .logo-btn:focus-visible { transform: none; }
}