:root {
    --school-primary: #17406d;
    --school-primary-dark: #0d2744;
    --school-accent: #d99b28;
    --school-green: #2f7f5f;
    --school-ink: #172033;
    --school-muted: #657184;
    --school-surface: #f6f8fb;
    --school-border: #dfe6ef;
}

* {
    letter-spacing: 0;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--school-ink);
    background: #fff;
}

a {
    color: var(--school-primary);
    text-decoration: none;
}

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

.top-bar {
    background: var(--school-primary-dark);
    color: #fff;
}

.brand-text {
    color: var(--school-primary-dark);
    font-weight: 800;
    max-width: 330px;
    line-height: 1.1;
    white-space: normal;
}

.navbar-brand {
    min-width: 0;
}

.site-logo {
    width: 58px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.site-logo-sm {
    width: 52px;
    max-height: 46px;
}

.site-logo-lg {
    width: 92px;
    max-height: 80px;
}

.navbar .nav-link {
    color: var(--school-ink);
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--school-primary);
}

.btn {
    border-radius: 8px;
    font-weight: 700;
}

.btn-primary {
    --bs-btn-bg: var(--school-primary);
    --bs-btn-border-color: var(--school-primary);
    --bs-btn-hover-bg: var(--school-primary-dark);
    --bs-btn-hover-border-color: var(--school-primary-dark);
}

.btn-warning {
    --bs-btn-bg: var(--school-accent);
    --bs-btn-border-color: var(--school-accent);
    --bs-btn-color: #1a1a1a;
}

.section-pad {
    padding: 76px 0;
}

.section-soft {
    background: var(--school-surface);
}

.section-title {
    font-weight: 800;
    color: var(--school-primary-dark);
    margin-bottom: 14px;
}

.section-kicker {
    color: var(--school-green);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.lead-muted {
    color: var(--school-muted);
}

.hero {
    min-height: 650px;
    position: relative;
    color: #fff;
    overflow: visible;
    margin-bottom: 62px;
}

.hero-slide {
    min-height: 650px;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 39, 68, .86), rgba(23, 64, 109, .42) 56%, rgba(23, 64, 109, .14));
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 70px 0 110px;
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 4.65rem);
    line-height: 1.02;
    font-weight: 900;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .9);
    max-width: 660px;
}

.hero-strip {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
    width: 5rem;
}

.hero .carousel-control-prev {
    justify-content: flex-start;
    padding-left: 1.25rem;
}

.hero .carousel-control-next {
    justify-content: flex-end;
    padding-right: 1.25rem;
}

.info-tile {
    background: #fff;
    border: 1px solid var(--school-border);
    border-radius: 8px;
    padding: 22px;
    height: 100%;
    box-shadow: 0 16px 44px rgba(23, 64, 109, .12);
}

.icon-box {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--school-primary);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.icon-box.accent {
    background: var(--school-accent);
    color: #1a1a1a;
}

.icon-box.green {
    background: var(--school-green);
}

.hero-feature-tile {
    min-height: 120px;
}

.hero-feature-tile strong {
    color: var(--school-primary-dark);
    display: block;
    line-height: 1.25;
}

.school-card {
    border: 1px solid var(--school-border);
    border-radius: 8px;
    background: #fff;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}

.school-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(23, 64, 109, .13);
}

.school-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

.page-hero {
    padding: 84px 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(13,39,68,.92), rgba(47,127,95,.78)), url("../images/home-hero-campus.jpg") center / cover;
}

.page-hero h1 {
    font-weight: 900;
}

.content-body {
    color: var(--school-muted);
}

.content-body h2,
.content-body h3,
.content-body h4 {
    color: var(--school-primary-dark);
    font-weight: 800;
    margin-top: 1.5rem;
}

.content-body p {
    line-height: 1.76;
}

.about-sidebar {
    align-self: flex-start;
}

.about-sidebar img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.about-sidebar .info-tile {
    height: auto;
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--school-primary);
}

.gallery-card {
    cursor: pointer;
}

.gallery-card img {
    height: 230px;
    object-fit: cover;
}

.blog-sidebar {
    position: sticky;
    top: 96px;
}

.blog-sidebar .info-tile {
    height: auto;
}

.form-control,
.form-select {
    border-radius: 8px;
    border-color: var(--school-border);
    min-height: 46px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--school-primary);
    box-shadow: 0 0 0 .2rem rgba(23, 64, 109, .12);
}

.site-footer {
    background: var(--school-primary-dark);
    color: rgba(255, 255, 255, .78);
}

.site-footer a {
    color: rgba(255, 255, 255, .84);
}

.site-footer a:hover {
    color: #fff;
}

.footer-title {
    font-size: .95rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 9px;
}

.social-link {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-shell {
    min-height: 100vh;
    background: var(--school-surface);
}

.admin-sidebar {
    background: var(--school-primary-dark);
    color: #fff;
    min-height: 100vh;
}

.admin-sidebar a {
    display: block;
    color: rgba(255,255,255,.82);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    color: #fff;
    background: rgba(255,255,255,.12);
}

.tc-search-card {
    border-top: 4px solid var(--school-accent) !important;
}

.tc-hero-panel {
    background: linear-gradient(135deg, var(--school-primary-dark), var(--school-primary) 58%, var(--school-green));
    color: #fff;
    border-radius: 8px;
    padding: clamp(28px, 5vw, 54px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
    overflow: hidden;
    position: relative;
}

.tc-hero-panel::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -110px;
    top: -120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.tc-hero-panel h2 {
    font-weight: 900;
    margin: 14px 0;
}

.tc-hero-panel p {
    max-width: 620px;
    color: rgba(255, 255, 255, .86);
}

.tc-mark {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    color: var(--school-accent);
}

.tc-mini-stat {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .08);
}

.tc-mini-stat span,
.tc-detail-box span {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    color: var(--school-muted);
    font-weight: 800;
    margin-bottom: 4px;
}

.tc-mini-stat span {
    color: rgba(255, 255, 255, .68);
}

.tc-mini-stat strong {
    color: #fff;
    word-break: break-word;
}

.tc-result-card {
    border-left: 4px solid var(--school-green) !important;
}

.tc-detail-box {
    border: 1px solid var(--school-border);
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    background: #fff;
}

.tc-detail-box strong {
    color: var(--school-primary-dark);
    word-break: break-word;
}

.vacancy-card {
    border-left: 4px solid var(--school-accent);
}

.vacancy-card .badge {
    font-weight: 700;
}

.no-vacancy-panel {
    background: #fff;
    border: 1px solid var(--school-border);
    border-left: 4px solid var(--school-green);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 42px);
    box-shadow: 0 16px 44px rgba(23, 64, 109, .08);
    max-width: 760px;
}

.admission-support-panel,
.enquiry-card {
    border-left: 4px solid var(--school-accent);
}

.admission-sidebar-card {
    position: sticky;
    top: 96px;
}

.enquiry-card-image {
    height: 190px;
    object-fit: cover;
}

.admission-support-panel {
    background: #fff;
    border: 1px solid var(--school-border);
    border-left-color: var(--school-accent);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 16px 44px rgba(23, 64, 109, .08);
}

.rich-editor {
    min-height: 220px;
    border: 1px solid var(--school-border);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.rich-toolbar {
    border: 1px solid var(--school-border);
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    margin-bottom: 8px;
}

.rich-toolbar button {
    min-width: 34px;
}

@media (max-width: 991.98px) {
    .brand-text {
        max-width: min(190px, 48vw);
        font-size: .9rem;
    }

    .site-logo {
        width: 48px;
        max-height: 42px;
    }

    .hero,
    .hero-slide {
        min-height: 590px;
    }

    .hero {
        margin-bottom: 0;
        overflow: hidden;
    }

    .hero-strip {
        position: static;
        transform: none;
        background: var(--school-surface);
        padding: 24px 0 0;
    }

    .hero h1 {
        font-size: 2.55rem;
    }

    .section-pad {
        padding: 54px 0;
    }

    .admin-sidebar {
        min-height: auto;
    }

    .admission-sidebar-card {
        position: static;
    }

    .blog-sidebar {
        position: static;
    }
}