/* nemo-dev.css — NEMO Developer Hub (NEMO main style aligned) */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { margin: 0; height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/*
 * Compatibility token layer:
 * - Uses NEMO main naming where possible
 * - Keeps old local tokens so existing selectors remain intact
 */
:root {
    --primary-brand: #005f8f;
    --primary-brand-dark: #004d74;
    --primary: #0f79b2;
    --primary-hover: #0b689a;
    --primary-button-color: #ffffff;
    --secondary-hover: #0a5e89;

    --background: #ffffff;
    --foreground: #152737;
    --contrast-inverse: #ffffff;
    --secondary-gray: #5b6b79;
    --muted-color: #8a97a3;

    --background-gray10: #f5f7fa;
    --background-gray20: #edf1f5;
    --background-gray40: #d6dde5;
    --background-brand10: #eef6fc;
    --background-brand20: #e1f0fb;
    --background-brand-tint10: #f2f8fd;
    --background-brand-tint20: #e6f2fb;

    --feedback-success10: #e8f5e9;
    --feedback-attention: #fff3e0;
    --feedback-danger10: #ffebee;

    --effect-header: 0 2px 8px rgba(10, 35, 55, 0.08);
    --border-radius: 0.5rem;

    /* Legacy aliases kept for current page selectors */
    --brand-900: var(--primary-brand-dark);
    --brand-700: var(--primary-brand);
    --brand-600: var(--primary-hover);
    --brand-500: var(--primary);
    --teal-500: #168f8f;
    --bg: var(--background-gray10);
    --surface: var(--background);
    --text: var(--foreground);
    --muted: var(--secondary-gray);
    --line: var(--background-gray40);
    --ok: #2e7d32;
    --warn: #a45a00;
    --err: #c62828;
    --shadow: var(--effect-header);
    --radius-xl: 1rem;
    --radius-lg: var(--border-radius);
    --radius-md: calc(var(--border-radius) - 0.125rem);

    --svc-nemo-bg: #e7f3fb; --svc-nemo-fg: #005f8f;
    --svc-nsd-bg: #e8f7f4; --svc-nsd-fg: #0e7b73;
    --svc-ims-bg: #efe7fb; --svc-ims-fg: #6a42c2;
    --svc-mlt2-bg: #fff4e5; --svc-mlt2-fg: #a45a00;
    --svc-as4-bg: #ffebee; --svc-as4-fg: #c62828;
    --svc-ui-bg: #e8f5e9; --svc-ui-fg: #2e7d32;
    --svc-events-bg: #e3f2fd; --svc-events-fg: #1565c0;

    --code-bg: #f7fafc;
    --code-inline-bg: #f2f7fb;
    --code-border: var(--background-gray40);
}

/* --- Base layout --- */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--muted);
    background: var(--bg);
}
.container { width: min(1200px, 92%); margin: 0 auto; }

/* --- Interactive accessibility, aligned with NEMO main behavior --- */
a:focus-visible,
button:focus-visible,
select:focus-visible {
    outline: 3px solid var(--foreground);
    outline-offset: 2px;
}

/* --- Top notice --- */
.topbar { background: var(--primary-brand); color: var(--contrast-inverse); }
.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
}
.topbar a { color: var(--contrast-inverse); text-decoration: underline; text-underline-offset: 2px; }

/* --- Header --- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--background);
    border-bottom: 1px solid var(--background-gray40);
    box-shadow: var(--effect-header);
}
.nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
}
.logo { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; color: var(--text); }
.logo svg { width: 36px; height: 36px; }
.nav a.link {
    padding: 0.5rem 0.7rem;
    border-radius: var(--border-radius);
    color: var(--text);
    font-weight: 600;
}
.nav a.link:hover { background: var(--background-gray20); color: var(--primary-brand); }

#lang-switch {
    border: 1px solid var(--background-gray40);
    border-radius: var(--border-radius);
    padding: 0.35rem 0.5rem;
    background: var(--background);
    color: var(--foreground);
}

.nav .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-brand);
    border-radius: var(--border-radius);
    background: var(--primary-brand);
    color: var(--primary-button-color);
    font-weight: 700;
}
.nav .cta:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); }

/* --- Hero --- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--background-brand10), rgba(255, 255, 255, 0));
}
.hero .container {
    padding: 4rem 0 3rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
}
.hero h1 { color: var(--text); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 1rem; }
.hero p.lead { font-size: clamp(1.05rem, 2.1vw, 1.2rem); max-width: 60ch; }
.hero .badge {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    background: var(--background);
    color: var(--primary-brand);
    border: 1px solid var(--background-gray40);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
}
.hero .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    gap: 0.5rem;
    border: 1px solid var(--primary-brand);
    background: var(--contrast-inverse);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    color: var(--primary-brand);
}
.btn:hover { background: var(--background-brand-tint10); border-color: var(--secondary-hover); color: var(--secondary-hover); }
.btn.primary { background: var(--primary-brand); color: var(--primary-button-color); border-color: var(--primary-brand); }
.btn.primary:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); color: var(--primary-button-color); }

.wave { position: absolute; inset: auto 0 -1px 0; height: 110px; }

/* --- Hot Topics --- */
.hot-topics {
    padding-top: 2rem;
    --hot-topics-accent: #f1c27d;
    --hot-topics-intro-bg: #fff8eb;
    --hot-topics-card-bg: #fffcf5;
    --hot-topics-text: #6b3f00;
    --hot-topics-heading: #7a4a00;
}

.hot-topics-intro {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--hot-topics-accent);
    border-radius: var(--border-radius);
    background: var(--hot-topics-intro-bg);
    color: var(--hot-topics-text);
}

.hot-topic-card {
    border-color: var(--hot-topics-accent);
    background: var(--hot-topics-card-bg);
}

.hot-topic-card h3 {
    color: var(--hot-topics-heading);
}

/* --- Sections --- */
section { padding: 3rem 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.section-title h2 { color: var(--text); margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.section-title .sub { color: var(--muted); font-size: 0.98rem; }

/* --- Card grid --- */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
    background: var(--surface);
    border: 1px solid var(--background-gray40);
    border-radius: var(--border-radius);
    box-shadow: none;
    padding: 1rem;
    display: grid;
    gap: 0.6rem;
}
.card .eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-brand);
    font-weight: 800;
}
.card h3 { color: var(--text); margin: 0.1rem 0; font-size: 1.1rem; }
.card p { margin: 0; }
.card .links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--background-brand20);
    color: var(--foreground);
    font-weight: 700;
    font-size: 0.9rem;
}
.chip:hover { background: var(--background-brand-tint20); color: var(--primary-brand); }
.chip svg { width: 16px; height: 16px; }

/* --- Service labels --- */
.card .svc { display: flex; justify-content: flex-start; }
.label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    border: 1px solid var(--background-gray40);
}
.label-nemo { background: var(--svc-nemo-bg); color: var(--svc-nemo-fg); }
.label-nsd { background: var(--svc-nsd-bg); color: var(--svc-nsd-fg); }
.label-ims { background: var(--svc-ims-bg); color: var(--svc-ims-fg); }
.label-mlt2 { background: var(--svc-mlt2-bg); color: var(--svc-mlt2-fg); }
.label-as4 { background: var(--svc-as4-bg); color: var(--svc-as4-fg); }
.label-ui { background: var(--svc-ui-bg); color: var(--svc-ui-fg); }
.label-events { background: var(--svc-events-bg); color: var(--svc-events-fg); }

/* --- Environment table --- */
.envs {
    overflow: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--background-gray40);
    background: var(--surface);
}
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--background-gray40); }
th {
    color: var(--text);
    font-size: 0.95rem;
    border-top: 1px solid var(--background-gray40);
    border-bottom: 2px solid var(--background-gray40);
    background: var(--background-gray10);
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-weight: 800;
    font-size: 0.8rem;
}
.pill.ok { background: var(--feedback-success10); color: var(--ok); }
.pill.warn { background: var(--feedback-attention); color: var(--warn); }
.pill.err { background: var(--feedback-danger10); color: var(--err); }

/* --- Guides/Changelog list --- */
.list { display: grid; gap: 0.6rem; }
.list a {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 24px 1fr;
    align-items: start;
    padding: 0.7rem;
    border: 1px solid var(--background-gray40);
    border-radius: var(--border-radius);
    background: var(--surface);
}
.list a:hover { background: var(--background-gray10); }

/* --- Footer --- */
footer {
    background: var(--background-gray10);
    border-top: 1px solid var(--background-gray40);
}
footer .cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding-top: 2rem;
}
footer h4 { margin: 0 0 0.7rem; color: var(--text); }
footer a { color: var(--primary-brand); }
footer a:hover { color: var(--secondary-hover); }
.legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 2rem;
    font-size: 0.95rem;
    color: var(--muted);
}

/* --- Utilities --- */
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Code sections --- */
pre.code-section {
    position: relative;
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    overflow: auto;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--border-radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre.code-section code {
    background: transparent;
    border: 0;
    padding: 0;
}
pre.code-section[data-lang]::after {
    content: attr(data-lang);
    position: absolute;
    top: 0.45rem;
    right: 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-brand);
    background: var(--background);
    border: 1px solid var(--background-gray40);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
}
code:not(pre code) {
    background: var(--code-inline-bg);
    border: 1px solid var(--code-border);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre.code-section:hover { outline: 2px dashed rgba(0, 95, 143, 0.2); outline-offset: 2px; }
pre.mermaid {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.changelogList {
    list-style-type: none;
    padding-left: 0;
}
.changelogList li::before {
    content: "\2014\0020";
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .hero .container { grid-template-columns: 1fr; padding-top: 3rem; }
}

@media (max-width: 600px) {
    .changelog-flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}