/* =========================================================
   base.css — Fonts, reset, base elemen, aksesibilitas,
   layout primitives, dan tipografi global.
========================================================= */

/* --- 00. Self-hosted Fonts (path relatif terhadap folder /assets/css/) --- */
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('../fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-300i.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }


/* Noto Sans Thai (skrip Thai) — dipakai saat preset font 'thai' / locale th-TH */
@font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/notosansthai-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/notosansthai-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/notosansthai-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/notosansthai-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../fonts/notosansthai-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --- 01. Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  /* Background rata (flat) — tanpa glow yang terkonsentrasi di atas, supaya
     hero dan seluruh section memakai warna latar yang sama (tidak ada seam). */
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100dvh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

p, li, dd { color: var(--muted); font-weight: 400; }
li::marker { color: var(--primary); }

/* --- 02. Accessibility --- */
.skip-link {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link:focus-visible {
  position: fixed !important; top: 14px !important; left: 14px !important; z-index: 9999 !important;
  width: auto !important; height: auto !important; padding: 12px 20px !important; margin: 0 !important;
  overflow: visible !important; clip: auto !important; border-radius: 12px !important;
  background: var(--primary) !important; color: var(--on-primary) !important;
  font-weight: 700 !important; font-family: var(--font-display) !important;
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}

/* --- 03. Layout primitives --- */
.layout-container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.layout-container--narrow { width: min(860px, calc(100% - 40px)); }

.section-block { padding: 56px 0; }
/* label di atas, h2 di bawah (menumpuk) — seragam dengan section lain */
.section-heading { margin-bottom: 28px; }
.flow > * + * { margin-top: 1.1rem; }

/* --- 04. Typography --- */
h1, h2, h3 {
  font-family: var(--font-display); color: var(--text);
  line-height: 1.15; letter-spacing: -0.03em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem);  font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; }

.section-heading h2, .section-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.035em;
}

.label-text {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  color: var(--primary); font-family: var(--font-display); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.label-text::before {
  content: ''; display: inline-block; width: 18px; height: 2px;
  background: var(--primary); border-radius: 2px;
}

.text-lead {
  max-width: 680px; color: var(--muted); font-size: 1.05rem;
  font-weight: 400; line-height: 1.7;
}

/* --- 05. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}