/*
Theme Name: MUSA Newsup Child
Theme URI: https://example.com/
Description: Child theme de Newsup 2.9.9.82 adaptado a la identidad visual MUSA.
Author: MUSA
Template: newsup
Version: 2.0.1
Text Domain: musa-newsup-child
*/

/*
 * MUSA brand palette
 * Verde hoja:     #1b421d
 * Verde claro:    #9ad7a9
 * Verde vivo:     #6cd834
 * Verde medio:    #60b52d
 * Amarillo banana:#edce15
 * Blanco:         #ffffff
 */
:root {
    --musa-verde-hoja: #1b421d;
    --musa-verde-claro: #9ad7a9;
    --musa-verde-vivo: #6cd834;
    --musa-verde-medio: #60b52d;
    --musa-amarillo: #edce15;
    --musa-blanco: #ffffff;
    --musa-fondo: #f5f7ef;
}

/* Brand-level overrides for values that live in Newsup's main stylesheet. */
body { color: var(--musa-verde-hoja); }
a { color: var(--musa-verde-medio); }
a:hover, a:focus { color: var(--musa-verde-vivo); }

/* Header / navigation */
.mg-headwidget .mg-head-detail,
.mg-headwidget .navbar-wp { background: var(--musa-verde-hoja); }
.mg-headwidget .navbar-nav > li > a:hover,
.mg-headwidget .navbar-nav > li > a:focus,
.mg-headwidget .navbar-nav > .active > a,
.mg-headwidget .navbar-nav > .active > a:hover,
.mg-headwidget .navbar-nav > .active > a:focus { background: var(--musa-verde-medio); color: var(--musa-blanco); }

/* Buttons / calls to action */
.btn-theme, .more_btn, .more-link,
input[type="submit"], input[type="reset"], button { background: var(--musa-amarillo); border-color: var(--musa-amarillo); color: var(--musa-verde-hoja); }
.btn-theme:hover, .btn-theme:focus, .more_btn:hover, .more_btn:focus, .more-link:hover, .more-link:focus,
input[type="submit"]:hover, input[type="reset"]:hover, button:hover,
input[type="submit"]:focus, input[type="reset"]:focus, button:focus { background: var(--musa-verde-medio); border-color: var(--musa-verde-medio); color: var(--musa-blanco); }

/* Headings and accents */
.mg-heading h3, .mg-heading h3 a { color: var(--musa-verde-hoja); }
.widget-title, .mg-sidebar .mg-widget .mg-title h2, .mg-sidebar .mg-widget .mg-title h3 { color: var(--musa-verde-hoja); }

/* Cards / category labels */
a.newsup-categories.category-color-1 { background: var(--musa-amarillo); color: var(--musa-verde-hoja); }
a.newsup-categories.category-color-2 { background: var(--musa-verde-medio); color: var(--musa-blanco); }
a.newsup-categories.category-color-3 { background: var(--musa-verde-hoja); color: var(--musa-blanco); }
a.newsup-categories.category-color-4 { background: var(--musa-verde-vivo); color: var(--musa-verde-hoja); }

/* Forms */
.form-control:hover, textarea:hover,
input:not([type]):hover, input[type="email"]:hover, input[type="number"]:hover,
input[type="password"]:hover, input[type="tel"]:hover, input[type="url"]:hover,
input[type="text"]:hover, input:not([type]):focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="password"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="text"]:focus { border-color: var(--musa-verde-medio); }
blockquote { border-color: var(--musa-amarillo); }
blockquote::before { color: var(--musa-amarillo); }

/* Pagination / navigation accents */
.navigation.pagination .nav-links .page-numbers:hover,
.navigation.pagination .nav-links .page-numbers:focus,
.navigation.pagination .nav-links .page-numbers.current,
.single-nav-links a.current, .single-nav-links span.current,
.single-nav-links a:hover, .single-nav-links span:hover { background: var(--musa-verde-medio); border-color: var(--musa-verde-medio); color: var(--musa-blanco); }

/* Footer */
footer .mg-footer-copyright { background: var(--musa-verde-hoja); }
footer .mg-footer-copyright p, footer .mg-footer-copyright a { color: var(--musa-blanco); }
footer .mg-footer-copyright a:hover, footer .mg-footer-copyright a:focus { color: var(--musa-amarillo); }

/* Subtle backgrounds and separators */
.grey-bg { background: var(--musa-fondo); }

/* Mobile */
.mobilehomebtn { background: var(--musa-amarillo); color: var(--musa-verde-hoja); }
.mobilehomebtn:hover { color: var(--musa-verde-hoja); }

/* MUSA focus ring */
:focus-visible { outline: 2px solid var(--musa-amarillo); outline-offset: 2px; }


/* =========================================================
   MUSA 2.0 - RESPONSIVE LAYOUT + CONTENT WIDTHS
   ========================================================= */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

img,
iframe,
video,
embed,
object {
    max-width: 100%;
}

img { height: auto; }

/* Main Newsup content: keep the theme fluid, but prevent text
   from becoming excessively wide. Individual posts/pages can
   override this with the MUSA Content Width field. */
.mg-blog-post-box > article.small.single {
    width: min(100%, var(--musa-content-width, 900px));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* The featured image may remain wide while the written content
   follows the selected width. */
.mg-blog-post-box > .img-fluid,
.mg-blog-post-box > img.img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}

/* WordPress blocks and common embeds */
.wp-block-embed,
.wp-block-image,
.wp-block-gallery,
.wp-block-table,
.wp-block-cover,
.wp-block-video,
.wp-block-audio {
    max-width: 100%;
}

.wp-block-image img,
.wp-block-gallery img,
.wp-block-cover img {
    max-width: 100%;
    height: auto;
}

.wp-block-table { overflow-x: auto; }

.wp-block-table table,
.mg-blog-post-box article.small.single table {
    width: 100%;
    max-width: 100%;
}

.mg-blog-post-box article.small.single pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mg-blog-post-box article.small.single iframe {
    max-width: 100%;
}

/* Wide/full blocks are allowed to use the available article width. */
.mg-blog-post-box article.small.single .alignwide {
    width: auto;
    max-width: none;
    margin-left: -4vw;
    margin-right: -4vw;
}

.mg-blog-post-box article.small.single .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Better long-word handling */
.mg-blog-post-box article.small.single,
.mg-blog-post-box article.small.single p,
.mg-blog-post-box article.small.single li,
.mg-blog-post-box article.small.single h1,
.mg-blog-post-box article.small.single h2,
.mg-blog-post-box article.small.single h3,
.mg-blog-post-box article.small.single h4,
.mg-blog-post-box article.small.single h5,
.mg-blog-post-box article.small.single h6 {
    overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 991px) {
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mg-blog-post-box > article.small.single {
        width: min(100%, var(--musa-content-width, 860px));
    }

    .mg-blog-post-box article.small.single .alignwide {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mg-blog-post-box > article.small.single {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .mg-blog-post-box article.small.single .alignfull {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .mg-blog-post-box article.small.single .wp-block-columns {
        display: block;
    }

    .mg-blog-post-box article.small.single .wp-block-column {
        width: 100%;
        margin-bottom: 20px;
    }

    .mg-blog-post-box .title.single {
        font-size: clamp(24px, 7vw, 34px);
        line-height: 1.15;
    }

    .mg-blog-post-box article.small.single {
        font-size: 16px;
        line-height: 1.7;
    }

    .mg-blog-post-box article.small.single table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .mg-blog-post-box article.small.single {
        font-size: 15px;
        line-height: 1.65;
    }

    .mg-blog-post-box article.small.single h2 { font-size: 24px; }
    .mg-blog-post-box article.small.single h3 { font-size: 21px; }
}

/* Accessibility: do not let focus indicators get clipped. */
.mg-blog-post-box article.small.single a:focus-visible,
.mg-blog-post-box article.small.single button:focus-visible,
.mg-blog-post-box article.small.single input:focus-visible,
.mg-blog-post-box article.small.single textarea:focus-visible {
    outline: 2px solid #edce15;
    outline-offset: 3px;
}


/* =========================================================
   MUSA 2.0.1 - RESPONSIVE / ELEMENTOR MOBILE FIX
   Corrige desbordamientos horizontales en páginas y entradas,
   especialmente dentro del editor/preview de Elementor.
   ========================================================= */

/* Nunca permitir que la página genere scroll horizontal. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Elementor: los contenedores flex deben poder encogerse. */
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget,
.elementor-widget-container,
.elementor-element {
    min-width: 0;
    max-width: 100%;
}

/* Medios y contenidos embebidos. */
.elementor img,
.elementor iframe,
.elementor video,
.elementor embed,
.elementor object,
.elementor svg {
    max-width: 100%;
}

/* Texto largo nunca debe ampliar la columna. */
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-text-editor .elementor-widget-container,
.elementor .elementor-widget-heading,
.elementor .elementor-widget-heading .elementor-widget-container {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Evita que tablas y código rompan el ancho de la página. */
.elementor table {
    max-width: 100%;
}

.elementor pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Elementor + contenido de Newsup: respetar el ancho disponible. */
.mg-blog-post-box,
.mg-blog-post-box > .container,
.mg-blog-post-box .container,
.mg-blog-post-box .row {
    max-width: 100%;
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 767px) {

    /* El contenido de Elementor debe ocupar el viewport sin
       conservar anchos de escritorio. */
    .elementor-section,
    .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .elementor-container {
        margin-left: auto;
        margin-right: auto;
    }

    /* Las columnas se apilan y pueden encogerse. */
    .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
        flex-shrink: 1 !important;
        box-sizing: border-box;
    }

    .elementor-column-wrap,
    .elementor-widget-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* No permitir que el padding del editor cree desbordamiento. */
    .elementor-widget-container,
    .elementor-element {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Texto legible y completamente visible en móvil. */
    .elementor-widget-text-editor .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    /* Mantener imágenes y galerías dentro de la pantalla. */
    .elementor img,
    .elementor .elementor-image img,
    .elementor-widget-image img {
        width: auto;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Botones que puedan traer un ancho fijo desde Elementor. */
    .elementor .elementor-button,
    .elementor .elementor-button-wrapper {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* El ancho individual de MUSA se convierte en ancho completo
       en móvil: el valor elegido sigue aplicando en escritorio. */
    .mg-blog-post-box > article.small.single,
    body.page .mg-blog-post-box > article.small.single,
    body.single-post .mg-blog-post-box > article.small.single {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Anchos especiales de Elementor no deben provocar overflow. */
    .elementor .alignwide,
    .elementor .alignfull {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Teléfonos pequeños */
@media (max-width: 480px) {
    .elementor-section,
    .elementor-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-widget-text-editor .elementor-widget-container {
        font-size: 15px;
        line-height: 1.65;
    }
}