/* ============================================================
   RESPONSIVE GLOBAL HELPERS — JDIH HALMAHERA BARAT
   Aturan dasar agar website pas di SEMUA perangkat:
   Desktop · Tablet · HP (portrait/landscape)
   ============================================================ */

/* ===== UNIVERSAL BOX-SIZING ===== */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* ===== ROOT — SCROLL & TYPOGRAPHY SMOOTH ===== */
html{
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    /* Hindari double scroll */
    overflow-x: hidden;
}

body{
    /* Cegah horizontal scroll di SEMUA perangkat */
    overflow-x: hidden;
    /* Min-width agar layout tidak collapse di HP super kecil (mis. 320px) */
    min-width: 320px;
    /* Smooth font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== MEDIA — img, video, iframe responsif ===== */
img,
video,
canvas,
svg,
picture{
    max-width: 100%;
    height: auto;
}

img{
    display: block; /* hilangkan inline gap */
}

iframe,
embed,
object{
    max-width: 100%;
}

/* ===== TABLE — scroll horizontal di HP ===== */
.table-responsive,
table{
    max-width: 100%;
}

@media (max-width: 768px){
    table{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Khusus table dengan class responsive-card → tampil sebagai card */
    table.responsive-card,
    table.responsive-card thead,
    table.responsive-card tbody,
    table.responsive-card tr,
    table.responsive-card td{
        display: block;
        white-space: normal;
        width: 100%;
    }
}

/* ===== TOUCH TARGETS — minimal 44×44px (WCAG 2.5.5) ===== */
@media (max-width: 768px){
    a, button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn{
        min-height: 44px;
        min-width: 44px;
        /* Touch action smooth */
        touch-action: manipulation;
    }
    /* Exception untuk link di dalam paragraf (tidak perlu 44px) */
    p a, li a, .ac-item, .nav-link a {
        min-height: auto;
        min-width: auto;
    }
}

/* ===== INPUT — hindari zoom iOS Safari ketika tap input ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select{
    font-size: 16px;
}
@media (min-width: 769px){
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select{
        font-size: inherit;
    }
}

/* ===== CONTAINER — responsive padding ===== */
.container,
.container-fluid{
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
}

/* ===== SAFE AREA — untuk iPhone notch ===== */
@supports (padding: max(0px)){
    body{
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ===== FOCUS — keyboard accessibility ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* ===== UTILITY — text wrap aman di mobile ===== */
@media (max-width: 480px){
    h1, h2, h3, h4{
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ===== PRINT — tampilan saat di-print ===== */
@media print{
    .navbar,
    .footer,
    .jdih-wa-button,
    #accessibility-widget,
    .stat-hero-banner,
    .partner-jdih{
        display: none !important;
    }
    body{ background: #fff !important; color: #000 !important; }
}

/* ===== REDUCED MOTION — hormati setting user ===== */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== DARK MODE OS PREFERENCE — placeholder (tidak override warna site) ===== */
/* Site tetap pakai warna sendiri, tapi hormati prefers-color-scheme */

/* ============================================================
   BREAKPOINT STANDAR — referensi tim developer
   < 480px  : HP Portrait
   < 768px  : HP Landscape / Tablet Portrait
   < 1024px : Tablet Landscape
   < 1280px : Laptop Kecil
   < 1536px : Desktop
   >= 1536px: Desktop Besar
   ============================================================ */