/* =========================================================
   TSR Multilang Bridge – Shared Styles
   - Switcher
   - Navigation wrapper (wp_nav_menu output styled like core/navigation)
   ========================================================= */

/* -------------------------
   Switcher
-------------------------- */
.tsr-mlb-switcher__list{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; max-width:100%; }
.tsr-mlb-switcher__link{ display:inline-flex; gap:.35rem; align-items:center; text-decoration:none; }
.tsr-mlb-switcher__select{ max-width:100%; }
.tsr-mlb-block-placeholder{ padding:12px; border:1px dashed rgba(0,0,0,.25); border-radius:10px; }

.tsr-mlb-switcher__flag img{ display:block; border-radius:2px; }

.tsr-mlb-switcher--flags-only .tsr-mlb-switcher__label{ display:none; }
.tsr-mlb-switcher--text-only .tsr-mlb-switcher__flag{ display:none; }

/* Alignment-friendly defaults (FSE groups/rows) */
.tsr-mlb-switcher{ align-items:center; justify-content:flex-start; max-width:100%; padding-right:8px; }
.tsr-mlb-switcher__list{ justify-content:flex-start; }

/* TSR alignment helpers (works with Group/Row justification controls) */
.wp-block-group.is-layout-flex.is-content-justification-right > .tsr-mlb-switcher,
.wp-block-group.is-layout-flex.is-content-justification-right > * > .tsr-mlb-switcher,
.wp-block-group.is-layout-flex.is-content-justification-right .tsr-mlb-switcher{ margin-left:auto; }
.wp-block-group.is-layout-flex.is-content-justification-center .tsr-mlb-switcher{ margin-left:0; margin-right:0; }

/* -------------------------
   Navigation (wp_nav_menu output)
-------------------------- */
.tsr-mlb-nav{ max-width:100%; position:relative; }

/* Basic horizontal layout like core nav */
.tsr-mlb-nav .wp-block-navigation__container{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}
.tsr-mlb-nav .wp-block-navigation__container li{ margin:0; padding:0; }
.tsr-mlb-nav .wp-block-navigation__container a{ text-decoration:none; }

/* Each item anchors its submenu */
.tsr-mlb-nav .wp-block-navigation-item{ position:relative; }

/* =========================================================
   Submenu behavior
   - Do NOT use display:none by default (core-friendly)
   - Prevent viewport overflow (no horizontal scroll)
   - Open on hover, focus-within, and aria-expanded
   ========================================================= */

.tsr-mlb-nav .wp-block-navigation__submenu-container{
  position:absolute;
  top: calc(100% + .45rem);
  right: 0 !important;
  left: auto !important;
  z-index: 9999;

  margin:0;
  padding:.5rem 0;
  list-style:none;

  /* Keep inside viewport */
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  overflow-x: hidden;

  /* Default visuals (close to core defaults; theme may override) */
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);

  /* Closed state */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

/* JS-assisted submenu flipping when near viewport edges */
.tsr-mlb-nav .wp-block-navigation__submenu-container.tsr-mlb-submenu--left{ left:auto !important; right:0 !important; }
.tsr-mlb-nav .wp-block-navigation__submenu-container.tsr-mlb-submenu--right{ left:0 !important; right:auto !important; }

/* Open: hover (desktop) */
.tsr-mlb-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Open: keyboard / tap (focus within li) */
.tsr-mlb-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Open: core toggle (aria-expanded) */
.tsr-mlb-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}

/* Submenu links */
.tsr-mlb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:block;
  padding: .55rem .9rem;
  white-space: nowrap;
}
.tsr-mlb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.tsr-mlb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus{
  background: rgba(0,0,0,.06);
  outline:none;
}

/* =========================================================
   Submenu icon
   - Your markup contains an empty <button>.
   - Some themes/core styles draw the icon via pseudo-elements.
   - We guarantee visibility by drawing a chevron ourselves.
   ========================================================= */

.tsr-mlb-nav .wp-block-navigation__submenu-icon{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin-left:.15rem;

  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  color: currentColor;
  opacity: 1;
}

/* Chevron drawn with CSS so it works even if the button is empty */
.tsr-mlb-nav .wp-block-navigation__submenu-icon::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  display:block;
}

/* Keep chevron always pointing down (no flip on hover/open) */

/* =========================================================
   Mobile: hamburger toggle (because wp_nav_menu output does not include
   core's responsive wrapper)
   ========================================================= */

/* Toggle button (hamburger) injected by PHP */
.tsr-mlb-nav .tsr-mlb-nav__toggle{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color: currentColor;

  width: 42px;
  height: 42px;
  align-items:center;
  justify-content:center;
}

/* Hamburger lines */
.tsr-mlb-nav .tsr-mlb-nav__toggle::before,
.tsr-mlb-nav .tsr-mlb-nav__toggle::after{
  content:"";
  width: 20px;
  height: 2px;
  background: currentColor;
  display:block;
  border-radius: 2px;
}
.tsr-mlb-nav .tsr-mlb-nav__toggle::before{ transform: translateY(-4px); }
.tsr-mlb-nav .tsr-mlb-nav__toggle::after{  transform: translateY(4px); }

@media (max-width: 782px){
  .tsr-mlb-nav .tsr-mlb-nav__toggle{
    display:inline-flex;
  }

  /* Close button (X) inside mobile panel */
  .tsr-mlb-nav .tsr-mlb-nav__close{
    display:inline-flex;
    align-self:flex-end;
    appearance:none;
    border:0;
    background: transparent;
    width: 42px;
    height: 42px;
    padding:0;
    margin: 0 0 .25rem 0;
    cursor:pointer;
    color: currentColor;
    position: relative;
  }
  .tsr-mlb-nav .tsr-mlb-nav__close::before,
  .tsr-mlb-nav .tsr-mlb-nav__close::after{
    content:"";
    position:absolute;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius:2px;
    top: 50%;
    left: 50%;
    transform-origin: center;
  }
  .tsr-mlb-nav .tsr-mlb-nav__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .tsr-mlb-nav .tsr-mlb-nav__close::after{  transform: translate(-50%,-50%) rotate(-45deg); }


  /* Mobile panel wrapper (contains close button + menu + optional extra) */
  .tsr-mlb-nav .tsr-mlb-nav__panel{
    display:none;
    position:absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(360px, calc(100vw - 24px));

    background: var(--wp--preset--color--base, #fff);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);

    padding: .85rem;
    z-index: 9999;
  }

  /* The UL becomes a vertical list inside the panel */
  .tsr-mlb-nav .tsr-mlb-nav__panel .wp-block-navigation__container{
    display:flex;
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
  }

  /* Open state toggled by JS */
  .tsr-mlb-nav.tsr-mlb-nav--open .tsr-mlb-nav__panel{
    display:block;
  }

  /* Mobile panel link spacing */
  .tsr-mlb-nav .wp-block-navigation__container .wp-block-navigation-item__content{
    display:block;
    padding: .65rem .85rem;
    border-radius: 10px;
  }


  /* Submenu on mobile: keep inside the panel (no absolute dropdown) */
  .tsr-mlb-nav .wp-block-navigation__submenu-container{
    position: static;
    width: 100%;
    max-width: 100%;
    box-shadow:none;
    border-radius: 12px;
    transform:none;
  }

  /* Optional extra content slot (mobile panel) */
  .tsr-mlb-nav .tsr-mlb-nav__mobile-extra{
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(0,0,0,.10);
    font-size: .95em;
  }

}

/* Cinturón anti-scroll (helps when themes use 100vw somewhere) */
html, body{ overflow-x: clip; }




/* FIX: no mostrar controles móviles en desktop */
@media (min-width: 783px){
  .tsr-mlb-nav button[aria-label="Open menu"],
  .tsr-mlb-nav button[aria-label="Close menu"],
  .tsr-mlb-nav .tsr-mlb-nav__mobile-toggle,
  .tsr-mlb-nav .tsr-mlb-nav__mobile-close{
    display: none !important;
  }
}
@media (max-width: 782px){
  .tsr-mlb-nav .tsr-mlb-nav__mobile-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 783px){
  header.wp-block-template-part 
  .tsr-mlb-nav 
  .wp-block-navigation__container 
  > li.menu-item-home 
  > a::before{

    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    margin-right:8px;
    vertical-align:-2px;

    background: #751624;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 11l9-8 9 8'/><path fill='black' d='M5 10v10h14V10'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 11l9-8 9 8'/><path fill='black' d='M5 10v10h14V10'/></svg>") no-repeat center / contain;
  }
}
.tsr-mlb-nav .current-menu-item > a::before{
  background: #9b1c1c;
}





/* =========================
   SUBMENU: hover estable + móvil estable
   ========================= */

/* Asegura que el padre es el ancla */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu{
  position: relative;
}

/* Submenu: pegado al item (sin gap) */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu > .wp-block-navigation__submenu-container{
  top: 100% !important;     /* <- clave: sin separación */
  margin-top: 0 !important; /* <- por si el theme mete margen */
  transform: none !important;

  /* seguimos evitando desbordes */
  right: 0 !important;
  left: auto !important;

  /* estado cerrado */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* “Puente” invisible para no perder hover al bajar al submenu */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;            /* zona de seguridad */
  background: transparent;
}

/* Abrir por hover (desktop) */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu:hover > .wp-block-navigation__submenu-container{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mantener abierto si el foco está dentro (teclado / tap) */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu:focus-within > .wp-block-navigation__submenu-container{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Abrir cuando el botón tenga aria-expanded=true (click) */
.tsr-mlb-nav .wp-block-navigation-item.has-submenu > .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Enlaces del submenu: más zona clic y estabilidad */
.tsr-mlb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display: block;
  padding: .6rem .95rem;
}

/* =========================
   MÓVIL: no depender de hover
   ========================= */
@media (max-width: 782px){
  /* En móvil el submenu va en flujo para que no “tiemble” */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > .wp-block-navigation__submenu-container{
    position: static !important;
    right: auto !important;
    left: auto !important;
    width: 100%;
    max-width: 100%;

    /* cerrado */
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Abierto solo si aria-expanded=true */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container{
    display: block;
  }

  /* El “puente” en móvil no hace falta */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu::after{
    display: none;
  }
}



/* ===== Desktop submenu: transparente + elegante (sin tapar tanto) ===== */
@media (min-width: 783px){
  .tsr-mlb-nav .wp-block-navigation__submenu-container{
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.14) !important;
  }

  /* si tu subrayado está en el <a>, esto ayuda a que quede por encima */
  .tsr-mlb-nav .wp-block-navigation-item__content{
    position: relative;
    z-index: 2;
  }
}





@media (max-width: 782px){

  /* Cada item del menú ocupa toda la anchura */
  .tsr-mlb-nav .wp-block-navigation__container > .wp-block-navigation-item{
    width: 100%;
  }

  /* Item con submenu: layout en 2 columnas (texto + chevron) */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu{
    display: grid;
    grid-template-columns: 1fr 44px; /* texto | botón */
    align-items: center;
    gap: 8px;
  }

  /* Enlace ocupa toda su “columna” (fila clicable) */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > a.wp-block-navigation-item__content,
  .tsr-mlb-nav .wp-block-navigation-item:not(.has-submenu) > a.wp-block-navigation-item__content{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* Chevron como botón a la derecha */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > button.wp-block-navigation__submenu-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Submenu debajo ocupando toda la fila (debajo del item) */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > .wp-block-navigation__submenu-container{
    grid-column: 1 / -1; /* ocupa ambas columnas */
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.10);
  }

  /* Header del submenu (primera fila) */
  .tsr-mlb-nav .tsr-mlb-submenu__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 10px 6px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 8px;
  }

  .tsr-mlb-nav .tsr-mlb-submenu__title{
    font-weight: 600;
    font-size: 14px;
    opacity: .8;
  }

  .tsr-mlb-nav .tsr-mlb-submenu__close{
    appearance: none;
    border: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
  }

  /* X fina */
  .tsr-mlb-nav .tsr-mlb-submenu__close::before,
  .tsr-mlb-nav .tsr-mlb-submenu__close::after{
    content:"";
    position:absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
  }
  .tsr-mlb-nav .tsr-mlb-submenu__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .tsr-mlb-nav .tsr-mlb-submenu__close::after{  transform: translate(-50%,-50%) rotate(-45deg); }
}





/* Submenu móvil: no mostrar el título repetido (solo X) */
@media (max-width: 782px){
  .tsr-mlb-nav .tsr-mlb-submenu__title{
    display: none !important;
  }

  /* la cabecera queda solo con la X alineada a la derecha */
  .tsr-mlb-nav .tsr-mlb-submenu__head{
    justify-content: flex-end !important;
    padding-top: 4px !important;
    padding-bottom: 10px !important;
  }
}

/* Quitar línea superior del submenu */
.tsr-mlb-nav .wp-block-navigation__submenu-container::before{
  content: none !important;
}

@media (max-width: 782px){
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > 
  .wp-block-navigation__submenu-container{
    
    border: 1px solid rgba(0,0,0,.06) !important;
    background: rgba(255,255,255,.96) !important;
  }
}





@media (max-width: 782px){

  /* Mover el botón chevron hacia dentro (a la izquierda) sí o sí */
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > button.wp-block-navigation__submenu-icon,
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > button.wp-block-navigation-submenu__toggle,
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu > button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle{
    transform: translateX(-10px) !important; /* prueba -8px / -12px si quieres */
  }

}

@media (max-width: 782px){
  .tsr-mlb-nav .wp-block-navigation-item.has-submenu{
    padding-right: 10px !important;
  }
}