/* =========================================================
   RESPONSIVE OVERRIDES - SARANA SATWA LANDING PAGE
   File ini HANYA berisi override tampilan untuk layar kecil
   (mobile / tablet). Tidak mengubah struktur / urutan konten,
   hanya menyesuaikan layout, ukuran, dan spacing.
   ========================================================= */

/* Beri jarak scroll agar section tidak tertutup navbar fixed saat
   diklik dari menu (anchor link) */
section[id] {
    scroll-margin-top: 170px;
}

/* -------------------- HAMBURGER BUTTON -------------------- */
#mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 60;
}

#mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px 0;
    background-color: #ffffff;
    border-radius: 2px;
    transition: 0.3s;
}

#mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
#mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===================== TABLET & MOBILE (<=1024px) ===================== */
@media (max-width: 1024px) {

    /* ---- Top contact bar ---- */
    #top-bar .container > div.flex.flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px !important;
    }

    #top-bar .flex.flex-row.items-center.gap-10.text-sm {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px !important;
        font-size: 12px;
    }

    #top-bar .md\:flex {
        width: 100%;
    }

    #top-bar .flex.gap-10 {
        gap: 12px !important;
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* ---- Navbar ---- */
    #nav-bar .flex.items-center.justify-between.mx-auto {
        flex-wrap: wrap;
        position: relative;
    }

    #nav-bar img {
        height: 48px !important;
    }

    #mobile-menu-toggle {
        display: block;
        order: 2;
    }

    /* Menu list becomes a dropdown panel */
    #nav-bar ul {
        display: none;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
        background-color: #4d7c0f;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px !important;
        gap: 16px !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        order: 3;
    }

    #nav-bar ul.mobile-nav-open {
        display: flex;
    }

    /* "LIHAT LAYANAN" button moves next to the hamburger row */
    #nav-bar .nav-cta-wrap {
        order: 1;
        margin-left: auto;
        margin-right: 10px;
    }

    #nav-bar button {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }

    /* ---- Hero section ---- */
    section.min-w-screen.min-h-screen .absolute.z-10.w-full {
        top: 140px !important;
    }

    section.min-w-screen.min-h-screen .flex.flex-col[style*="max-width: 700px"] {
        max-width: 100% !important;
        gap: 16px !important;
    }

    section.min-w-screen.min-h-screen h1 span.text-2xl {
        font-size: 1.1rem !important;
    }

    section.min-w-screen.min-h-screen h1 span.text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    section.min-w-screen.min-h-screen .flex.text-white.items-center.gap-10 {
        flex-wrap: wrap;
        gap: 16px !important;
    }

    /* ---- Big section paddings ---- */
    main section.pt-\[150px\] {
        padding-top: 90px !important;
    }
    main section.pb-\[250px\] {
        padding-bottom: 140px !important;
    }
    main section.py-\[150px\] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    main section.py-\[100px\] {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Highlight cards title overlap fix */
    main section.pb-\[100px\].bg-lime-800 .relative.-top-\[150px\] {
        top: -70px !important;
    }
    main section.pb-\[100px\].bg-lime-800 .flex.items-center.justify-center.-mt-20 {
        margin-top: -40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---- Footer ---- */
    footer.pt-\[100px\].pb-64 {
        padding-bottom: 260px !important;
    }

    footer .grid.mt-\[150px\] {
        margin-top: 60px !important;
    }

    footer .mt-20.text-white {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    footer .doggo img {
        width: 90px !important;
    }
}

/* ===================== SMALL MOBILE (<=640px) ===================== */
@media (max-width: 640px) {

    #top-bar {
        padding: 16px !important;
    }

    #nav-bar {
        padding: 16px !important;
    }

    section.min-w-screen.min-h-screen .absolute.z-10.w-full {
        top: 110px !important;
    }

    section.min-w-screen.min-h-screen .flex.flex-col[style*="max-width: 700px"] {
        gap: 16px !important;
    }

    section.min-w-screen.min-h-screen h1 span.text-6xl {
        font-size: 1.5rem !important;
    }

    section.min-w-screen.min-h-screen span.text-xl {
        font-size: 0.9rem !important;
    }

    section.min-w-screen.min-h-screen a.py-4.px-8 {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }

    main h1.text-4xl {
        font-size: 1.6rem !important;
    }

    main .grid.grid-cols-1.xl\:grid-cols-2 > div,
    main .grid.grid-cols-1.md\:grid-cols-2 > div {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    footer.pt-\[100px\].pb-64 {
        padding-bottom: 300px !important;
    }

    footer .flex.items-center.flex-wrap.gap-6 {
        flex-direction: column;
        text-align: center;
    }
}