/*
 * ChalkSmart "digital blackboard" system, ported from chalksmart.com's
 * Next.js build (frontend/src/app/globals.css) so /education/* content
 * matches the data it's sourced from. The theme's own header/footer
 * (get_header()/get_footer()) stay untouched - this only styles the
 * content area, plus a dark "hero" block on the school profile page,
 * used the same restrained way the original app uses it: an accent
 * surface for header/hero/callout panels, never a full-page skin.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
    /*
     * Defined on :root, not .ushe-wrap: .ushe-hero is .ushe-wrap's parent
     * in the markup (school-single.php), and custom properties only
     * inherit downward - scoping these to .ushe-wrap left .ushe-hero
     * unable to see them at all (background/text colors silently fell
     * back to `initial`, i.e. invisible).
     */
    --ushe-blackboard: oklch(0.24 0.025 160);
    --ushe-blackboard-dark: oklch(0.19 0.02 160);
    --ushe-chalk: oklch(0.95 0.02 85);
    --ushe-chalk-muted: oklch(0.75 0.02 85);
    --ushe-accent: oklch(0.5 0.15 230);
    --ushe-accent-bright: oklch(0.72 0.12 230);
    --ushe-accent-dark: oklch(0.42 0.16 230);
    --ushe-page: oklch(0.985 0.004 90);
    --ushe-card: oklch(0.97 0.006 90);
    --ushe-card-border: oklch(0.88 0.006 90);
    --ushe-ink: oklch(0.22 0.01 150);
    --ushe-ink-secondary: oklch(0.3 0.01 150);
    --ushe-ink-muted: oklch(0.45 0.01 150);
    --ushe-ink-faint: oklch(0.4 0.01 150);
}

.ushe-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ushe-ink);
}

.ushe-hero + .ushe-wrap,
.ushe-hero ~ .ushe-wrap {
    padding-top: 0;
}

.ushe-breadcrumbs { font-size: 0.875rem; color: var(--ushe-ink-muted); margin-bottom: 0.5rem; }
.ushe-breadcrumbs a { color: var(--ushe-ink-muted); }
.ushe-breadcrumbs a:hover { color: var(--ushe-ink); }

.ushe-h1 { display: flex; align-items: center; gap: 0.65rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; color: var(--ushe-ink); }
.ushe-underline { color: var(--ushe-accent); flex-shrink: 0; }

.ushe-lede { color: var(--ushe-ink-muted); margin: 0 0 0.25rem; }
.ushe-sub { font-size: 0.9rem; color: var(--ushe-ink-muted); margin: 0.25rem 0 1.5rem; }
.ushe-note { font-size: 0.8rem; color: var(--ushe-ink-faint); }
.ushe-empty, .ushe-error { text-align: center; color: var(--ushe-ink-muted); padding: 2rem 0; }
.ushe-error { color: #b91c1c; }

/* Dark hero - school profile page only */
.ushe-hero { background: var(--ushe-blackboard); padding: 2.5rem 1.25rem; margin: 0 0 0 0; }
.ushe-hero .ushe-wrap { padding: 0; }
.ushe-hero .ushe-breadcrumbs { color: var(--ushe-chalk-muted); }
.ushe-hero .ushe-breadcrumbs a { color: var(--ushe-chalk-muted); }
.ushe-hero .ushe-breadcrumbs a:hover { color: var(--ushe-chalk); }
.ushe-hero .ushe-breadcrumbs span { color: var(--ushe-chalk); }
.ushe-hero .ushe-h1 { color: var(--ushe-chalk); }
.ushe-hero .ushe-meta-row { color: var(--ushe-chalk-muted); }
.ushe-hero .ushe-description { color: var(--ushe-chalk-muted); max-width: 620px; margin: 1.25rem 0 0; }
.ushe-compare-link { padding-top: 1.5rem !important; padding-bottom: 0 !important; }
.ushe-compare-link a { font-size: 0.9rem; font-weight: 500; }

.ushe-filters, .ushe-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; align-items: flex-end; }
.ushe-form { flex-direction: column; align-items: stretch; max-width: 480px; margin: 2rem auto 0;}
.ushe-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; color: var(--ushe-ink); }
.ushe-required { color: #b91c1c; font-weight: 700; }
.ushe-required-note { font-size: 0.8rem; color: var(--ushe-ink-muted); margin: 0; }
.ushe-form input, .ushe-form select, .ushe-form textarea,
.ushe-filters input, .ushe-filters select {
    border: 1px solid var(--ushe-card-border);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    background: white;
    color: var(--ushe-ink);
}
.ushe-form input:focus, .ushe-form select:focus, .ushe-form textarea:focus,
.ushe-filters input:focus, .ushe-filters select:focus { outline: none; border-color: var(--ushe-accent); }
.ushe-checkbox { flex-direction: row !important; align-items: center; gap: 0.4rem !important; font-weight: 400 !important; }
.ushe-wrap button, .ushe-filters button, .ushe-form button {
    border-radius: 6px; border: none; background: var(--ushe-accent); color: #fff;
    padding: 0.6rem 1.25rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.ushe-wrap button:hover { background: var(--ushe-accent-dark); }

.ushe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ushe-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ushe-card {
    display: block; border: 1px solid var(--ushe-card-border); border-radius: 10px;
    padding: 1.25rem; text-decoration: none; color: inherit; background: var(--ushe-card);
    transition: border-color 0.15s;
}
.ushe-card:hover { border-color: var(--ushe-ink-faint); }
.ushe-card h2, .ushe-card h3 { margin: 0; color: var(--ushe-ink); font-size: 1.25rem;}
.ushe-static-card p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ushe-ink-secondary); }

.ushe-meta { font-size: 0.85rem; color: var(--ushe-ink-muted); margin: 0.25rem 0; }
.ushe-meta-row { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.875rem; color: var(--ushe-ink-muted); margin: 0.5rem 0; }
.ushe-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.ushe-badge {
    display: inline-block; border: 1px solid color-mix(in oklch, var(--ushe-accent) 40%, transparent);
    color: var(--ushe-accent); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.75rem;
    font-weight: 600; text-decoration: none;
}
.ushe-badge:hover { color: var(--ushe-accent-dark); }
.ushe-badge-on-dark {
    background: color-mix(in oklch, var(--ushe-accent-bright) 15%, transparent);
    color: var(--ushe-accent-bright); border-color: transparent;
}
.ushe-badge-on-dark:hover { background: color-mix(in oklch, var(--ushe-accent-bright) 25%, transparent); color: var(--ushe-accent-bright); }
.ushe-description { margin: 0.75rem 0; }
.ushe-card-tuition { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--ushe-card-border); font-size: 0.9rem; font-weight: 600; color: var(--ushe-ink); }

.ushe-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ushe-card-border); }
.ushe-section h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--ushe-ink); }
.ushe-stacked { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.ushe-list { list-style: disc; padding-left: 1.25rem; margin: 0; color: var(--ushe-ink-secondary); }
.ushe-list li { margin-bottom: 0.5rem; }
.ushe-list strong { color: var(--ushe-ink); }

.ushe-table-wrap { overflow-x: auto; }
.ushe-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; border-radius: 8px; overflow: hidden; }
.ushe-table th, .ushe-table td { text-align: left; padding: 0.7rem 0.85rem; font-size: 0.9rem; }
.ushe-table thead tr { background: var(--ushe-blackboard); }
.ushe-table thead th { color: var(--ushe-chalk); font-weight: 600; }
.ushe-table tbody td { border-bottom: 1px solid var(--ushe-card-border); color: var(--ushe-ink-secondary); }
.ushe-table tbody tr:last-child td { border-bottom: none; }
.ushe-right { text-align: right; }
.ushe-table td.ushe-right { color: var(--ushe-ink); font-weight: 500; }
.ushe-row { display: flex; justify-content: space-between; padding: 0.4rem 0; }

/* The compare table's header row holds school-name links, not static
   column labels - structurally different from a data table, so it
   keeps the plain treatment rather than the dark header row above. */
.ushe-compare-table.ushe-table thead tr { background: transparent; }
.ushe-compare-table.ushe-table thead th { color: var(--ushe-ink); border-bottom: 1px solid var(--ushe-card-border); font-weight: 600; }
.ushe-compare-table th[scope="row"], .ushe-compare-table tbody th { text-align: left; font-weight: 500; color: var(--ushe-ink-muted); vertical-align: top; padding-right: 1rem; }
.ushe-extra-fees { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ushe-ink-secondary); }

.ushe-pagination { display: flex; gap: 0.4rem; margin-top: 1.5rem; }
.ushe-pagination a { border: 1px solid var(--ushe-card-border); border-radius: 6px; padding: 0.3rem 0.7rem; text-decoration: none; color: var(--ushe-ink); }
.ushe-pagination a.is-current { background: var(--ushe-blackboard); color: var(--ushe-chalk); border-color: var(--ushe-blackboard); }

.ushe-callout {
    background: var(--ushe-blackboard); color: var(--ushe-chalk-muted); border-radius: 10px;
    padding: 1.5rem; margin: 1.5rem 0;
}
.ushe-callout h2 { color: var(--ushe-chalk); margin-top: 0; }
.ushe-callout a { color: var(--ushe-accent-bright); }
.ushe-callout a:hover { color: var(--ushe-chalk); }
.ushe-callout .ushe-list { color: var(--ushe-chalk-muted); }
.ushe-callout .ushe-list a { color: var(--ushe-chalk); font-weight: 500; }

.ushe-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1.5rem 0; }
.ushe-stat { border: 1px solid var(--ushe-card-border); border-radius: 8px; padding: 1rem; text-align: center; background: var(--ushe-card); }
.ushe-stat span { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ushe-ink); }

.ushe-campus-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.ushe-campus { border: 1px solid var(--ushe-card-border); border-radius: 8px; padding: 1rem; }
.ushe-campus h3 { margin: 0; color: var(--ushe-ink); }
.ushe-campus p { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ushe-ink-secondary); }
.ushe-campus-row { border: 1px solid var(--ushe-card-border); border-radius: 8px; padding: 0.75rem 1rem; align-items: center; }

.ushe-nearby-map { width: 100%; height: 380px; margin-top: 1rem; border: 1px solid var(--ushe-card-border); border-radius: 8px; background: var(--ushe-card); z-index: 0; }
.ushe-map-pin span { display: block; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.4); }
.ushe-map-pin-school span { width: 16px; height: 16px; background: var(--ushe-accent, #0b3b78); }
.ushe-map-pin-compound span { width: 12px; height: 12px; background: #d9534f; }
.ushe-map-popup-meta { font-size: 0.8rem; color: var(--ushe-ink-secondary); }
.ushe-nearby-map .leaflet-popup-content { padding: 8px; margin: 0; }
.ushe-compound-links { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ushe-ink-faint); line-height: 1.7; }
.ushe-compound-links a { color: var(--ushe-ink-secondary); }

.ushe-match-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.ushe-match-card { border: 1px solid var(--ushe-card-border); border-radius: 10px; padding: 1.25rem; background: var(--ushe-card); }
.ushe-match-header { display: flex; justify-content: space-between; align-items: center; }
.ushe-match-header h3 { color: var(--ushe-ink); }
.ushe-score { font-weight: 700; font-size: 1.1rem; color: var(--ushe-accent); }
.ushe-factors { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; }
.ushe-factor { display: flex; align-items: flex-start; gap: 0.45rem; }
.ushe-factor svg { flex-shrink: 0; margin-top: 0.15rem; }
.ushe-factor-positive { color: #15803d; }
.ushe-factor-warning { color: #b91c1c; }

@media (max-width: 640px) {
    .ushe-grid-3, .ushe-stats-row { grid-template-columns: 1fr; }
}