/*
 * College Rankings in Orpheus (MI-2073, MI-2096): what the server-rendered
 * markup needs on top of the old site's compiled main.css, which styled
 * elements the old scripts produced (spans and divs where the page now has
 * links). Loaded after main.css; keep main.css as compiled from the old
 * repository's main.scss.
 */

/* The table headers and sort columns are links now; the old ones were divs. */
.rankings-table-headers a,
.rankings-table-headers a:link,
.rankings-table-headers a:visited,
.rankings-table-headers a:hover {
    color: inherit;
    text-decoration: none;
}

/* Selectivity tabs: the radio graphic sits on the span, the link inside it. */
.selectivity-wrapper span a,
.selectivity-wrapper span a:link,
.selectivity-wrapper span a:visited,
.selectivity-wrapper span a:hover {
    color: inherit;
    text-decoration: none;
}

/* Filter drawer: the radio graphic sits on the bucket link and on each category's li. */
.filter-drawer-menu .bucket {
    display: block;
}

.filter-drawer-menu a,
.filter-drawer-menu a:link,
.filter-drawer-menu a:visited,
.filter-drawer-menu a:hover {
    color: inherit;
    text-decoration: none;
}

.filter-drawer-menu ul li {
    cursor: pointer;
}

/* School page (Isaac, 2026-11-03): description copy at 18px. */
.summary-wrapper p {
    font-size: 18px;
}

/* Scores in place of the letter grades (MI-2124), in the grades' hand and red: "70.4" in
   the rankings table, the overall fraction above the end of the school page's name. */
.score-mark {
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    color: #b30000;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .score-mark {
        font-size: 20px;
    }
}

/* Rankings table (MI-1863): the overall rank reads bold, like the school name and score;
   main.css sets it at 300. The per-bucket ranks stay regular (MI-1894). */
.rankings-table-record-odd .rank span,
.rankings-table-record-even .rank span {
    font-weight: 700;
}

/* Rankings table headers (MI-1915, MI-2027): the bucket names wrap inside their own
   column and scale with it, so no header runs into its neighbour at any width or in a
   browser whose text renders wider (Edge). */
.rankings-table-headers .bucket-rank {
    min-width: 0;
}

/* Each word of a bucket name on a line of its own ("Educational" over "Experience"), never
   hyphenated: Safari honoured an earlier hyphens:auto and broke "EX-PERIENCE". */
.rankings-table-headers .bucket-rank span {
    font-size: clamp(11px, .9vw, 14px);
    letter-spacing: 0;
    width: min-content;
    max-width: 100%;
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
}

/* Masthead on phones and tablets (MI-1914, MI-2088): the title gets the whole height of
   the header image, not the bottom 85px, so a title that wraps to three lines stays clear
   of the City Journal logo above it, also once the header shrinks on scroll. */
@media (max-width: 768px) {
    .header-content-inner {
        height: 100%;
    }

    .header-content h1.wide {
        max-width: calc(100% - 64px);
        font-size: clamp(28px, 8.5vw, 36px);
        margin-bottom: 16px !important;
    }

    .header-content.shrunk h1.wide {
        font-size: 22px;
        margin-bottom: 10px !important;
    }
}

/* School page, Rankings tab (MI-1654): phones show factor and rank only; the score column
   is desktop and tablet. */
@media (max-width: 767px) {
    #school-profile .dimensions-wrapper .score {
        display: none !important;
    }

    #school-profile .dimensions-wrapper .dimension.col-8 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
}


/* Editorial pages (MI-2099): the canvas's drop cap and section rule. main.css hides every
   hr (the layout's own are spacers); a rule in a page body is the short centred divider the
   old About page drew by hand. */
.content-well [data-treatment='dropcap']::first-letter {
    float: left;
    font-size: 3.25em;
    line-height: .82;
    font-weight: 700;
    padding-right: .08em;
    margin-top: .06em;
}

.content-well hr {
    display: block;
    width: 200px;
    margin: 40px auto 30px;
    border: 0;
    border-top: 1px solid #000;
    opacity: 1;
}

.content-well img {
    max-width: 100%;
    height: auto;
}

/* Links in page copy are underlined (the Other Notable Schools list, the essay's sources).
   main.css's .content-well a:link rule takes the underline off, so this names the same states. */
.content-well p a,
.content-well p a:link,
.content-well p a:visited,
.content-well p a:active {
    text-decoration: underline;
}

/* The methodology formula (MI-2099), MathML in the page copy, set in STIX Two Math
   (SIL OFL, fonts/stix-two-math/OFL.txt) so the fraction and the stretched brackets look
   the same on every system; the font only downloads on a page that has a formula. */
@font-face {
    font-family: "STIX Two Math";
    src: url("/college-rankings/fonts/stix-two-math/STIXTwoMath-Regular.woff2") format("woff2");
    font-display: swap;
}

.content-well math {
    font-family: "STIX Two Math", math;
}

.content-well math[display='block'] {
    font-size: 1.3em;
    margin: 1.5rem 0;
    overflow-x: auto;
}

@media (max-width: 480px) {
    .content-well math[display='block'] {
        font-size: 4.4vw;
    }
}

/* Home page tiles (MI-2099): the buttons' text is white. The tiles sit in the page copy, whose
   link rule (.content-well a:link, black) outranks the button's own colour in main.css. */
.content-well .card-bottom a,
.content-well .card-bottom a:link,
.content-well .card-bottom a:visited,
.content-well .card-bottom a:active {
    color: #fff;
}

/* Wide card (MI-2099): a full-width card of its own, like the two tiles above it: an image,
   a line of copy and a button; only the button links. */
.card-wrapper-wide {
    max-width: 672px;
    padding: 2rem 1.5rem 1.75rem;
}

.card-wrapper-wide .card-wide-image {
    width: min(300px, 80%);
    height: auto;
}

.card-wrapper-wide .card-wide-text {
    font-family: "Le Monde Livre", serif;
    font-size: 20px;
    text-align: center;
    margin: 1.25rem 0 1rem;
}

.card-wrapper-wide .card-bottom {
    padding: 0;
}

.card-wrapper-wide .card-bottom a {
    /* The tile buttons are full-width with right-aligned text; this one is as wide as its
       label, centred, on one line, at 14px. */
    width: auto;
    max-width: none;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1.5px;
    padding: .9em 3.75em .9em 1.75em;
}

@media (max-width: 480px) {
    .card-wrapper-wide {
        padding-inline: 1rem;
    }

    /* Still 14px on a phone: the label may wrap rather than shrink. */
    .card-wrapper-wide .card-bottom a {
        white-space: normal;
        letter-spacing: .5px;
        padding: .9em 3.75em .9em 1.25em;
    }
}

/* Home page (MI-2099): the page heading sits between the tiles and the overview copy. */
.cr-home-title {
    margin-top: 2.5rem;
}

/* About page: no faint rule under the essay's headings (main.css draws one under every h3). */
.cr-page-about .content-well h3 {
    border-bottom: 0;
    padding-bottom: 0;
}

/* The "Download Rankings" form in the masthead's modal (MI-2258). */
.cr-download-form { font-family: "GT America", sans-serif; }
.cr-download-form .cr-form-intro { margin: 0 0 16px; font-size: 16px; }
.cr-download-form .cr-form-row { display: flex; gap: 16px; }
.cr-download-form .cr-form-row .cr-form-field { flex: 1 1 0; }
@media (max-width: 520px) { .cr-download-form .cr-form-row { display: block; } }
.cr-download-form .cr-form-field { margin: 0 0 14px; }
.cr-download-form label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.cr-download-form input[type=text], .cr-download-form input[type=email] { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 1px solid #ababab; border-radius: 4px; background: #fff; color: #222; }
.cr-download-form input:focus { outline: 2px solid #00afcf; outline-offset: 1px; border-color: #00afcf; }
.cr-download-form .is-invalid input { border-color: #b30000; }
.cr-download-form .cr-form-error { display: block; min-height: 1em; font-size: 13px; color: #b30000; margin: 4px 0 0; }
.cr-download-form .cr-form-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cr-download-form .cr-form-status { margin: 0 0 12px; font-size: 15px; }
.cr-download-form .cr-form-status:empty { display: none; }
.cr-download-form .cr-form-status.is-error { color: #b30000; }
.cr-download-form .cr-form-status.is-success { color: #14532d; background: #e7f6ec; padding: 12px 14px; border-radius: 4px; }
.cr-download-form .cr-form-button { display: inline-block; background: #00afcf; color: #fff; border: 0; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 12px 24px; cursor: pointer; }
.cr-download-form .cr-form-button[disabled] { opacity: .6; cursor: default; }
.cr-download-form .cr-form-consent, .cr-download-form .cr-form-note { font-size: 12px; color: #555; margin: 12px 0 0; }
.cr-download-form .cr-form-note a { color: inherit; text-decoration: underline; }

/* School page (MI-2124): the overall score as a fraction, the whole-number score over 100
   with a hand-drawn, slightly tilted bar between, marked just above the end of the school's
   name like a grade on a paper. */
.score-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.school-name-with-score {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.school-name-with-score .score-mark-lg.score-fraction {
    position: absolute;
    left: 100%;
    bottom: calc(100% - 6px);
    transform: translateX(-55%);
    font-size: 46px;
}

.score-fraction-num {
    position: relative;
    padding: 0 .15em .12em;
}

.score-fraction-num::after {
    content: "";
    position: absolute;
    left: -.05em;
    right: -.05em;
    bottom: -.04em;
    height: .09em;
    min-height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-4deg);
}

.score-fraction-den {
    padding-top: .18em;
}

@media (max-width: 768px) {
    /* A phone's name fills the width and wraps: the score sits centred above it. */
    .school-name-with-score {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .school-name-with-score .score-mark-lg.score-fraction {
        position: static;
        transform: none;
        margin-bottom: 8px;
        font-size: 38px;
    }
}

/* Selectivity tabs (MI-2030): the radio circle is drawn in the tab's left padding, outside its
   link, so a tap on the circle only raised the tooltip. The link now reaches over the circle. */
.selectivity-wrapper .selectivity-btn a {
    display: inline-block;
    margin-left: -30px;
    padding-left: 30px;
}