/* ==========================================================================
   Extensia Creative Bali — Global Stylesheet
   Authoritative Reference: neubrutalism.com
   ========================================================================== */

/* ==========================================================================
   1. Neubrutalism Design Tokens
   ========================================================================== */
:root {
  --border: 3px solid #111118;
  --border-thin: 2px solid #111118;
  --border-thick: 4px solid #111118;
  --shadow-sm: 3px 3px 0 0 #111118;
  --shadow: 5px 5px 0 0 #111118;
  --shadow-lg: 7px 7px 0 0 #111118;
  --shadow-xl: 10px 10px 0 0 #111118;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --bg-canvas: #ffffff;
  --bg-cream: #fff9d5;
  --bg-ivory: #fffdf5;
  --bg-white: #fffdf0;
  --lime: #d4ff00;
  --blue: #2563eb;
  --blue-tech: #3b82f6;
  --emerald: #10b981;
  --emerald-deep: #059669;
  --amber: #d97706;
  --orange: #ff9d50;
  --dark: #111118;
}

/* ==========================================================================
   2. Native CSS Layer Base Reset
   ========================================================================== */
@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #111118;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Clash Display', sans-serif;
    letter-spacing: -0.01em;
  }

}

/* One anchor offset, shared by native links and scripted navigation. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-scroll-offset, 96px);
}

/* Existing section utilities must not add a second 96px offset. */
[id].scroll-mt-24 {
  scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   3. Canonical Button Physics & Card Classes (neubrutalism.com)
   ========================================================================== */

/* Buttons: Stamped, lifted on hover, pressed flat on active */
.nb-btn {
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-md);
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.nb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

.nb-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}

/* Cards: Flat fill + hard offset shadow */
.nb-card {
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-md);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.nb-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   4. Form Controls (neubrutalism.com)
   ========================================================================== */
.nb-input {
  border: var(--border-thin);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nb-input:focus {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  box-shadow: var(--shadow);
  transform: translate(-1px, -1px);
}

/* ==========================================================================
   5. Accessible Focus Visible Ring (WCAG 2.4.7 compliant)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #d4ff00 !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   6. Scrollbar Utilities
   ========================================================================== */

/* Hide scrollbar for Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
html,
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}

/* Flat High-Contrast Selection Highlight */
::selection {
  background-color: #d4ff00;
  color: #111118;
}

/* ==========================================================================
   7. Complete Language Translation Rules (ID / EN)
   ========================================================================== */
html[lang="id"] .lang-en {
  display: none !important;
}
html[lang="id"] .lang-id {
  display: inline;
}
html[lang="id"] p.lang-id,
html[lang="id"] div.lang-id,
html[lang="id"] span.lang-id.block,
html[lang="id"] h1.lang-id,
html[lang="id"] h2.lang-id,
html[lang="id"] h3.lang-id,
html[lang="id"] h4.lang-id {
  display: block;
}
html[lang="id"] span.lang-id.flex {
  display: flex;
}
html[lang="id"] span.lang-id.grid {
  display: grid;
}

html[lang="en"] .lang-id {
  display: none !important;
}
html[lang="en"] .lang-en {
  display: inline;
}
html[lang="en"] p.lang-en,
html[lang="en"] div.lang-en,
html[lang="en"] span.lang-en.block,
html[lang="en"] h1.lang-en,
html[lang="en"] h2.lang-en,
html[lang="en"] h3.lang-en,
html[lang="en"] h4.lang-en {
  display: block;
}
html[lang="en"] span.lang-en.flex {
  display: flex;
}
html[lang="en"] span.lang-en.grid {
  display: grid;
}