/* ===========================================================================
   sterling-ui.css — shared component classes.

   Applied to native Elementor widgets by adding the class in the widget's
   Advanced tab. Nothing in this file knows which template it is in, so the
   same button is the same button in the footer, on a page, or in a band.

   Tokens come from the :root block in sterling-header.css, which loads first.

   Deliberate note: the site header still carries its own copy of the button
   and label rules, scoped to .sterling-header. That file is 40 KB of working,
   measured, keyboard-verified CSS and de-scoping it is a separate pass with
   its own verification. THIS file is the canonical definition from here on.
   The header migrates to it the next time there is a reason to open it.
   =========================================================================== */

/* --- Utility -------------------------------------------------------------
   Unscoped, because the sibling-venues menu filter emits a .visually-hidden
   span and that menu is now rendered in the footer as well as the header.
-------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- The shell -----------------------------------------------------------
   ONE layout contract for the whole site. Every band is full-bleed for its
   ground; every band's inner box is .st-shell, so the header, the homepage,
   the invitation and the footer all start their content on the same line.

   Content box = min(1240px, 100vw - 2 x gutter), centred.

              | gutter | content max
   >= 1280    |  80px  | 1240px
   768-1279   |  48px  | 1240px
   <= 767     |  24px  | 1240px

   The 1280 boundary is the header's own: it is where the navigation becomes
   a drill-down. Two different breakpoint sets on one page is how a footer
   ends up 20px from the edge while the bar sits at 80.

   Elementor Containers are driven through their own custom properties rather
   than by overriding padding, because .e-con already reads --padding-inline-*
   and --content-width. Setting the variables works with the widget; setting
   the property fights it and loses to the per-post stylesheet.
-------------------------------------------------------------------------- */

:root {
  --shell-max:    77.5rem;  /* 1240px */
  --shell-gutter: 5rem;     /*   80px */
}

@media (max-width: 1279px) {
  :root { --shell-gutter: 3rem; }    /* 48px */
}

@media (max-width: 767px) {
  :root { --shell-gutter: 1.5rem; }  /* 24px */
}

:root { --shell-outer: calc(var(--shell-max) + 2 * var(--shell-gutter)); }

.st-shell {
  --content-width: var(--shell-max);
  --padding-inline-start: var(--shell-gutter);
  --padding-inline-end: var(--shell-gutter);
}

/* Plain elements — anything that is not an Elementor Container. */
.st-shell:not(.e-con) {
  width: 100%;
  max-width: var(--shell-outer);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
}

/* A reading measure inside the same gutter. The band still spans the page;
   only the column narrows. */
.st-shell--narrow {
  --content-width: 40rem;
}

/* --- The label -----------------------------------------------------------
   Small letterspaced uppercase. Gilda has no small caps, so Clash carries it.
   Goes on a Heading widget; Elementor puts the class on the wrapper.
-------------------------------------------------------------------------- */

.st-label .elementor-heading-title,
.st-label p {
  font-family: var(--font-chrome);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

/* --- The button ----------------------------------------------------------
   Outlined rectangle that fills by a wipe from the bottom rather than by a
   colour change. Two tokens rather than currentColor, because a pseudo-element
   painted with currentColor follows its parent as that colour transitions —
   so the fill wiped up on hover also became the hover text colour on the way,
   white on white, an invisible button.
-------------------------------------------------------------------------- */

.st-btn .elementor-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  background: none;
  border: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-chrome);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  color: var(--st-btn-ink-rest, var(--ink-strong));
  transition: color var(--dur-base, 0.3s) var(--ease-out, ease);
}

.st-btn .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--st-btn-fill, var(--ink-strong));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-base, 0.3s) var(--ease-out, ease);
}

.st-btn .elementor-button:hover::before,
.st-btn .elementor-button:focus-visible::before {
  transform: scaleY(1);
}

/* The border is currentColor, so without this it takes the hovered text
   colour and the filled button ends up ringed in its own text. It travels
   with the fill instead, which is what makes the hovered state one shape. */
.st-btn .elementor-button:hover,
.st-btn .elementor-button:focus-visible {
  color: var(--st-btn-ink, var(--surface));
  border-color: var(--st-btn-fill, var(--ink-strong));
}

/* Already solid at rest, so the wipe runs the other way. */
.st-btn--solid .elementor-button {
  background: var(--st-btn-fill, var(--ink-strong));
  color: var(--st-btn-ink, var(--surface));
  border-color: var(--st-btn-fill, var(--ink-strong));
}

.st-btn--solid .elementor-button::before {
  background: var(--st-btn-ink, var(--surface));
}

.st-btn--solid .elementor-button:hover,
.st-btn--solid .elementor-button:focus-visible {
  color: var(--st-btn-fill, var(--ink-strong));
  border-color: var(--st-btn-fill, var(--ink-strong));
}

/* Colour only. Geometry is never redeclared. */
.st-btn--on-dark {
  --st-btn-fill: var(--surface);
  --st-btn-ink: var(--ink-strong);
  --st-btn-ink-rest: var(--on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .st-btn .elementor-button,
  .st-btn .elementor-button::before {
    transition-duration: 1ms;
  }
}