/* ================================================================
   BASE.CSS — Minimal base styles replacing Pico CSS
   ================================================================ */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

/* === Variables === */
:root {
    --color-text: #1a1a1a;
    --color-muted: #71717a;
    --color-primary: #1a6dcc;
    --color-primary-hover: #155baa;
    --color-bg: #fff;
    --color-border: #e2e5ea;
    --border-radius: 6px;
    --container-max: 1200px;
}

/* === Container === */
.container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }

/* === Typography === */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
}
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; }
h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
h5 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
h6 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; }
small { font-size: 0.875em; }
.secondary { color: var(--color-muted); }

/* === Links === */
a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: var(--color-primary-hover); }

/* === Forms === */
input, select, textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 109, 204, 0.15);
}
input[type="checkbox"], input[type="radio"] {
    display: inline-block;
    width: auto;
}
input[type="file"] { padding: 0.4rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 500; }

button, [type="submit"], [type="button"] {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
button:hover, [type="submit"]:hover, [type="button"]:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
button.outline, [type="submit"].outline {
    background: transparent;
    color: var(--color-primary);
}
button.outline:hover, [type="submit"].outline:hover {
    background: var(--color-primary);
    color: #fff;
}
button.secondary, [type="submit"].secondary {
    background: var(--color-muted);
    border-color: var(--color-muted);
}
button.secondary:hover, [type="submit"].secondary:hover {
    background: #5a5a66;
    border-color: #5a5a66;
}
button.outline.secondary {
    background: transparent;
    color: var(--color-muted);
    border-color: var(--color-border);
}
button.outline.secondary:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* === Toggle switch (role="switch") === */
/* input[role="switch"] specificity (0,1,1) matches input[type="checkbox"] */
input[role="switch"] {
    appearance: none;
    display: inline-block;
    width: 2.5rem;
    height: 1.4rem;
    background: #ccc;
    border: none;
    border-radius: 0.7rem;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
input[role="switch"]::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    top: 0.2rem;
    left: 0.2rem;
    transition: transform 0.2s;
}
input[role="switch"]:checked { background: var(--color-primary); }
input[role="switch"]:checked::before { transform: translateX(1.1rem); }
input[role="switch"]:focus { box-shadow: 0 0 0 3px rgba(26, 109, 204, 0.15); }

/* === Button links (role="button") === */
[role="button"] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    transition: background 0.15s, border-color 0.15s;
}
[role="button"]:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
[role="button"].outline {
    background: transparent;
    color: var(--color-primary);
}
[role="button"].outline:hover {
    background: var(--color-primary);
    color: #fff;
}
[role="button"].secondary {
    background: var(--color-muted);
    border-color: var(--color-muted);
}
[role="button"].secondary:hover {
    background: #5a5a66;
    border-color: #5a5a66;
}
[role="button"].secondary.outline {
    background: transparent;
    color: var(--color-muted);
    border-color: var(--color-border);
}
[role="button"].secondary.outline:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* === Tables === */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border); }
th { font-weight: 600; }
figure { margin: 0; overflow-x: auto; }

/* === Article (card) === */
article {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
article > header {
    margin: -1.25rem -1.25rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
article > footer {
    margin: 1rem -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

/* === Inline badges === */
ins { text-decoration: none; background: #e6f5ed; color: #0d6e3f; padding: 2px 6px; border-radius: 3px; }
del { text-decoration: none; background: #fde8e8; color: #b91c1c; padding: 2px 6px; border-radius: 3px; }
mark { background: #fef6e6; color: #92400e; padding: 2px 6px; border-radius: 3px; }
kbd {
    background: #f0f2f5;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: var(--sku-font, ui-monospace, monospace);
    font-size: 0.85em;
}

/* === Details / Summary === */
details { border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 0.75rem 1rem; }
summary { cursor: pointer; font-weight: 600; }

/* === Heading group === */
hgroup { margin-bottom: 1.5rem; }
hgroup > p { color: var(--color-muted); margin-top: 0.25rem; }

/* === Nav (top-level site nav only) === */
body > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}
body > nav > ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    align-items: center;
}
body > nav a { text-decoration: none; color: var(--color-text); }
body > nav a:hover { color: var(--color-primary); }
body > nav a.nav-active { color: var(--color-primary); font-weight: 600; }
.nav-subtitle { font-weight: 400; color: var(--color-muted); font-size: 0.85em; }
.nav-phone a { font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-phone-icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-divider { width: 1px; height: 1.2em; background: var(--color-border); }
@media (max-width: 768px) {
    body > nav {
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }
    body > nav > ul { gap: 0.5rem; flex-wrap: wrap; }
    .nav-phone { display: none; }
    .nav-divider { display: none; }
}

/* === Breadcrumb === */
[aria-label="breadcrumb"] ul li { display: inline; }
[aria-label="breadcrumb"] ul li:not(:first-child)::before {
    content: "›";
    color: #bbb;
    margin: 0 0.35rem;
    font-size: 1.1em;
}

/* === Search form === */
[role="search"] { display: flex; gap: 0.5rem; }
[role="search"] input:not([type="submit"]):not([type="button"]) { flex: 1; }

/* === Horizontal rule === */
hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }

/* === Definition list === */
dt { font-weight: 600; }
dd { margin-bottom: 0.5rem; }