/* Modern 2026 design layer — tier: footer */

/* ============================================================================
   FOOTER — modern editorial multi-column block.
   Kept light (cream) in the logo strip for legibility, with hairline column
   dividers, a gold hotline pill, and a deep-emerald base bar underneath for
   copyright / contact / social. Keyed on the existing SiteFooter markup only.
   ============================================================================ */

.page-footer {
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-lg);
}

/* ---- Logo strip: editorial grouped columns with hairline dividers ---- */

#footer_left {
  position: relative;
  padding-bottom: var(--sp-md);
}

#footer_left > [class*="col-"] {
  position: relative;
  padding-top: var(--sp-sm);
  padding-bottom: var(--sp-sm);
}

/* Vertical hairline between logo columns on wide layouts (desktop grid only) */
@media (min-width: 993px) {
  #footer_left > [class*="col-"]:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--c-line-strong);
  }

  #footer_left > [class*="col-"].text-center:not(:first-child)::before {
    background: var(--c-gold-line);
  }
}

.title-footer {
  font-family: var(--font-sans);
}

.title-footer span {
  display: inline-block;
  margin-bottom: var(--sp-xs);
  color: var(--c-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo-footer,
.logo-footer-l,
.logo-footer-r {
  border-color: var(--c-line-strong);
  border-radius: var(--r-sm);
  background-color: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}

.logo-footer:hover,
.logo-footer-l:hover,
.logo-footer-r:hover {
  border-color: var(--c-gold-line);
  box-shadow: var(--sh-1);
}

/* Hotline → refined gold pill */
#footer_left .hotline {
  border: 0;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-600));
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t), transform var(--t);
}

#footer_left .hotline:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}

#footer_left .hotline span {
  color: #1c1606;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
}

/* ---- Deep-emerald base bar (copyright / email / social) ---- */

.page-footer .footer-background {
  background: var(--c-primary-700);
  border-top: 1px solid var(--c-gold-line);
}

.footer-coppyright {
  font-family: var(--font-sans);
  color: rgba(255, 255, 255, 0.85);
}

.footer-coppyright span {
  color: var(--c-gold);
  font-weight: 600;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t);
}

.footer-contact a:hover {
  color: #fff;
}

.footer-contact .email {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.footer-contact .menu-contact {
  list-style: none;
  position: relative;
  padding-left: var(--sp-sm);
}

.footer-contact .menu-contact::before {
  background: var(--c-gold);
}

/* ---- Social icons: refined circles with teal/gold hover ---- */

.page-footer .social .social-list a,
.social-list a {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background var(--t), color var(--t), transform var(--t),
    box-shadow var(--t);
}

.page-footer .social .social-list a:hover,
.social-list a:hover {
  background: var(--c-gold) !important;
  color: #1c1606;
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}

.page-footer .social .social-list a:focus-visible,
.social-list a:focus-visible {
  background: var(--c-teal) !important;
  color: #fff;
}

/* Decorative gradient band above footer (replaces flat border-top) */
.page-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--c-primary-700) 0%,
    var(--c-teal) 35%,
    var(--c-gold) 65%,
    var(--c-primary-700) 100%
  );
}

/* Remove the flat border-top since ::before handles the visual separation */
.page-footer {
  border-top: 0;
}

/* Social icons — spring scale on hover (supplements existing translateY) */
@media (prefers-reduced-motion: no-preference) {
  .page-footer .social .social-list a,
  .social-list a {
    transition: background var(--t), color var(--t), transform var(--t-spring),
      box-shadow var(--t);
  }
  .page-footer .social .social-list a:hover,
  .social-list a:hover {
    transform: translateY(-3px) scale(1.12);
  }
}