:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --fg: #1a1a1a;
    --accent: #0b5fff;
    /* #767676, not the more common #c7c7c7 — WCAG 1.4.11 Non-text Contrast
       needs 3:1 for UI component boundaries (input/textarea/select borders
       count), and #c7c7c7 on white is only ~1.7:1. */
    --border: #767676;
    --error: #b30000;
    --success: #0a6e2c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --fg: #f2f2f2;
        /* Same reasoning as light mode's --border, see above. */
        --border: #6b6f78;
        --accent: #6ea8ff;
        --error: #ff8a8a;
        --success: #7fe0a0;
    }
}

* {
    box-sizing: border-box;
}

/* The native `hidden` attribute's UA-stylesheet `display: none` loses to
   any later, more specific author rule that sets its own `display` (e.g.
   `button, .button { display: inline-block }` below) — confirmed live: the
   featured-image "eltávolítás" button stayed visible despite `hidden`
   being genuinely present in the DOM. This restores the attribute's actual
   effect everywhere in the app, not just for that one button, since the
   same clash can happen with any element that both sets its own display
   and is toggled via `hidden` (checkboxes' conditional-fields.js does the
   same toggle pattern elsewhere). */
[hidden] {
    display: none !important;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    line-height: 1.5;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    /* var(--bg), not #fff — see the comment on .admin-nav
       a[aria-current="page"] in admin.css for why a hardcoded white fails
       WCAG contrast against dark mode's (lighter) --accent. */
    color: var(--bg);
    padding: 0.75rem 1rem;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

.site-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.site-main {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

h1, h2 {
    line-height: 1.25;
}

a {
    color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.field {
    margin-bottom: 1.25rem;
}

/* Visual-only: usernames are stored and matched exactly as typed at
   registration (lowercase, mixed case, whatever the user chose) — this
   never touches that value, it just capitalizes the first letter wherever
   a username is shown as a label, so "dani" reads as "Dani" without
   affecting login, URLs, or the raw value shown in an editable form field
   (deliberately NOT applied to the admin username input itself). */
.username-display {
    text-transform: capitalize;
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field input,
.field select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
}

.hint,
.field .hint {
    font-size: 0.875rem;
    opacity: 0.8;
}

.field .error {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.field-checkbox label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-checkbox input {
    width: auto;
}

.form-links {
    margin-top: 0.5rem;
}

/* Replaces a handful of inline style="" attributes that used to sit in
   templates — moved here so the CMS can ship a strict style-src CSP
   without an 'unsafe-inline' exception. */
.inline-form {
    display: inline;
}

.textarea-short {
    min-height: 100px;
}

/* A <button> that reads as a nav link — used for logout, which must be a
   POST form (CSRF) rather than an <a>, but shouldn't look like a form. */
.link-button {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.link-button:hover {
    text-decoration: underline;
}

.account-summary {
    margin-bottom: 2rem;
}

.account-summary dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.account-summary dd {
    margin-left: 0;
}

.button-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Password generator + strength meter (public/assets/js/password-strength.js).
   The bar's fill color is decorative only — the label text next to it always
   states the strength level in words, so nothing here is color-only signal. */
.password-strength-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.password-strength-tools .button-secondary {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.password-strength-bar {
    margin-top: 0.5rem;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.password-strength-bar-fill {
    height: 100%;
    width: 0;
    background: transparent;
    transition: width 0.2s ease;
}

.password-strength-label {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
}

h3 {
    margin-top: 2.5rem;
}

button, .button {
    display: inline-block;
    background: var(--accent);
    /* var(--bg), not #fff — see the comment on .admin-nav
       a[aria-current="page"] in admin.css for why a hardcoded white fails
       WCAG contrast against dark mode's (lighter) --accent. */
    color: var(--bg);
    border: none;
    padding: 0.7rem 1.25rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

.checklist {
    list-style: none;
    padding: 0;
}

.checklist li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.status-ok { color: var(--success); font-weight: 600; }
.status-fail { color: var(--error); font-weight: 600; }

.flash {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.flash-success { background: rgba(10, 110, 44, 0.15); }
.flash-error { background: rgba(179, 0, 0, 0.15); }

.radio-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.radio-card input {
    margin-right: 0.5rem;
}