/* Core / base styles */

/* JackHouse Carta Builder - frontend styles */
:root{
    --jh-entree-rojo-fuerte:#ca0d25; /* rojo fuerte */
    --jh-entree-rojo-lavado:#e03136; /* rojo lavado */
    --jh-entree-naranja-lavado:#FCBF2C; /* naranja lavado */
    --jh-entree-naranja-fuerte:#F48C0C; /* naranja fuerte */
    --jh-entree-blanco:#FFFFFF; /* blanco */
    --jh-entree-negro:#171213; /* negro */

    /* Paleta para alternar cards (usada por entree-colors.js) */
    --jh-entree-p1: var(--jh-entree-rojo-fuerte);
    --jh-entree-p2: var(--jh-entree-naranja-fuerte);
    --jh-entree-p3: var(--jh-entree-rojo-lavado);
    --jh-entree-p4: var(--jh-entree-naranja-lavado);
    --jh-entree-p5: var(--jh-entree-negro);
    --jh-entree-p6: var(--jh-entree-naranja-fuerte);
}
/* ✅ pisa el inline style "background:var(--jh-e-right-bg)" del shortcode */
.jh-entree__items .jh-entree__card:not(.has-bg){
    background: var(--jh-card-bg, var(--jh-e-right-bg));
}

.jh-menu{
    /* Aliases (compatibilidad con variables viejas) */
    --jh-red: var(--jh-entree-rojo-fuerte);
    --jh-orange: var(--jh-entree-naranja-fuerte);
    --jh-yellow: var(--jh-entree-naranja-lavado);
    --jh-black: var(--jh-entree-negro);
    --jh-white: var(--jh-entree-blanco);

    --jh-radius:0px;
    --jh-gap:14px;
    --jh-item-title-font: 'JH_Knockout94', Arial, sans-serif;
    --jh-item-desc-font: Arial, sans-serif;
    font-family: Arial, sans-serif;
    line-height:1.15;

    /* Layout PC: ancho máximo de 1280px */
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.jh-planazos__name {
    font-family: var(--jh-item-title-font);
}

.jh-block{
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 14px 0;
}

.jh-bg-none{
    background: rgba(23,18,19,0);
}
.jh-bg-red{
    background: var(--jh-entree-rojo-fuerte);
    color: var(--jh-entree-naranja-lavado);
}
.jh-bg-orange{
    background: var(--jh-entree-naranja-fuerte);
    color: var(--jh-entree-negro);
}
.jh-bg-yellow{
    background: var(--jh-entree-naranja-lavado);
    color: var(--jh-entree-negro);
}
.jh-bg-black{
    background: var(--jh-entree-negro);
    color: var(--jh-entree-naranja-lavado);
}

.jh-title{
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    margin:0 0 14px;
    /* font-weight: 900; */
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: clamp(26px, 5vw, 54px);
}

.jh-anchor{
    position: relative;
    top: -70px;
}

/* HERO */
.jh-hero{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--jh-gap);
    align-items: stretch;
}
@media (min-width: 900px){
    .jh-hero{
        grid-template-columns: 1fr 1fr;
    }
}
.jh-hero-media .jh-hero-img{
    width:100%;
    height:auto;
    border-radius: var(--jh-radius);
    display:block;
}
.jh-hero-text{
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    font-size: 16px;
    white-space: normal;
    background: rgba(23,18,19,0.12);
    padding: 14px;
    border-radius: var(--jh-radius);
}

/* GRID */
.jh-grid{
    display:grid;
    /*   gap: var(--jh-gap); */
}
.jh-cols-1{
    grid-template-columns: 1fr;
}
.jh-cols-2{
    grid-template-columns: 1fr;
}
.jh-cols-3{
    grid-template-columns: 1fr;
}
@media (min-width: 720px){
    .jh-cols-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .jh-cols-3{
        grid-template-columns: repeat(3, 1fr);
    }
}

.jh-card{
    border-radius: var(--jh-radius);
    overflow:hidden;
    background: rgba(252,191,44,0.08);
    border: 1px solid rgba(252,191,44,0.14);
}
.jh-bg-orange .jh-card,
.jh-bg-yellow .jh-card{
    background: rgba(23,18,19,0.05);
    border-color: rgba(23,18,19,0.12);
}

.jh-card-media img{
    width:100%;
    height: 180px;
    object-fit: cover;
    display:block;
}
.jh-card-body{
    padding: 12px;
}
.jh-card-title{
    font-family: var(--jh-item-title-font, inherit);
    margin:0 0 6px;
    font-size: 18px;
    /*    font-weight: 800;  */
    text-transform: uppercase;
}
.jh-card-desc{
    font-family: var(--jh-item-desc-font, inherit);
    font-size: 13px;
    opacity:.9;
    margin-bottom: 10px;
}

.jh-badges{
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
    color: var(--jh-entree-naranja-fuerte);
}
.jh-badge{
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(23,18,19,0.25);
    color: inherit;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.jh-bg-orange .jh-badge,
.jh-bg-yellow .jh-badge{
    background: rgba(23,18,19,0.12);
}

.jh-prices{
    margin: 0;
    padding: 0;
    list-style:none;
    display:flex;
    flex-direction: column;
    gap:6px;
}
.jh-prices li{
    display:flex;
    justify-content: space-between;
    gap:10px;
    font-size: 13px;
}
.jh-price-money{
    /*font-weight: 900; */
}

/* LIST */
.jh-list{
    display:flex;
    flex-direction: column;
    gap:10px;
}
.jh-row{
    display:flex;
    justify-content: space-between;
    gap:16px;
    padding: 10px 12px;
    border-radius: var(--jh-radius);
    background: rgba(252,191,44,0.08);
    border: 1px solid rgba(252,191,44,0.14);
}
.jh-bg-orange .jh-row,
.jh-bg-yellow .jh-row{
    background: rgba(23,18,19,0.05);
    border-color: rgba(23,18,19,0.12);
}
.jh-row-title{
    /* font-weight: 800; */
    text-transform: uppercase;
}
.jh-row-desc{
    font-size: 12px;
    opacity:.9;
    margin-top:4px;
}
.jh-row-prices{
    text-align:right;
    font-size: 12px;
}

/* LOCATIONS */
.jh-locations{
    display:grid;
    gap: var(--jh-gap);
    grid-template-columns: 1fr;
}
@media (min-width: 720px){
    .jh-locations{
        grid-template-columns: repeat(4, 1fr);
    }
}
.jh-loc{
    padding: 12px;
    border-radius: var(--jh-radius);
    background: rgba(252,191,44,0.08);
    border: 1px solid rgba(252,191,44,0.14);
}
.jh-bg-orange .jh-loc,
.jh-bg-yellow .jh-loc{
    background: rgba(23,18,19,0.05);
    border-color: rgba(23,18,19,0.12);
}
.jh-loc-title{
    /* font-weight: 900; */
    text-transform: uppercase;
    margin-bottom: 8px;
}
.jh-loc-line{
    font-size: 12px;
    opacity:.92;
}
.jh-loc-note{
    margin-top:8px;
    font-size: 11px;
    opacity:.8;
    text-transform: uppercase;
}

.jh-note{
    opacity:.85;
    font-size: 14px;
}
.jh-text{
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    font-size: 15px;
}


/* Mobile: apilar */
@media (max-width: 520px){
    .jh-card--split{
        grid-template-columns: 1fr;
    }
    .jh-card--split .jh-card-media img{
        height: 200px;
    }
    .jh-card--split .jh-card-title{
        font-family: var(--jh-item-title-font, inherit);
        font-size: 24px;
    }
    .jh-pizzas__grid{
        min-height: 400px;

    }

}


/* BURGERS split card (info izquierda / foto derecha) */
.jh-card--split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "body media";
    min-height: 220px;
}
.jh-card--split .jh-card-media{
    grid-area: media;
    height:100%;
}
.jh-card--split .jh-card-body{
    grid-area: body;
    display:flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}
.jh-card--split .jh-card-media img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}
.jh-card--split .jh-card-title{
    font-family: var(--jh-item-title-font, inherit);
    font-size: 28px;
    line-height: 1.0;
    margin-bottom: 0;
}
.jh-card--split .jh-card-desc{
    font-family: var(--jh-item-desc-font, inherit);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    opacity: .95;
}
.jh-card--split .jh-card-prices{
    margin-top: auto;
}
.jh-card--split .jh-prices{
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.jh-card--split .jh-prices li{
    justify-content: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
}
.jh-card--split .jh-prices li + li{
    position: relative;
}
.jh-card--split .jh-prices li + li:before{
    position: absolute;

    opacity: .8;
}

/* Mobile: apilar */
@media (max-width: 520px){
    .jh-card--split{
        grid-template-columns: 1fr;
        grid-template-areas: "media" "body";
    }
    .jh-card--split .jh-card-media img{
        height: 200px;
    }
    .jh-card--split .jh-card-title{
        font-family: var(--jh-item-title-font, inherit);
        font-size: 30px;
    }
}


/* BURGERS grid: respetar jh-cols-* (desktop 3 columnas si jh-cols-3) */
.jh-section--burgers .jh-grid--burgers{
    /* No forzamos grid-template-columns acá para no pisar .jh-cols-2 / .jh-cols-3 */
    justify-items: stretch;
}

/* BURGERS cards: no fijar alturas (para que entren 3 columnas en escritorio) */
.jh-section--burgers .jh-card--split{
    max-width: none;
    height: auto;
}
.jh-section--burgers .jh-card--split .jh-card-media img{
    height: 100%;
    min-height: 220px;
}

/* Mobile: mantener split (texto izq / imagen der) dentro de cada card */
@media (max-width: 520px){
    .jh-section--burgers .jh-card--split{
        grid-template-columns: 1.15fr .85fr;
        grid-template-areas: "body media";
    }

    /* Alternar en mobile: 1) texto izq / foto der, 2) foto izq / texto der */
    .jh-section--burgers .jh-grid--burgers .jh-card--split:nth-child(even){
        grid-template-columns: .85fr 1.15fr;
        grid-template-areas: "media body";
    }
    .jh-section--burgers .jh-card--split .jh-card-media img{
        height: 100%;
        min-height: 160px;
    }
}

/* BURGERS alternating colors (solo sección burgers) */
.jh-section--burgers .jh-grid--burgers .jh-card--split{
    border: 0;
    background: rgba(23,18,19,0); /* usamos fondos por panel */
}
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-card-body{
    background: var(--jh-burger-info-bg, var(--jh-entree-naranja-fuerte));
    color: var(--jh-burger-info-text, var(--jh-entree-rojo-lavado));
}
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-card-media{
    background: var(--jh-burger-photo-bg, var(--jh-entree-naranja-lavado));
}
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-card-title{
    /*
      El color del título en Burgers se controla por variable.
      - Default: blanco (fallback)
      - Si el módulo define --jh-burger-title (desde el admin), lo toma.
      Importante: NO seteamos --jh-burger-title en :nth-child para permitir override desde el constructor.
    */
    color: var(--jh-burger-title, var(--jh-entree-blanco));
}
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-card-desc,
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-prices,
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-prices li,
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-price-label,
.jh-section--burgers .jh-grid--burgers .jh-card--split .jh-price-money{
    color: var(--jh-burger-info-text, var(--jh-entree-rojo-lavado));
}

/* V1 - impares */
.jh-section--burgers .jh-grid--burgers .jh-card--split:nth-child(odd){
    --jh-burger-info-bg: var(--jh-entree-naranja-fuerte);
    --jh-burger-info-text: var(--jh-entree-rojo-lavado);
    --jh-burger-photo-bg: var(--jh-entree-naranja-lavado);
}

/* V2 - pares */
.jh-section--burgers .jh-grid--burgers .jh-card--split:nth-child(even){
    --jh-burger-info-bg: var(--jh-entree-rojo-fuerte);
    --jh-burger-info-text: var(--jh-entree-naranja-fuerte);
    --jh-burger-photo-bg: var(--jh-entree-rojo-lavado);
}


/* Oferta badge */
.jh-badge--offer{
    border: 1px solid rgba(252,191,44,0.55);
    background: rgba(23,18,19,0.18);
}

/* Compact badges (used in tight layouts like Pizzas/Sandwiches cards) */
.jh-badges--compact{
    margin: 6px 0 0;
    gap: 4px;
}

.jh-pizzas__cell-badges{
    margin: 6px 0 0;
}

.jh-pizzas__cell-badges .jh-badge{
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
}
.jh-bg-orange .jh-badge--offer,
.jh-bg-yellow .jh-badge--offer{
    border-color: rgba(23,18,19,0.35);
    background: rgba(23,18,19,0.1);
}

/* Oferta price styling */
.jh-money--regular{
    opacity: .75;
}
.jh-money--offer{
    /* font-weight: 900; */
}
.jh-price--offer-active .jh-price-label{
    opacity: .95;
}
.jh-inline-regular{
    opacity:.75;
}
.jh-inline-offer{
    /* font-weight:900; */
}

.stickyMenu {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}