/* ============================================================================
   Site-wide redesign — shared palette + component skins from the ranking mockup.
   Loaded via components/header.php on every page, AFTER the base CSS. Restyles
   badges, banners, filters, pagination and grids to the engineering ranking
   look (paper + orange, Archivo/Newsreader) WITHOUT editing each page's PHP.

   Rolled out in batches; each batch is a labelled section below.
   Remove the single <link> in header.php to fully revert.
   ============================================================================ */

:root {
    --rk-ink: #1B1C20;
    --rk-orange: #f58220;
    --rk-orange-hover: #e07018;
    --rk-orange-pale: #fdf2e9;
    --rk-paper: #FAFAFA;
    --rk-surface: #FFFFFF;
    --rk-border: #E2E4E8;
    --rk-border-strong: #C4C8D0;
    --rk-text-primary: #1F2127;
    --rk-text-secondary: #525866;
    --rk-text-muted: #8B92A1;
    --rk-radius-sm: 4px;
    --rk-radius: 8px;
    --rk-radius-lg: 12px;
    --rk-font-body: 'Archivo', system-ui, sans-serif;
    --rk-font-display: 'Newsreader', Georgia, serif;
}

/* ===========================================================================
   BATCH 1 — Badges (health specialty badges + any pill badges)
   Extra-specific selectors so they beat the pages' inline <style> rules
   (which load after this sheet) without needing !important.
   =========================================================================== */

/* Health specialty badges → orange palette. */
.specialty-badges .specialty-badge,
.specialty-badges-wrapper .specialty-badge {
    border: 2px solid var(--rk-border);
    color: var(--rk-text-secondary);
    background: var(--rk-surface);
    font-family: var(--rk-font-body);
    transition: all 0.2s ease;
}
.specialty-badges .specialty-badge:hover,
.specialty-badges-wrapper .specialty-badge:hover {
    border-color: var(--rk-orange);
    color: var(--rk-orange);
    background: var(--rk-orange-pale);
}
.specialty-badges .specialty-badge.active,
.specialty-badges-wrapper .specialty-badge.active {
    background: var(--rk-orange-pale);
    border-color: var(--rk-orange);
    color: var(--rk-orange-hover);
    font-weight: 600;
}

/* ===========================================================================
   BATCH 2 — News + Blog (banner, category filter pills, cards, pagination)
   Scoped with :has() to pages that actually contain the news/blog grid, so the
   gradient banner does NOT leak onto the other 70+ pages that use .page-header.
   =========================================================================== */

/* ── Banner (News/Blog + Article + Study-Abroad pages) ──────────────────────
   Article pages carry .articles-container; Study-Abroad carries
   .coming-soon-container. Adding them here gives those pages the same navy→brown
   banner as News/Blog/Methodology, so all section banners match. */
body:has(.news-grid) .page-header,
body:has(.blogs-grid) .page-header,
body:has(.articles-container) .page-header,
body:has(.coming-soon-container) .page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%);
    padding: 36px 40px;
    border-radius: var(--rk-radius);
    text-align: center;
    margin-bottom: 24px;
}
body:has(.news-grid) .page-header .page-title,
body:has(.blogs-grid) .page-header .page-title,
body:has(.articles-container) .page-header .page-title,
body:has(.coming-soon-container) .page-header .page-title {
    font-family: var(--rk-font-display);
    font-weight: 900;
    color: #fff;
    margin-left:80px;
}
body:has(.news-grid) .page-header .page-subtitle,
body:has(.blogs-grid) .page-header .page-subtitle,
body:has(.articles-container) .page-header .page-subtitle,
body:has(.coming-soon-container) .page-header .page-subtitle {
    color: #e0dddd;
}

/* ── Category filter pills → orange ─────────────────────────────────────── */
.category-filter .filter-btn {
    border: 2px solid var(--rk-border);
    color: var(--rk-text-secondary);
    font-family: var(--rk-font-body);
    transition: all 0.25s;
}
.category-filter .filter-btn:hover {
    border-color: var(--rk-orange);
    color: var(--rk-orange);
    background: var(--rk-orange-pale);
}
.category-filter .filter-btn.active {
    background: var(--rk-orange);
    border-color: var(--rk-orange);
    color: #fff;
}

/* ── Cards → orange hover + category chip ───────────────────────────────── */
.news-card:hover,
.blog-card:hover {
    box-shadow: 0 8px 16px rgba(27, 28, 32, 0.08);
    transform: translateY(-4px);
}
.news-category,
.blog-category {
    background: var(--rk-orange-pale) !important;
    color: var(--rk-orange) !important;
}
.read-more {
    color: var(--rk-orange) !important;
    font-weight: 600;
}
.read-more:hover { color: var(--rk-orange-hover) !important; text-decoration: underline; }

/* Card titles → display serif for a consistent editorial look. */
.news-title,
.blog-title { font-family: var(--rk-font-display); }

/* ── Pagination → orange active (matches ranking page) ──────────────────── */
.pagination .active,
.pagination a.active,
.pagination .current {
    background: var(--rk-orange) !important;
    border-color: var(--rk-orange) !important;
    color: #fff !important;
}
.pagination a:hover {
    border-color: var(--rk-orange);
    color: var(--rk-orange);
}

/* ===========================================================================
   BATCH 3 — Contact page (banner, form focus, submit button, fonts/colours)
   Contact uses its own .contact-page-header (not the shared .page-header), so
   no :has() scoping needed. Inline rules are plain single-class → these use
   extra specificity / !important to win over the page's inline <style>.
   =========================================================================== */

/* Banner → navy→brown gradient + Newsreader serif (matches ranking/news). */
.contact-page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%) !important;
    border-radius: var(--rk-radius);
    color: #fff;
}
.contact-page-header h2 {
    font-family: var(--rk-font-display);
    color: #fff;
}
.contact-page-header p { color: #e0dddd; }

/* Form inputs: orange focus ring (was blue). */
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
    border-color: var(--rk-orange) !important;
    box-shadow: 0 0 0 3px var(--rk-orange-pale) !important;
}

/* Submit button → solid orange (was blue gradient). */
.contact-form .btn-submit,
.btn-primary.btn-submit {
    background: var(--rk-orange) !important;
    font-family: var(--rk-font-body);
}
.contact-form .btn-submit:hover,
.btn-primary.btn-submit:hover {
    background: var(--rk-orange-hover) !important;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.3) !important;
}

/* Info-card icons + section headings → brand accents. */
.info-card .info-icon { color: var(--rk-orange); }
.contact-form-wrapper h2,
.section-container .section-subtitle { font-family: var(--rk-font-display); }

/* ===========================================================================
   BATCH 4 — Business pages (banner, filters, table/grid, cards, badges,
   pagination). Business shares .page-header with 70+ pages, so the banner is
   scoped with :has(#irfrankBizCards) (present on every business category page).
   =========================================================================== */

/* ── Banner (business category pages only) ──────────────────────────────── */
body:has(#irfrankBizCards) .page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%);
    padding: 36px 40px;
    border-radius: var(--rk-radius);
    text-align: center;
    margin-bottom: 24px;
}
body:has(#irfrankBizCards) .page-header .page-title {
    font-family: var(--rk-font-display);
    font-weight: 900;
    color: #fff;
}
body:has(#irfrankBizCards) .page-header .page-subtitle { color: #e0dddd; }

/* ── Filters (shared classes) → orange focus, custom chevron ────────────── */
body:has(#irfrankBizCards) .filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rk-text-secondary);
}
body:has(#irfrankBizCards) .filter-input:focus,
body:has(#irfrankBizCards) .filter-select:focus {
    outline: none;
    border-color: var(--rk-orange);
    box-shadow: 0 0 0 3px var(--rk-orange-pale);
}

/* ── Count pill → orange (matches ranking) ──────────────────────────────── */
body:has(#irfrankBizCards) .ranking-count {
    color: #fff;
    background: var(--rk-orange);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
}

/* ── Table headers ──────────────────────────────────────────────────────── */
body:has(#irfrankBizCards) .rankings-table th {
    background: #F8F9FA;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rk-text-secondary);
    font-weight: 700;
}

/* ── Business cards → orange hover + serif name; award/org accents ──────── */
.irfrank-biz-card { transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; }
.irfrank-biz-card:hover {
    box-shadow: 0 8px 16px rgba(27, 28, 32, 0.1);
    border-color: var(--rk-orange);
    transform: translateY(-3px);
}
.irfrank-biz-card-name { font-family: var(--rk-font-display); color: var(--rk-ink); }
.irfrank-biz-card-award { color: var(--rk-orange); font-weight: 700; }

/* Rank badge on business cards → dark ink (was blue gradient). */
.irfrank-card-rank,
.irfrank-biz-card [class*="rank"] {
    background: var(--rk-ink) !important;
    color: #fff !important;
}

/* Download icon hover → orange (was blue). */
.irfrank-card-download:hover { border-color: var(--rk-orange) !important; }
.irfrank-card-download:hover svg { stroke: var(--rk-orange) !important; }

/* ── Article tags (business detail pages) → orange pills ────────────────── */
.article-tags .article-tag,
.article-tag {
    background: var(--rk-orange-pale);
    color: var(--rk-orange);
    border-color: var(--rk-orange-pale);
}
.article-tags .article-tag:hover,
.article-tag:hover {
    background: var(--rk-orange);
    color: #fff;
}

/* ── Pagination → orange active (business uses .pagination-btn) ─────────── */
.pagination-btn.active {
    background: var(--rk-orange) !important;
    border-color: var(--rk-orange) !important;
    color: #fff !important;
}
.pagination-btn:hover:not(.disabled) {
    border-color: var(--rk-orange);
    color: var(--rk-orange);
}

/* ===========================================================================
   BATCH 5 — ALL ranking pages (bba, mba, law, school, health, engineering).
   Engineering also has its own ranking-page-redesign.css (fee slider, City-hide);
   this brings the banner / filter / count / view-toggle / table / pagination to
   EVERY ranking page. Scoped with :has(#rankingCount) so it only hits ranking
   pages (which all render that count element).
   =========================================================================== */

/* ── Banner ─────────────────────────────────────────────────────────────── */
body:has(#rankingCount) .page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%);
    padding: 36px 40px;
    border-radius: var(--rk-radius);
    text-align: center;
    margin-bottom: 24px;
}
body:has(#rankingCount) .page-header .page-title {
    font-family: var(--rk-font-display);
    font-weight: 900;
    color: #fff;
}
body:has(#rankingCount) .page-header .page-subtitle { color: #e0dddd; }
/* Methodology link — orange underline. Target the class AND any bare <a> in the
   banner (BBA has no .methodology-link class, just inline blue). */
body:has(#rankingCount) .page-header .methodology-link,
body:has(#rankingCount) .page-header a {
    color: var(--rk-orange) !important;
    font-weight: 700;
    text-decoration: underline;
}
body:has(#rankingCount) .page-header .methodology-link:hover,
body:has(#rankingCount) .page-header a:hover { color: #fff !important; }

/* ── Filter sidebar (shared classes) ────────────────────────────────────── */
body:has(#rankingCount) .filter-sidebar,
body:has(#rankingCount) .filter-card {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: var(--rk-shadow-sm, 0 2px 4px rgba(27,28,32,0.04));
    align-self: start;
}
/* Filter title → 16px uppercase, icon + text together (mockup). */
body:has(#rankingCount) .filter-title {
    font-family: var(--rk-font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--rk-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    justify-content: flex-start;
    gap: 8px;
}
body:has(#rankingCount) .filter-title i { color: var(--rk-orange); }
body:has(#rankingCount) .filter-title .filter-close-btn { margin-left: auto; }
body:has(#rankingCount) .filter-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--rk-text-secondary);
}

/* Reset button → white outlined (was grey fill). Scope to ranking pages so
   admin "Browse Files" .btn-secondary buttons keep their look. */
body:has(#rankingCount) #resetBtn,
body:has(#rankingCount) .filter-sidebar .btn-secondary {
    background: var(--rk-surface) !important;
    border: 1px solid var(--rk-border-strong);
    color: var(--rk-text-primary) !important;
    font-weight: 600;
}
body:has(#rankingCount) #resetBtn:hover,
body:has(#rankingCount) .filter-sidebar .btn-secondary:hover {
    background: var(--rk-paper) !important;
    color: var(--rk-orange) !important;
    border-color: var(--rk-orange);
}
body:has(#rankingCount) .filter-input:focus,
body:has(#rankingCount) .filter-select:focus {
    outline: none;
    border-color: var(--rk-orange);
    box-shadow: 0 0 0 3px var(--rk-orange-pale);
}
/* Custom chevron on selects. */
body:has(#rankingCount) .filter-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}

/* ── Toolbar card wrapper ────────────────────────────────────────────────
   Engineering wraps the count+toggle in .ranking-toolbar; BBA/MBA/etc. use a
   plain inline-styled div. Target the div that directly contains #rankingCount
   so every ranking page gets the same bordered white card. */
.ranking-toolbar,
div:has(> #rankingCount) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
}

/* ── Count pill → orange. Target by CLASS and by ID (BBA/MBA use id only,
   without the .ranking-count class). ─────────────────────────────────────── */
body:has(#rankingCount) .ranking-count,
#rankingCount {
    color: #fff !important;
    background: var(--rk-orange);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    width: fit-content;
}

/* ── View toggle → flush bordered pill, orange-pale active ──────────────── */
body:has(#rankingCount) .view-toggle {
    display: flex; gap: 0; padding: 0; margin-bottom: 0;
    background: transparent;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-sm);
    overflow: hidden;
}
body:has(#rankingCount) .view-toggle .toggle-btn {
    border-radius: 0; margin-right: 0;
    background: var(--rk-surface);
    color: var(--rk-text-secondary);
    font-weight: 600;
}
body:has(#rankingCount) .view-toggle .toggle-btn + .toggle-btn {
    border-left: 1px solid var(--rk-border);
}
body:has(#rankingCount) .view-toggle .toggle-btn.active {
    background: var(--rk-orange-pale);
    color: var(--rk-orange);
}
body:has(#rankingCount) .view-toggle .toggle-btn:hover:not(.active) {
    background: var(--rk-paper);
}

/* ── Table ──────────────────────────────────────────────────────────────── */
/* The table sits in a .content-section (#tableView) which page-layout.css gives
   25px padding — that pushed the card wider than the toolbar/banner above it.
   Drop the padding and let a wide table scroll inside instead of overflowing. */
body:has(#rankingCount) #tableView {
    padding: 0;
    overflow-x: auto;
}
/* Give the table a min-width so 9 columns don't get squeezed/clipped; when the
   viewport is narrower the #tableView wrapper scrolls horizontally instead. */
body:has(#rankingCount) #tableView .rankings-table { min-width: 940px; }
body:has(#rankingCount) .rankings-table th {
    background: #F8F9FA;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rk-text-secondary);
    font-weight: 700;
    padding: 16px 14px;
    font-size: 12px;
}
body:has(#rankingCount) .rankings-table td { padding: 16px 14px; }
body:has(#rankingCount) .rankings-table tr:hover td { background: #FAFAFA; }

/* Rank badge → dark ink (was blue). */
body:has(#rankingCount) .rank-badge {
    background: var(--rk-ink);
    color: #fff;
}
/* Download icon → orange hover (was blue). */
body:has(#rankingCount) .irfrank-card-download:hover,
body:has(#rankingCount) .card-rank-download:hover { border-color: var(--rk-orange) !important; }
body:has(#rankingCount) .irfrank-card-download:hover svg,
body:has(#rankingCount) .card-rank-download:hover svg { stroke: var(--rk-orange) !important; }

/* ── Card view (Card toggle) — responsive grid of cards, per RankingPage mockup,
   using the site's ranking palette. ─────────────────────────────────────────── */
body:has(#rankingCount) #cardView {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.qv-card {
    display: flex;
    flex-direction: column;
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    padding: 24px;
    box-shadow: var(--rk-shadow-sm, 0 2px 4px rgba(27,28,32,0.04));
    transition: box-shadow 0.2s, border-color 0.2s;
    font-family: var(--rk-font-body);
}
.qv-card:hover { box-shadow: var(--rk-shadow-md, 0 8px 16px rgba(27,28,32,0.08)); border-color: var(--rk-orange); }

.qv-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.qv-name {
    display: inline-block;
    font-family: var(--rk-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rk-ink);
    text-decoration: none;
    margin-bottom: 4px;
}
.qv-name:hover { color: var(--rk-orange); text-decoration: none; }
.qv-loc { font-size: 13px; color: var(--rk-text-muted); margin-bottom: 16px; }
.qv-stats {
    display: flex; gap: 20px; flex-wrap: wrap;
    font-size: 14px; color: var(--rk-text-secondary);
    margin-bottom: 16px;
}
.qv-stats b { color: var(--rk-text-primary); font-weight: 600; }
.qv-footer {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rk-border);
}
.qv-compare {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--rk-text-secondary); cursor: pointer;
}
.qv-compare .compare-checkbox { accent-color: var(--rk-orange); width: 16px; height: 16px; }

/* ── Pagination (ranking pages use .pagination-btn) ─────────────────────── */
body:has(#rankingCount) .pagination-container {
    justify-content: center;
    border-top: none;
    margin-top: 8px;
    padding: 8px 0 16px;
}
body:has(#rankingCount) .pagination-container .pagination-info { display: none; }

/* ============================================================================
   BATCH 5 — Methodology top banner → navy→brown (match the bottom CTA)
   The top .page-header banner on methodology pages is styled by styles.css with
   an old navy→bright-blue gradient (135deg #1e3a8a→#3b82f6). The bottom CTA
   (.methodology-cta) already uses the redesign navy→brown. Scope to methodology
   pages via :has(.methodology-content) so no other .page-header is affected.
   ========================================================================= */
body:has(.methodology-content) .page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%) !important;
}

/* ============================================================================
   BATCH 6 — State ⇔ Stream mutual exclusion (engineering filter)
   When one of State/Stream is active, rankings.js disables the other; give the
   disabled dropdown a clear greyed-out cue (the base .filter-select had none).
   ========================================================================= */
body:has(#rankingCount) .filter-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border-color: #e2e8f0;
    opacity: 1; /* override the browser's default washed-out disabled look */
}

/* ============================================================================
   BATCH 4 — Font-size reduction (~10%) for News / Blog / Contact / Business
   Client feedback: text too big on these pages. Base sizes live in the base
   stylesheets (page-layout.css/styles.css) which we don't edit directly, so we
   reduce them here via scoped overrides. Scoping (:has / page-specific classes)
   keeps this off the ranking + other pages. Colours already handled in Batch 2/3.
   ========================================================================= */

/* Page headers on News/Blog/Contact/Business (base .page-title=2rem, subtitle=1rem) */
body:has(.news-grid) .page-title,
body:has(.blogs-grid) .page-title,
body:has(.category-filter) .page-title,
.contact-page-header h2 {
    font-size: 1.8rem;   /* was 2rem */
}
body:has(.news-grid) .page-subtitle,
body:has(.blogs-grid) .page-subtitle,
body:has(.category-filter) .page-subtitle,
.contact-page-header p {
    font-size: 0.9rem;   /* was 1rem */
}

/* News/Blog card text */
body:has(.news-grid) .news-title,
body:has(.blogs-grid) .blog-title {
    font-size: 1.15rem;  /* ~10% down from typical 1.28rem card titles */
}
body:has(.news-grid) .news-excerpt,
body:has(.blogs-grid) .blog-excerpt,
body:has(.news-grid) .news-card p,
body:has(.blogs-grid) .blog-card p {
    font-size: 0.855rem; /* ~10% down from 0.95rem body */
}
body:has(.news-grid) .news-category,
body:has(.blogs-grid) .blog-category,
body:has(.news-grid) .news-meta,
body:has(.blogs-grid) .blog-meta {
    font-size: 0.72rem;
}

/* Contact page body text + form labels/inputs */
.contact-form label,
.contact-form .form-group label { font-size: 0.855rem; }
.contact-form input,
.contact-form select,
.contact-form textarea { font-size: 0.855rem; }
.contact-info p,
.info-card p,
.contact-content p { font-size: 0.9rem; }

/* Business award pages — headings + card text (real biz classes) */
body:has(#irfrankBizCards) .page-title { font-size: 1.8rem; }
body:has(#irfrankBizCards) .page-subtitle { font-size: 0.9rem; }
body:has(#irfrankBizCards) .biz-card-name { font-size: 0.95rem; }
body:has(#irfrankBizCards) .biz-card-org { font-size: 0.81rem; }
body:has(#irfrankBizCards) .biz-card-award { font-size: 0.81rem; }