/* =====================================================
   MEDIA PAGE RESPONSIVE CSS
   ONLY:
   1. HEADER / NAVBAR
   2. FOOTER
===================================================== */


/* =====================================================
   GLOBAL RESPONSIVE FIX
===================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}


/* =====================================================
   HEADER / NAVBAR
   TABLET AND MOBILE
===================================================== */

@media (max-width: 900px) {

    .navbar {
        width: 100%;
        min-height: auto;
        padding: 15px 0;
    }

    .navbar .container {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 15px;

        padding: 12px 20px;
    }

    /* LOGO */

    .logo {
        display: block;
        text-align: center;
    }

    .logo-text {
        font-size: 1.8rem;
        white-space: nowrap;
    }


    /* NAVIGATION LINKS */

    .nav-links {
        position: static;

        width: 100%;
        height: auto;

        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 10px 25px;

        margin: 0;
        padding: 0;

        background: transparent;
        box-shadow: none;

        transform: none;
        transition: none;
    }

    .nav-links.open {
        transform: none;
    }

    .nav-links li {
        display: block;
        margin: 0;
        padding: 0;
    }

    .nav-links a {
        display: block;

        font-size: 1rem;
        padding: 7px 4px;

        white-space: nowrap;
    }


    /* HIDE MOBILE TOGGLE IF PRESENT */

    .nav-toggle {
        display: none;
    }
}


/* =====================================================
   HEADER / NAVBAR
   SMALL PHONES
===================================================== */

@media (max-width: 600px) {

    .navbar {
        padding: 12px 0;
    }

    .navbar .container {
        padding: 10px 15px;
        gap: 12px;
    }

    .logo-text {
        font-size: 1.55rem;
        letter-spacing: 1.5px;
    }

    .nav-links {
        width: 100%;
        gap: 6px 17px;
    }

    .nav-links a {
        font-size: 0.9rem;
        padding: 6px 2px;
    }
}


/* =====================================================
   HEADER / NAVBAR
   VERY SMALL PHONES
===================================================== */

@media (max-width: 400px) {

    .navbar .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo-text {
        font-size: 1.35rem;
        letter-spacing: 1px;
    }

    .nav-links {
        gap: 5px 13px;
    }

    .nav-links a {
        font-size: 0.82rem;
    }
}


/* =====================================================
   FOOTER
   TABLET AND MOBILE
===================================================== */

@media (max-width: 768px) {

    .site-footer {
        width: 100%;
        padding: 60px 0 20px;
    }

    .footer-container {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        text-align: center;

        gap: 40px;

        padding: 0 25px;
    }


    /* FOOTER COLUMNS */

    .footer-brand,
    .footer-navigation,
    .footer-contact {
        width: 100%;
        max-width: 500px;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        text-align: center;
    }


    /* BRAND */

    .footer-brand h2 {
        text-align: center;
    }

    .footer-brand p {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    /* NAVIGATION */

    .footer-navigation {
        text-align: center;
    }

    .footer-navigation h3 {
        margin-left: 0;
        text-align: center;
    }

    .footer-navigation ul {
        margin: 0;
        padding: 0;

        list-style: none;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 10px;
    }

    .footer-navigation li {
        margin: 0;
    }


    /* CONTACT */

    .footer-contact {
        text-align: center;
    }

    .footer-contact h3 {
        text-align: center;
    }

    .footer-contact p {
        justify-content: center;
        text-align: center;
    }


    /* FOOTER BOTTOM */

    .footer-bottom {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        text-align: center;

        gap: 8px;

        padding: 25px 20px 0;
    }

    .footer-bottom p {
        margin: 0;
        text-align: center;
    }
}


/* =====================================================
   FOOTER
   SMALL PHONES
===================================================== */

@media (max-width: 480px) {

    .site-footer {
        padding: 45px 0 20px;
    }

    .footer-container {
        gap: 35px;
        padding: 0 15px;
    }

    .footer-brand h2,
    .footer-navigation h3,
    .footer-contact h3 {
        font-size: 1.4rem;
    }

    .footer-navigation a,
    .footer-contact p {
        font-size: 1rem;
    }

    .footer-bottom {
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer-bottom p,
    .footer-bottom span,
    .footer-bottom a {
        font-size: 0.9rem;
        text-align: center;
        overflow-wrap: anywhere;
    }
}


/* =====================================================
   FOOTER
   VERY SMALL PHONES
===================================================== */

@media (max-width: 360px) {

    .footer-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .footer-brand h2 {
        font-size: 1.25rem;
    }

    .footer-navigation h3,
    .footer-contact h3 {
        font-size: 1.25rem;
    }

    .footer-navigation a,
    .footer-contact p {
        font-size: 0.92rem;
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 0.82rem;
    }
}