/*
 * Andicom Theme — Footer Styles
 *
 * Estructura:
 *   .site-footer
 *   ├── .site-footer__top         (zona superior, padding 60px)
 *   │   └── .site-footer__inner   (grid: 25% brand | 75% links)
 *   │       ├── .site-footer__brand   (logo + tagline + año)
 *   │       └── .site-footer__links   (grid 3 columnas de menú)
 *   │           └── .site-footer__col (cada columna de links)
 *   └── .site-footer__bottom      (zona inferior, border-top)
 *       └── .site-footer__bottom-inner (flex: copyright | social)
 *
 * Variables compartidas con header.css:
 *   --color-accent-orange:  #FF4D00
 *   --color-accent-magenta: #FF006E
 *   --color-accent-yellow:  #FFB800   (nuevo)
 *   --color-nav-text:       #ffffff
 *
 * Iconos de redes sociales:
 *   Cada li del menú 'footer-social' recibe una clase CSS desde WP Admin.
 *   El ícono se inyecta vía ::before con background-image (SVG data URI).
 *   El texto del link se oculta con font-size: 0.
 *   En hover: fondo #FFB800, ícono negro vía filter: invert(1).
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES adicionales del footer
═══════════════════════════════════════════════════════════════ */

:root {
	--footer-bg:           #111111;
	--footer-top-padding:  60px;
	--footer-border:       rgba(255, 255, 255, 0.1);
	--color-accent-yellow: #FFB800;
	--footer-link-color:   #cccccc;
	--footer-meta-color:   #666666;
	--footer-title-color:  #FFB800;
	--social-bg:           #222222;
	--social-size:         36px;
	--social-icon-size:    18px;
}
/* ═══════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
═══════════════════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
}

@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER BASE
═══════════════════════════════════════════════════════════════ */

.site-footer {
	background-color: #0a0a0a;
	color: var(--footer-link-color);
	font-family: 'Bai Jamjuree', sans-serif;
}
/* ═══════════════════════════════════════════════════════════════
   ZONA SUPERIOR
═══════════════════════════════════════════════════════════════ */

.site-footer__top {
	padding: var(--footer-top-padding) 0;
}

/* Contenedor interno — grid 2 cols: 25% | 75% */
.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 48px;
	align-items: start;
}

/* ── Columna izquierda: Brand ── */

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__logo-link {
	display: inline-flex;
	text-decoration: none;
	outline-offset: 4px;
}

.site-footer__logo {
	width: auto;
	display: block;
}

.site-footer__tagline {
	margin: 0;
	color: var(--footer-link-color);
	font-size: 14px;
	line-height: 1.6;
}

.site-footer__year {
	margin: 0;
	color: #999999;
	font-size: 13px;
}

/* ── Columna derecha: 3 columnas de links ── */

.site-footer__links {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 32px;
    text-align: right;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Título de columna (nombre del menú asignado en WP) */
.site-footer__col-title {
	margin: 0;
	color: var(--footer-title-color);
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Lista de links de cada columna */
.footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-nav li a {
	color: var(--footer-link-color);
	font-size: 14px;
	font-family: 'Bai Jamjuree', sans-serif;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.footer-nav li a:hover {
	color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   ZONA INFERIOR
═══════════════════════════════════════════════════════════════ */

.site-footer__bottom {
	border-top: 1px solid var(--footer-border);
	padding: 20px 0;
}

.site-footer__bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Copyright */
.site-footer__copyright {
	margin: 0;
	color: var(--footer-meta-color);
	font-family: 'Bai Jamjuree', sans-serif;
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   ICONOS DE REDES SOCIALES
   Círculos oscuros con ícono SVG vía ::before (background-image).
   Clases asignadas desde Apariencia → Menús:
     .social-facebook, .social-instagram, .social-youtube, .social-tiktok
═══════════════════════════════════════════════════════════════ */

.site-footer__social {
	flex-shrink: 0;
}

.social-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Enlace base — círculo gris oscuro */
.social-menu li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--social-size);
	height: var(--social-size);
	background: var(--social-bg);
	border-radius: 50%;
	text-decoration: none;
	font-size: 0; /* oculta el texto del link */
	color: transparent;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	position: relative;
}

.social-menu li > a:hover {
	background: var(--color-accent-yellow);
	transform: translateY(-2px);
}

.social-menu li > a:focus-visible {
	outline: 2px solid var(--color-accent-yellow);
	outline-offset: 2px;
}

/* Pseudo-elemento que muestra el SVG */
.social-menu li > a::before {
	content: '';
	display: block;
	width: var(--social-icon-size);
	height: var(--social-icon-size);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: filter 0.2s ease;
}

/* En hover: invert(1) convierte blanco → negro */
.social-menu li > a:hover::before {
	filter: invert(1);
}

/* ── Facebook ── */
/* Ícono: letra "f" (Feather Icons Facebook path) */
.social-menu li.social-facebook > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

/* ── Instagram ── */
/* Ícono: cámara con círculo interior + punto (Feather Icons) */
.social-menu li.social-instagram > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");
}

/* ── YouTube ── */
/* Ícono: contenedor redondeado + triángulo de play (todo blanco) */
.social-menu li.social-youtube > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z'/%3E%3Cpolygon fill='%23111111' points='9.75 15.02 15.5 12 9.75 8.98 9.75 15.02'/%3E%3C/svg%3E");
}

/* En hover YouTube: el triángulo también se invierte (queda blanco sobre negro = visible) */
/* Se usa un SVG alternativo para hover con triángulo claro */
.social-menu li.social-youtube > a:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z'/%3E%3Cpolygon fill='%23FFB800' points='9.75 15.02 15.5 12 9.75 8.98 9.75 15.02'/%3E%3C/svg%3E");
	filter: none; /* sobreescribe el filter: invert(1) genérico */
}

/* ── TikTok ── */
/* Ícono: logo TikTok (nota musical doble) */
.social-menu li.social-tiktok > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.77a4.85 4.85 0 0 1-1.01-.08z'/%3E%3C/svg%3E");
}
/* ── LinkedIn ── */
.social-menu li.social-linkedin > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

/* ── X (Twitter) ── */
.social-menu li.social-x > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.741l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   Links en 2 filas de columnas
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.site-footer__inner {
		grid-template-columns: 1fr 2fr;
		gap: 32px;
	}

	.site-footer__links {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 767px)
   Todo apilado verticalmente
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	.site-footer__top {
		padding: 40px 0;
	}

	/* Una sola columna: brand arriba, links debajo */
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.site-footer__brand {
		align-items: flex-start;
	}

	/* Links en 1 sola columna */
	.site-footer__links {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Zona inferior: apilada */
	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.site-footer__copyright {
		order: 2;
	}

	.site-footer__social {
		order: 1;
	}
}

@media (max-width: 480px) {

	.site-footer__inner,
	.site-footer__bottom-inner {
		padding: 0 16px;
	}
}