/*!
 * Album Familiar - Branding del front (independiente del tema).
 * Copia de las personalizaciones que vivian en el style.css de astra_child:
 * aplican los colores de marca (--brand-bg/--brand-text/--brand-hover) al
 * header, footer, menu y titulos, mas los estilos de pildoras y grid de
 * miembros. Apunta a las clases de Astra (padre e hijo comparten markup), asi
 * que funciona con cualquier tema Astra. El modulo "Branding y presentacion"
 * encola este fichero en el front cuando esta ON.
 */

/* ===========================
   Personalizaciones Juanjo
   =========================== */

/* Fondo del header igual que el login */
.site-header,
.main-header-bar {
  background-color: var(--brand-bg) !important;
}

/* Quitar borde/sombra del header */
.main-header-bar,
.main-header-bar .ast-container {
  border: none !important;
  box-shadow: none !important;
}

/* ===========================
   Personalizaciones Menú
   =========================== */

/* Color normal de los enlaces del menú */
.main-header-menu > li > a {
  color: #333 !important; /* gris oscuro legible */
  font-weight: 500;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}

/* Hover (al pasar el ratón) */
.main-header-menu > li > a:hover {
  color: #c0392b !important; /* rojo elegante */
  border-bottom: 2px solid #c0392b;
}

/* Enlace activo (página actual) */
.main-header-menu > li.current-menu-item > a {
  color: #c0392b !important;
  border-bottom: 2px solid #c0392b;
}

/* Línea bajo el header, igual que la que separa el footer */
.site-header,
.main-header-bar,
.ast-primary-header-bar {
  border-bottom: 1px solid #ddd !important; /* cambia el color si quieres */
}

/* === Astra Footer: forzar fondo claro en TODOS los envoltorios === */
.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-footer-adv,
.ast-small-footer,
.ast-builder-footer-wrap,
.ast-footer-copyright,
.ast-builder-grid-row,
.ast-builder-grid-row-container,
.ast-builder-grid-row-container-inner {
  background: var(--brand-bg) !important;
  background-color: var(--brand-bg) !important;
  background-image: none !important;
}

/* Texto y enlaces del footer para buen contraste */
.site-footer,
.site-footer * {
  color: #333 !important;
}
.site-footer a:hover {
  color: #0a58ca !important; /* ajusta si quieres otro hover */
}
.miembros-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.miembro-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}
/* Base píldora */
.vis-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem; border-radius:9999px;
  border:2px solid transparent; transition:.2s;
  background:#eee; color:#111;
}

/* Colores correctos DESDE EL INICIO (fondo + texto) */
.vis-pill.ring-Familiar{
  background-color:#2e7d32;   /* verde */
  border-color:#2e7d32;
  color:#fff;                  /* texto blanco: visible */
}
.vis-pill.ring-Privada{
  background-color:#f2b600;   /* amarillo */
  border-color:#f2b600;
  color:#fff;                  /* <- blanco también aquí */
}

/* Icono hereda el color del texto (blanco) */
.vis-upload-icon{ color: inherit; }
.vis-upload-svg { fill: #666; }
.vis-pill .vis-text{ color: inherit; }
.vis-upload-icon, .vis-upload-svg { pointer-events: auto; cursor: pointer; }

/* ===== Colores de marca: texto y hover en menú; texto en footer ===== */

/* Texto del menú principal (Astra) */
.main-header-menu > li > a,
.ast-builder-menu-1 .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  color: var(--brand-text) !important;
  transition: color .2s ease, border-color .2s ease;
}

/* Hover y activo (página actual/ancestro) */
.main-header-menu > li > a:hover,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a,
.ast-builder-menu-1 .menu-item > .menu-link:hover,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link {
  color: var(--brand-hover) !important;
  border-bottom: 2px solid var(--brand-hover);
}

/* Footer (texto y enlaces) */
.site-footer, .site-footer * { color: var(--brand-text) !important; }
.site-footer a:hover { color: var(--brand-hover) !important; }

/* ===== Título de página / post ===== */
.entry-title,
.entry-title a,
.ast-archive-title,
.ast-archive-description .page-title,
.ast-hero-title,
.ast-page-title {
  color: var(--brand-text) !important;
}

.entry-title a:hover {
  color: var(--brand-hover) !important;
}


/* Título del sitio (header) */
header#masthead .site-title a,
.site-title a,
.ast-site-title-wrap .site-title a,
.site-branding .ast-site-identity .site-title a,
.ast-builder-layout-element .site-title a {
  color: var(--brand-text) !important;
}
header#masthead .site-title a:hover,
.site-title a:hover,
.ast-site-title-wrap .site-title a:hover,
.site-branding .ast-site-identity  .site-title a:hover,
.ast-builder-layout-element .site-title a:hover {
  color: var(--brand-hover) !important;
}

/* Centramos y usamos el color del header */
.site-footer .ast-footer-copyright {
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.site-footer,
.site-footer a,
.site-footer .ast-footer-copyright {
  color: var(--brand-text) !important;
}
.site-footer a:hover {
  color: var(--brand-hover) !important;
}

/* Saltos de línea solo en móvil para el texto inyectado por filtros */
.br-mob { display: none; }
@media (max-width: 600px) { .br-mob { display: inline; } }

/* Fallback: oculta el copyright nativo en móvil y muestra el nuestro */
.mj-mobile-copyright { display: none; text-align:center; padding: 12px 16px; color: var(--brand-text); }
@media (max-width: 600px) {
  .mj-mobile-copyright { display: block; }
  .site-footer .ast-footer-copyright { display: none !important; }
}