/* ============================================================================
   Unified Button Module — DUNBEN Visual   (single source of truth)
   ----------------------------------------------------------------------------
   This file OWNS every `.button` on the site: look + hover animation. It is
   written to win outright over the exported theme's own `.button` rules
   (which set vw sizing, a fixed height, an !important hover-fill, and an
   !important 8px radius). We do NOT delete those theme rules one by one —
   instead this module overrides them decisively with !important so the theme's
   leftovers are irrelevant. Change a button anywhere → change it here, once.

   Markup normalized by button-module.js: `.button > .text > span`.

   Default : transparent fill, blue border, blue text.
   Hover   : a blue disc scales up from the bottom and floods the button while
             the label rolls up + scales out and is replaced (Codrops calypso).
             Flooded state = blue fill + white text.

   ALL TUNABLES LIVE IN :root BELOW — that is the only place to edit values.
   ============================================================================ */

:root {
  --btn-blue: #164cdf;        /* brand / border / text / flood colour */
  --btn-blue-ink: #ffffff;    /* text colour once flooded */
  --btn-radius: 0px;          /* corner radius */
  --btn-border: 1.5px;        /* border width */
  --btn-pad: 1.1rem 2.4rem;   /* padding (y x) */
  --btn-font: 18px;           /* font size */
  --btn-ease: cubic-bezier(0.1, 0, 0.3, 1);
  --btn-disc-dur: 0.3s;       /* disc flood duration */
  --btn-text-dur: 0.2s;       /* label roll duration (per segment) */
  --btn-text-scale: 1.5;      /* label vertical stretch during roll */
  --btn-color-dur: 0.26s;     /* text colour change duration */
}

/* --- Base + reset the theme's vw sizing / fixed height / inline-flex --- */
.button,
.button.--primary,
.button.--secondary,
.button.--secondary.--red,
.button.--secondary.--white,
.button.--secondary.--black {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: transparent !important;
  border: var(--btn-border) solid var(--btn-blue) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-blue) !important;
  padding: var(--btn-pad) !important;
  font-size: var(--btn-font) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  /* Only the text colour transitions; the disc/label are animated below.
     This deliberately overrides the theme's background/border transition. */
  transition: color var(--btn-color-dur) var(--btn-ease) !important;
  animation: none !important;
}

/* --- Growing blue disc (calypso ::before) --- */
.button::before {
  content: '' !important;
  position: absolute;
  z-index: -1;
  left: -10%;
  top: -110%;
  width: 120%;
  height: 0;
  padding-bottom: 120%;
  border-radius: 50%;
  background: var(--btn-blue);
  transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
  pointer-events: none;
}

.button:hover::before,
.button:focus-visible::before {
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform var(--btn-disc-dur) var(--btn-ease);
}

/* --- Solid fill that holds the flooded state (calypso ::after) --- */
.button::after {
  content: '' !important;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--btn-blue);
  transform: translate3d(0, -100%, 0);
  transition: transform var(--btn-disc-dur) var(--btn-ease);
  pointer-events: none;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.05s;
  transition-delay: var(--btn-disc-dur);
  transition-timing-function: linear;
}

/* --- Text colour: must beat the theme's `.button:hover{...!important}` fill ---
   The theme tries to flip the whole background to blue instantly on hover;
   we keep the background transparent (above) and only flip the TEXT colour,
   so the disc animation is what visibly fills the button. */
.button:hover,
.button:focus-visible {
  background-color: transparent !important;
  color: var(--btn-blue-ink) !important;
}

.button .text,
.button .text span {
  position: relative !important;
  z-index: 1 !important;
  color: inherit !important;
  text-shadow: none !important;
}

.button .text {
  display: inline-grid !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

.button .text span {
  grid-area: 1 / 1 !important;
  display: block !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* --- Label rolls up + scales out, fresh copy drops back in (calypso text) ---
   button-module.js writes data-btn-label from the real button text. Without JS,
   the real label remains visible and this enhancement simply does not run. */
.button .text[data-btn-label]::after {
  content: attr(data-btn-label);
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: block;
  color: inherit;
  white-space: nowrap;
  transform: translate3d(0, 110%, 0) scale3d(1, var(--btn-text-scale), 1);
  opacity: 0;
  transition:
    transform var(--btn-text-dur) var(--btn-ease),
    opacity var(--btn-text-dur) var(--btn-ease);
  pointer-events: none;
}

.button .text[data-btn-label] > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform var(--btn-text-dur) var(--btn-ease),
    opacity var(--btn-text-dur) var(--btn-ease);
}

.button:hover .text[data-btn-label] > span,
.button:focus-visible .text[data-btn-label] > span {
  transform: translate3d(0, -105%, 0) scale3d(1, var(--btn-text-scale), 1);
  opacity: 0;
}

.button:hover .text[data-btn-label]::after,
.button:focus-visible .text[data-btn-label]::after {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: var(--btn-text-dur);
}

/* --- Variant: .button--on-dark ------------------------------------------------
   For buttons placed on DARK sections (e.g. "View More Cases" on the dark
   Beyond-the-Featured-Cases band). Default state is a WHITE outline + white
   text; the HOVER is intentionally unchanged — the same calypso blue disc still
   floods up from the bottom and the label stays white. Add alongside `.button`:
   `class="button button--on-dark"`. Reuse this anywhere a button sits on dark. */
.button--on-dark {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
/* Hover = "C" (white flood + dark text): the calypso disc/fill turn WHITE and
   the label flips to dark, so on hover the button reads white with dark text.
   The disc/label travel animation is unchanged — only the colours differ. */
.button--on-dark::before,
.button--on-dark::after { background: #ffffff; }
.button--on-dark:hover,
.button--on-dark:focus-visible { color: #121314 !important; }

/* --- Reduced motion: keep the colour swap, drop the travel --- */
@media (prefers-reduced-motion: reduce) {
  .button::before, .button::after,
  .button .text,
  .button .text::after,
  .button .text span {
    transition: none !important;
    animation: none !important;
  }
  .button:hover .text[data-btn-label] > span,
  .button:focus-visible .text[data-btn-label] > span {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .button .text[data-btn-label]::after {
    display: none;
  }
  .button:hover::after,
  .button:focus-visible::after { transform: translate3d(0, 0, 0); transition: none !important; }
}