/* ===========================================================
   RÉPLICA CALCADA DEL MENÚ DE https://malba.org.ar/ — pedido explícito
   del cliente (ver bitacora-malba.md, "Menú clon de malba.org.ar").

   Archivo separado a propósito, sin mezclar con custom.css: imita el
   aspecto de un sitio de terceros (WordPress + Elementor) y puede
   necesitar actualizarse si ese sitio cambia. Todos los valores en px
   fueron MEDIDOS contra el sitio real el 2026-08-19 a 1440x900
   (getBoundingClientRect/getComputedStyle vía Playwright) — no usar
   los tokens del theme acá: el objetivo es el calcado exacto, no la
   consistencia con nuestro sistema de diseño.

   Geometría de referencia (1440x900):
   - grilla: padding-inline 48, 4 columnas iguales (324px), gap 16
   - contenido de columnas arranca en y=143.8
   - logo 97x17.7 en (48, 25.4) / lupa 20x20 en (389.8, 23.8) /
     cerrar 32x32 en (1366, 18.8)
   - labels de categoría: 17.6px/22.88 regular; links: 32px/41.6 bold
   - gap entre bloques de categoría: 58px col 1, 45px cols 2-3
   - sidebar anclada abajo (padding-bottom 61): lang →22→ horarios
     →15→ tickets →44→ dirección →15→ redes (íconos 19.2, gap 20)
   - tickets: padding 6.4/12.8/4.8, radius 2, negro sobre #FFFF33
   - fondo #FFFF33

   Las fuentes son los WOFF2 EXACTOS que sirve malba.org.ar (los
   nuestros de la maqueta tienen hash distinto — versiones/subsets
   diferentes, métricas potencialmente distintas). Familia scoped solo
   a este clon, con el mismo mapeo de font-weight que usa el sitio
   real (400=Regular, 700=Bold — así "font-weight:700" usa la face
   bold real, sin bold sintético).

   El contenedor ".main_nav.malba_org_clone" reusa el toggle
   open/close del menú original (topMenu.php + ".main_nav"/".on" en
   custom.css) — acá se pisa todo lo visual.
   =========================================================== */

@font-face {
    font-family: "Malba Org LatinxText";
    src: url("fonts/LatinxText-Regular-malbaorg.woff2") format("woff2");
    font-weight: 400;
    font-display: block;
}
@font-face {
    font-family: "Malba Org LatinxText";
    src: url("fonts/LatinxText-Bold-malbaorg.woff2") format("woff2");
    font-weight: 700;
    font-display: block;
}

/***VERSIÓN IFRAME (menú 'clon_iframe')
  El documento vive en assets/pawtucket/malba-org-menu.html y trae su propio
  CSS de Elementor. Acá solo lo posicionamos: todo lo visual es de él.
  Hereda de ".main_nav" el mecanismo de abrir/cerrar (.on) del theme.
*****************************************************/
iframe.main_nav.malba_org_iframe {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    border: 0;
    display: block;

    /* Transparente a propósito, NO amarillo. Por debajo de 1025px el menú de
       malba.org.ar no ocupa toda la pantalla: es una columna (400px, o el
       ancho completo por debajo de 769px) y el resto deja ver la página de
       atrás sin oscurecer. Con fondo propio, el iframe taparía la página de
       Pawtucket con una plancha opaca. Lo amarillo lo pinta el panel.
       En escritorio no se nota: ahí el panel cubre el 100%. */
    background: transparent;
}

.main_nav.malba_org_clone {
    top: 0;
    height: 100dvh;
    display: block;
    padding: 0;
    background: #FFFF33;
    color: #000;
    overflow-y: auto;
    font-family: "Malba Org LatinxText", Arial, sans-serif;
}
.main_nav.malba_org_clone > * {
    /* neutraliza el ".main_nav > *" base (flex:1; width:50%), pensado
       para las dos mitades del menú original */
    flex: none;
    width: 100%;
}
.malba_org_clone a {
    color: #000;
}
.malba_org_clone a:hover {
    /* el sitio real no cambia el color en hover (anima una flecha con
       GSAP, no replicado — detalle solo visible al interactuar) */
    color: #000;
}
.malba_org_clone p,
.malba_org_clone ul {
    margin: 0;
    padding: 0;
}
.malba_org_clone ul {
    list-style: none;
}

/***FILA SUPERIOR (logo, lupa, cerrar)***/
.malba_org_clone .clone_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 48px;
}
.malba_org_clone .clone_logo {
    grid-column: 1;
    justify-self: start;
    margin-top: 25.4px;
}
.malba_org_clone .clone_logo img {
    display: block;
    width: 97px;
    height: auto;
}
.malba_org_clone .clone_search_toggle {
    grid-column: 2;
    justify-self: start;
    margin-top: 23.8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.malba_org_clone .clone_search_toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: #000;
}
.malba_org_clone .clone_close {
    position: absolute;
    top: 18.8px;
    right: 42px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.malba_org_clone .clone_close svg {
    display: block;
    width: 32px;
    height: 32px;
    fill: #000;
}

/***CUERPO: grilla de 4 columnas (sidebar + 3 de categorías)***/
.malba_org_clone .clone_body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 16px;
    padding: 143.8px 48px 0;
    min-height: 100dvh;
}

/***SIDEBAR (columna 1, anclada abajo)***/
.malba_org_clone .clone_sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 61px;
    font-size: 17.6px;
    line-height: 1.3;
}
.malba_org_clone .clone_lang {
    display: flex;
    column-gap: 10px;
    font-weight: 700;
    margin-bottom: 22px;
}
.malba_org_clone .clone_lang a:not(.active) {
    color: rgba(0, 0, 0, 0.4);
}
.malba_org_clone .clone_hours {
    margin-bottom: 15px;
}
.malba_org_clone .clone_tickets {
    align-self: flex-start;
    padding: 6.4px 12.8px 4.8px;
    background: #000;
    color: #FFFF33;
    font-weight: 700;
    border-radius: 2px;
    margin-bottom: 44px;
}
.malba_org_clone .clone_tickets:hover {
    color: #FFFF33;
}
.malba_org_clone .clone_address {
    margin-bottom: 15px;
}
.malba_org_clone .clone_social {
    display: flex;
    column-gap: 20px;
}
.malba_org_clone .clone_social a {
    display: block;
    width: 19.2px;
    height: 19.2px;
}
.malba_org_clone .clone_social svg {
    display: block;
    width: 19.2px;
    height: 19.2px;
    fill: #000;
}

/***COLUMNAS DE CATEGORÍAS***/
.malba_org_clone .clone_column {
    display: flex;
    flex-direction: column;
    row-gap: 45px;
}
/* la col 1 de categorías (2da de la grilla) usa un gap mayor en el
   sitio real (58 vs 45, medido) */
.malba_org_clone .clone_column:nth-child(2) {
    row-gap: 58px;
}
.malba_org_clone .clone_cat_label {
    font-size: 17.6px;
    line-height: 1.3;
    font-weight: 400;
}
.malba_org_clone .clone_category ul {
    margin-top: -2px;
}
.malba_org_clone .clone_category ul li a {
    display: block;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
}

/***RESPONSIVE (el sitio real colapsa distinto en mobile; esta versión
   apila de forma simple — el calcado exacto es para desktop)***/
@media (max-width: 900px) {
    .malba_org_clone .clone_top,
    .malba_org_clone .clone_body {
        display: flex;
        flex-direction: column;
    }
    .malba_org_clone .clone_top {
        position: relative;
        row-gap: 12px;
        padding-top: 20px;
    }
    .malba_org_clone .clone_search_toggle {
        margin-top: 0;
    }
    .malba_org_clone .clone_body {
        padding: 24px 24px 48px;
        min-height: 0;
        row-gap: 45px;
    }
    .malba_org_clone .clone_sidebar {
        padding-bottom: 0;
        justify-content: flex-start;
    }
    .malba_org_clone .clone_category ul li a {
        font-size: 24px;
    }
}