/*
 * SchoolMe UI system
 * Shared visual primitives for every page. Page-specific layout stays in modern.css.
 * Source of truth: DESIGN.md and the established /search interface.
 */

:root {
    --sm-color-ink: #15253d;
    --sm-color-muted: #536175;
    --sm-color-primary: #1557d6;
    --sm-color-primary-active: #0c3e9d;
    --sm-color-primary-soft: #e9f0ff;
    --sm-color-surface: #fff;
    --sm-color-canvas: #f6f8fb;
    --sm-color-border: #dbe2ec;
    --sm-color-border-control: #aebac9;
    --sm-color-focus: #ffd64a;
    --sm-color-error: #b42318;
    --sm-color-success: #177245;
    --sm-radius-chip: 9px;
    --sm-radius-control: 10px;
    --sm-radius-card: 14px;
    --sm-shadow-raised: 0 18px 45px rgba(32, 55, 88, .12);
    --sm-font-ui: Manrope, Arial, sans-serif;
    --sm-control-height: 44px;

    /* Compatibility aliases used by the current pages. */
    --ink: var(--sm-color-ink);
    --ink-soft: var(--sm-color-muted);
    --blue: var(--sm-color-primary);
    --blue-dark: var(--sm-color-primary-active);
    --sky: var(--sm-color-primary-soft);
    --paper: var(--sm-color-canvas);
    --white: var(--sm-color-surface);
    --line: var(--sm-color-border);
    --yellow: var(--sm-color-focus);
    --error: var(--sm-color-error);
    --radius: var(--sm-radius-card);
    --shadow: var(--sm-shadow-raised);
}

body.site-body {
    accent-color: var(--sm-color-primary);
    color: var(--sm-color-ink);
    font-family: var(--sm-font-ui);
}

body.site-body ::selection {
    background: var(--sm-color-focus);
    color: var(--sm-color-ink);
}

body.site-body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--sm-color-focus);
    outline-offset: 3px;
}

/* Prevent the browser's black tap flash on links and custom controls. */
body.site-body :where(a, button, summary, label[for]) {
    -webkit-tap-highlight-color: transparent;
}

body.site-body a:not([class]),
body.site-body .ui-link {
    color: var(--sm-color-primary);
    font-weight: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Homepage action links stay readable without looking like bold buttons. */
body.site-body.homepage .quick-links a,
body.site-body.homepage .map-alternative a,
body.site-body.homepage .newsbox .more,
body.site-body.homepage .allnews a,
body.site-body.homepage .rev_meta a {
    font-weight: 600;
}

body.site-body.homepage .quick-links a:active,
body.site-body.homepage .map-alternative a:active,
body.site-body.homepage .newsbox .more:active,
body.site-body.homepage .allnews a:active,
body.site-body.homepage .rev_meta a:active {
    color: var(--sm-color-primary);
    box-shadow: none;
}

body.site-body.homepage .route-card--primary a:active {
    color: var(--sm-color-focus);
}

body.site-body a:not([class]):hover,
body.site-body .ui-link:hover {
    color: var(--sm-color-primary-active);
    text-decoration-color: currentColor;
}

body.site-body a:not([class]):active,
body.site-body .ui-link:active {
    color: var(--sm-color-primary);
    text-decoration-color: currentColor;
}

body.site-body :where(.button, .btn, button.ui-button, input[type="submit"].ui-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sm-control-height);
    height: auto;
    padding: 9px 16px;
    border: 1px solid var(--sm-color-primary);
    border-radius: var(--sm-radius-control);
    background: var(--sm-color-primary);
    box-shadow: none;
    color: #fff;
    font: 800 13px/1.35 var(--sm-font-ui);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.site-body :where(.button, .btn, button.ui-button, input[type="submit"].ui-button):hover {
    border-color: var(--sm-color-primary-active);
    background: var(--sm-color-primary-active);
    color: #fff;
    text-decoration: none;
}

body.site-body :where(.button, .btn, button.ui-button, input[type="submit"].ui-button):active {
    border-color: var(--sm-color-primary-active);
    background: var(--sm-color-primary-active);
    box-shadow: none;
    color: #fff;
}

body.site-body :where(.button--quiet, .btn-default, .ui-button--quiet) {
    border-color: var(--sm-color-border);
    background: var(--sm-color-surface);
    color: var(--sm-color-ink);
}

body.site-body :where(.button--quiet, .btn-default, .ui-button--quiet):hover {
    border-color: var(--sm-color-primary);
    background: var(--sm-color-primary-soft);
    color: var(--sm-color-primary-active);
}

body.site-body :where(.button--quiet, .btn-default, .ui-button--quiet):active {
    border-color: var(--sm-color-primary);
    background: var(--sm-color-primary-soft);
    box-shadow: none;
    color: var(--sm-color-primary-active);
}

body.site-body :where(.button, .btn, button.ui-button, input[type="submit"].ui-button):disabled,
body.site-body :where(.button, .btn, .ui-button)[aria-disabled="true"] {
    border-color: var(--sm-color-border);
    background: var(--sm-color-canvas);
    color: var(--sm-color-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

body.site-body :where(label, legend, .control-label, .ui-label) {
    color: var(--sm-color-ink);
    font: 700 13px/1.4 var(--sm-font-ui);
}

body.site-body :where(
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    input[type="tel"], input[type="url"], input[type="number"], input[type="date"],
    select, textarea, .form-control, .styler
) {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--sm-color-border-control);
    border-radius: var(--sm-radius-control);
    background-color: var(--sm-color-surface);
    box-shadow: none;
    color: var(--sm-color-ink);
    font: 500 16px/1.5 var(--sm-font-ui);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.site-body select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23536175' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    appearance: none;
}

body.site-body textarea {
    min-height: 112px;
    resize: vertical;
}

body.site-body :where(input, select, textarea, .form-control)::placeholder {
    color: var(--sm-color-muted);
    opacity: 1;
}

body.site-body :where(input, select, textarea, .form-control):focus {
    border-color: var(--sm-color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(21, 87, 214, .14);
}

body.site-body :where(input, select, textarea, .form-control):disabled {
    border-color: var(--sm-color-border);
    background: var(--sm-color-canvas);
    color: var(--sm-color-muted);
    cursor: not-allowed;
}

body.site-body :where(.has-error .form-control, .form-control.error, [aria-invalid="true"]) {
    border-color: var(--sm-color-error);
}

body.site-body :where(.help-block, .form-error, .ui-error) {
    margin-top: 6px;
    color: var(--sm-color-error);
    font: 700 12px/1.5 var(--sm-font-ui);
}

body.site-body :where(.form-group, .ui-field) {
    margin-bottom: 18px;
}

body.site-body :where(.form-group, .ui-field) > :where(label, .control-label, .ui-label) {
    display: block;
    margin-bottom: 7px;
}

body.site-body :where(.alert, .error-summary, .ui-notice) {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--sm-color-border);
    border-radius: var(--sm-radius-control);
    background: var(--sm-color-canvas);
    color: var(--sm-color-ink);
}

body.site-body :where(.alert-danger, .error-summary, .ui-notice--error) {
    border-color: color-mix(in srgb, var(--sm-color-error) 35%, white);
    background: color-mix(in srgb, var(--sm-color-error) 6%, white);
    color: var(--sm-color-error);
}

@media (max-width: 640px) {
    body.site-body :where(.button, .btn, button.ui-button) {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.site-body :where(.button, .btn, .ui-button, input, select, textarea) {
        transition-duration: .01ms;
    }
}