/* studies.mycourses.co.za - base styles */

:root {
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-border: #e2e5ea;
    --color-text: #1c2230;
    --color-text-muted: #5b6474;
    --color-primary: #0c99d4;
    --color-primary-dark: #0a7bab;
    --color-accent: #f5760a;
    --color-accent-dark: #c85c08;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

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

/* Header */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 30; }
.header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 20px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.15rem; color: var(--color-text); display: inline-flex; align-items: center; }
.logo span { color: var(--color-text-muted); font-weight: 400; }
.logo-img { height: 34px; width: auto; display: block; }
.header-search { display: flex; margin-left: auto; }
.header-search input { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px 0 0 6px; min-width: 180px; }
.header-search button { padding: 8px 14px; border: none; background: var(--color-primary); color: #fff; border-radius: 0 6px 6px 0; cursor: pointer; }

/* ---------------------------------------------------------------
   Main navigation: horizontal bar with a click-to-open dropdown on
   desktop, collapsing to a hamburger-triggered slide panel with an
   accordion dropdown on mobile.
   --------------------------------------------------------------- */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; margin-left: auto; flex-shrink: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.main-nav > a { color: var(--color-text); font-weight: 500; white-space: nowrap; }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font: inherit; font-weight: 500; color: var(--color-text); white-space: nowrap; cursor: pointer; }
.nav-caret { transition: transform .2s ease; flex-shrink: 0; }
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-panel { display: none; flex-direction: column; position: absolute; top: calc(100% + 14px); left: 0; min-width: 340px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; z-index: 40; }
.nav-dropdown.is-open .nav-dropdown-panel { display: flex; }
.nav-dropdown-panel a, .nav-dropdown-panel .nav-dropdown-disabled { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--color-text); font-weight: 500; white-space: nowrap; }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: #f3f5f8; }
.nav-dropdown-disabled { color: var(--color-text-muted); cursor: default; }
.nav-soon-pill { font-size: .7rem; font-weight: 700; background: #eee; color: #777; padding: 2px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.nav-count-red { color: #c0392b; font-weight: 700; }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .header-search { order: 2; width: 100%; margin-left: 0; }
    .main-nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 4px; }
    .main-nav.is-open { display: flex; }
    .main-nav > a { padding: 13px 4px; border-bottom: 1px solid var(--color-border); }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--color-border); }
    .nav-dropdown-panel { position: static; display: none; box-shadow: none; border: none; border-radius: 0; padding: 0; min-width: 0; background: #fafbfc; }
    .nav-dropdown.is-open .nav-dropdown-panel { display: flex; }
    .nav-dropdown-panel a, .nav-dropdown-panel .nav-dropdown-disabled { border-bottom: 1px solid var(--color-border); border-radius: 0; padding: 12px 8px 12px 20px; }
}

/* Hero */
.hero { position: relative; background: linear-gradient(135deg, #0c99d4 0%, #0a5d84 100%), url('/assets/img/headers/home-hero.jpg'); background-size: cover; background-position: center; background-blend-mode: multiply; color: #fff; padding: 108px 0 96px; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,30,58,.62) 0%, rgba(6,20,42,.74) 100%); }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: 2.2rem; margin: 0 0 12px; }
.hero p { font-size: 1.1rem; opacity: .92; max-width: 640px; }
.hero-search { display: flex; gap: 8px; max-width: 560px; margin-top: 24px; }
.hero-search input { flex: 1; padding: 14px 16px; border-radius: 8px; border: none; font-size: 1rem; }
.hero-search button { padding: 14px 22px; border: none; background: var(--color-accent); color: #fff; border-radius: 8px; font-weight: 600; cursor: pointer; }

.quick-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.quick-links a { background: rgba(255,255,255,.15); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: .9rem; text-decoration: none; }
.quick-links a:hover { background: rgba(255,255,255,.28); }

section { padding: 44px 0; }
.section-title { font-size: 1.5rem; margin: 0 0 6px; }
.section-sub { color: var(--color-text-muted); margin: 0 0 24px; }

/* Grids & cards */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { color: var(--color-text-muted); font-size: .92rem; margin: 0; }
.card-link { display: block; }
.card-link:hover { text-decoration: none; border-color: var(--color-primary); }

/* Category cards: two per row (twice the width of the old 4-up grid), a photo on the
   left with the live course count overlaid on it, and the category name/description
   on the right. Used on the homepage and repeated at the bottom of the courses page. */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.category-card {
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.category-card:hover { text-decoration: none; border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 153, 212, .16); }
.category-card-img-wrap { position: relative; flex: 0 0 42%; min-width: 150px; max-width: 260px; background: var(--color-bg-alt, #eef1f6); }
.category-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-card-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(7, 24, 36, .68);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
    white-space: nowrap;
}
.category-card-body { flex: 1; min-width: 0; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; }
.category-card-body h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--color-text); }
.category-card-body p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: .88rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 560px) {
    .category-card-img-wrap { flex-basis: 36%; min-width: 110px; max-width: 160px; }
    .category-card-body { padding: 14px 16px; }
    .category-card-body h3 { font-size: 1rem; }
    .category-card-count { font-size: .68rem; padding: 3px 8px; top: 7px; right: 7px; }
}

.logo-badge { width: 44px; height: 44px; border-radius: 8px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 10px; flex-shrink: 0; }
.uni-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--color-border); margin-bottom: 10px; flex-shrink: 0; padding: 3px; }

/* Inline (row) sized thumbnails, used next to course titles */
.logo-badge.thumb-sm, .uni-thumb.thumb-sm { width: 36px; height: 36px; margin-bottom: 0; border-radius: 7px; font-size: .95rem; }
.logo-badge.thumb-lg, .uni-thumb.thumb-lg { width: 72px; height: 72px; margin-bottom: 0; border-radius: 10px; font-size: 1.6rem; }

.tag { display: inline-block; background: #eef2ff; color: var(--color-primary-dark); font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin: 2px 4px 2px 0; }
.tag.muted { background: #eef1f4; color: var(--color-text-muted); }

/* APS badge - deliberately the most visually prominent tag on a course listing */
.aps-badge { display: inline-block; background: var(--color-accent); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.aps-badge-other { background: #fff3cd; color: #7a5b00; font-weight: 600; cursor: help; }
.aps-badge-none { background: #eef1f4; color: var(--color-text-muted); font-weight: 600; }

/* Course-detail admission-score banner. Its badge can hold a long freeform string
   (e.g. UCT's "FPS approx. 435 (Band A guaranteed) / 470 (Band B likely)"), which the
   base .aps-badge's white-space:nowrap forces onto one line - fine on desktop, but on a
   narrow phone screen it stretches the whole page horizontally instead of wrapping.
   Scoped to this banner only, so the short, single-line badges used elsewhere (course
   rows, listings) keep their normal nowrap/ellipsis behaviour. */
.admission-score-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; }
.admission-score-bar .aps-badge-other { white-space: normal; max-width: 100%; }

/* Layout: filters + results */
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    /* On a single mobile column, results must appear before the filters panel -
       otherwise the full filter form (five dropdowns plus buttons) fills the whole
       screen and visitors have to scroll past it before they ever see a result. */
    .layout > div:not(.filters) { order: 1; }
    .layout .filters { order: 2; position: static; top: auto; }
}

/* Courses page only: it also has a standalone "quick APS check" box sitting above the
   filters+results layout. On mobile, move that below the results too, so the very
   first thing under the search box is real results, not a filter of any kind. */
@media (max-width: 860px) {
    .courses-search-wrap { display: flex; flex-direction: column; }
    .courses-search-wrap .layout { display: contents; }
    .courses-search-wrap .results { order: 1; }
    .courses-search-wrap .filters { order: 2; }
    .courses-search-wrap .aps-filter { order: 3; }
}

.filters { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); position: sticky; top: 84px; }
.filters h4 { margin: 18px 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--color-text-muted); }
.filters h4:first-child { margin-top: 0; }
.filters label { display: block; font-size: .92rem; margin: 4px 0; cursor: pointer; }
.filters select, .filters input[type=text] {
    width: 100%;
    padding: 11px 12px;
    font-size: .95rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.filters select:focus, .filters input[type=text]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(12, 153, 212, .14); }
.filters button { width: 100%; padding: 12px; background: var(--color-primary); color: #fff; border: none; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background .15s ease; }
.filters button:hover { background: var(--color-primary-dark); }
.filters .clear { display: inline-block; margin-top: 10px; font-size: .85rem; }

/* "Find courses by type at X" quick-links on an institution page - one chip per
   qualification level the institution actually offers (never an empty one), so a
   visitor can jump straight to just the Diplomas, or just the Degrees, at this
   specific institution. */
.course-type-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.course-type-links-label { font-size: .86rem; font-weight: 600; color: var(--color-text-muted); margin-right: 2px; }
.course-type-chip { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); font-size: .84rem; font-weight: 600; padding: 6px 13px; border-radius: 20px; }
.course-type-chip:hover { border-color: var(--color-primary); text-decoration: none; }
.course-type-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.course-type-chip-count { font-weight: 500; opacity: .75; }

.results-count { color: var(--color-text-muted); margin-bottom: 16px; }
.course-row { display: flex; align-items: center; gap: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; }
.course-row:hover { border-color: var(--color-primary); text-decoration: none; }
.course-row .course-row-body { flex: 1; min-width: 0; }
.course-row h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--color-text); }
.course-row h3 a, .course-row .course-row-uni-link { color: inherit; text-decoration: none; }
.course-row h3 a:hover, .course-row .course-row-uni-link:hover { text-decoration: underline; }
.course-row .meta { color: var(--color-text-muted); font-size: .88rem; margin-bottom: 0; }
.course-row .aps-badge, .course-row .aps-badge-other, .course-row .aps-badge-none { flex-shrink: 0; }
/* On narrow screens, flex-wrap alone let the APS badge (flex-shrink:0, so it never gives
   up its own width) squeeze the title column down to a single-word sliver instead of
   actually wrapping onto its own line, so it visually overlapped the title. A small grid
   fixes it directly: logo + title share the top row, the badge always gets its own full
   row below, no matter how long the course title is. */
@media (max-width: 520px) {
    .course-row {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        row-gap: 8px;
        align-items: start;
    }
    .course-row > a:first-child { grid-column: 1; grid-row: 1; }
    .course-row .course-row-body { grid-column: 2; grid-row: 1; min-width: 0; }
    .course-row > .aps-badge { grid-column: 1 / -1; grid-row: 2; justify-self: start; }

    /* Long section headings like "Available courses to study towards becoming X" wrap to
       3+ lines at the default size on a phone-width screen - a touch smaller keeps them
       to 2 lines in most cases and reads less overwhelming above a list of results. */
    .section-title { font-size: 1.28rem; }
}

.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.pagination { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .pagination-nav { font-weight: 600; }
.pagination .pagination-ellipsis { border: none; background: none; padding: 8px 2px; color: var(--color-text-muted); }

/* Detail pages - photo header with a dark overlay for legible white text.
   Modifier classes (.detail-header--course / --career) set the actual background image
   per page type; the base rules below just handle the overlay + text-color mechanics. */
.detail-header { position: relative; background-color: #14264a; background-size: cover; background-position: center; padding: 76px 0 64px; color: #fff; }
.detail-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,20,50,.62) 0%, rgba(10,20,50,.76) 100%); }
.detail-header .wrap { position: relative; z-index: 1; }
.detail-header .page-title { color: #fff; }
.detail-header .breadcrumb, .detail-header .breadcrumb a { color: rgba(255,255,255,.8); }
.detail-header > .wrap > div > div > p a, .detail-header > .wrap > div > div > p { color: rgba(255,255,255,.92); }
.detail-header .uni-thumb, .detail-header .logo-badge { background: #fff; }
.detail-header--course { background-image: url('/assets/img/headers/course-detail.jpg'); }
.detail-header--career { background-image: url('/assets/img/headers/career-detail.jpg'); }

/* Generic photo hero used on directory/listing pages (courses, categories, careers
   directory, universities). Each page picks a modifier class for its own background image. */
.page-hero { position: relative; background-color: #14264a; background-size: cover; background-position: center; padding: 112px 0 92px; color: #fff; margin-bottom: 0; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,20,50,.6) 0%, rgba(10,20,50,.74) 100%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .page-title { color: #fff; margin-bottom: 6px; }
.page-hero .section-sub { color: rgba(255,255,255,.9); margin-bottom: 0; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,.8); }
.page-hero--courses { background-image: url('/assets/img/headers/courses-directory.jpg'); }
.page-hero--categories { background-image: url('/assets/img/headers/directory-generic.jpg'); }
.page-hero--careers-directory { background-image: url('/assets/img/headers/careers-directory.jpg'); }
.page-hero--category-detail { background-image: url('/assets/img/headers/course-category.jpg'); }
.page-hero--universities { background-image: url('/assets/img/headers/directory-generic.jpg'); }

/* University header with optional cover background image - falls back to a type-based
   default (public/private) via $headerStyle in university.php when no custom cover is set. */
.uni-header { position: relative; background: linear-gradient(135deg, #0c99d4 0%, #0a5d84 100%); background-size: cover; background-position: center; padding: 100px 0 70px; color: #fff; }
.uni-header.has-cover::before { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 50, 0.55); }
.uni-header .wrap { position: relative; z-index: 1; }
.uni-header .breadcrumb, .uni-header .breadcrumb a { color: rgba(255,255,255,.8); }
.uni-header-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.uni-header .uni-thumb, .uni-header .logo-badge { background: #fff; }
.uni-header h1 { color: #fff; margin-bottom: 4px; }
.breadcrumb { font-size: .85rem; color: var(--color-text-muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--color-text-muted); }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 20px; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }

/* course.php's 3-slot variant: on mobile the sidebar (Duration/NQF/Campus box) needs to
   appear right after the main content, before Related Courses at the very bottom, rather
   than after everything (its plain DOM position). Named grid areas let each block go
   exactly where it should on each breakpoint without duplicating any markup. */
.detail-grid--course { grid-template-areas: "maintop sidebar" "mainbottom sidebar"; align-items: start; }
.detail-grid--course .detail-main-top { grid-area: maintop; }
.detail-grid--course .detail-sidebar { grid-area: sidebar; }
.detail-grid--course .detail-main-bottom { grid-area: mainbottom; }
@media (max-width: 860px) {
    .detail-grid--course { grid-template-areas: "maintop" "sidebar" "mainbottom"; }
}
.info-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.info-box dt { font-weight: 600; font-size: .82rem; text-transform: uppercase; color: var(--color-text-muted); margin-top: 10px; }
.info-box dt:first-child { margin-top: 0; }
.info-box dd { margin: 2px 0 0; }

/* "View all Courses at [Institution]" link at the top of a course page's sidebar -
   sends a visitor who landed on one course back to the whole institution's catalogue. */
.sidebar-institution-link { display: flex; align-items: center; gap: 12px; margin: -18px -18px 16px; padding: 16px 18px; border-bottom: 1px solid var(--color-border); color: inherit; }
.sidebar-institution-link:hover { background: #f7f9fc; text-decoration: none; }
.sidebar-institution-link strong { display: block; color: var(--color-text); font-size: .94rem; line-height: 1.3; }
.sidebar-institution-count { display: block; color: var(--color-text-muted); font-size: .82rem; margin-top: 2px; }
/* Caveat text under an application open/close date that isn't confirmed/exact yet
   (still "anticipated", "to be announced", or only published to the month). */
.application-window-note { margin: 8px 0 0; font-size: .8rem; color: var(--color-text-muted); line-height: 1.4; }

.apply-btn { display: inline-block; background: var(--color-accent); color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 600; }
.apply-btn:hover { text-decoration: none; opacity: .92; }

/* Prospectus download - deliberately the loudest button on the page: bright, high-contrast,
   impossible to miss on both the university page and every one of its course pages. */
.prospectus-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff7a1a 0%, #e8590c 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(232, 89, 12, .35);
    border: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.prospectus-btn:hover { text-decoration: none; opacity: .95; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 89, 12, .42); }
.prospectus-btn-icon { flex-shrink: 0; }

.page-title { font-size: 1.9rem; margin: 0 0 10px; }
.prose { max-width: 760px; }

/* HTML sitemap page: wider multi-column lists for universities / course categories */
.sitemap-columns { max-width: none; column-count: 3; column-gap: 32px; list-style: none; padding: 0; margin: 10px 0; }
.sitemap-columns li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 700px) {
    .sitemap-columns { column-count: 1; }
}

/* Course page intro paragraph - sets context for the page, no heading */
.course-intro { font-size: 1.08rem; line-height: 1.6; color: var(--color-text); max-width: 760px; margin: 4px 0 26px; }

/* Grade 12 subjects callout - deliberately the most eye-catching block on the course page */
.subjects-callout { background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius); padding: 20px 24px; margin: 0 0 30px; max-width: 760px; }
.subjects-callout h2 { margin: 0 0 10px; font-size: 1.3rem; color: #92400e; line-height: 1.3; }
.subjects-callout .prose p { margin: 0; font-size: 1rem; color: #4a3410; }
.disclaimer { font-size: .85rem; color: var(--color-text-muted); background: #fbfaf3; border: 1px solid #eee3b0; padding: 10px 14px; border-radius: 8px; margin-top: 16px; }

/* Course Intelligence panel - job market outlook, NSFAS funding, admission chances */
.intel-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 26px 22px; }
.intel-panel .section-title { margin-bottom: 4px; }
.intel-panel .section-sub { margin-bottom: 20px; }
.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }

.intel-card { margin: 0; border-radius: 10px; padding: 18px; border: 1px solid transparent; }
.intel-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.intel-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.intel-pill { font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: normal; line-height: 1.3; }
.intel-card h3 { margin: 0 0 8px; font-size: 1rem; }
.intel-card p { margin: 0; font-size: .92rem; line-height: 1.55; }
.intel-meter { display: block; width: 100%; height: auto; margin: 4px 0 12px; }

.intel-good { background: #f2fbf6; border-color: #bfe8d2; }
.intel-good .intel-icon { background: #10633b; color: #fff; }
.intel-good .intel-pill { background: #d4f4e2; color: #10633b; }
.intel-good h3 { color: #0a5c3d; }

.intel-neutral { background: #f5f8ff; border-color: #dbe4fb; }
.intel-neutral .intel-icon { background: var(--color-primary); color: #fff; }
.intel-neutral .intel-pill { background: #eef2ff; color: var(--color-primary-dark); }
.intel-neutral h3 { color: var(--color-primary-dark); }

.intel-caution { background: #fff8f1; border-color: #fbd0a6; }
.intel-caution .intel-icon { background: var(--color-accent); color: #fff; }
.intel-caution .intel-pill { background: #fff4ea; color: #8a3d02; }
.intel-caution h3 { color: #8a3d02; }

.intel-disclaimer { font-size: .8rem; color: var(--color-text-muted); margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--color-border); }

/* APS filter panel - deliberately the most prominent filter on the page */
.aps-filter { background: #fff4ea; border: 1px solid #fbd0a6; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; }
.aps-filter h4 { margin: 0 0 4px; font-size: 1.02rem; color: #8a3d02; }
.aps-filter p.hint { margin: 0 0 16px; font-size: .88rem; color: #a3540a; }
.aps-slider-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aps-slider-row input[type=range] { flex: 1; min-width: 160px; accent-color: var(--color-accent); height: 6px; }
.aps-slider-row input[type=number] {
    width: 110px;
    padding: 12px 10px;
    border: 1px solid #f3c290;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #8a3d02;
    background: #fff;
}
.aps-slider-row input[type=number]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(245, 118, 10, .18); }
.aps-slider-row button {
    padding: 12px 22px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.aps-slider-row button:hover { background: var(--color-accent-dark); }
.aps-filter .clear-aps { font-size: .85rem; margin-top: 10px; display: inline-block; }
@media (max-width: 480px) { .aps-slider-row input[type=number] { width: 100%; order: 1; } .aps-slider-row input[type=range] { order: 0; width: 100%; } .aps-slider-row button { order: 2; width: 100%; } }

.hero-aps-cta { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 16px 18px; margin-top: 22px; max-width: 560px; }
.hero-aps-cta label { display: block; font-size: .9rem; margin-bottom: 8px; font-weight: 600; }
.hero-aps-cta form { display: flex; gap: 8px; }
.hero-aps-cta input[type=number] { width: 90px; padding: 10px; border-radius: 6px; border: none; font-weight: 700; text-align: center; }
.hero-aps-cta button { padding: 10px 18px; background: var(--color-accent); color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }

.result-subheading { font-size: 1.05rem; color: var(--color-text-muted); margin: 26px 0 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); }

/* Footer */
.site-footer { background: #101828; color: #cbd2df; margin-top: 60px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; padding: 34px 20px; flex-wrap: wrap; }
.footer-inner p { color: #8b93a7; font-size: .88rem; max-width: 420px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: #cbd2df; font-size: .9rem; }
.footer-bottom { border-top: 1px solid #1f2937; padding: 14px 20px; font-size: .8rem; color: #71798c; }

/* Rich sitemap-style footer block: every institution, every province and every course
   category, each linking straight into the site's own filters - real internal links for
   crawlers, and a fast way in for a visitor who already knows what they're looking for. */
/* Every list here shows in full - no scrollbox - since the whole point is a visitor (or
   a search crawler) can see everything at a glance. The wide TVET/public-university
   columns use more text-columns than the smaller lists simply because they hold more
   entries; overall footer height is allowed to grow instead of hiding anything. */
.footer-rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 20px 20px; border-bottom: 1px solid #1f2937; }
.footer-col-wide { grid-column: span 2; }
.footer-col h4 { margin: 0 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #8b93a7; font-weight: 700; }
.footer-link-cols a { display: block; color: #cbd2df; font-size: .85rem; padding: 3px 0; }
.footer-link-cols a:hover { color: #fff; text-decoration: underline; }
.footer-link-count { color: #6b7383; }

/* Public Universities and TVET Colleges use a real grid, filled column-by-column
   (grid-auto-flow: column) with an exact row count computed server-side from the item
   count, rather than the browser's own column-balancing - which left one column much
   shorter than its neighbour and a large blank gap under it (reported live). A grid
   with a fixed row count fills every column evenly, no guessing involved. */
.footer-col-wide .footer-link-cols {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(var(--rows-3col, 1), auto);
    column-gap: 24px;
}

@media (max-width: 860px) {
    .footer-col-wide { grid-column: span 1; }
    .footer-col-wide .footer-link-cols {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(var(--rows-2col, 1), auto);
    }
}
@media (max-width: 560px) {
    .footer-col-wide .footer-link-cols {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
}

/* Admin */
.admin-body { background: #f2f4f7; }
.admin-nav { background: #101828; color: #fff; padding: 14px 20px; display: flex; gap: 18px; align-items: center; }
.admin-nav a { color: #cbd2df; }
.admin-nav a.brand { color: #fff; font-weight: 700; margin-right: auto; }
.admin-wrap { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
table.admin-table th, table.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: .92rem; }
table.admin-table th { background: #f8f9fb; }
.status-pill { padding: 2px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.status-pending_review { background: #fff3cd; color: #7a5b00; }
.status-published { background: #d4f4e2; color: #10633b; }
.status-archived { background: #eee; color: #666; }
.btn { display: inline-block; padding: 8px 16px; background: var(--color-primary); color: #fff; border-radius: 6px; border: none; cursor: pointer; font-size: .9rem; }
.btn.secondary { background: #eee; color: #333; }
.btn.small { padding: 4px 10px; font-size: .82rem; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 9px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; }
.form-field textarea { min-height: 90px; }
.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: var(--shadow); }
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.alert-error { background: #fde8e8; color: #a3242c; }
.alert-success { background: #d4f4e2; color: #10633b; }

/* ---------------------------------------------------------------
   Institution photo gallery + lightbox (3 photos in a row on desktop,
   click to open a full-size viewer with prev/next navigation)
   --------------------------------------------------------------- */
.uni-gallery { margin: 18px 0 28px; }
.uni-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .uni-gallery-grid { grid-template-columns: 1fr; } }
.uni-gallery-item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); cursor: zoom-in; border: 1px solid var(--color-border); }
.uni-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.uni-gallery-item:hover img, .uni-gallery-item:focus-visible img { transform: scale(1.05); }
.uni-gallery-item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.uni-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; font-size: .8rem; line-height: 1.3; color: #fff; background: linear-gradient(to top, rgba(10, 14, 20, .8), rgba(10, 14, 20, 0)); }

.uni-lightbox { position: fixed; inset: 0; background: rgba(8, 11, 16, .93); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 28px; }
.uni-lightbox.is-open { display: flex; }
.uni-lightbox-figure { max-width: 92vw; max-height: 88vh; margin: 0; text-align: center; }
.uni-lightbox-figure img { max-width: 100%; max-height: 76vh; border-radius: 8px; display: block; margin: 0 auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.uni-lightbox-caption { color: #f2f4f7; margin-top: 14px; font-size: .95rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.uni-lightbox-counter { color: rgba(255, 255, 255, .6); font-size: .8rem; margin-top: 6px; }
.uni-lightbox-close, .uni-lightbox-arrow { position: absolute; background: rgba(255, 255, 255, .12); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.uni-lightbox-close:hover, .uni-lightbox-arrow:hover { background: rgba(255, 255, 255, .26); }
.uni-lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.uni-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 1.7rem; }
.uni-lightbox-prev { left: 16px; }
.uni-lightbox-next { right: 16px; }
@media (max-width: 640px) {
    .uni-lightbox-arrow { width: 42px; height: 42px; font-size: 1.3rem; }
    .uni-lightbox-prev { left: 6px; }
    .uni-lightbox-next { right: 6px; }
    .uni-lightbox-close { top: 10px; right: 10px; }
}

/* ---------------------------------------------------------------
   Live campus map embed, shown below the contact details box
   --------------------------------------------------------------- */
.uni-map-block { margin-top: 16px; }
.uni-map-block h3 { margin: 0 0 4px; font-size: .95rem; }
.uni-map-block .hint { margin: 0 0 10px; font-size: .82rem; color: var(--color-text-muted); }
.uni-map-frame-wrap { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.uni-map-frame-wrap iframe { width: 100%; height: 240px; border: 0; display: block; }

.ad-slot { margin: 16px 0; text-align: center; overflow: hidden; }
.ad-slot--after-header { margin: 20px 0; }
.filters .ad-slot, .detail-sidebar .ad-slot { margin-top: 20px; }