/**
 * Footer Desktop Styles - UPDATED
 * Gebaseerd op Figma design - Desktop versie
 * Breakpoint: >= 1024px
 * 
 * SECTION 1: Product Categories (8 items in 2 columns) - STATIC, NO TOGGLE
 * SECTION 2: Main Footer (Logo | Contactgegevens | De kastenmaker | Openingstijden)
 */

@media (min-width: 1024px) {

    /* ============================================
       BASE FOOTER STYLES (Desktop)
       ============================================ */

    .site-footer {
        background: #ffffff;
    }

    .site-footer .inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* ============================================
       SECTION 1: PRODUCT CATEGORIES MENU
       ============================================ */

    .site-footer__categories {
        display: block;
        background: #f6f6f6;
        padding: 48px 0;
    }

    .site-footer__categories > .inner {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .site-footer__categories-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 74px;
        align-items: start;
    }

    .site-footer__categories-row[data-cols="2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__categories-row[data-cols="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Backwards compatible: oude column class werkt ook nog */
    .site-footer__categories-column {
        display: flex;
        flex-direction: row;
        gap: 74px;
        flex: 1;
    }

    .site-footer__category-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: none !important;
    }

    .site-footer__category-title {
        color: #131313;
        font-size: 16px;
        line-height: 150%;
        font-weight: 700;
        margin: 0;
        padding: 0;
        display: block;
        background: transparent;
        border: none;
        cursor: default;
        text-align: left;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    /* Remove chevron on desktop */
    .site-footer__category-title::after {
        display: none !important;
    }

    .site-footer__category-title--link {
        cursor: pointer;
    }

    .site-footer__category-title--link:hover {
        color: #7a68ae;
    }

    .site-footer__category-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: none !important;
        overflow: visible !important;
    }

    .site-footer__category-item {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    .site-footer__category-item a {
        color: #131313;
        text-decoration: none;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        transition: color 0.3s ease;
    }

    .site-footer__category-item a:hover {
        color: #7a68ae;
        text-decoration: underline;
    }

    /* Section divider */
    .site-footer__section-divider {
        display: none; /* No divider on desktop */
    }

    /* ============================================
       SECTION 2: MAIN FOOTER
       ============================================ */

    .site-footer__top-row {
        display: flex;
        flex-direction: row;
        gap: 70px;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 48px 0;
    }

    /* ============================================
       BRANDING / LOGO
       ============================================ */

    .site-footer__branding {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: flex-start;
        justify-content: flex-start;
        flex: 1;
        border-bottom: 0 !important;
    }

    .site-footer__logo {
        width: 226px;
        flex-shrink: 0;
    }

    /* ============================================
       GRID (Contains the 3 columns)
       ============================================ */

    .site-footer__grid {
        display: contents;
        /* Laat children deelnemen aan parent flex */
    }

    /* ============================================
       COLUMNS (Each column is flex: 1)
       ============================================ */

    .site-footer__col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-bottom: 0 !important;
    }

    /* ============================================
       TOGGLE BUTTONS → Static Column Headers
       ============================================ */

    .site-footer__toggle {
        display: block;
        width: auto;
        padding: 0;
        border: none;
        border-bottom: none;
        cursor: default;
        pointer-events: none;
        background: transparent;
        text-align: left;
    }

    .site-footer__toggle .sample {
        color: #131313;
        font-size: 20px;
        line-height: 150%;
        font-weight: 700;
    }

    /* Hide arrow icon on desktop */
    .site-footer__icon {
        display: none !important;
    }

    /* ============================================
       CONTENT (Always Visible on Desktop)
       ============================================ */

    .site-footer__content {
        max-height: none !important;
        overflow: visible;
        padding: 0;
    }

    .site-footer__content .text-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .site-footer__content .text-content p {
        margin: 0;
        color: #131313;
        font-size: 16px;
        line-height: 150%;
        font-weight: 400;
    }

    /* Openingstijden - bold label */
    .site-footer__content .text-content strong,
    .site-footer__content .text-content b {
        font-weight: 700;
    }

    /* ============================================
       NAVIGATION LIST
       ============================================ */

    .site-footer__nav {
        padding: 0;
        gap: 8px;
        opacity: 1;
    }

    .site-footer__nav li {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    .site-footer__nav a {
        color: #131313;
        font-size: 16px;
        opacity: 1;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .site-footer__nav a:hover {
        color: #7a68ae;
        text-decoration: underline;
    }

    /* ============================================
       DIVIDER
       ============================================ */

    .site-footer__divider {
        display: block;
        border: none;
        border-top: 1px solid #bfbfbf;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ============================================
       BOTTOM SECTION
       ============================================ */

    .site-footer__bottom {
        display: flex;
        flex-direction: column;
        gap: 48px;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 48px 0;
        padding-top: 1.5rem;
    }

    .site-footer__meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 24px;
    }

    /* Wrapper voor copyright, legal, credits (links) */
    .site-footer__meta-left {
        display: flex;
        flex-direction: row;
        gap: 24px;
        align-items: center;
    }

    /* Copyright */
    .site-footer__copyright {
        color: #1f1f1f;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
    }

    /* Legal links horizontal met gap */
    .site-footer__legal {
        display: flex;
        flex-direction: row;
        gap: 24px;
        align-items: center;
    }

    .site-footer__legal a {
        color: #1f1f1f;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }

    .site-footer__legal a:hover {
        opacity: 0.7;
    }

    /* Credits */
    .site-footer__credits {
        color: #1f1f1f;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
    }

    .site-footer__credits a {
        color: #1f1f1f;
        text-decoration: none;
    }

    .site-footer__credits a:hover {
        text-decoration: underline;
    }

    /* Social Icons (rechts) */
    .site-footer__social {
        display: flex;
        flex-direction: row;
        gap: 28px;
        align-items: center;
        justify-content: flex-start;
        margin-left: auto;
    }

    .site-footer__social a {
        display: flex;
        flex-shrink: 0;
        color: #1f1f1f;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }

    .site-footer__social a:hover {
        opacity: 0.7;
    }

    .site-footer__social svg,
    .site-footer__social img {
        width: 24px;
        height: 24px;
        fill: #1f1f1f;
    }

    /* ============================================
       DISCLAIMER
       ============================================ */

    .site-footer__disclaimer {
        color: #1f1f1f;
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        text-align: left;
        width: 100%;
    }

}