/**
 * DIBA 2025 - FOOTER
 * 
 * Basado en: maqueta.html de Seu Electrònica Diputació de Barcelona
 * Componente: Pie de página con enlaces y redes sociales
 * 
 * IMPORTANTE: Adaptado para Bootstrap 3.3.7
 * Bootstrap 5 (maqueta) -> Bootstrap 3 (proyecto)
 */

/* ========================================
   FOOTER BASE
   ======================================== */

footer#region-main-footer {
    background-color: #ffffff;
    padding: 1.5rem;
    border-top: 9px solid #f7f7f7;
    border-bottom: 8px solid #9D2235;
    margin-top: 0;
}

footer .container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* Wrapper del include del footer (index.php y SS/index.php):
   sin padding lateral para que los bordes superior/inferior lleguen a extremo */
body.diba #footer-container,
body.diba .container[ng-include*="footer.html"] {
    padding-left: 0;
    padding-right: 0;
}

/* Bootstrap 3: Asegurar que las rows funcionan correctamente */
footer .row {
    margin-left: -15px;
    margin-right: -15px;
}

footer .row:before,
footer .row:after {
    content: " ";
    display: table;
}

footer .row:after {
    clear: both;
}

@media (min-width: 768px) {
    /* Neutralizar padding inyectado por diba2025-11-container-fix.css sobre .row
       dentro de #footer-container (solo en el footer) */
    body.diba #footer-container footer .row {
        padding-left: 0;
        padding-right: 0;
    }

    body.diba #footer-container footer .row .row {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Primera fila del footer - logo y enlaces */
footer > .container > .row:first-child {
    margin-bottom: 2rem;
}

/* Segunda fila del footer - redes sociales */
footer > .container > .row:nth-child(2) {
    margin-bottom: 1.5rem;
}

/* Tercera fila del footer - legal y dirección */
footer > .container > .row:nth-child(3) {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ========================================
   COLUMNAS BOOTSTRAP 3
   ======================================== */

footer .col-12,
footer .col-md-4,
footer .col-md-6,
footer .col-md-8,
footer .col-lg-4,
footer .col-lg-8 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Bootstrap 3: col-12 = full width en móvil */
footer .col-12 {
    width: 100%;
    float: left;
}

@media (min-width: 768px) {
    footer .col-md-4 {
        width: 33.33333333%;
        float: left;
    }
    
    footer .col-md-6 {
        width: 50%;
        float: left;
    }
    
    footer .col-md-8 {
        width: 66.66666667%;
        float: left;
    }
}

@media (min-width: 992px) {
    footer .col-lg-4 {
        width: 33.33333333%;
        float: left;
    }
    
    footer .col-lg-8 {
        width: 66.66666667%;
        float: left;
    }
}

/* ========================================
   UTILIDADES BOOTSTRAP 5 -> BOOTSTRAP 3
   ======================================== */

/* mb-4 = margin-bottom */
body.diba footer .mb-4 {
    margin-bottom: 1.5rem;
}

/* my-3 = margin-y */
body.diba footer .my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* me-3 = margin-right (Bootstrap 5 margin-end) */
body.diba footer .me-3 {
    margin-right: 1rem;
}

/* mb-0 = margin-bottom 0 */
body.diba footer .mb-0 {
    margin-bottom: 0;
}

/* d-none d-md-block = hidden en móvil, visible en desktop */
body.diba footer .d-none {
    display: none;
}

@media (min-width: 768px) {
    body.diba footer .d-none.d-md-block {
        display: block;
    }
}

/* fw-semibold = font-weight semibold */
body.diba footer .fw-semibold {
    font-weight: 600;
}

/* border-0 = sin bordes */
body.diba footer .border-0 {
    border: 0;
}

/* text-decoration-none */
body.diba footer .text-decoration-none {
    text-decoration: none;
}

/* text-dark */
body.diba footer .text-dark {
    color: #333;
}

/* fs-4 = font-size: 1.5rem en BS5 (para iconos de redes sociales) */
body.diba footer .fs-4 {
    font-size: 1.5rem;
}

/* Control de tamaño de SVG en iconos sociales */
body.diba footer a[target="_blank"] svg {
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
}

/* img-fluid */
body.diba footer .img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   LOGO FOOTER
   ======================================== */

/* Logo footer: oculto en mobile por defecto, visible en desktop */
body.diba footer .row:first-child > .col-md-4:first-child {
    display: none;
}

@media (min-width: 768px) {
    body.diba footer .row:first-child > .col-md-4:first-child {
        display: block;
    }
}

body.diba footer .logo-md {
    height: 50px;
    width: auto;
}

body.diba footer img[src*="logodiba_header.svg"] {
    height: 50px;
    width: auto;
}

footer a[href*="diba.cat"] {
    display: inline-block;
}

/* ========================================
   LIST-GROUP (Sistema de enlaces Bootstrap 3)
   ======================================== */

footer .list-group {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

body.diba footer .list-group-flush {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

footer .list-group-flush .list-group-item {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
}

footer .list-group-flush .list-group-item:first-child {
    border-top: 0;
}

footer .list-group-item {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.125);
    font-size: 14px;
}

/* MOBILE: Padding y font específicos sobrescritos en diba2025-12-mobile-fixes.css */

/* Títulos de sección */
footer .list-group-item.fw-semibold {
    font-weight: 600;
    color: #333;
    padding-bottom: 0.5rem;
    padding-top: 0;
    border-bottom: 0;
}

/* Enlaces interactivos */
body.diba footer .list-group-item-action {
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

body.diba footer .list-group-item-action:hover,
body.diba footer .list-group-item-action:focus {
    color: #333;
    text-decoration: none;
    background-color: #f8f9fa;
}

/* Último elemento con borde inferior */
body.diba footer .list-group-item.border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0;
}

/* ========================================
   REDES SOCIALES
   ======================================== */

body.diba footer a[target="_blank"] {
    display: inline-block;
    text-decoration: none;
    margin-right: 1rem;
    margin-bottom: 0;
    line-height: 1;
}

body.diba footer a[target="_blank"]:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* MOBILE: Estilos específicos sobrescritos en diba2025-12-mobile-fixes.css */


/* ========================================
   ENLACES INFERIORES (Avís legal, etc.)
   ======================================== */

body.diba footer > .container > .row:nth-child(3) a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

body.diba footer > .container > .row:nth-child(3) a:hover {
    color: #333;
    text-decoration: none;
}

/* MOBILE: Estilos específicos sobrescritos en diba2025-12-mobile-fixes.css */

/* ========================================
   DIRECCIÓN
   ======================================== */

footer address {
    font-style: normal;
    font-size: 14px;
    color: #707173;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    footer#region-main-footer {
        padding: 1rem;
    }
    
    footer > .container > .row:first-child {
        margin-bottom: 1.5rem;
    }
    
    footer > .container > .row:nth-child(2) {
        margin-bottom: 1rem;
    }
    
    footer .list-group-item {
        font-size: 13px;
        padding: 0.375rem 0.5rem;
    }
    
    footer address {
        font-size: 13px;
        margin-top: 1rem;
    }
    
    footer a[target="_blank"] {
        margin-right: 0.75rem;
    }
    
    footer a[target="_blank"] svg {
        height: 1.25rem;
        width: 1.25rem;
    }
    
    footer > .container > .row:nth-child(3) a {
        font-size: 13px;
    }
    
    footer .col-12 {
        width: 100%;
        float: none;
    }

    /* Ajustes mobile centralizados (movidos desde diba2025-12-mobile-fixes.css) */
    body.diba footer .footer {
        padding: 24px 15px;
    }

    body.diba footer .footer > .row:first-child {
        margin-bottom: 24px;
    }

    body.diba footer .col-xs-12 {
        width: 100%;
        margin-bottom: 32px;
    }

    body.diba footer .footerbloc {
        margin-bottom: 32px;
    }

    body.diba footer .footerbloc.bloc1 {
        display: none;
    }

    body.diba footer .list-group-flush {
        box-shadow: none;
    }

    body.diba footer .footerbloc.bloc2 a,
    body.diba footer .footerbloc ul li a,
    body.diba footer .list-group-item {
        font-family: "DiBa", Helvetica, Arial, sans-serif;
        font-size: 13.6px;
        font-weight: 400;
        min-height: 37.2px;
        height: auto;
        letter-spacing: 0.45px;
        line-height: 20.4px;
        padding: 8px 16px;
        display: block;
        color: #333;
        text-decoration: none;
        white-space: normal;
        word-wrap: break-word;
    }

    body.diba footer .footerbloc.bloc2 a:hover,
    body.diba footer .footerbloc ul li a:hover {
        color: #000;
        text-decoration: underline;
    }

    body.diba footer #xarxes2 {
        margin-top: 24px;
        margin-bottom: 16px;
    }

    body.diba footer #xarxes2 .footerbloc.bloc3:first-child {
        margin-bottom: 16px;
    }

    body.diba footer #xarxes2 a,
    body.diba footer a[target="_blank"] {
        font-family: "DiBa", Helvetica, Arial, sans-serif;
        font-size: 20.9535px;
        font-weight: 400;
        height: auto;
        letter-spacing: 0.45px;
        line-height: 31.4302px;
        margin-right: 16px;
        margin-bottom: 8px;
        display: inline-block;
        text-decoration: none;
    }

    body.diba footer #xarxes2 img,
    body.diba footer a[target="_blank"] img {
        width: 28px;
        height: 28px;
    }

    body.diba footer #xarxes2 svg,
    body.diba footer a[target="_blank"] svg {
        width: 28px;
        height: 28px;
    }

    body.diba footer > .container > .row:nth-child(3) a,
    body.diba footer address ~ div a {
        font-family: "DiBa", Helvetica, Arial, sans-serif;
        font-size: 13.6px;
        font-weight: 400;
        height: auto;
        letter-spacing: 0.45px;
        line-height: 20.4px;
        margin-right: 16px;
        display: inline-block;
        text-decoration: none;
        color: #333;
    }

    body.diba footer .footerbloc.bloc3,
    body.diba footer address {
        font-family: "DiBa", Helvetica, Arial, sans-serif;
        font-size: 13.6px;
        font-style: normal;
        font-weight: 400;
        height: auto;
        min-height: 61.2px;
        letter-spacing: 0.45px;
        line-height: 20.4px;
        color: #707173;
    }
}

@media (max-width: 575px) {
    footer#region-main-footer {
        padding: 0.75rem;
    }
    
    footer > .container > .row:first-child {
        margin-bottom: 1rem;
    }
    
    footer .list-group-item {
        font-size: 12px;
        padding: 0.25rem 0.5rem;
    }
    
    body.diba footer a[target="_blank"] {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    body.diba footer a[target="_blank"] img {
        height: 32px;
    }
    
    footer > .container > .row:nth-child(3) a {
        font-size: 12px;
        display: inline-block;
        margin-bottom: 0.25rem;
    }
    
    footer address {
        font-size: 12px;
    }
}

/* ========================================
   CLASES DE MAQUETA
   ======================================== */

body.diba .p-4 {
    padding: 1.5rem;
}

@media (max-width: 767px) {
    body.diba .p-4 {
        padding: 1rem;
    }
}

/* ========================================
   CLEARFIX PARA FILAS
   ======================================== */

footer .row:before,
footer .row:after {
    content: " ";
    display: table;
}

footer .row:after {
    clear: both;
}

/* ========================================
   NOTAS
   ========================================
   
   Bootstrap 3.3.7 (proyecto) vs Bootstrap 5 (maqueta)
   
   Conversiones aplicadas:
   - col-12 -> width: 100% + float: left
   - col-md-* -> width % + float: left
   - mb-4 -> margin-bottom: 1.5rem
   - my-3 -> margin-top + margin-bottom: 1rem
   - me-3 -> margin-right: 1rem
   - d-none d-md-block -> display: none + @media display: block
   - fw-semibold -> font-weight: 600
   - border-0 -> border: 0
   
   Estructura del footer (3 filas):
   Fila 1: Logo (col-md-4) + 3 columnas menú (col-md-8)
   Fila 2: Redes sociales (col-12 ancho completo)
   Fila 3: Enlaces legales (col-lg-4) + Dirección (col-lg-8)
   
   ======================================== */