/* ============================================
   UTILITIES CSS (Pengganti @primer/css CDN)
   ============================================
   Class-class esensial yang dipakai di tema
   ini untuk menggantikan Primer.style.
   Size: ~2KB vs Primer CSS ~200KB
   ============================================ */

/* Container */
.container,
.container-lg,
.container-xl {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.container-sm {
    max-width: 960px;
}

/* Flex display */
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

/* Gap utilities */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }

/* Header link (dipakai fallback menu) */
.Header-link {
    display: block;
    padding: 8px 16px;
    color: var(--color-ink-2, #4a5a6a);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 2px;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.Header-link:hover {
    color: var(--color-ink, #0f3057);
    background: var(--color-paper-2, #f1ebdc);
}

/* Margin utilities */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 32px; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-3 { padding: 16px; }
.p-4 { padding: 24px; }

/* Text utilities */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-bold { font-weight: 700; }
.text-sm   { font-size: 0.875rem; }
.text-lg   { font-size: 1.125rem; }

/* Display */
.d-none  { display: none; }
.d-block { display: block; }
.w-100   { width: 100%; }

/* Screen reader & skip link */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 99999;
    background: var(--color-primary, #0f3057);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}