/* Submenu refresh for the v2 results pages.
 * Mirrors the .lc-footer pattern: one rounded container with overflow:hidden,
 * items joined flush (no gap or separator), and full slot fills on hover/active.
 * Same palette as v1 — #222 dark, #f1c40f yellow accent, #428c00 green.
 * Scoped to .submenu-v2 so v1 pages are untouched. */

/* Beat the legacy `.submenu { padding: 7px 0; margin: 0 0 25px }` rule from
 * cb_mob.min.css with a higher-specificity selector (element + 2 classes). */
nav.submenu.submenu-v2 {
    display: flex;
    background: #222;
    border-radius: 9px;       /* matches lc-footer's --lc-cell-radius */
    overflow: hidden;
    margin: 0 0 28px;
    padding: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    height: 48px;
}

nav.submenu.submenu-v2 ul.nav {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
    flex-wrap: wrap;
}

/* "Opciones Resultados >" label — non-clickable, yellow accent. */
nav.submenu.submenu-v2 ul.nav > li:first-child {
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 48px;
    color: #d6d6d6;
    font-size: 16px;
    flex: 0 0 auto;
    user-select: none;
}
nav.submenu.submenu-v2 ul.nav > li:first-child strong {
    color: #f1c40f;
    margin-left: 6px;
    font-weight: 600;
}
nav.submenu.submenu-v2 ul.nav > li:first-child .glyphicon {
    color: #f1c40f;
    margin-left: 10px;
    font-size: 14px;
}

/* Option slots — equal width, flush against each other, fill the bar edge-to-edge. */
nav.submenu.submenu-v2 ul.nav > li:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
nav.submenu.submenu-v2 ul.nav > li:not(:first-child) > a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 12px;
    color: #cfcfcf;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    border-bottom: 0;
    line-height: 1;
    font-weight: 500;
}

/* Hover: a lighter shade of the dark gray base — a subtle lift, not a color shift. */
nav.submenu.submenu-v2 ul.nav > li:not(:first-child) > a:hover,
nav.submenu.submenu-v2 ul.nav > li:not(:first-child) > a:focus {
    background: #363636;
    color: #fff;
    text-decoration: none;
    border-bottom: 0;
}

/* Active item: full yellow slot fill, black text. */
body.resact nav.submenu.submenu-v2 li.resact > a,
body.resaye nav.submenu.submenu-v2 li.resaye > a,
body.ressem nav.submenu.submenu-v2 li.ressem > a,
body.resant nav.submenu.submenu-v2 li.resant > a {
    background: #f1c40f;
    color: #000;
    font-weight: 600;
    border-bottom: 0;
}
body.resact nav.submenu.submenu-v2 li.resact > a:hover,
body.resaye nav.submenu.submenu-v2 li.resaye > a:hover,
body.ressem nav.submenu.submenu-v2 li.ressem > a:hover,
body.resant nav.submenu.submenu-v2 li.resant > a:hover {
    background: #f1c40f;
    color: #000;
}

/* Page-level v2 tweaks (only loaded on v2 pages, so v1 is unaffected).
 * Use h1.maintitle to match the legacy rule's specificity (0,1,1). */
h1.maintitle {
    border-bottom: 0;
    padding-bottom: 0;
}

/* --- Animalitos + Frutas CTAs — bento-style 2-up row replacing the old
 * .alert .alert-info. Each card is a solid-color block with text + static
 * right-arrow icon. Stacks 1-up on phones. */
.v2-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 24px;
}

a.v2-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    padding: 14px 14px 14px 20px;  /* less right padding so the arrow sits closer to the edge */
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
}
a.v2-cta strong { font-weight: 600; }
a.v2-cta:hover,
a.v2-cta:focus {
    color: #fff;
    text-decoration: none;
}

.v2-cta-text {
    flex: 1;
    min-width: 0;
}
.v2-cta-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    display: block;
    width: 18px;
    height: 18px;
}

/* Animalitos — blue */
a.v2-cta--animalitos {
    background: #1976d2;
    box-shadow: 0 2px 6px rgba(21, 101, 192, .18);
}
a.v2-cta--animalitos:hover,
a.v2-cta--animalitos:focus {
    background: #1565c0;
}

/* Frutas — warm orange */
a.v2-cta--frutas {
    background: #ef6c00;
    box-shadow: 0 2px 6px rgba(239, 108, 0, .18);
}
a.v2-cta--frutas:hover,
a.v2-cta--frutas:focus {
    background: #e65100;
}

@media (max-width: 540px) {
    .v2-cta-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* When the result cards collapse to 1 column (≤992px), hide the
 * "Opciones Resultados >" label so the four options own the whole bar. */
@media (max-width: 992px) {
    nav.submenu.submenu-v2 ul.nav > li:first-child {
        display: none;
    }
}

/* Narrow phones: stack the options 1-up. The ul inherits flex-wrap: wrap from
 * desktop; with flex-direction: column that would wrap overflowing items into
 * a NEW column (cross-axis), which the nav's overflow:hidden then clips —
 * leaving only the first item visible and a black gap below. So force nowrap
 * and let items size from their <a> height instead of stretching the main axis. */
@media (max-width: 540px) {
    nav.submenu.submenu-v2 {
        font-size: 14px;
        height: auto;
    }
    nav.submenu.submenu-v2 ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    nav.submenu.submenu-v2 ul.nav > li:not(:first-child) {
        flex: 0 0 auto;
        width: 100%;
    }
    nav.submenu.submenu-v2 ul.nav > li:not(:first-child) > a {
        height: 44px;
        padding: 0 12px;
        width: 100%;
    }
}