/* ═══════════════════════════════════════════════════
   NUHA PRO THEME v2 – Base Styles
   Reset, typography, utilities (light mode)
   ═══════════════════════════════════════════════════ */

/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--nuha-font-body);
    font-size: var(--nuha-text-base);
    line-height: var(--nuha-leading-normal);
    color: var(--nuha-text-main);
    background-color: var(--nuha-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color var(--nuha-duration) var(--nuha-ease),
                background-color var(--nuha-duration) var(--nuha-ease);
}

::selection {
    background-color: var(--nuha-primary);
    color: #fff;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

ul, ol { list-style: none; }

input, textarea, select {
    font: inherit;
    color: inherit;
}

/* ─── Typography ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nuha-font-display);
    font-weight: 800;
    color: var(--nuha-navy);
    line-height: var(--nuha-leading-tight);
    letter-spacing: -0.015em;
}

h1 { font-size: var(--nuha-text-5xl); }
h2 { font-size: var(--nuha-text-3xl); }
h3 { font-size: var(--nuha-text-xl); }
h4 { font-size: var(--nuha-text-lg); }

@media (min-width: 768px) {
    h1 { font-size: var(--nuha-text-7xl); }
    h2 { font-size: var(--nuha-text-4xl); }
}

p {
    color: var(--nuha-text-body);
    line-height: var(--nuha-leading-relaxed);
}

code, pre {
    font-family: var(--nuha-font-mono);
    font-size: 0.9em;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* ─── Container ──────────────────────────────────── */
.nuha-container {
    width: 100%;
    max-width: var(--nuha-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nuha-sp-6);
    padding-right: var(--nuha-sp-6);
}

/* ─── Section ────────────────────────────────────── */
.nuha-section {
    padding-top: var(--nuha-sp-24);
    padding-bottom: var(--nuha-sp-24);
}
.nuha-section-sm {
    padding-top: var(--nuha-sp-12);
    padding-bottom: var(--nuha-sp-12);
}

/* ─── Section Header ─────────────────────────────── */
.nuha-section-header {
    text-align: center;
    margin-bottom: var(--nuha-sp-16);
}
.nuha-section-header h2 {
    margin-bottom: var(--nuha-sp-4);
}
.nuha-section-header p {
    color: var(--nuha-text-muted);
    max-width: 640px;
    margin: 0 auto;
}

/* ─── Eyebrow Badge ──────────────────────────────── */
.nuha-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nuha-sp-2);
    padding: 4px 12px;
    border-radius: var(--nuha-radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--nuha-sp-4);
}
.nuha-eyebrow--primary {
    background: var(--nuha-sky-50);
    border: 1px solid var(--nuha-sky-100);
    color: var(--nuha-primary);
}
.nuha-eyebrow--neutral {
    background: var(--nuha-bg-slate);
    border: 1px solid var(--nuha-border);
    color: var(--nuha-text-muted);
}

/* ─── Utility: Flex / Grid ───────────────────────── */
.nuha-flex        { display: flex; }
.nuha-flex-col    { display: flex; flex-direction: column; }
.nuha-flex-center { display: flex; align-items: center; justify-content: center; }
.nuha-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nuha-items-center { align-items: center; }
.nuha-items-start  { align-items: flex-start; }
.nuha-justify-center { justify-content: center; }
.nuha-flex-wrap    { flex-wrap: wrap; }
.nuha-flex-grow    { flex-grow: 1; }
.nuha-gap-1  { gap: var(--nuha-sp-1); }
.nuha-gap-2  { gap: var(--nuha-sp-2); }
.nuha-gap-3  { gap: var(--nuha-sp-3); }
.nuha-gap-4  { gap: var(--nuha-sp-4); }
.nuha-gap-6  { gap: var(--nuha-sp-6); }
.nuha-gap-8  { gap: var(--nuha-sp-8); }

.nuha-grid       { display: grid; }
.nuha-grid-2     { grid-template-columns: repeat(2, 1fr); }
.nuha-grid-3     { grid-template-columns: repeat(3, 1fr); }
.nuha-grid-4     { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .nuha-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .nuha-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .nuha-grid-2, .nuha-grid-3, .nuha-grid-4 { grid-template-columns: 1fr; }
}

/* ─── Utility: Spacing ───────────────────────────── */
.nuha-mb-2  { margin-bottom: var(--nuha-sp-2); }
.nuha-mb-3  { margin-bottom: var(--nuha-sp-3); }
.nuha-mb-4  { margin-bottom: var(--nuha-sp-4); }
.nuha-mb-6  { margin-bottom: var(--nuha-sp-6); }
.nuha-mb-8  { margin-bottom: var(--nuha-sp-8); }
.nuha-mb-10 { margin-bottom: var(--nuha-sp-10); }
.nuha-mt-auto { margin-top: auto; }
.nuha-mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Utility: Text ──────────────────────────────── */
.nuha-text-center  { text-align: center; }
.nuha-text-right   { text-align: right; }
.nuha-text-sm      { font-size: var(--nuha-text-sm); }
.nuha-text-xs      { font-size: var(--nuha-text-xs); }
.nuha-text-lg      { font-size: var(--nuha-text-lg); }
.nuha-font-bold    { font-weight: 700; }
.nuha-font-extrabold { font-weight: 800; }
.nuha-font-medium  { font-weight: 500; }
.nuha-text-primary { color: var(--nuha-primary); }
.nuha-text-navy    { color: var(--nuha-navy); }
.nuha-text-muted   { color: var(--nuha-text-muted); }
.nuha-text-white   { color: #fff; }
.nuha-tracking-tight { letter-spacing: -0.015em; }
.nuha-uppercase    { text-transform: uppercase; }
.nuha-tracking-wide { letter-spacing: 0.1em; }
.nuha-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Utility: Visual ────────────────────────────── */
.nuha-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.nuha-relative { position: relative; }
.nuha-sticky   { position: sticky; }
.nuha-overflow-hidden { overflow: hidden; }
.nuha-pointer-events-none { pointer-events: none; }
.nuha-w-full { width: 100%; }

/* ─── Utility: Responsive Hide ──────────────────── */
.nuha-hide-mobile {
    display: inline;
}
@media (max-width: 640px) {
    .nuha-hide-mobile { display: none; }
}