/**
 * Kreatif Agency Theme — footer interactions and reveal behaviour.
 *
 * Ordinary layout, spacing, typography, colour and responsive rules live in
 * native Bricks global classes. This file is intentionally limited to the
 * fixed reveal stack, icon masks and interaction states Bricks cannot express
 * cleanly through its controls.
 */

.site-footer__reveal-spacer {
  display: none;
  width: 100%;
  pointer-events: none;
}

html.has-footer-reveal body {
  background-color: var(--color-surface);
}

html.has-footer-reveal #brx-content,
html.has-footer-reveal .pre-footer {
  position: relative;
  z-index: 2;
}

/*
 * Bricks renders its default archive title outside #brx-content and gives it
 * vertical margins. Cover that whole foreground band so the fixed footer
 * cannot show through the otherwise transparent margin area.
 */
html.has-footer-reveal body > .bricks-archive-title-wrapper {
  position: relative;
  z-index: 2;
}

html.has-footer-reveal body > .bricks-archive-title-wrapper::before {
  position: absolute;
  z-index: -1;
  inset: -60px 0;
  content: "";
  background-color: var(--color-bg);
}

html.has-footer-reveal #brx-content {
  background-color: var(--color-bg);
}

html.has-footer-reveal .pre-footer {
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.42);
}

html.has-footer-reveal .site-footer__reveal-spacer {
  display: block;
  height: var(--footer-reveal-height);
}

html.has-footer-reveal #brx-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: var(--footer-reveal-height);
  overflow: hidden;
}

html.has-footer-reveal #brx-footer .site-footer {
  height: 100%;
}

.pre-footer__contact-link:hover,
.pre-footer__contact-link:focus-visible,
.site-footer__nav .site-footer__link:hover,
.site-footer__nav .site-footer__link:focus-visible {
  color: var(--color-accent-hover);
}

.site-footer__nav .site-footer__link:hover,
.site-footer__nav .site-footer__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pre-footer__contact-link:focus-visible,
.site-footer__link:focus-visible,
.site-footer__social-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Contact links use the approved local Phosphor icons as decorative cues. */
.site-footer__nav--contact .site-footer__link::before {
  width: calc(var(--icon-size) + 0.25rem);
  height: calc(var(--icon-size) + 0.25rem);
  flex: 0 0 calc(var(--icon-size) + 0.25rem);
  content: "";
  background-color: currentColor;
}

.site-footer__nav--contact .site-footer__link[href^="tel:"]::before {
  -webkit-mask: url("../icons/phosphor/phone.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/phone.svg") center / contain no-repeat;
}

.site-footer__nav--contact .site-footer__link[href^="mailto:"]::before {
  -webkit-mask: url("../icons/phosphor/envelope.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/envelope.svg") center / contain no-repeat;
}

.site-footer__social-link {
  transition:
    color var(--transition-duration) var(--transition-easing),
    background-color var(--transition-duration) var(--transition-easing),
    transform 220ms var(--transition-easing);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-bg);
  transform: translateY(-2px);
}

.site-footer__social-link::before {
  width: 18px;
  height: 18px;
  content: "";
  background-color: currentColor;
}

.site-footer__social-link[data-network="facebook"]::before {
  -webkit-mask: url("../icons/phosphor/facebook-logo.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/facebook-logo.svg") center / contain no-repeat;
}

.site-footer__social-link[data-network="linkedin"]::before {
  -webkit-mask: url("../icons/phosphor/linkedin-logo.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/linkedin-logo.svg") center / contain no-repeat;
}

.site-footer__social-link[data-network="instagram"]::before {
  -webkit-mask: url("../icons/phosphor/instagram-logo.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/instagram-logo.svg") center / contain no-repeat;
}

.site-footer__social-link[data-network="behance"]::before {
  -webkit-mask: url("../icons/phosphor/behance-logo.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/behance-logo.svg") center / contain no-repeat;
}

.site-footer__social-link[data-network="google"]::before {
  -webkit-mask: url("../icons/phosphor/map-pin.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/map-pin.svg") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .pre-footer__contact-link,
  .site-footer__link,
  .site-footer__social-link {
    transition: none;
  }
}