/**
 * Full Width Layout Override - Header & Footer
 * 
 * Purpose: Force header and footer to 100% viewport width
 * while keeping internal content centered at max-width.
 * 
 * Problem Identified:
 * - .k-header__container has max-width: 1300px (line 69)
 * - .k-footer .k-container has max-width: 1300px (line 809)
 * 
 * Solution: Remove max-width constraint, add full-width wrapper logic
 */

/* ==========================================
   HEADER FULL WIDTH FIX (Simpler)
   ========================================== */

/* Force header to 100% of parent which is now full-width */
.k-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Keep container centered but allow it to expand */
.k-header__container {
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================
   FOOTER FULL WIDTH FIX (Simpler)
   ========================================== */

/* Force footer to 100% */
.k-footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Keep content centered but allow container to expand */
.k-footer .k-container {
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================
   PREVENT HORIZONTAL OVERFLOW (Strict)
   ========================================== */

/* Ensure NO horizontal scroll on both html and body */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Global Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure parent wrappers don't constrain or offset */
#page,
.site,
.site-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

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

@media (max-width: 768px) {
    .k-header__container,
    .k-footer .k-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}