/**
 * Infoptic Footer Widget Styles
 *
 * Pixel-by-pixel match to /infoptic-Refont/v2/index.html & /infoptic-Refont/v2/styles.css
 * Features:
 * - Full-width dark navy section (#04172D, --navy-deep)
 * - 4-Column Grid: 1.4fr .9fr 1.1fr 1fr
 *   - Col 1 (Brand): White logo, description paragraph (max-width 34ch)
 *   - Col 2 (Explore): Uppercase Orbitron title, vertical navigation links
 *   - Col 3 (Contact): Uppercase Orbitron title, address, mailto, tel, discovery call link
 *   - Col 4 (Our Network): Uppercase Orbitron title, external network links
 * - Bottom Bar: Space-between flex row with:
 *   - Dynamic copyright text (0.78rem, rgba(255,255,255,.52))
 *   - Sky blue line separator (#77C5F1, 0.28 opacity, 1px height)
 *   - Language Switcher pill with active state (#2345A3)
 * - Responsive Breakpoints:
 *   - <= 1080px: 2 columns (repeat(2, 1fr))
 *   - <= 560px: 1 column stack; bottom bar stacks (copyright top, lang switcher bottom)
 *
 * @package InfopticCore
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@600;700;800&display=swap');

:root {
  --infoptic-footer-navy: #04172d;
  --infoptic-footer-blue: #2345A3;
  --infoptic-footer-sky: #77C5F1;
  --infoptic-footer-text: #a8b8d0;
  --infoptic-footer-muted: #c7d6ea;
  --infoptic-footer-faded: rgba(255, 255, 255, .52);
  --infoptic-footer-border: rgba(255, 255, 255, .08);
  --infoptic-footer-top-border: rgba(255, 255, 255, .06);
}

/* ==========================================================================
   Footer Wrapper & Container
   ========================================================================== */

footer.infoptic-footer,
.elementor-widget-infoptic-footer footer.infoptic-footer,
.site-footer.infoptic-footer {
  background-color: var(--infoptic-footer-navy, #04172d) !important;
  color: var(--infoptic-footer-muted, #c7d6ea) !important;
  padding: 48px 0 22px;
  border-top: 1px solid var(--infoptic-footer-top-border, rgba(255, 255, 255, .06)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

footer.infoptic-footer *,
.elementor-widget-infoptic-footer * {
  box-sizing: border-box !important;
}

.infoptic-footer .infoptic-footer__container,
.infoptic-footer .container {
  width: min(100% - 40px, 1240px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ==========================================================================
   4-Column Grid
   ========================================================================== */

.infoptic-footer .infoptic-footer__grid,
.infoptic-footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr .9fr 1.1fr 1fr !important;
  gap: 28px !important;
  margin-bottom: 32px !important;
}

/* Column 1: Brand */
.infoptic-footer .infoptic-footer__brand,
.infoptic-footer .footer-brand {
  display: flex !important;
  flex-direction: column !important;
}

.infoptic-footer .infoptic-footer__logo,
.infoptic-footer .footer-logo {
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.infoptic-footer .infoptic-footer__logo img,
.infoptic-footer .footer-logo img {
  height: 34px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
}

.infoptic-footer .infoptic-footer__desc,
.infoptic-footer .footer-brand p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: .88rem !important;
  line-height: 1.6 !important;
  max-width: 34ch !important;
  margin: 0 0 14px 0 !important;
  color: var(--infoptic-footer-text, #a8b8d0) !important;
}

/* Columns 2, 3, 4 */
.infoptic-footer .infoptic-footer__col,
.infoptic-footer .footer-col {
  display: flex !important;
  flex-direction: column !important;
}

.infoptic-footer .infoptic-footer__col-title,
.infoptic-footer .footer-col h4 {
  font-family: 'Orbitron', system-ui, -apple-system, sans-serif !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}

.infoptic-footer .infoptic-footer__list,
.infoptic-footer .footer-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.infoptic-footer .infoptic-footer__item,
.infoptic-footer .footer-col li {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  margin-bottom: 9px !important;
  color: var(--infoptic-footer-text, #a8b8d0) !important;
}

.infoptic-footer .infoptic-footer__item:last-child,
.infoptic-footer .footer-col li:last-child {
  margin-bottom: 0 !important;
}

.infoptic-footer .infoptic-footer__link,
.infoptic-footer .footer-col a {
  color: var(--infoptic-footer-text, #a8b8d0) !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: color .15s ease, transform .15s ease !important;
}

.infoptic-footer .infoptic-footer__link:hover,
.infoptic-footer .footer-col a:hover {
  color: var(--infoptic-footer-sky, #77C5F1) !important;
}

/* ==========================================================================
   Bottom Bar
   ========================================================================== */

.infoptic-footer .infoptic-footer__bottom-bar,
.infoptic-footer .footer-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--infoptic-footer-border, rgba(255, 255, 255, .08)) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: .78rem !important;
  color: var(--infoptic-footer-faded, rgba(255, 255, 255, .52)) !important;
  flex-wrap: wrap !important;
}

.infoptic-footer .infoptic-footer__copyright {
  color: var(--infoptic-footer-faded, rgba(255, 255, 255, .52)) !important;
  font-size: .78rem !important;
  line-height: 1.4 !important;
}

/* Sky Line Separator */
.infoptic-footer .infoptic-footer__sky-line,
.infoptic-footer .sky-line-separator {
  flex: 1 !important;
  height: 1px !important;
  background-color: var(--infoptic-footer-sky, #77C5F1) !important;
  opacity: .28 !important;
  margin: 0 16px !important;
  min-width: 24px !important;
}

/* Language Switcher */
.infoptic-footer .infoptic-footer__lang-switch,
.infoptic-footer .lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: rgba(255, 255, 255, .07) !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  font-family: 'Orbitron', system-ui, -apple-system, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.infoptic-footer .infoptic-footer__lang-btn,
.infoptic-footer .lang-btn {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, .62) !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  transition: background .15s ease, color .15s ease !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

.infoptic-footer .infoptic-footer__lang-btn.active,
.infoptic-footer .infoptic-footer__lang-btn.is-active,
.infoptic-footer .lang-btn.active,
.infoptic-footer .lang-btn.is-active,
.infoptic-footer .infoptic-footer__lang-btn:hover,
.infoptic-footer .lang-btn:hover {
  background-color: var(--infoptic-footer-blue, #2345A3) !important;
  color: #ffffff !important;
}

.infoptic-footer .infoptic-footer__lang-divider {
  opacity: .4 !important;
  color: rgba(255, 255, 255, .62) !important;
  user-select: none !important;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1080px) {
  .infoptic-footer .infoptic-footer__grid,
  .infoptic-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 28px !important;
  }
}

@media (max-width: 560px) {
  footer.infoptic-footer,
  .elementor-widget-infoptic-footer footer.infoptic-footer,
  .site-footer.infoptic-footer {
    padding: 38px 0 20px;
  }

  .infoptic-footer .infoptic-footer__grid,
  .infoptic-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .infoptic-footer .infoptic-footer__brand p,
  .infoptic-footer .footer-brand p {
    max-width: 100% !important;
  }

  .infoptic-footer .infoptic-footer__sky-line,
  .infoptic-footer .sky-line-separator {
    display: none !important;
  }

  .infoptic-footer .infoptic-footer__bottom-bar,
  .infoptic-footer .footer-bottom-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding-top: 16px !important;
  }

  .infoptic-footer .infoptic-footer__lang-switch,
  .infoptic-footer .lang-switch {
    margin: 0 auto !important;
  }
}