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

@media (max-width: 1024px) {

    .posts-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

}


/* ==========================================
   TABLET / MOBIEL
========================================== */

@media (max-width: 768px) {

    .site-header .container {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
    }

    /* HAMBURGER */

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;

        width: auto;
        padding: .5rem;

        border: 0;
        background: transparent;

        cursor: pointer;
        position: relative;
        z-index: 1001;

        font-family: "CenturyGothic", sans-serif;
    }

    .menu-text {
        display: inline-block;
    }

    .menu-icon {
        display: inline-block;
        font-size: 1.4rem;
        line-height: 1;
    }

    /* MENU STANDAARD DICHT */

    .main-nav {
        display: none;
    }

    /* MENU OPEN */

    .main-nav.menu-open {
        display: block;

        position: absolute;
        top: 70px;
        left: 0;

        width: 100%;

        padding: 1.5rem 2rem 2rem;

        background: rgba(250, 248, 245, .98);

        box-shadow: 0 8px 18px rgba(0,0,0,.06);

        z-index: 1000;
    }

    .main-nav.menu-open ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 1.2rem;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .main-nav.menu-open a {
        font-size: .8rem;
        letter-spacing: .25em;
    }


    /* CONTENT */

    .post {
        width: min(92%, 760px);
        padding: 3rem 0 5rem;
    }

    .post-title {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }

    .site-title {
        font-size: clamp(3rem, 12vw, 5rem);
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    body {
        font-size: 17px;
    }

    .card__title {
        font-size: 1.8rem;
    }

    .post-content {
        font-size: 1.05rem;
        line-height: 1.85;
    }

}

@media (max-width: 768px) {

    /* Navigatie standaard verborgen op mobiel */
    .main-nav {
        display: none !important;
    }

    /* Navigatie tonen na klikken op Menu */
    .main-nav.menu-open {
        display: block !important;
    }

}