/* `position: sticky` doesn't work here: Drupal wraps this <nav> in block/region
   divs that only shrink-wrap its own height, so the sticky containing block
   has no room to stick within and the header just scrolls away. `fixed` pins
   it to the viewport regardless of ancestor height; the compensating
   `padding-top` below keeps page content from starting underneath it. */
.navbar-menu-usfq {
  height: var(--navbar-height);
  background-color: var(--dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
}

body {
  padding-top: var(--navbar-height);
}

body.toolbar-fixed {
  --usfq-admin-toolbar-offset: 39px;
  padding-top: calc(var(--navbar-height) + var(--usfq-admin-toolbar-offset));
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open {
  --usfq-admin-toolbar-offset: 79px;
}

body.toolbar-fixed .navbar-menu-usfq {
  top: var(--usfq-admin-toolbar-offset);
  z-index: 400;
}

body.toolbar-fixed .navbar-menu-usfq__overlay,
body.toolbar-fixed .navbar-menu-usfq__offcanvas {
  top: var(--usfq-admin-toolbar-offset);
  height: calc(100% - var(--usfq-admin-toolbar-offset));
}

/* Barra de Gin (gin_toolbar) en el frontend. Gin fija el padding del body con
   !important a sus propias medidas y así anula el hueco del navbar de arriba:
   el contenido quedaba debajo del navbar y el navbar debajo del sidebar. Aquí
   solo se mueve lo nuestro, leyendo las variables que Gin ya publica:
   --gin-toolbar-x-offset (ancho del sidebar, cambia al abrirlo),
   --gin-toolbar-y-offset (barra superior en móvil) y
   --gin-toolbar-secondary-height (la barra "Edit / Atajos / admin", sticky). */
body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) {
  --usfq-gin-top: calc(var(--gin-toolbar-y-offset, 0px) + var(--gin-toolbar-secondary-height, 0px));
  --usfq-gin-left: var(--gin-toolbar-x-offset, 0px);
}

body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq,
body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq__overlay,
body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq__offcanvas {
  top: var(--usfq-gin-top);
  left: var(--usfq-gin-left);
  width: calc(100% - var(--usfq-gin-left));
  /* El <nav> lleva .w-100 (width: 100% !important); max-width sí lo acota. */
  max-width: calc(100% - var(--usfq-gin-left));
}

body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq {
  z-index: 400;
}

body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq__overlay,
body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .navbar-menu-usfq__offcanvas {
  height: calc(100% - var(--usfq-gin-top));
}

/* El padding del body no se puede tocar sin pelear con el !important de Gin;
   el hueco del navbar pasa al contenedor de la página, que va justo después
   de la barra secundaria. */
body:is(.gin--vertical-toolbar, .gin--horizontal-toolbar, .gin--classic-toolbar) .dialog-off-canvas-main-canvas {
  padding-top: var(--navbar-height);
}

.navbar-menu-usfq__container {
  width: 100%;
}

.navbar-menu-usfq__logo img {
  max-height: 40px;
}

.navbar-menu-usfq__button .btn,
.navbar-menu-usfq__button .btn  {
  font-size: 10px;
}

/* Overlay */
.navbar-menu-usfq__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 12, 12, 0.62);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s ease,
    visibility 0s linear 0.32s,
    backdrop-filter 0.32s ease,
    -webkit-backdrop-filter 0.32s ease;
}

.navbar-menu-usfq__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    opacity 0.32s ease,
    visibility 0s,
    backdrop-filter 0.32s ease,
    -webkit-backdrop-filter 0.32s ease;
}

/* Off-canvas */
.navbar-menu-usfq__offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  color: var(--white);
  z-index: 1002;
  transform: translateY(10px) scale(0.99);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.32s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.navbar-menu-usfq__offcanvas.is-active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.32s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

@media (min-width: 1025px) {
  .navbar-menu-usfq__offcanvas {
    width: 100%;
  }
}

.navbar-menu-usfq__offcanvas-header {
  height: var(--navbar-height);
  width: 100%;
  padding: 0 2.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.navbar-menu-usfq__offcanvas-logo svg,
.navbar-menu-usfq__offcanvas-logo img {
  width: 7rem;
  max-height: 38px;
}

.navbar-menu-usfq__close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--headings-font-family);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.navbar-menu-usfq__close:hover,
.navbar-menu-usfq__close:focus {
  color: var(--primary);
  transform: scale(1.05);
}

.navbar-menu-usfq__close:hover span,
.navbar-menu-usfq__close:focus span {
  color: var(--primary);
}

.navbar-menu-usfq__offcanvas-body {
  flex: 1;
}

/* Ensure background is primary color from theme */
[data-component-id="usfq_theme:navbar_menu_usfq"] .navbar-menu-usfq__offcanvas {
  background: rgba(0, 0, 0, 0.75);
}

/* MOBILE
   Con dos pills en la barra el padding de 12px del botón se pasa del ancho: a
   375 px el logo mide 120 y las acciones 256, sobre 343 útiles. Apretando el
   botón bastan los 23 px que faltaban. Se toca solo aquí; de tablet en adelante
   sobra sitio y se mantienen los valores originales.
   El gap lo fija la utilidad `gap-4` de Bootstrap, que lleva !important: no se
   pelea con ella porque no hace falta. */
/* Language Selector */
.navbar-menu-usfq__language-selector {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-menu-usfq__language-select {
  background-color: #1e1e1e;
  border: none;
  border-radius: 4px;
  color: var(--white);
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  font-family: var(--headings-font-family) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  font-size: 10px;
}

.navbar-menu-usfq__language-select:hover, 
.navbar-menu-usfq__language-select option,
.navbar-menu-usfq__offcanvas .navbar-menu-usfq__language-select:hover {
  background-color: var(--white);
  color: var(--dark);
}

.navbar-menu-usfq__language-select option:visited {
  background-color: var(--primary);
}
.navbar-menu-usfq__offcanvas .navbar-menu-usfq__language-select {
  background-color: var(--primary);
}

/* Conmutador claro/oscuro. Toma la misma chapa oscura que el selector de
   idioma para no introducir un elemento nuevo en la barra: mientras el cliente
   no decida donde va, cuanto menos se note, mejor. */
.navbar-menu-usfq__scheme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: var(--dark);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-menu-usfq__scheme-toggle:hover {
  background-color: var(--white);
  color: var(--dark);
}

/* El anillo por defecto del navegador es casi negro y sobre la chapa oscura no
   se ve. Se repite el foco de los botones del tema (borde blanco + halo rojo)
   con box-shadow para no cambiar la caja de 2rem. */
.navbar-menu-usfq__scheme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 6px rgba(225, 27, 34, 0.5);
}

.navbar-menu-usfq__scheme-toggle .bi {
  font-size: 1rem;
  line-height: 1;
}

/* Un solo icono a la vista: luna para pasar a oscuro, sol para volver. */
.navbar-menu-usfq__scheme-icon--on,
.navbar-menu-usfq__scheme-toggle[aria-pressed="true"] .navbar-menu-usfq__scheme-icon--off {
  display: none;
}

.navbar-menu-usfq__scheme-toggle[aria-pressed="true"] .navbar-menu-usfq__scheme-icon--on {
  display: block;
}

.navbar-menu-usfq__offcanvas .navbar-menu-usfq__scheme-toggle {
  background-color: var(--primary);
}

.navbar-menu-usfq__offcanvas .navbar-menu-usfq__button .btn {
  background-color: var(--primary) !important;
}

.navbar-menu-usfq__offcanvas .navbar-menu-usfq__button .btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--white) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.navbar-menu-usfq__offcanvas .navbar-menu-usfq__button .btn:focus:not(:disabled):not([aria-disabled="true"]),
.navbar-menu-usfq__offcanvas .navbar-menu-usfq__button .btn:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}

/* MOBILE */
@media (max-width: 767px) {
  .navbar-menu-usfq__button .btn {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  .navbar-menu-usfq__language-select {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .navbar-menu-usfq__container .navbar-menu-usfq__language-selector {
    display: none !important;
  }

  .navbar-menu-usfq__container .navbar-menu-usfq__actions .navbar-menu-usfq__button {
    display: none !important;
  }

  .navbar-menu-usfq__container .navbar-menu-usfq__actions .navbar-menu-usfq__button:nth-of-type(2) {
    display: flex !important;
  }

  /* A 375 la fila de acciones ya va justa: con el conmutador se come los 40 px
     de aire tras el logo y se sale 17 px del acolchado derecho del contenedor.
     Aqui se queda el del off-canvas, como el selector de idioma. Sin
     !important: el boton no lleva utilidad de Bootstrap que vencer. */
  .navbar-menu-usfq__container .navbar-menu-usfq__actions .navbar-menu-usfq__scheme-toggle {
    display: none;
  }

  /* Y dentro del off-canvas los cinco controles tampoco caben a 375 con el
     gap-4 de Bootstrap (24 px): la fila esta anclada a la derecha, se sale por
     la izquierda y recorta el primer pill. El :has() deja la barra intacta
     mientras el conmutador siga oculto, y el !important es para ganarle a la
     utilidad, que lo lleva. */
  .navbar-menu-usfq__offcanvas .navbar-menu-usfq__actions:has(.navbar-menu-usfq__scheme-toggle) {
    gap: 0.5rem !important;
  }

  /* En la cabecera del off-canvas pasa lo mismo que en la barra: los dos
     pills, el idioma y la × no caben a 390 junto al logo. Se queda solo el
     segundo pill («Aplicar»), igual que arriba. */
  .navbar-menu-usfq__offcanvas-controls .navbar-menu-usfq__button {
    display: none;
  }

  .navbar-menu-usfq__offcanvas-controls .navbar-menu-usfq__button:nth-of-type(2) {
    display: block;
  }

  .navbar-menu-usfq__offcanvas-header {
    padding: 0 1rem;
  }
}