/* =======================================================
   KATEX STYLING - VERSIONE ISOLATA E NON INVASIVA
   =======================================================
   Il wrapper reale nel DOM è .wp-block-katex-display-block
   Strategia mobile: scala il font invece di scrollare,
   perché l'overflow del parent blocca lo scroll interno.
   ======================================================= */

/* Variabili */
.wp-block-katex-display-block {
    --katex-primary:       #ffd700;
    --katex-primary-hover: #f4d03f;
    --katex-text:          #e5e5e5;
}

/* ===================================
   CONTAINER
   =================================== */

.wp-block-katex-display-block {
    box-sizing:  border-box;
    display:     block;
    width:       100%;
    max-width:   100%;
    text-align:  center;
    margin:      1.4rem 0;
    padding:     0;
    /* overflow visible: non tagliare nulla,
       la formula scala invece di uscire */
    overflow:    visible;
}

/* ===================================
   ELEMENTO KATEX - DESKTOP (base)
   =================================== */

.wp-block-katex-display-block .katex-display {
    display:    block   !important;
    text-align: center  !important;
    margin:     0 auto  !important;
    overflow:   visible !important;
}

.wp-block-katex-display-block .katex-display > .katex,
.wp-block-katex-display-block > .katex {
    font-size:   1.3rem  !important;
    white-space: nowrap  !important;
    max-width:   none    !important;
}

/* ===================================
   COLORI ELEMENTI MATEMATICI
   =================================== */

.wp-block-katex-display-block .katex .mord {
    color: var(--katex-text) !important;
}
.wp-block-katex-display-block .katex .mbin,
.wp-block-katex-display-block .katex .mrel {
    color: var(--katex-primary) !important;
}
.wp-block-katex-display-block .katex .mopen,
.wp-block-katex-display-block .katex .mclose {
    color: var(--katex-primary-hover) !important;
}
.wp-block-katex-display-block .katex .mfrac .frac-line {
    border-bottom-color: var(--katex-primary) !important;
}
.wp-block-katex-display-block .katex .sqrt > .root,
.wp-block-katex-display-block .katex .sqrt .sqrt-line {
    color:            var(--katex-primary) !important;
    border-top-color: var(--katex-primary) !important;
}
.wp-block-katex-display-block .katex .mop {
    color: var(--katex-primary) !important;
}

/* ===================================
   RESPONSIVE — SCALA IL FONT, NON SCROLLA
   =================================== */

/* Tablet */
@media screen and (max-width: 768px) {
    .wp-block-katex-display-block .katex-display > .katex,
    .wp-block-katex-display-block > .katex {
        /* Scala proporzionalmente alla viewport.
           1vw su 768px = 7.68px  →  13vw ≈ 100px totale, ma
           usiamo clamp per avere un minimo leggibile */
        font-size: clamp(0.7rem, 3.5vw, 1.1rem) !important;
    }
    .wp-block-katex-display-block {
        margin: 1rem 0;
    }
}

/* Mobile piccolo */
@media screen and (max-width: 480px) {
    .wp-block-katex-display-block .katex-display > .katex,
    .wp-block-katex-display-block > .katex {
        /* Su 375px: 3.8vw = ~14.25px — leggibile e contenuto */
        font-size: clamp(0.6rem, 3.8vw, 0.85rem) !important;
    }
    .wp-block-katex-display-block {
        margin: 0.8rem 0;
    }
}
/* ===================================
   FIX CENTRATURA SU MOBILE
=================================== */
@media screen and (max-width: 768px) {
    .wp-block-katex-display-block {
        text-align: center !important;
    }
    .wp-block-katex-display-block .katex-display {
        text-align: center !important;
        margin-left:  auto !important;
        margin-right: auto !important;
    }
    .wp-block-katex-display-block .katex-display > .katex {
        display: block !important;
        margin-left:  auto !important;
        margin-right: auto !important;
    }
    .wp-block-katex-display-block .katex-display .katex-html {
        display:      block !important;
        text-align:   center !important;
        margin-left:  auto !important;
        margin-right: auto !important;
    }
}