@charset "UTF-8";
/**
 * @file
 * Header styles — mobile-first.
 * Figma: Desktop 26:2139 (97px), Mobile 26:5379 (65px).
 */
/* ==========================================================================
   Mobile base (xs)
   ========================================================================== */
.vel-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--vel-bg-white);
  border-bottom: 1px solid var(--vel-border);
  height: 65px;
  display: flex;
  align-items: center;
}

.vel-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--vel-max-width);
  margin: 0 auto;
  padding-inline: var(--vel-space-md); /* 16px */
  height: 64px;
}

.vel-header__branding {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.vel-header__logo-velantis {
  height: 19px;
  width: auto;
}

.vel-header__logo-separator {
  width: 1px;
  height: 23px;
  background: var(--vel-primary);
}

.vel-header__logo-ccn {
  height: 23px;
  width: auto;
}

/* Nav: hidden on mobile, fullscreen overlay when open */
.vel-header__nav {
  display: flex;
  position: fixed;
  top: 65px; /* Header height on mobile */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vel-bg-white);
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--vel-space-xl) var(--vel-space-md);
  z-index: 999;
  transform: translateX(-100%);
  opacity: 0;
  transition: none; /* No transition by default to avoid flash on breakpoint change */
}

/* Only apply transition when menu has been interacted with */
.vel-header__nav.is-open,
.vel-header__nav.is-closing {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Adjust when Drupal admin toolbar is present (logged in users) */
.toolbar-horizontal .vel-header__nav {
  top: 104px; /* 65px header + 39px toolbar */
}

.toolbar-tray-open .vel-header__nav {
  top: 144px; /* 65px header + 79px toolbar expanded */
}

/* Adjust for Gin admin theme with vertical toolbar */
.toolbar-vertical .vel-header__nav {
  top: 152px; /* 65px header + ~87px Gin header on mobile */
}

/* Adjust for is scrolled in mobile */
.toolbar-vertical .vel-header.is-scrolled .vel-header__nav {
  top: 65px; /* 65px header */
}

.vel-header__nav.is-open {
  transform: translateX(0);
  opacity: 1;
}

.vel-header__nav-link {
  font-family: var(--vel-font-body);
  font-weight: 600;
  font-size: var(--vel-text-lg);
  color: var(--vel-primary);
  text-decoration: none;
  transition: color 0.2s ease;
  width: 100%;
  padding: var(--vel-space-md) 0;
  border-bottom: 1px solid var(--vel-border);
}

.vel-header__nav-link:hover,
.vel-header__nav-link:focus {
  color: var(--vel-secondary);
}

.vel-header__nav-link.is-active {
  position: relative;
}

.vel-header__nav-link.is-active::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--vel-accent);
}

/* Hide "Aprende jugando" link on mobile (< 992px) */
.vel-header__nav-link[href="/aprende-jugando"] {
  display: none;
}

/* Override Bootstrap Barrio menu defaults */
.vel-header__nav .block-menu,
.vel-header__nav .menu--main {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: none;
  width: 100%;
}

.vel-header__nav .block-menu .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ==========================================================================
   lg (992px) — Desktop header
   ========================================================================== */
@media (min-width: 992px) {
  .vel-header {
    height: 97px;
    backdrop-filter: blur(4px);
    box-shadow: var(--vel-shadow-sm);
  }
  .vel-header__inner {
    padding-inline: 60px;
    height: 96px;
  }
  .vel-header__logo-velantis {
    height: 32px;
  }
  .vel-header__logo-separator {
    width: 2px;
    height: 38px;
  }
  .vel-header__logo-ccn {
    height: 38px;
  }
  /* Nav: inline horizontal */
  .vel-header__nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 0;
    background: none;
    transform: none;
    transition: none;
    opacity: 1;
    width: 100%;
  }
  .vel-header__nav .block-menu,
  .vel-header__nav .menu--main {
    flex-direction: row;
    gap: 48px;
    width: auto;
  }
  .vel-header__nav-link {
    width: auto;
    padding: 0;
    font-size: var(--vel-text-base);
    border-bottom: none;
    white-space: nowrap;
  }
  /* Show "Aprende jugando" on desktop (>= 992px) */
  .vel-header__nav-link[href="/aprende-jugando"] {
    display: inline;
  }
}
/* ==========================================================================
   xl (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .vel-header__inner {
    padding-inline: var(--vel-content-padding); /* 80px */
  }
  .vel-header__logo-velantis {
    height: 36px;
  }
  .vel-header__logo-separator {
    height: 43px;
  }
  .vel-header__logo-ccn {
    height: 43px;
  }
  .vel-header__nav .block-menu,
  .vel-header__nav .menu--main {
    gap: 64px;
  }
}
/*# sourceMappingURL=header.css.map */