/* * -----------------------------------------------------------------------------
 * Footer UI Component
 * Architecture: Flexbox & CSS Grid, Strictly Scoped
 * Standards: Clean Code, WCAG Compliant, High Specificity Encapsulation
 * -----------------------------------------------------------------------------
 */

:root{

/* New UI Layout Variables */
    --footer-max-width: 100%; /*1240px;*/
    --footer-lateral-gap: 0px; /*clamp(15px, 4vw, 40px);*/

    /* Fluid Vertical Spacing Control */
    --footer-gap-primary: 0px; /*Marginesy pod tytułem forum i nad znakiem firmowym*/
    --footer-gap-secondary: 0px; /* Odstępy między linkami i polami formularza */

}
/* 1. Base Container Scoping */
#footer {
    font-family: var(--font-primary);
    box-sizing: border-box;
    width: 100%;
    padding-left: var(--footer-lateral-gap);
    padding-right: var(--footer-lateral-gap);
    /* Zabezpieczenie przed przyleganiem do krawędzi okna przeglądarki */
    overflow-x: hidden;
}

#footer *, #footer *::before, #footer *::after {
    box-sizing: inherit;
}

#footer .footer-area {
    display: flex;
    flex-direction: column;
    background-color: var(--footer-color-bg-left);
    border-radius: var(--footer-radius);
    overflow: hidden;
    gap: 20px;
    width: 100%;
    
}

.footer-bg {
background-color:var(--site-bg-color);
}

/* Desktop Breakpoint */
@media (min-width: 1191px) {
    #footer .footer-area {
        flex-direction: row;
        align-items: stretch;
    }
}

/* 2. Left Column: Page Section */
#footer .footer-page-section {
    flex: 1;
    padding-inline: var(--footer-padding-inline);
    padding-block: var(--footer-footer-inner-box-padding);
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Preserves vertical distribution (Y-axis) */
    align-items: left; /* Centers child elements horizontally (X-axis) */
    text-align: left; /* Enforces text centering within child elements */
    
    background-color: var(--footer-color-bg-left);
    color: var(--footer-color-text-dark);
}

#footer .footer-page-heading {
    color: var(--footer-color-text-dark);
    font-size: var(--footer-h1-font-size);
    font-weight: var(--footer-h1-font-weight);
    margin-bottom: var(--footer-gap-primary);
    width: 100%; /* Ensures heading container allows text centering */
}

/* Navigation - Grid Layout Centering */
#footer .wp-block-navigation__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap-secondary) 40px;
    justify-items: left; /* Centers grid items along the inline (row) axis */
    list-style: none;
    padding: 0;
    margin: 0 0 var(--footer-gap-primary) 0;
    width: 100%; /* Prevents grid collapse, allowing internal centering */
}


#footer .footer-page-link a {
    color: var(--footer-color-text-dark);
    text-decoration: none;
    font-weight: var(--footer-a-font-weight);
    font-size: var(--footer-nav-buttons-text-size);
    transition: color var(--footer-transition);
}

#footer .footer-page-copyright {
    color: var(--footer-color-text-muted);
    font-size: var(--footer-copyright-text-size);
    margin: 0;
}

/* 3. Right Column: Newsletter & Socials */
#footer .footer-newsletter-section {
    flex: 1;
    background-color: var(--footer-color-bg-right);
    border-radius: var(--footer-radius);
    
    padding-inline: var(--footer-padding-inline);
    padding-block: var(--footer-footer-inner-box-padding);
    
    color: var(--footer-color-text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#footer .footer-newsletter-heading,
#footer .footer-newsletter-socials-heading {
    color: var(--footer-color-text-light);
    font-size: var(--footer-h1-font-size);
    font-weight: var(--footer-h1-font-weight);
    text-transform: uppercase;
    margin-bottom: var(--footer-gap-secondary);
    letter-spacing: 0.5px;
}

/* Forminator Row Override - kluczowe dla spłaszczenia prawej strony */
#footer .forminator-row {
    margin-bottom: var(--footer-gap-secondary) !important;
}

#footer .forminator-row-last {
    margin-bottom: 0 !important;
}

#footer .footer-newsletter-desc {
    color: var(--footer-color-text-light);
    font-size: var(--footer-nav-buttons-text-size);
}

/* 4. Forminator Overrides */
#footer .forminator-input--wrap input[type="email"] {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--footer-color-text-light) !important;
    color: var(--footer-color-text-light) !important;
    padding: 10px 0 !important;
    font-family: var(--font-primary);
    font-size: var(--footer-nav-buttons-text-size) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}



#footer .forminator-input--wrap input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

#footer .forminator-input--wrap input[type="email"]:focus-visible {
    outline: none;
    border-bottom-color: var(--footer-action-color-btn) !important;
    box-shadow: 0 1px 0 var(--footer-action-color-btn) !important;
}

#footer .forminator-email--field {
    font-size: var(--footer-nav-buttons-text-size);
    color: var(--footer-color-text-light) !important;
}

#footer .newsletter-form-submit-button {
    background-color: var(--footer-action-color-btn) !important;
    color: var(--footer-color-text-light) !important;
    border: none !important;
    border-radius: var(--footer-radius) !important;
    padding: 15px 30px !important;
    font-family: var(--font-primary) !important;
    font-size: var(--footer-nav-buttons-text-size) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: transform var(--footer-transition), box-shadow var(--footer-transition) !important;
    display: inline-block;
}

#footer .newsletter-form-submit-button:hover,
#footer .newsletter-form-submit-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(119, 49, 255, 0.4);
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--footer-color-text-light);
}


/* ==========================================================================
   MOBILE UI (max-width: 1190px) - Twarda podmiana na zmienne systemowe
   ========================================================================== */
@media screen and (max-width: 1190px) {
    #footer {
        /* Hardware-accelerated full-bleed layout breakout */
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Force reset of WordPress global paddings */
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        margin-bottom: 0px !important;;
    }

    #footer .footer-area {
        /* Ensure inner wrapper expands to the new viewport width */
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        gap: 10px;
        border-radius: 30px; /* Note: Consider removing if you want edge-to-edge background without rounded corners */
    }

    #footer .footer-page-section,
    #footer .footer-newsletter-section {
        padding-inline: 24px;
        padding-block: 40px;
        border-radius: 30px;
    }

    #footer .footer-page-heading {
        font-size: var(--footer-mobile-h1-font-size);
        margin-bottom: var(--footer-gap-primary);
        text-align: center;
    }

    #footer .footer-newsletter-heading,
    #footer .footer-newsletter-socials-heading {
        font-size: var(--footer-mobile-h3-font-size);
        margin-bottom: var(--footer-gap-primary);
        text-align: center;
    }

    #footer .footer-page-link a {
        font-size: var(--footer-mobile-nav-buttons-text-size);
        text-align: center;
    }

    #footer .footer-newsletter-desc {
        font-size: var(--footer-mobile-nav-buttons-text-size);
        text-align: center;
    }

    #footer .footer-page-copyright {
        font-size: var(--footer-mobile-copyright-text-size);
        text-align: center;
        margin-top: 20px;
    }

    #footer .forminator-input--wrap input[type="email"] {
        font-size: var(--footer-mobile-nav-buttons-text-size) !important;
    }

    #footer .footer-newsletter-socials-icons {
        justify-content: center;
    }

    #footer .newsletter-form-submit-button {
        font-size: var(--footer-mobile-nav-buttons-text-size) !important;
        width: 100%; 
        text-align: center;
    }
/* ==========================================================
       FOOTER NAVIGATION: FORCE VISIBILITY & 2-COLUMN GRID
       ========================================================== */

    /* 1. Ukrycie natywnych przycisków sterujących (Hamburger i Zamknij) */
    #footer .wp-block-navigation__responsive-container-open,
    #footer .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* 2. Neutralizacja mechanizmów ukrywających WordPressa (Modal Reset) */
    #footer .wp-block-navigation__responsive-container {
        display: block !important;
        position: relative !important;
        inset: auto !important; /* Resetuje pozycjonowanie top/left/right/bottom poza ekranem */
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        clip-path: none !important; /* Wyłącza sprzętowe ucinanie renderowania */
        background: transparent !important;
        z-index: 1 !important;
        transform: none !important;
    }

    /* 3. Reset wewnętrznych wrapperów okna dialogowego */
    #footer .wp-block-navigation__responsive-dialog {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    #footer .wp-block-navigation__responsive-container-content {
        display: block !important;
        padding: 0 !important;
    }

    /* 4. Implementacja układu dwukolumnowego (CSS Grid) */
/* Wyśrodkowanie głównego rodzica <nav> */
    #footer .wp-block-navigation {
        display: flex !important;
        justify-content: center !important; /* Wyrównanie zawartości do środka w osi X */
        width: 100% !important;
        margin: 0 auto !important; /* Dodatkowe zabezpieczenie centrowania dla bloku */
        padding-top: 20px !important;
    }

    #footer .wp-block-navigation-item__content {
        /* Wymuszenie koloru tekstu ze zdefiniowanej zmiennej */
        color: var(--text-high-contrast-color) !important;
        
        
        /* Implementacja obramowania na bazie zmiennej skróconej */
        outline: var(--footer-nav-buttons-outline) !important;
    }
    #footer .wp-block-navigation-item__label{
        font-size: var(--p-mobile-font-size);
    }

    /* 5. Standaryzacja elementów listy */
#footer .wp-block-navigation-item {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
#footer .wp-block-navigation-item__content {
        /* Wymuszenie koloru tekstu i obramowania ze zmiennych */
        color: var(--text-high-contrast-color) !important;
        outline: none !important;/*var(--footer-nav-buttons-outline) !important;
        
        /* Wdrożenie wytycznej: 20px paddingu (odstępu tekstu od outline) */
        padding: 0px !important; 
        
        /* Stabilizacja układu i centrowanie tekstu wewnątrz ramki */
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        
        /* Krytyczne dla utrzymania siatki (Box Model Security) */
        box-sizing: border-box !important; 
    }
    #footer .wp-block-navigation__container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important; /* Wdrożenie wytycznej: 30px odstępu między elementami */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        list-style: none !important;
        align-items: center !important;
    }
/* ==========================================================
       NEWSLETTER & SOCIALS: HORIZONTAL CENTERING (MOBILE)
       ========================================================== */

    /* 1. Center Newsletter Button Wrapper */
    #footer .footer-newsletter-section .wp-block-buttons {
        /* Force Flexbox layout and horizontal centering */
        display: flex !important;
        justify-content: center !important;
        
        /* Box Model Security: Ensure it takes full width for proper calculation */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Center Socials Section Container */
    #footer .footer-newsletter-socials-section {
        /* Enforce vertical stacking */
        display: flex !important;
        flex-direction: column !important;
        
        /* Align cross-axis items (heading and icon wrapper) to the center */
        align-items: center !important;
        
        /* Structural stabilization */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}