/* Buttons — Dailey Center global button system */

/* ── .btn-header-cta — top-bar Schedule CTA · used: TB global header ── */
.btn-header-cta {
  --btn-bg : var(--light-blue);
  --btn-fg : var(--dark-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-family: var(--font-brandon-grotesque);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 0.75rem 1.25rem;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.btn-header-cta:hover { opacity: 0.9; }
@media (max-width: 980px) {
  .btn-header-cta {
    --btn-fg: var(--blue);
    white-space: normal;
    font-size: 0.8125rem;
    padding: 0.625rem 1.25rem;
  }
}

/* ── .btn-underline — wrap-to-box text CTA · used: Home page section links ── */
.btn-underline {
  --bu-line       : var(--blue);
  --bu-flip       : var(--beige);
  --bu-thickness  : 1.5px;
  --bu-pad-y      : 1.0625rem;
  --bu-pad-x      : 1rem;
  --bu-edge-dur   : 0.19s;
  --bu-swap-dur   : 0.3s;
  --bu-swap-delay : calc(var(--bu-edge-dur) * 3 + 0.01s);
  --bu-exit-dur   : 0.16s;

  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-underline:active { transform: scale(0.97); }

.btn-underline__label {
  display: block;
  position: relative;
  z-index: 3;
  padding: var(--bu-pad-y) var(--bu-pad-x);
  color: var(--bu-line);
  -webkit-text-fill-color: var(--bu-line);
  /* base transition = hover-OUT; the sequenced hover-IN lives on the active-state rules */
  transition:
    color var(--bu-exit-dur) ease,
    -webkit-text-fill-color var(--bu-exit-dur) ease;
}

.btn-underline__edge { position: absolute; background: var(--bu-line); z-index: 2; }
.btn-underline__edge--bottom { left: 0; right: 0; bottom: 0; height: var(--bu-thickness); }
.btn-underline__edge--right {
  right: 0; bottom: 0; width: var(--bu-thickness); height: 100%;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--bu-exit-dur) ease;
}
.btn-underline__edge--top {
  top: 0; left: 0; right: 0; height: var(--bu-thickness);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--bu-exit-dur) ease;
}
.btn-underline__edge--left {
  left: 0; top: 0; width: var(--bu-thickness); height: 100%;
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--bu-exit-dur) ease;
}

.btn-underline__fill {
  position: absolute; inset: 0;
  background: var(--bu-line);
  opacity: 0; z-index: 1;
  transition: opacity var(--bu-exit-dur) ease;
}

/* Active state — hover / focus / touch (.is-open set by js/buttons.js) */
.btn-underline:hover .btn-underline__edge--right,
.btn-underline:focus-visible .btn-underline__edge--right,
.btn-underline.is-open .btn-underline__edge--right { transform: scaleY(1); transition: transform var(--bu-edge-dur) ease; }
.btn-underline:hover .btn-underline__edge--top,
.btn-underline:focus-visible .btn-underline__edge--top,
.btn-underline.is-open .btn-underline__edge--top { transform: scaleX(1); transition: transform var(--bu-edge-dur) ease var(--bu-edge-dur); }
.btn-underline:hover .btn-underline__edge--left,
.btn-underline:focus-visible .btn-underline__edge--left,
.btn-underline.is-open .btn-underline__edge--left { transform: scaleY(1); transition: transform var(--bu-edge-dur) ease calc(var(--bu-edge-dur) * 2); }
.btn-underline:hover .btn-underline__fill,
.btn-underline:focus-visible .btn-underline__fill,
.btn-underline.is-open .btn-underline__fill { opacity: 1; transition: opacity var(--bu-swap-dur) ease var(--bu-swap-delay); }
.btn-underline:hover .btn-underline__label,
.btn-underline:focus-visible .btn-underline__label,
.btn-underline.is-open .btn-underline__label {
  color: var(--bu-flip); -webkit-text-fill-color: var(--bu-flip);
  transition:
    color var(--bu-swap-dur) ease var(--bu-swap-delay),
    -webkit-text-fill-color var(--bu-swap-dur) ease var(--bu-swap-delay);
}
.btn-underline:focus-visible { outline: none; }

/* Reduced motion — !important beats the hover-state transitions */
@media (prefers-reduced-motion: reduce) {
  .btn-underline__edge--right,
  .btn-underline__edge--top,
  .btn-underline__edge--left,
  .btn-underline__fill,
  .btn-underline__label { transition-duration: 0.001s !important; transition-delay: 0s !important; }
}

/* Tablet/mobile — no box-draw/fill/flip (kills the touch .is-open trigger too); the resting
   bottom edge stays, so the button keeps a plain underline. !important beats the active-state rules */
@media (max-width: 980px) {
  .btn-underline__edge--right,
  .btn-underline__edge--top,
  .btn-underline__edge--left { transform: scale(0) !important; }
  .btn-underline__fill { opacity: 0 !important; }
  .btn-underline__label {
    color: var(--bu-line) !important;
    -webkit-text-fill-color: var(--bu-line) !important;
  }
}

/* ── .btn-outline — bordered "Read the …" link · used: About Us publications, dark sections ── */
.btn-outline {
  --bo-line : var(--white);
  --bo-flip : var(--blue);
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--bo-line);
  background: transparent;
  color: var(--bo-line);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-outline:hover {
  transform: scale(0.97);
  background: var(--bo-line);
  color: var(--bo-flip);
}
.btn-outline:active { transform: scale(0.94); }
.btn-outline:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn-outline,
  .btn-outline:hover,
  .btn-outline:active { transform: none; }
}

/* ── .btn-pill — rounded pill CTA · used: Schedule/Call CTAs via [booking_link]/[phone_tel] ── */
.btn-pill {
  --btn-bg : var(--sky-blue);
  --btn-fg : var(--dark-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 1.75rem;
  border-radius: 2.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn-pill:hover { opacity: 0.9; }
/* scoped :not(.btn-breathe):not(.btn-shine) — the hero pills keep their own hovers;
   hover colors default to the inverse but variants can override via --btn-hover-* */
.btn-pill:not(.btn-breathe):not(.btn-shine):hover {
  opacity: 1;
  transform: scale(0.97);
  background: var(--btn-hover-bg, var(--btn-fg));
  color: var(--btn-hover-fg, var(--btn-bg)) !important;
}
.btn-pill:not(.btn-breathe):not(.btn-shine):active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .btn-pill:not(.btn-breathe):not(.btn-shine):hover,
  .btn-pill:not(.btn-breathe):not(.btn-shine):active { transform: none; }
}

/* ── .btn-pill--blue — blue pill, beige label · used: Book Your Consultation CTAs on light sections ── */
.btn-pill--blue {
  --btn-bg : var(--blue);
  --btn-fg : var(--beige);
  --btn-hover-bg : var(--dark-blue);   /* the default beige invert vanishes on light sections */
  --btn-hover-fg : var(--beige);
}

/* ── .btn-breathe — breathing-idle Schedule pill (on .btn-pill) · used: Home hero ── */
.btn-breathe {
  --btn-bg : var(--fog);
  --btn-fg : var(--blue);
  animation: btn-breathe-pulse 2600ms ease-in-out infinite;
}
@media (max-width: 980px) {
  .btn-breathe { --btn-bg: var(--blue); --btn-fg: var(--white); animation: none; }   /* no breathing pulse on touch */
}
@keyframes btn-breathe-pulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(26, 27, 41, 0); }
  50%      { transform: scale(1.045); box-shadow: 0 6px 16px -6px rgba(26, 27, 41, 0.45); }
}

/* ── .btn-breathe--interior — breathing Schedule pill variant · used: interior heroes ── */
.btn-breathe--interior { --btn-bg: var(--beige); }
@media (max-width: 980px) {
  .btn-breathe--interior { --btn-bg: var(--light-grey); --btn-fg: var(--blue); }
}

/* ── .btn-shine — hover-glare Call pill (on .btn-pill) · used: Home hero ── */
.btn-shine {
  --btn-bg : rgba(255, 255, 255, 0.2);
  --btn-fg : var(--white);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--btn-fg);
}
@media (max-width: 980px) {
  .btn-shine { --btn-fg: var(--blue); }
  .btn-shine::after { display: none; }   /* no glare sweep on touch — effect off for tablet/mobile */
}
/* ── .btn-shine--interior — glare Call pill variant · used: interior heroes ── */
@media (max-width: 980px) {
  .btn-shine--interior { --btn-fg: var(--white); }
}
.btn-shine__label { position: relative; z-index: 2; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: skewX(-20deg);
  transition: left 600ms ease;
}
.btn-shine:hover::after { left: 120%; }

.btn-breathe:focus-visible,
.btn-shine:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-breathe { animation: none; }
  .btn-shine::after,
  .btn-shine:hover::after { transition: none; left: -60%; }
}

/* ── .btn-circle-arrow — round chevron prev/next control · used: Home group carousel + Services card carousel ── */
.btn-circle-arrow {
  --btn-fg : var(--med-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 3.375rem;
  border: 1px solid var(--btn-fg);
  border-radius: 50%;
  background: none;
  color: var(--btn-fg);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-circle-arrow:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--mist);
}
.btn-circle-arrow svg { display: block; height: 1.35rem; width: auto; }
.btn-circle-arrow--prev svg { transform: scaleX(-1); }