body {
    background-image: url(../images/bg.jpg);
    background-position: 0 0;
    background-repeat: repeat;
}

header {
    background-image: url(../images/content-header.png) !important;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

a:not([class]) {
    text-decoration: none;
}

table {
    max-width: 100%;
}

/* Logo y menú en la misma fila (escritorio) */
@media (min-width: 992px) {
    .container-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-left: max(.5em, calc((100% - 1200px) / 2));
        padding-right: max(.5em, calc((100% - 1200px) / 2));
    }

    .container-header > .grid-child {
        width: auto;
        max-width: none;
        margin: 0;
        padding: .5em 0;
    }

    .container-header > .grid-child:first-of-type {
        flex: 0 0 auto;
    }

    .container-header .container-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        padding-bottom: 0;
        margin-top: 0;
    }

    .container-header nav {
        margin-top: 0;
    }

    .container-header .mod-menu {
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    .container-header .metismenu.mod-menu li.parent:hover > ul.mm-collapse {
        display: block !important;
        left: 0;
        padding: 1rem;
    }

}

/* Logo y menú en la misma fila (móvil y tablet) */
@media (max-width: 991px) {
    header.header.container-header {
        display: flex;
    }

    .container-header .container-nav {
        justify-content: flex-end;
    }

    .container-header .grid-child {
        padding: .5em 1.5em;
    }

    a.brand-logo img {
        max-width: 150px;
    }
}

/* Sustituir el triángulo nativo por el símbolo » del diseño original */
.container-header .metismenu.mod-menu .mm-toggler:after {
    content: " »";
    border: none;
    width: auto;
    height: auto;
    font-size: 1em;
    line-height: 1;
    margin-inline-start: .3em;
}

/* Reducir tamaño letra y espaciado del menú principal */
.metismenu.mod-menu .metismenu-item {
    padding: .5em .75em;
    font-size: 1rem;
}

/* Evitar que el símbolo se "voltee" raro al desplegar el submenú
   (la plantilla rota la flecha original 180° al abrir) */
.container-header .metismenu.mod-menu .mm-toggler[aria-expanded="true"]:after {
    transform: none;
}

/* Anular el indicador de línea nativo de Cassiopeia */
.container-header .mod-menu > li:after,
.container-header .metismenu > li > a:after,
.container-header .metismenu > li > button:before {
    content: none;
}

/* Fondo oscuro cubriendo todo el <li>, en hover y en el ítem activo */
.container-header .metismenu.mod-menu .metismenu-item:hover,
.container-header .metismenu.mod-menu .metismenu-item.active,
.container-header .metismenu.mod-menu .metismenu-item.current {
    background-color: var(--dark-color);
}

/* Quitar el subrayado que Cassiopeia añade por defecto en hover/activo,
   ya que ahora el fondo cumple esa función visual */
.container-header .metismenu.mod-menu .metismenu-item.active > a,
.container-header .metismenu.mod-menu .metismenu-item.active > button,
.container-header .metismenu.mod-menu .metismenu-item:hover > a,
.container-header .metismenu.mod-menu .metismenu-item:hover > button {
    color: var(--light-color);
    text-decoration: none;
}

@media (992px <= width < 1200px) {
    .metismenu.mod-menu .metismenu-item {
        font-size: 0.85rem;
    }
}

/* Main */

.grid-child.container-component {
    padding-left: 10px;
}

table.com-content-category__table td.list-date.small {
    min-width: 100px;
}

.com-content-category__navigation.w-100 p.counter {
    float: none !important;
    text-align: center;
}

ul.pagination {
    justify-content: center;
}

.page-link.active, .active>.page-link {
    color: var(--light-color) !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

ul.pagination .page-link {
    color: var(--primary-color);
}

ul.pagination .page-link:hover {
    color: var(--light-color);
    background-color: var(--dark-color);
}

@media (max-width: 767px) {
    ul.pagination {
        flex-wrap: wrap;
    }

    ul.pagination li.page-item {
        margin: .25rem;
    }
}

@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid::before {
            content: "";
            grid-row: side-l-start / side-l-end;
            grid-column: side-l-start / side-r-end;
            margin:  0 -1.5em 0;
            background-color: #fff;
            background: url(../images/content.png);
            background-position: 0 0;
            background-repeat: repeat;
            border-radius: 0 0 .5rem .5rem;
            box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
            z-index: 0;
        }

        .container-sidebar-left,
        .container-component,
        .container-sidebar-right {
            position: relative;
            z-index: 1;
        }
    }
}

/* Módulos en sidebar */

.grid-child.container-sidebar-left {
    border-right: 1px solid #e1e1e1;
}

.container-sidebar-left .sidebar-left:first-child {
    margin-top: 3em;
}

.container-sidebar-left .sidebar-left {
    padding-right: 20px;
}

.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
    margin-top: 3em;
}

.container-sidebar-left .sidebar-left > h3, 
.container-sidebar-right .sidebar-right > h3 {
    color: var(--dark-color);
    font-weight: normal;
}

.mod-list {
    padding-left: 20px;
}

.mod-list li {
    list-style-type: square;
    background: transparent;
    margin: 4px;
}

.mod-list li a:hover {
    text-decoration: none;
    color: var(--dark-color);
}

/* Botón "Leer más" (com_content readmore) */
.readmore a,
a.readmore {
    display: inline-block;
    background-color: var(--dark-color);
    color: var(--light-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-family: var(--open-sans-font), sans-serif;
    text-transform: none;
}

.readmore a:hover,
a.readmore:hover {
    background-color: var(--btn-color);
    color: var(--light-color);
}