/* ---- Site footer — CTA band, nav columns, bottom bar ----
   Sand surface: text falls back to the site's standard ink/muted colors
   from tokens.css. Border is re-scoped, though — the standard hairline
   (--color-stone) is too close in tone to this background to read as a
   line, so it's swapped for a low-alpha ink line instead. */

.site-footer {
  --color-border: rgba(27, 26, 23, 0.18);
  background-color: var(--color-sand);
}

/* ---- CTA band ---- */

/* Bottom padding is tightened on mobile only — the gap it leaves above the
   nav row's own top padding (.site-footer__nav below) was reading as too
   much dead space between the "Make an enquiry" CTA and the logo beneath
   it. Restored to the original symmetric space-20 at 768px+ (tablet/
   desktop unchanged); the 1024px+ tier below still applies to both sides. */
.site-footer__cta {
  display: flex;
  justify-content: center;
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .site-footer__cta {
    padding-bottom: var(--space-20);
  }
}

.site-footer__cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.site-footer__cta-heading {
  max-width: 20ch;
}

@media (min-width: 768px) {
  .site-footer__cta-col {
    padding-block: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .site-footer__cta {
    padding-top: var(--space-32);
    padding-bottom: var(--space-16);
  }
}

.site-footer :is(a, button):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ---- Main footer nav ----
   Brand block + 5 link groups (Design, Construction, Portfolio, About,
   Contact). At desktop this overrides the inherited 12-col template: equal
   1fr tracks stretched each column across its full share of the (very wide)
   container, leaving a slab of dead air to the right of any short column's
   content (Contact's two links, worst offender). Sizing tracks to
   max-content and spreading them with justify-content keeps every column
   only as wide as what's actually in it, while still running the group
   edge-to-edge. */

/* Top padding tightened on mobile only, same reasoning as the CTA band's
   bottom padding above — the two combined were leaving ~144px of dead
   space above the logo. Restored to the original symmetric space-16 at
   768px+ (tablet/desktop unchanged). */
.site-footer__nav {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  row-gap: var(--space-12);
}

@media (min-width: 768px) {
  .site-footer__nav {
    padding-top: var(--space-16);
  }
}

/* Brand block (logo/tagline/social) stays full-width at every size — it
   doesn't pair sensibly with a link column. The 5 nav columns (Portfolio,
   Design, Construction, About, Studios) used to each stack full-width too,
   which made the mobile footer run very long (9 stacked blocks before the
   legal/bottom bars even start). Pairing them 2-across here cuts that
   roughly in half; still one full stack at 768px+ tablet width where 3-4
   columns already fit comfortably side by side (grid-column: span 4 below),
   and the explicit 6-column layout takes over at 1024px+ regardless. */
.site-footer__brand {
  grid-column: span 12;
}

.site-footer__col {
  grid-column: span 6;
}

@media (min-width: 768px) {
  .site-footer__col {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {
  .site-footer__nav {
    grid-template-columns: repeat(6, max-content);
    justify-content: space-between;
  }

  .site-footer__brand,
  .site-footer__col {
    grid-column: auto;
  }
}

/* Mobile: logo + tagline sit side by side. flex-wrap + the social list's
   flex-basis: 100% below force the social icons onto their own row rather
   than trying to fit a fourth item on the logo/tagline row — no extra
   wrapper markup needed. Reverts to the original stacked column at 768px+
   (tablet/desktop unchanged). */
.site-footer__brand {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
}

.site-footer__social {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .site-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .site-footer__social {
    flex-basis: auto;
  }
}

.site-footer__logo {
  display: inline-flex;
}

.site-footer__logo svg {
  height: var(--space-16);
  width: auto;
}

.site-footer__tagline {
  max-width: 24ch;
  color: var(--color-text-muted);
}

/* ---- Social row — icons only, no boxes/circles, small and understated ---- */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-footer__social-link {
  display: inline-flex;
  color: var(--color-text);
}

.site-footer__social-link svg {
  width: 16px;
  height: 16px;
}

.site-footer__col-title {
  margin-bottom: var(--space-5);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Underline matches the sitewide .btn--text treatment (button.css): hidden
   at rest, grows in left-to-right on hover/focus, collapses away to the
   right on exit. border-bottom stays permanently transparent — keeping it
   (rather than removing it) preserves the box height that 1px used to
   occupy, same trick .btn--text uses. */
.site-footer__link {
  position: relative;
  align-self: flex-start;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
}

.site-footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-footer__link:hover::after,
.site-footer__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer__link[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__link::after {
    transition: none;
  }
}

/* ---- Studios column — two address blocks replacing the old Contact
   column's plain link list. `<address>` sets italic by UA default; reset
   to normal to match the rest of the footer's body text. */
.site-footer__studios {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.site-footer__studio {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__studio-name {
  color: var(--color-text);
  font-weight: var(--font-weight-demibold);
}

.site-footer__studio-detail {
  color: var(--color-text-muted);
}

/* ---- Company & registration info ----
   Uses the generic 12-col .grid + .col-span-3 utility for the 1/2/4-column
   stack at mobile/tablet. At desktop that utility's equal 1fr columns
   stretch across the full (very wide) container regardless of content
   length, leaving dead air to the right of the shortest column (Building
   Pty Ltd, with only two detail lines) — so, same fix as the nav row above,
   desktop sizes each column to its own content and spreads the four across
   the row instead. Borders top and bottom: top is the new divider below the
   nav; bottom is the pre-existing divider that used to sit on
   .site-footer__nav, now shifted down to stay directly above the bottom bar. */
.site-footer__legal {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Same 2-across pairing as the nav columns above: the 4 legal blocks used
   to stack full-width (4 rows) below 768px. Same-specificity override of
   the shared .col-span-3 utility (grid.css) — unconditional, so it also has
   to re-declare the 768px/1024px tiers below (grid.css's own media queries
   for .col-span-3 would otherwise lose the cascade to this later,
   equal-specificity, unconditional rule at every width, not just mobile). */
.site-footer__legal-col {
  grid-column: span 6;
}

@media (min-width: 768px) {
  .site-footer__legal-col {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {
  .site-footer__legal {
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
  }

  .site-footer__legal-col {
    grid-column: auto;
  }
}

.site-footer__legal-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__legal-title {
  color: var(--color-text);
  font-weight: var(--font-weight-demibold);
}

.site-footer__legal-detail {
  color: var(--color-text-muted);
}

/* ---- Bottom bar ---- */

.site-footer__bottom {
  padding-block: var(--space-6);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

.site-footer__bottom-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__bottom-dot {
  color: var(--color-text-muted);
}

.site-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

.site-footer__lang svg {
  width: 14px;
  height: 14px;
}

.site-footer__credit-link {
  border-bottom: 1px solid currentColor;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.site-footer__credit-link:hover {
  border-bottom-color: transparent;
}

/* ---- Fade-in reveal ----
   Hidden state only applies once JS (footer-fade.js) adds .site-footer--fade,
   so the footer stays fully visible without JS. The bare attribute
   (data-footer-fade="") is the hidden state; JS flips it to "visible" as
   each group rises into view, releasing the selector below. */

.site-footer--fade [data-footer-fade] {
  transition:
    opacity calc(var(--duration-slow) * 2) var(--ease-standard),
    transform calc(var(--duration-slow) * 2) var(--ease-standard);
}

/* Suppresses both transitions above (including the more specific
   .site-footer__cta-col override below) for the one frame in which JS
   first applies the hidden state (footer-fade.js), so a footer already
   painted fully visible snaps straight to hidden instead of visibly fading
   out. !important guarantees it wins regardless of the higher-specificity
   cta-col rule. */
.site-footer--fade--instant [data-footer-fade] {
  transition: none !important;
}

.site-footer--fade [data-footer-fade=""] {
  opacity: 0;
  transform: translateY(var(--space-4));
}

/* CTA columns mirror the panel text entrance so the footer h2s arrive
   exactly like the panel headings above. Values intentionally duplicate
   TEXT_ANIMATION in panel-text.js (enterDistance 48px, blur 6px,
   duration 0.9s, power3.out ≈ quart-out) — keep the two in sync. */
.site-footer--fade .site-footer__cta-col[data-footer-fade] {
  transition:
    opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-footer--fade .site-footer__cta-col[data-footer-fade=""] {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
}

.site-footer--fade .site-footer__cta-col[data-footer-fade="visible"] {
  filter: blur(0);
}

/* Gentle stagger: nav columns sweep left to right */
.site-footer--fade .site-footer__nav > :nth-child(2) {
  transition-delay: var(--duration-fast);
}

.site-footer--fade .site-footer__nav > :nth-child(3) {
  transition-delay: calc(var(--duration-fast) * 2);
}

.site-footer--fade .site-footer__nav > :nth-child(4) {
  transition-delay: calc(var(--duration-fast) * 3);
}

.site-footer--fade .site-footer__nav > :nth-child(5) {
  transition-delay: calc(var(--duration-fast) * 4);
}

.site-footer--fade .site-footer__nav > :nth-child(6) {
  transition-delay: calc(var(--duration-fast) * 5);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer--fade [data-footer-fade] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}