/* Sendaviva theme */

/* =========================
   SENDA VIVA — HEADER BASE
   (fondo, alto, spacing, logo)
   ========================= */

:root {
  --sv-header-bg: #FAF5EB;
  /* fondo del header (como la captura) */
  --sv-header-text: #1f1f1f;
  --sv-header-border: rgba(0, 0, 0, .08);
  --sv-header-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

/* Contenedor principal del header */
#header.header {
  background: var(--sv-header-bg);
  color: var(--sv-header-text);
  position: relative;
  z-index: 1000;
  border-bottom: 1px solid var(--sv-header-border);
}

/* Barra nav */
#navbar-main.navbar {
  min-height: 88px;
  /* tamaño base del header */
  padding: 14px 24px;
  /* aire */
  align-items: center;
  background: transparent;
  justify-self: center;
  width: 100%;
}

/* Si Barrio mete .container adentro, le sacamos paddings raros */
#navbar-main .container,
#navbar-main .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Logo */
#navbar-main .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}

#navbar-main .navbar-brand img {
  height: 54px;
  /* ajustá si querés más grande/chico */
  width: auto;
  display: block;
}

/* Área derecha (donde después va a vivir el mega menú) */
#CollapsingNavbar {
  align-items: center;
}

/* Botón hamburguesa (mobile) – más prolijo */
#navbar-main .navbar-toggler {
  border: 0;
  box-shadow: none;
  padding: 10px 12px;
}

#navbar-main .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .10);
  border-radius: 12px;
}

/* Por ahora ocultamos el bloque del menú principal (como venías haciendo)
   OJO: lo vamos a mostrar con JS/clase cuando armemos el desplegable */
nav#block-sendaviva-main-menu {
  display: none;
}

/* Responsive: un toque más compacto en celu */
@media (max-width: 575.98px) {
  #navbar-main.navbar {
    min-height: 76px;
    padding: 12px 16px;
  }

  #navbar-main .navbar-brand img {
    height: auto !important;
  }
}

.sv-branding {
  width: 100%;
}

.sv-header-grid {
  display: grid;
  grid-template-columns: 56px 1fr 80px;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px 24px;
  width: 100%;
}

.sv-burger {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
}

.sv-burger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

.sv-burger-lines {
  width: 22px;
  height: 2px;
  background: #1f1f1f;
  position: relative;
  display: block;
  border-radius: 2px;
}

.sv-burger-lines::before,
.sv-burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #1f1f1f;
  border-radius: 2px;
}

.sv-burger-lines::before {
  top: -7px;
}

.sv-burger-lines::after {
  top: 7px;
}

.sv-brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.sv-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.sv-logo {
  height: 54px;
  width: auto;
  display: block;
}

.sv-site-name {
  display: none;
}

.sv-slogan {
  margin-top: 4px;
  font-size: 14px;
  opacity: .85;
}

.sv-lang {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: .5px;
}

.sv-lang-link {
  text-decoration: none;
  color: #1f1f1f;
  opacity: .75;
}

.sv-lang-link:hover {
  opacity: 1;
}

.sv-lang-link.is-active {
  opacity: 1;
}

.sv-lang-sep {
  opacity: .35;
}

@media (max-width: 575.98px) {
  .sv-header-grid {
    grid-template-columns: 56px 1fr 70px;
    min-height: 76px;
    padding: 12px 16px;
  }

  .sv-logo {
    height: 46px;
  }

  .sv-slogan {
    display: none;
  }
}

.sv-menu-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1100;
}

.sv-menu-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
}

.sv-close-lines {
  width: 22px;
  height: 2px;
  background: transparent;
  position: relative;
  display: block;
}

.sv-close-lines::before,
.sv-close-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #1f1f1f;
  border-radius: 2px;
}

.sv-close-lines::before {
  transform: rotate(45deg);
}

.sv-close-lines::after {
  transform: rotate(-45deg);
}

.menu-open .sv-menu-close {
  display: inline-flex;
}

#block-sendaviva-main-menu {
  display: none;
}

#block-sendaviva-main-menu.is-open {
  display: block;
  position: fixed;
  top: 96px;
  /* Header height from header.css */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 120px);
  background: var(--sv-header-bg);
  z-index: 900;
  overflow-y: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  padding-bottom: 24px;
  animation: svMenuFadeIn 0.25s ease forwards;
}

@media (max-width: 1200px) {
  #block-sendaviva-main-menu.is-open {
    top: 96px;
    max-height: calc(100vh - 120px);
  }
}

@media (max-width: 575.98px) {
  #block-sendaviva-main-menu.is-open {
    top: 76px;
    /* Mobile header height */
    max-height: calc(100vh - 100px);
    border-radius: 0 0 24px 24px;
  }
}

@keyframes svMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sv-menu-close {
  display: none;
}

.sv-header-grid {
  display: grid;
  grid-template-columns: 56px 1fr 220px;
  align-items: center;
}

.sv-menu-toggle {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-block;
}

.sv-burger,
.sv-menu-close {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sv-menu-close {
  display: none;
}

.menu-open .sv-burger {
  display: none;
}

.menu-open .sv-menu-close {
  display: inline-flex;
}

aside.container-fluid.section.clearfix {
  background: #f9f4e8;
}

/* CONTENEDOR GENERAL DEL MENU */
.sv-menu {
  width: 100%;
  background: #FAF5EB;
  margin-top: 20px;
  /* Reduced from 70px */
}

/* INNER – controla ancho, padding y columnas */
.sv-menu__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sv-pad-x);
  /* Equalized padding top and left/right */
  display: grid;
  grid-template-columns: 3fr 1px 7fr;
  column-gap: 14px;
  /* Reduced space around the divider */
  align-items: start;
}

@media (max-width: 1200px) {
  .sv-menu__inner {
    padding: 22px var(--sv-pad-x) 24px var(--sv-pad-x);
  }
}

/* COLUMNAS */
.sv-menu__col {
  display: block;
}

.sv-menu__col--parents {
  flex: 0 0 40%;
  border-right: solid;
  max-width: 80%;
}

.sv-menu__col--children {
  flex: 1;
}

/* LISTA */
.sv-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ITEM */
.sv-menu__item {
  margin: 10px 0;
}

/* LINK */
.sv-menu__link {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: #111;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Parent links style */
.sv-menu__parent-link {
  color: #111;
}

.sv-menu__parent-link.is-active,
.sv-menu__parent-link:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  color: #000;
}

/* Child links style */
.sv-menu__child-link {
  font-size: 22px;
  /* Slightly smaller for children */
  font-weight: 600;
}

.sv-menu__child-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Submenus Logic */
.sv-menu__submenu {
  display: none;
  animation: svFadeIn 0.3s ease;
}

.sv-menu__submenu.is-active {
  display: block;
}

@keyframes svFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* DIVISOR VERTICAL */
.sv-menu__divider {
  width: 1px;
  background: rgba(0, 0, 0, .35);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .sv-menu__inner {
    padding: 30px 24px 24px 24px;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .sv-menu__divider {
    display: none;
  }

  .sv-menu__col--parents,
  .sv-menu__col--children {
    flex: none;
    max-width: 100%;
  }

  /* Mobile: maybe Show all or Accordion? 
     For now, let's keep the logic. Parents click reveals children below? 
     Or keep it simple stacking. 
     The requested design is likely Desktop based. 
     For mobile, let's allow toggling but maybe not side-by-side.
  */
}

nav#block-sendaviva-menusuperior {
  background: #2f4a2f !important;
  display: flex;
  flex-direction: row-reverse;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sv-pad-x);
  padding-right: var(--sv-pad-x);
}

nav#block-sendaviva-menusuperior a.nav-link.nav-link--web-es.is-active {
  color: white;
}

li.sv-menu__item a:hover {
  color: black !important;
}