/* Komentar genz-jaksel: stylesheet ini fokus ngurus tuning responsive layout biar UI tetap nyaman di hp sampe desktop. */

/* Tujuannya biar tweak visual gampang dilacak pas tim lagi iterasi UI. */

/* Global mobile responsiveness helpers (ICT MANZA) */

html {
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

/* Breakpoint (min-width: 768px) and (max-width: 1023.98px): adjust spacing/ukuran biar layout tetep pewe. */
@media (width >= 768px) and (width <= 1023.98px) {
    #header {
        height: 3.75rem;
    }

    #header h2 {
        font-size: 0.98rem !important;
        letter-spacing: 0.15em !important;
    }

    #main-content {
        padding-right: 1rem !important;
        padding-top: 2rem !important;
    }

    #nav-bar {
        box-shadow: 0 0 26px rgb(0 0 0 / 42%);
    }

    #nav-bar .nav-label {
        font-size: 0.98rem !important;
    }

    .swal2-popup {
        width: min(84vw, 34rem) !important;
    }
}

/* Breakpoint (min-width: 1024px) and (max-width: 1279.98px): adjust spacing/ukuran biar layout tetep pewe. */
@media (width >= 1024px) and (width <= 1279.98px) {
    #main-content {
        padding-right: 1.2rem !important;
    }

    #header h2 {
        letter-spacing: 0.16em !important;
    }
}

/* Breakpoint (max-width: 767.98px): adjust spacing/ukuran biar layout tetep pewe. */
@media (width <= 767.98px) {
    body {
        font-size: 15px;
        line-height: 1.45;
    }

    #header {
        height: 3.5rem;
    }

    #header h2 {
        font-size: 0.95rem !important;
        letter-spacing: 0.14em !important;
    }

    #header #header-toggle {
        font-size: 1.45rem;
    }

    #main-content {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
        padding-top: 1.25rem !important;
    }

    #main-content h1,
    #main-content .mobile-page-title {
        font-size: clamp(1.45rem, 6vw, 1.95rem) !important;
        line-height: 1.25;
    }

    #main-content h2,
    #main-content .heading {
        font-size: clamp(1.2rem, 5.2vw, 1.6rem) !important;
        line-height: 1.3;
    }

    #main-content p,
    #main-content li,
    #main-content label {
        overflow-wrap: anywhere;
    }

    #nav-bar {
        width: min(88vw, 19rem) !important;
    }

    #nav-bar nav {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #nav-bar .nav__link {
        border-radius: 0.8rem;
    }

    #nav-bar .nav-label {
        font-size: 1.02rem !important;
    }

    input:not([type="checkbox"], [type="radio"]),
    select,
    textarea,
    button {
        font-size: 16px;
    }

    .overflow-x-auto,
    .scroll-area {
        -webkit-overflow-scrolling: touch;
    }

    .swal2-popup {
        width: min(92vw, 32rem) !important;
    }

    main {
        width: 100%;
    }
}

/* Breakpoint (max-width: 430px): adjust spacing/ukuran biar layout tetep pewe. */
@media (width <= 430px) {
    #header h2 {
        font-size: 0.88rem !important;
        letter-spacing: 0.11em !important;
    }

    #main-content {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

/* Breakpoint (max-width: 360px): adjust spacing/ukuran biar layout tetep pewe. */
@media (width <= 360px) {
    #header h2 {
        font-size: 0.83rem !important;
        letter-spacing: 0.1em !important;
    }

    #main-content {
        padding-left: 0.68rem !important;
        padding-right: 0.68rem !important;
    }

    #nav-bar {
        width: min(91vw, 17.2rem) !important;
    }

    #nav-bar .nav-label {
        font-size: 0.96rem !important;
    }
}