/*
 Theme Name: Fanda Hello Biz
 Theme URI: https://fanda.org.ar/
 Description: Child theme de Hello Biz para Fundación y Centro
 Author: sdanielgf
 Template: hello-biz
 Version: 1.0
*/

/* =========================
   BASE
   ========================= */

.site-header {
  background: #f5f7f8;
  padding: 12px 40px;
  border-bottom: 1px solid #dde2e6;
}

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

.header-logo img {
  max-height: 60px;
  width: auto;
}

/* NAV DESKTOP */
.main-nav .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.main-nav .nav-list li a {
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  color: #123d2b;
}

.main-nav .nav-list li a:hover {
  text-decoration: underline;
}

/* Botón base */
.header-cta {
  background: #0f7c4a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.header-cta:hover { opacity: 0.9; }

/* Asegurar texto blanco en botones verdes */
.header-cta,
.header-cta:visited,
.header-cta span {
  color: #ffffff !important;
}

/* Acciones header (redes + botones a la derecha) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-social .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e7f3ee;
  transition: background 0.2s ease, transform 0.2s ease;
}

.header-social .social-link svg {
  width: 18px;
  height: 18px;
  fill: #0f7c4a;
}

.header-social .social-link:hover {
  background: #0f7c4a;
  transform: translateY(-1px);
}
.header-social .social-link:hover svg { fill: #ffffff; }

/* Footer */
.site-footer {
  background: #f5f7f8;
  border-top: 1px solid #dde2e6;
  padding: 16px 20px;
  margin-top: 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  color: #123d2b;
}

.footer-inner a {
  color: #0f7c4a;
  text-decoration: none;
  font-weight: 500;
}
.footer-inner a:hover { text-decoration: underline; }

.single article h1 {
  text-align: center;
  margin-bottom: 32px;
}

/* =========================
   SUBMENÚ DESKTOP (DROPDOWN)
   ========================= */
.main-nav .nav-list > li { position: relative; }

.main-nav .nav-list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  margin-top: 8px;
  padding: 10px 0;
  list-style: none;

  background: #ffffff;
  border: 1px solid #dde2e6;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  z-index: 9999;
}

.main-nav .nav-list > li:hover > .sub-menu,
.main-nav .nav-list > li:focus-within > .sub-menu {
  display: block;
}

.main-nav .nav-list > li.menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.main-nav .nav-list .sub-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: #1f2933;
  text-decoration: none;
  white-space: nowrap;
}
.main-nav .nav-list .sub-menu a:hover { background: #f5f7f8; }

.main-nav .nav-list > li.menu-item-has-children > a::after {
  content: " ▾";
  font-size: 12px;
}

/* =========================
   CENTRO: estilos celestes
   ========================= */

/* Redes celestes SOLO para Centro */
.site-header--centro .header-social .social-link {
  background: #e8f0fe;
}
.site-header--centro .header-social .social-link svg {
  fill: #4285F4;
}
.site-header--centro .header-social .social-link:hover {
  background: #4285F4;
}
.site-header--centro .header-social .social-link:hover svg {
  fill: #ffffff;
}

/* Contactar celeste SOLO para Centro */
.site-header--centro .header-cta--contacto-centro {
  background: #e8f0fe;
  border: 2px solid #4285F4;
  color: #4285F4 !important;
}
.site-header--centro .header-cta--contacto-centro:hover {
  background: #4285F4;
  color: #ffffff !important;
}

/* Botón FANDA Fundación verde (Centro) */
.site-header--centro .header-cta--fundacion {
  background: #0f7c4a;
  border: 2px solid #0f7c4a;
  color: #ffffff !important;
}
.site-header--centro .header-cta--fundacion:hover { opacity: .9; }

/* =========================
   HAMBURGUESA MOBILE (BLINDADO)
   ========================= */

.site-header .nav-toggle {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #dde2e6;
  background: #ffffff;
  cursor: pointer;
}

/* asegurar svg visible */
.site-header .nav-toggle svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.site-header .nav-toggle svg path { fill: #123d2b !important; }

/* ============ MOBILE ============ */
@media (max-width: 900px) {
  .site-header { padding: 12px 16px; }

  .site-header .header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* mostrar hamburguesa */
  .site-header .nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
  }

  /* ocultar nav/acciones hasta abrir */
  .site-header .main-nav {
    display: none !important;
    width: 100%;
  }

  .site-header .header-actions {
    display: none !important;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
  }

  /* al abrir */
  .site-header.is-open .main-nav { display: block !important; }
  .site-header.is-open .header-actions { display: flex !important; }

  /* menu columna */
  .site-header .main-nav .nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;

    background: #ffffff;
    border: 1px solid #dde2e6;
    border-radius: 14px;
    overflow: hidden;
  }

  .site-header .main-nav .nav-list > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px;
    text-decoration: none;
  }

  /* submenú mobile */
  .site-header .main-nav .nav-list .sub-menu {
    position: static !important;
    display: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 0 10px 0 !important;
    background: transparent !important;
  }

  .site-header .main-nav .nav-list li.open > .sub-menu {
    display: block !important;
  }

  .site-header .main-nav .nav-list .sub-menu a { padding: 10px 18px; }

  .site-header .main-nav .nav-list > li.menu-item-has-children > .sub-menu::before {
    display: none !important;
  }

  /* Botón FUERA en mobile (Centro): solo mostrar el "FANDA Fundación" externo */
  .site-header--centro .cta-fundacion--inside { display: none !important; }
  .site-header--centro .cta-fundacion--outside { display: inline-flex !important; }

  /* En mobile, el botón externo se ve al lado de la hamburguesa */
  .site-header--centro .cta-fundacion--outside {
    margin-left: 0;
  }

  .header-logo img { max-height: 54px; }
}

/* ============ DESKTOP ============ */
@media (min-width: 901px) {
  /* Centro: mostrar el botón interno (al lado de Contactar) y ocultar el externo */
  .site-header--centro .cta-fundacion--inside { display: inline-flex !important; }
  .site-header--centro .cta-fundacion--outside { display: none !important; }
}

/* =========================
   FUNDACIÓN: botón FANDA Centro en celeste
   ========================= */

.site-header--fundacion .header-cta--centro{
  background: #e8f0fe;          /* celeste claro */
  border: 2px solid #4285F4;
  color: #4285F4 !important;
}

.site-header--fundacion .header-cta--centro:hover{
  background: #4285F4;
  color: #ffffff !important;
}

/* =========================
   Centro: logo más chico en mobile
   ========================= */

@media (max-width: 900px){

  /* Reducimos el ancho del logo del Centro */
  .site-header--centro .header-logo img{
    max-height: 42px;     /* antes ~54/60 */
    width: auto;
  }

  

  /* Evitamos que el botón verde baje */
  .site-header--centro .cta-fundacion--outside{
    margin-left: 8px;
  }
}

/* =========================
   Mobile: margen lateral de contenido
   ========================= */

@media (max-width: 900px){

  /* Contenido principal */
  .site-main,
  .site-main article,
  .entry-content,
  .page .entry-content {
    padding-left: 16px;
    padding-right: 16px;
  }

}

/* =========================
   Centro: menú principal en celeste
   ========================= */

/* Ítems del menú */
.site-header--centro .main-nav .nav-list > li > a {
  color: #4285F4;              /* celeste */
}

/* Hover */
.site-header--centro .main-nav .nav-list > li > a:hover {
  color: #2a6adf;              /* celeste más oscuro */
  text-decoration: underline;
}

/* Flechita de submenú en celeste */
.site-header--centro
.main-nav
.nav-list
> li.menu-item-has-children
> a::after {
  color: #4285F4;
}

/* Submenú (dropdown) */
.site-header--centro .main-nav .sub-menu a {
  color: #4285F4;
}

.site-header--centro .main-nav .sub-menu a:hover {
  background: #e8f0fe;
  color: #2a6adf;
}

/* =========================
   Fundación: Botón externo en mobile
   ========================= */

/* MOBILE */
@media (max-width: 900px) {
  .site-header--fundacion .cta-centro--inside { display: none !important; }
  .site-header--fundacion .cta-centro--outside { display: inline-flex !important; }
}

/* DESKTOP */
@media (min-width: 901px) {
  .site-header--fundacion .cta-centro--inside { display: inline-flex !important; }
  .site-header--fundacion .cta-centro--outside { display: none !important; }
}
/* =========================
   MOBILE: menú SIEMPRE hacia abajo (Centro y Fundación)
   ========================= */
@media (max-width: 900px) {

  /* 1) Primera fila: logo + (botón externo) + hamburguesa */
  .site-header .header-inner{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .site-header .header-logo{ order: 1; }
  .site-header .cta-fundacion--outside,
  .site-header .cta-centro--outside{ order: 2; }

  .site-header .nav-toggle{
    order: 3;
    margin-left: 0 !important;   /* clave: evita empuje raro */
  }

  /* 2) Segunda fila: nav y acciones ocupan todo el ancho */
  .site-header .main-nav{
    order: 10;
    flex: 0 0 100%;
    width: 100%;
  }

  .site-header .header-actions{
    order: 11;
    flex: 0 0 100%;
    width: 100%;
  }
}

.site-header--centro .header-inner{
  flex-wrap: wrap !important;
}