/* ===========================================================================
   sterling-footer.css — the invitation band and the site footer.

   Two grounds, deliberately. The invitation sits on Surface Sunk, a light
   band that still reads as part of the page; the footer sits on Surface Ink.
   Running both dark would end every page on seven hundred pixels of black,
   and the last thing a visitor sees would be furniture rather than an ask.

   Layout comes from the Elementor Containers. This file carries colour,
   type, hairlines and hover, plus the --width values, because Elementor's
   own container width is read from that variable.
   =========================================================================== */

/* ===========================================================================
   THE INVITATION
   =========================================================================== */

.sterling-invite {
  background: var(--surface-sunk);
  border-top: 1px solid var(--rule);
  padding-block: clamp(4rem, 8vw, 7.5rem);
  text-align: center;
}

/* The one page where inviting the visitor onward would be inviting them to
   the page they are already reading. */
.page-id-26 .sterling-invite {
  display: none;
}

/* Width comes from .st-shell / .st-shell--narrow in sterling-ui.css, so the
   invitation column sits inside the same page gutter as the header bar and
   the footer columns. Nothing here redeclares a width. */
.sterling-invite .invite__inner {
  text-align: center;
}

.sterling-invite .invite__label .elementor-heading-title {
  color: var(--ink-muted);
}

.sterling-invite .invite__title .elementor-heading-title {
  color: var(--ink-strong);
  line-height: 1.12;
  margin: 0;
}

.sterling-invite .invite__lead {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--ink);
  line-height: 1.7;
}

.sterling-invite .invite__actions {
  --width: auto;
}

@media (max-width: 480px) {
  .sterling-invite .invite__actions .elementor-widget-button,
  .sterling-invite .invite__actions .elementor-button {
    width: 100%;
  }
}

/* ===========================================================================
   THE FOOTER
   =========================================================================== */

/* The on-dark ramp, declared here rather than in :root.

   The global --on-dark-* tokens are alpha whites, and they are alpha whites
   for a reason: in the header they are painted over the hero video, where an
   opaque grey hairline would read as a grey hairline rather than as a hairline.
   Down here the ground is known and constant, so the ramp is the warm-neutral
   one design-system.md §1 specifies. Scoping it to this band keeps the header
   exactly as it was measured.

   Contrast on --surface-ink: on-dark 17.9 : 1, muted 7.5 : 1, faint 5.5 : 1.
   Every one of the three carries text, so every one of the three clears AA. */
.sterling-footer {
  --on-dark:       #fbfaf8;  /* paper white, the same white as --surface  */
  --on-dark-muted: #a8a39b;  /* secondary text                            */
  --on-dark-faint: #8e8a83;  /* column headings, the legal row            */
  --on-dark-rule:  #2e2c29;  /* hairlines: felt, not seen                 */

  background: var(--surface-ink);
  color: var(--on-dark-muted);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: 1.7;
}

.sterling-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast, 0.2s) var(--ease-out, ease);
}

.sterling-footer a:hover,
.sterling-footer a:focus-visible {
  color: var(--on-dark);
}

.sterling-footer :focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

/* --- The columns ------------------------------------------------------ */

.sterling-footer .foot__inner {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

/* Grid rather than a wrapping flex row of percentages. Four percentage widths
   summing to 94% still overflow once the gaps are counted, and the fourth
   column drops to a line of its own — which is what was happening: the
   Arrowhead Family column was rendering underneath the brand, not beside
   Weddings & Events. Grid tracks are sized after the gaps, so there is no sum
   to keep in step with the gap value. */
.sterling-footer .foot__inner > .e-con-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-7);          /* 40px */
  align-items: start;
}

/* Elementor gives every Container 10px of inline padding. Left on, the brand
   and every column start 10px inside the shell, so the footer's first
   character does not sit on the same line as the header's. */
.sterling-footer .foot__brand,
.sterling-footer .foot__col,
.sterling-footer .foot__legal > .e-con-inner > * {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --width: 100%;
}

/* Tablet: the brand takes its own row, the three link columns share the next.
   The breakpoints are the shell's 1280 and 768, not a second set of the
   footer's own. */
@media (max-width: 1279px) {
  .sterling-footer .foot__inner > .e-con-inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .sterling-footer .foot__brand {
    grid-column: 1 / -1;
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 767px) {
  .sterling-footer .foot__inner > .e-con-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* --- The mark and the contact block ----------------------------------- */

/* The lockup is a grid, and in the header it is centred because the header
   centres it. Here it sits above a left-aligned address, so it aligns left
   with it. Centred over a left-aligned block reads as an accident. */
/* The lockup is a grid, and in the header it is centred because the header
   centres it. Here it sits above a left-aligned address, so it aligns left
   with it. Centred over a left-aligned block reads as an accident.

   max-content matters as much as the alignment: the rule is a grid item with
   no intrinsic width, so in a stretched track it runs the full width of the
   column — which on tablet, where the brand spans all three, was a hairline
   most of the page wide. Sized to content it ends where the word ends. */
.sterling-footer .wordmark {
  color: var(--on-dark);
  justify-items: start;
  width: max-content;
  max-width: 100%;
}

.sterling-footer .wordmark__rule {
  background: linear-gradient(
    to right,
    transparent,
    var(--on-dark-rule) 20%,
    var(--on-dark-rule) 80%,
    transparent
  );
}

.sterling-footer .wordmark__diamond {
  background: var(--on-dark-rule);
}

/* Colour is spelled out rather than inherited. Elementor's reset.css carries
   `*, ::after, ::before { color: #000 }`, and a direct declaration on the
   element beats a colour inherited from .sterling-footer however dark the
   band is. Left to inheritance this block renders black on black. */
.sterling-footer .foot__contact,
.sterling-footer .foot__contact p {
  color: var(--on-dark-muted);
}

.sterling-footer .foot__contact p {
  margin: 0 0 var(--space-2);
}

.sterling-footer .foot__contact p:last-child {
  margin-bottom: 0;
  color: var(--on-dark-faint);
}

/* --- Column headings and link lists ------------------------------------
   The Nav Menu widget binds Elementor's global typography and colour at
   three classes, in a per-post stylesheet that loads after this one. These
   rules reach four to be heard. Symptom if they do not: the footer links
   render as 26px Gilda.
-------------------------------------------------------------------------- */

.sterling-footer .foot__heading .elementor-heading-title {
  color: var(--on-dark-faint);
  margin-bottom: var(--space-4);
}

.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu .elementor-item {
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
  padding: 0;
  color: var(--on-dark-muted);
  fill: currentColor;
}

.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu .elementor-item:hover,
.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu .elementor-item:focus-visible,
.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--on-dark);
  background: none;
}

.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu--main > ul > li,
.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu > li {
  margin-bottom: var(--space-2);
}

/* The widget always prints a second copy of the list for its own mobile
   dropdown. dropdown:none already gives those links tabindex="-1" and drops
   the toggle; this hides the copy so it cannot be seen either. */
.sterling-footer .elementor-widget-nav-menu .elementor-nav-menu--dropdown,
.sterling-footer .elementor-widget-nav-menu .elementor-menu-toggle {
  display: none !important;
}

/* The sibling-venues menu arrives with the external arrow the header filter
   adds. It is styled here rather than borrowed from the header, because the
   header's rules are scoped to .sterling-header. */
.sterling-footer .siblings__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.sterling-footer .siblings__arrow {
  width: 0.6em;
  height: 0.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease);
}

.sterling-footer .siblings__link:hover .siblings__arrow,
.sterling-footer .siblings__link:focus-visible .siblings__arrow {
  transform: translate(0.15em, -0.15em);
}

/* --- The legal row ----------------------------------------------------- */

.sterling-footer .foot__legal {
  border-top: 1px solid var(--on-dark-rule);
  padding-block: var(--space-5);
}

.sterling-footer .foot__legal,
.sterling-footer .foot__legal p {
  font-family: var(--font-chrome);
  font-size: var(--text-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--on-dark-faint);
  margin: 0;
}

.sterling-footer .foot__legal .foot__legal-links {
  --width: auto;
}

.sterling-footer .foot__social .elementor-social-icon {
  background: none;
  width: auto;
  height: auto;
  padding: var(--space-2);
  font-size: 1rem;
  color: var(--on-dark-faint);
}

.sterling-footer .foot__social .elementor-social-icon:hover,
.sterling-footer .foot__social .elementor-social-icon:focus-visible {
  background: none;
  color: var(--on-dark);
}

@media (max-width: 767px) {
  .sterling-footer .foot__legal {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sterling-footer .siblings__arrow,
  .sterling-footer a {
    transition-duration: 1ms;
  }
}