/**
 * Theme Name:     Seguridad Alimentaria
 * Author:         Alberto
 * Template:       kadence
 * Text Domain:	   seguridad-alimentaria
 * Description:    Kadence child theme.
 */




p.ancho-75 {
    max-width: 75ch;
    margin-inline: auto;
}


/* ── Concept grid ── */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.concept-card {
    background: #f5f9ff;
    border: 1px solid #dce9ff;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: box-shadow .15s;

    &:hover {
        box-shadow: 0 3px 14px rgba(13, 71, 161, .12);
    }

    & .num {
        font-size: .7rem;
        font-weight: 700;
        color: #1976d2;
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: .3rem;
    }

    & h2 {
        font-size: 1.3rem;
        color: #041836;
    }

    & ul {
        list-style: none;
        padding: 0 !important;

        & li {
            font-size: .86rem;
            padding: .2rem 0 .2rem .9rem;
            position: relative;
            color: #37474f;

            &::before {
                content: "▸";
                position: absolute;
                left: 0;
                color: #1976d2;
                font-size: .75rem;
                top: .25rem;
            }
        }
    }
}



/* Cuestionarios */
.wpProQuiz_question_text {
    font-size: 24px;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
    margin-top: 2rem !important;
}

.learndash_mark_complete_button {
    max-width: unset !important;
    width: calc(100% + 40px) !important;
}
.sfwd-mark-complete::after {
    right: -2em !important
}

/* Sopa de letras */
#juego button {
    color: black;
    padding: 0;
}


/* Estilos lecciones 2, 4, 5, 6 */

/* ─── Intro card ─────────────────────────────────── */
.intro {
    background: #fff;
    border-left: 5px solid #2e86c1;
    border-radius: 8px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);

    margin-top: 2rem;

    p {
        color: #11151C;
    }
}

.intro p {
    margin-bottom: .6rem;
}

.intro p:last-child {
    margin-bottom: 0;
}

/* ─── Sections ───────────────────────────────────── */
section.main-section {
    background: #fff;
    border-radius: 10px;
    padding: 1.8rem 2rem;
    margin-bottom: 1.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);

    h2 {
        font-size: 1.35rem;
        color: #1a5276;
        border-bottom: 2px solid #d6eaf8;
        padding-bottom: .5rem;
        margin-bottom: 1.1rem;
    }
}

/* ─── Sub-sections ──────────────────────────────── */
article.sub-section {
    margin-top: 1.2rem;
    padding-left: 1rem;
    border-left: 3px solid #aed6f1;
}

article.sub-section h3 {
    font-size: 1.08rem;
    color: #2874a6;
    margin-bottom: .4rem;
}

article.sub-section p {
    margin-bottom: .5rem;
    font-size: .97rem;
}

/* ─── Lists ──────────────────────────────────────── */
ul.prereq-list,
ul.detail-list {
    margin: .6rem 0 .6rem 1.2rem;
    list-style: none;
}

ul.prereq-list li::before {
    content: "✔ ";
    color: #27ae60;
    font-size: .9rem;
}

ul.detail-list li::before {
    content: "▸ ";
    color: #2e86c1;
}

ul.prereq-list li,
ul.detail-list li {
    padding: .25rem 0;
    font-size: .96rem;
}

/* ─── Principios ─────────────────────────────────── */
ol.principios {
    list-style: none;
    counter-reset: princ;
    margin-top: .8rem;
}

ol.principios>li {
    counter-increment: princ;
    margin-bottom: 1.4rem;
}

ol.principios>li .princ-header {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: .5rem;
}

ol.principios>li .princ-number {
    background: #1a5276;
    color: #fff;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

ol.principios>li h3 {
    font-size: 1.05rem;
    color: #1a5276;
    margin: .25rem 0 .2rem;
}

ol.principios>li .princ-body {
    padding-left: 2.8rem;
}

ol.principios>li .princ-body p {
    margin-bottom: .4rem;
    font-size: .96rem;
}

/* ─── Ejemplos badge ────────────────────────────── */
.ejemplos-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #7d6608;
    background: #fef9e7;
    border: 1px solid #f9e79f;
    border-radius: 4px;
    padding: .15rem .5rem;
    display: inline-block;
    margin-bottom: .35rem;
}




/* SOPA DE LETRAS */
/* .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: sans-serif;
} */

/* .btn-resolver {
    padding: 10px 24px;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 20px;
} */

.game-layout {
    display: flex;
    gap: 20px;
    justify-content: center;
}

#juego {
    border: 1px solid black;
    padding: 20px;
}

#juego div {
    width: 100%;
    margin: 0 auto;
}

#juego .puzzleSquare {
    height: 30px;
    width: 30px;
    text-transform: uppercase;
    background-color: white;
    border: 0;
    font: 1em sans-serif;
    cursor: pointer;
}

#juego button {
    color: black;
    padding: 0;
}

button::-moz-focus-inner {
    border: 0;
}

#juego .selected {
    background-color: orange;
}

#juego .found {
    background-color: blue;
    color: white;
}

#juego .solved {
    background-color: purple;
    color: white;
}

#juego .complete {
    background-color: green;
}

#Palabras {
    padding-top: 21px;
    text-align: right;
    font-size: 1.5rem;
}

#Palabras ul {
    list-style-type: none;
    padding: 0;
}

#Palabras li {
    padding: 3px 0;
    font: 1em sans-serif;
}

#Palabras .wordFound {
    text-decoration: line-through;
    color: gray;
}

/* Crucigrama */
.crossword {
    display: block;
    background-color: rgb(32, 32, 32);
    text-align: center;

    .square {
        margin: 0 1px 1px 0;
        display: inline-block;
        position: relative;
        font: 24px Calibri;
        width: 1.25em;
        height: 1.25em;
        line-height: 1.25em;
        vertical-align: top;
    }

    input.char:focus {
        -webkit-box-shadow: 0 0 0 2px rgb(255, 32, 32);
        -moz-box-shadow: 0 0 0 2px rgb(255, 32, 32);
        box-shadow: inset 0 0 0 2px rgb(255, 32, 32);
    }

    input.char {
        font-size: 24px;
        text-transform: uppercase;
        outline: 0;
        border: 0;
        padding: 0;
        margin: 1px 0 0 -1px;
        width: 1.25em;
        height: 1.25em;
        text-align: center;
        background-color: rgb(255, 255, 255);
    }

    .charReadOnly:focus {
        -webkit-box-shadow: 0 !important;
        -moz-box-shadow: 0 !important;
        box-shadow: 0 !important;

        border-color: rgba(0, 0, 0, 0);
        margin: 0;
        outline: 0;
        color: #303030;
    }

    .num {
        position: absolute;
        top: 0;
        top: 1px;
        left: 1px;
        text-align: left;
        color: #5f0000;
        font-size: 0.6em;
        line-height: 1em;
        pointer-events: none;
    }

    .hide {
        visibility: hidden;
    }

    .disabled {
        display: none !important;
    }

}

.clueBlock {

    p {
        color: black;
            margin-bottom: 0.5lh !important;
            font-size: 15px;
        
    }
        .lineNum {
            color: white;
            background-color: #1d1d1d;
            padding: 4px 6px;
            border-radius: 4px;
            line-height: 1;
        }
}