/*
 * scholarships.css
 * FAU College of Business — Scholarships Filter Page
 * Loaded AFTER main.css via scholarships-page.xsl
 *
 * Font families already defined in main.css:
 *   "Avenir"       → Roman   (body default)
 *   "Avenir-light" → Light
 *   "Avenir-bold"  → Heavy
 * FontAwesome 4.6.3 available via main.css (fa- classes)
 *
 * FAU Brand Colors:
 *   Blue  #003366  (--fau-blue)
 *   Red   #CC0000  (--fau-red)
 *   Gray  #CCCCCC  (--fau-gray)
 *
 * Naming convention: .schol-* to avoid all main.css conflicts
 * No !important used — cascade order (after main.css) wins.
 * ============================================================ */


/* ── 1. PAGE INTRO BAND ─────────────────────────────────────
   Appears above the filter panel.
   ─────────────────────────────────────────────────────────── */
.schol-intro {
    background-color: #003366;
    padding: 28px 32px;
    margin-bottom: 0;
    overflow: hidden;
}
.schol-intro h2 {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #ffffff;
    margin: 0 0 8px 0;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    border: none;
}
.schol-intro p {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 14px 0;
    line-height: 1.6;
}
.schol-intro p:last-of-type {
    margin-bottom: 0;
}
.schol-intro p a {
    color: #ffffff;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-decoration: underline;
}
.schol-intro p a:hover {
    color: rgba(255, 255, 255, 0.75);
}
.schol-intro-actions {
    margin-top: 20px;
}
.schol-btn-primary {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #CC0000;
    padding: 10px 22px;
    text-decoration: none;
    border: none;
    border-radius: 0;
    -webkit-transition: background-color 0.18s;
    transition: background-color 0.18s;
    margin-right: 10px;
    margin-bottom: 8px;
    vertical-align: middle;
}
.schol-btn-primary:hover,
.schol-btn-primary:focus {
    background-color: #aa0000;
    color: #ffffff;
    text-decoration: none;
}
.schol-btn-outline {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: transparent;
    padding: 9px 22px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    -webkit-transition: border-color 0.18s, background-color 0.18s;
    transition: border-color 0.18s, background-color 0.18s;
    margin-bottom: 8px;
    vertical-align: middle;
}
.schol-btn-outline:hover,
.schol-btn-outline:focus {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
}


/* ── 2. FILTER PANEL ────────────────────────────────────────
   Sticky bar with all filter controls.
   ─────────────────────────────────────────────────────────── */
.schol-filter-panel {
    background-color: #f5f6f7;
    border-top: 3px solid #003366;
    border-bottom: 1px solid #d8dde3;
    padding: 20px 32px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}
.schol-filter-panel-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: -6px -8px;
}
.schol-filter-group {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 130px;
            flex: 1 1 130px;
    padding: 6px 8px;
    min-width: 110px;
    max-width: 200px;
}
.schol-filter-group--search {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 6px 8px;
}
.schol-filter-label {
    display: block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #003366;
    margin-bottom: 5px;
}
.schol-filter-select {
    width: 100%;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c8cdd3;
    border-radius: 0;
    padding: 0 28px 0 10px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23003366' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    -webkit-transition: border-color 0.15s;
    transition: border-color 0.15s;
}
.schol-filter-select:focus {
    outline: 2px solid #003366;
    outline-offset: 1px;
    border-color: #003366;
}
.schol-filter-search {
    width: 100%;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c8cdd3;
    border-radius: 0;
    padding: 0 10px 0 10px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: border-color 0.15s;
    transition: border-color 0.15s;
}
.schol-filter-search:focus {
    outline: 2px solid #003366;
    outline-offset: 1px;
    border-color: #003366;
}
.schol-filter-search-wrap {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 200px;
            flex: 1 1 200px;
    max-width: 380px;
}
.schol-filter-actions {
    padding: 6px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}
.schol-filter-reset {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #555555;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 4px;
    text-decoration: underline;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
    white-space: nowrap;
}
.schol-filter-reset:hover { color: #CC0000; background: none; background-color: transparent; border: none; }
.schol-filter-group--search .schol-filter-reset {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    white-space: nowrap;
    margin-top: 0;
}

/* Active filter pills */
.schol-active-filters {
/*     margin-top: 12px; */
	padding: 10px 8px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
    width: 100%;
    -webkit-box-ordinal-group: 100;
        -ms-flex-order: 99;
            order: 99;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}
.schol-active-filters:empty { display: none; }
.schol-pill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #003366;
    background-color: #dde6f0;
    padding: 3px 10px 3px 10px;
    border-radius: 2px;
    cursor: pointer;
    -webkit-transition: background-color 0.15s;
    transition: background-color 0.15s;
}
.schol-pill:hover { background-color: #c8d6e8; }
.schol-pill .schol-pill-x {
    font-size: 14px;
    line-height: 1;
    color: #CC0000;
    margin-left: 2px;
}

/* Results count bar */
.schol-results-bar {
    padding: 12px 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #e0e4e9;
    background-color: #ffffff;
}
.schol-results-count {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555555;
}
.schol-results-count strong {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #003366;
}
.schol-sort-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}
.schol-sort-wrap label {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #555555;
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
}
.schol-sort-select {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #c8cdd3;
    border-radius: 0;
    padding: 0 24px 0 8px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23003366' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}
.schol-sort-select:focus { outline: 2px solid #003366; outline-offset: 1px; border-color: #003366; }


/* ── 3. SCHOLARSHIP CARDS GRID ──────────────────────────────
   Three-column grid collapsing to two then one on smaller screens.
   ─────────────────────────────────────────────────────────── */
.schol-grid {
    padding: 24px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
/*     margin: -10px; */
    background-color: #ffffff;
}
.schol-card {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: calc(33.333% - 20px);
    margin: 10px;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-top: 3px solid #CCCCCC;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: border-top-color 0.2s, box-shadow 0.2s;
    transition: border-top-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-top-color 0.2s, box-shadow 0.2s;
}
.schol-card:hover {
    border-top-color: #003366;
    -webkit-box-shadow: 0 3px 12px rgba(0,51,102,0.1);
            box-shadow: 0 3px 12px rgba(0,51,102,0.1);
}
.schol-card[data-hidden="true"] {
    display: none;
}
.schol-card-body {
    padding: 18px 20px 14px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.schol-card-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.schol-tag {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
}
.schol-tag--level {
    background-color: #e6edf4;
    color: #003366;
}
.schol-tag--need {
    background-color: #fff3e0;
    color: #7a4500;
}
.schol-tag--merit {
    background-color: #e8f5e9;
    color: #1b5e20;
}
.schol-tag--enroll {
    background-color: #e8f5e9;
    color: #1b5e20;
    border-color: #c8e6c9;
}
.schol-tag--major {
    background-color: #fce4ec;
    color: #880e4f;
    border-color: #f8bbd0;
}
.schol-tag--semester {
    background-color: #f3e5f5;
    color: #4a148c;
}
.schol-card-title {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #003366;
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.3;
    border: none;
    text-transform: none;
    letter-spacing: 0;
}
.schol-card-desc {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
    margin: 0 0 14px 0;
}
.schol-card-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eaeef2;
    padding-top: 12px;
}
.schol-card-meta li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 7px;
    font-size: 12px;
    color: #555555;
    margin-bottom: 5px;
    padding: 0;
    border: none;
    list-style: none;
    background: none;
}
.schol-card-meta li:before { display: none; }
.schol-card-meta .schol-meta-label {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #003366;
    min-width: 72px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.schol-card-footer {
    padding: 12px 20px;
    border-top: 1px solid #eaeef2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
}
/* Apply button inside card footer */
.schol-card-footer .schol-btn-primary {
    font-size: 11px;
    padding: 7px 14px;
    margin: 0;
}
.schol-card-deadline {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #666666;
}
.schol-card-deadline strong {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #555555;
    display: block;
    font-size: 12px;
}
.schol-card-link {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #003366;
    padding: 7px 14px;
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    -webkit-transition: background-color 0.18s;
    transition: background-color 0.18s;
}
.schol-card-link:hover,
.schol-card-link:focus {
    background-color: #CC0000;
    color: #ffffff;
    text-decoration: none;
}

/* No results message */
.schol-no-results {
    display: none;
    width: 100%;
    text-align: center;
    padding: 60px 20px;
    color: #666666;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}
.schol-no-results .fa {
    font-size: 36px;
    color: #CCCCCC;
    display: block;
    margin-bottom: 14px;
}
.schol-no-results.visible { display: block; }


/* ── 4. DEADLINE STRIP ──────────────────────────────────────
   Two-column table for upcoming deadlines.
   ─────────────────────────────────────────────────────────── */
.schol-deadline-wrap {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d8dde3;
    margin: 0 0 28px 0;
    background-color: #ffffff;
}
.schol-deadline-wrap td {
    width: 50%;
    vertical-align: top;
    padding: 20px 24px;
    border: none;
    border-right: 1px solid #d8dde3;
    background-color: #ffffff;
}
.schol-deadline-wrap td:last-child { border-right: none; }
.schol-deadline-badge {
    display: inline-block;
    background-color: #003366;
    color: #ffffff;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    margin-bottom: 8px;
    line-height: 1.7;
}
.schol-deadline-title {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #003366;
    margin: 0 0 10px 0;
    padding: 0;
    border: none;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
.schol-dl-row {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    margin-bottom: 4px;
    line-height: 1.5;
}
.schol-dl-label {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #003366;
    min-width: 64px;
    margin-right: 4px;
}


/* ── 5. INFO CARDS ──────────────────────────────────────────
   2×2 grid of eligibility/process cards.
   ─────────────────────────────────────────────────────────── */
.schol-info-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border: 1px solid #CCCCCC;
    margin: 18px 0 24px 0;
    background-color: #CCCCCC;
    gap: 1px;
}
.schol-info-card {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 1px);
            flex: 1 1 calc(50% - 1px);
    background-color: #ffffff;
    padding: 16px 18px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
}
.schol-info-card:nth-child(odd) {
    /* gap handles spacing */
}
.schol-info-card:nth-child(3),
.schol-info-card:nth-child(4) {
    /* gap handles row divider */
}
.schol-info-grid:after {
    content: none;
}
.schol-info-label {
    display: block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #CC0000;
    margin-bottom: 6px;
}
.schol-info-card p {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555555;
    margin: 0;
    line-height: 1.65;
}


/* ── 6. CALLOUT BOX ─────────────────────────────────────────
   Blue left-border notice (e.g. international students).
   ─────────────────────────────────────────────────────────── */
.schol-callout {
    border-left: 4px solid #003366;
    background-color: #e6edf4;
    padding: 14px 18px;
    margin: 0 0 28px 0;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #333333;
    overflow: hidden;
}
.schol-callout strong { color: #003366; }


/* ── 7. CONTACT STRIP ───────────────────────────────────────
   Full-width navy band with email CTA.
   ─────────────────────────────────────────────────────────── */
.schol-contact-strip {
    margin-top: 36px;
    padding: 22px 24px;
    background-color: #003366;
    overflow: hidden;
}
.schol-contact-strip p {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    margin: 0 0 14px 0;
}
.schol-contact-strip a.schol-btn-primary {
    margin-bottom: 0;
}
@media screen and (min-width: 600px) {
    .schol-contact-strip { overflow: hidden; }
    .schol-contact-strip p {
        float: left;
        margin: 5px 20px 0 0;
        max-width: 65%;
    }
    .schol-contact-strip a.schol-btn-primary {
        float: right;
        margin: 0;
    }
    .schol-contact-strip:after {
        content: '';
        display: table;
        clear: both;
    }
}


/* ── 8. RESPONSIVE ──────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 1050px) {
    .schol-card { width: calc(50% - 20px); }
}
@media screen and (max-width: 700px) {
    .schol-card { width: calc(100% - 20px); }
    .schol-grid { padding: 16px 18px 32px; }
    .schol-results-bar { padding: 10px 18px; }
    .schol-intro { padding: 22px 18px; }
    .schol-deadline-wrap,
    .schol-deadline-wrap tbody,
    .schol-deadline-wrap tr,
    .schol-deadline-wrap td {
        display: block;
        width: 100%;
    }
    .schol-deadline-wrap td {
        border-right: none;
        border-bottom: 1px solid #d8dde3;
    }
    .schol-deadline-wrap td:last-child { border-bottom: none; }
    .schol-info-card {
        float: none;
        width: 100%;
        margin-right: 0;
        border-top: 1px solid #CCCCCC;
    }
    .schol-info-card:first-child { border-top: none; }
}
@media screen and (max-width: 599px) {
    .schol-filter-group { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
}


/* ── 9. SCHOLARSHIP DETAIL MODAL ────────────────────────────
   ─────────────────────────────────────────────────────────── */

/* Modal trigger button — same appearance as schol-card-link */
.schol-modal-btn {
    display: inline-block;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #003366;
    padding: 7px 14px;
    text-decoration: none;
    border: none;
    border-radius: 0;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: background-color 0.18s;
    transition: background-color 0.18s;
}
.schol-modal-btn:hover,
.schol-modal-btn:focus {
    background-color: #CC0000;
    color: #ffffff;
    outline: 2px solid #CC0000;
    outline-offset: 2px;
}

/* Overlay backdrop */
.schol-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9000;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
}
.schol-modal-overlay.schol-modal--open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Modal box */
.schol-modal-box {
    background-color: #ffffff;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
    -webkit-box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    margin: auto;
}

/* Modal header */
.schol-modal-header {
    background-color: #003366;
    padding: 18px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.schol-modal-title {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #ffffff;
    margin: 0;
    padding: 0;
    border: none;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}
.schol-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 16px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
}
.schol-modal-close:hover { color: #ffffff; }

/* Notice bar */
.schol-modal-notice {
    background-color: #e6edf4;
    border-left: 4px solid #003366;
    padding: 10px 24px;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #333333;
    line-height: 1.5;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.schol-modal-notice strong { color: #003366; }
.schol-modal-notice a { color: #003366; }

/* Scrollable body */
.schol-modal-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 1.7;
}

/* Loading state */
.schol-modal-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666666;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/* Error state */
.schol-modal-error {
    color: #CC0000;
    font-size: 14px;
}
.schol-modal-error a { color: #003366; }

/* Scholarship detail table inside modal */
.schol-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}
.schol-modal-table th,
.schol-modal-table td {
    padding: 12px 16px;
    vertical-align: top;
    border: 1px solid #dde3ea;
    line-height: 1.65;
    background-color: #ffffff;
    color: #333333;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.schol-modal-table th {
    background-color: #003366;
    color: #ffffff;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.schol-modal-table td:first-child {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #003366;
    width: 32%;
    min-width: 160px;
}
.schol-modal-table tr:nth-child(even) td {
    background-color: #f7f9fc;
}

/* Modal footer */
.schol-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e4e9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background-color: #ffffff;
}
.schol-modal-close-btn {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #555555;
    background: none;
    border: 1px solid #c8cdd3;
    padding: 8px 18px;
    cursor: pointer;
    -webkit-transition: border-color 0.15s, color 0.15s;
    transition: border-color 0.15s, color 0.15s;
}
.schol-modal-close-btn:hover {
    border-color: #003366;
    color: #003366;
}

/* Responsive modal */
@media screen and (max-width: 600px) {
    .schol-modal-overlay { padding: 0; -webkit-box-align: flex-end; -ms-flex-align: flex-end; align-items: flex-end; }
    .schol-modal-box { max-height: 92vh; border-radius: 0; }
    .schol-modal-table td:first-child { width: auto; min-width: 0; }
    .schol-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; text-align: center; }
}

/* ── Screen reader only utility (WCAG 2.1) ─────────────────
   Visually hidden but readable by assistive technology.      */
.schol-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 10. FAQ ACCORDION ──────────────────────────────────────
   Uses native <details>/<summary> — no JS, keyboard
   accessible, WCAG 2.1 compliant out of the box.
   ─────────────────────────────────────────────────────────── */

/* Scroll offset for anchor links — accounts for sticky filter
   panel (~120px) so the section heading isn't hidden behind it */
#schol-how,
#schol-faq {
    scroll-margin-top: 130px;
}

.schol-faq {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

/* Remove default marker across browsers */
.schol-faq-item {
    border-bottom: 1px solid #d8dde3;
    background-color: #ffffff;
}
.schol-faq-item:first-of-type {
    border-top: 1px solid #d8dde3;
}

/* Question row — the clickable trigger */
.schol-faq-question {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 16px 20px 16px 0;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #003366;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    line-height: 1.4;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
}

/* Remove default triangle in all browsers */
.schol-faq-question::-webkit-details-marker { display: none; }
.schol-faq-question::marker { display: none; content: ''; }

/* Custom +/- chevron via ::after */
.schol-faq-question::after {
    content: '+';
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    color: #003366;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-left: 16px;
    -webkit-transition: -webkit-transform 0.2s, color 0.15s;
    transition: transform 0.2s, color 0.15s;
    width: 22px;
    text-align: center;
}

.schol-faq-item[open] > .schol-faq-question::after {
    content: '\2212'; /* minus sign */
    color: #CC0000;
}

.schol-faq-question:hover {
    color: #CC0000;
}
.schol-faq-question:hover::after {
    color: #CC0000;
}

/* Focus ring on summary */
.schol-faq-question:focus {
    outline: 2px solid #003366;
    outline-offset: 2px;
}
.schol-faq-question:focus:not(:focus-visible) {
    outline: none;
}
.schol-faq-question:focus-visible {
    outline: 2px solid #003366;
    outline-offset: 2px;
}

/* Open state — highlight the active row */
.schol-faq-item[open] {
    border-bottom-color: #003366;
    background-color: #f7f9fc;
}
.schol-faq-item[open] > .schol-faq-question {
    color: #003366;
    border-bottom: 1px solid #d8dde3;
    margin-bottom: 0;
}

/* Answer panel */
.schol-faq-answer {
    padding: 14px 24px 18px 0;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 1.75;
    background-color: #f7f9fc;
}
.schol-faq-answer p {
    margin: 0;
}
.schol-faq-answer a {
    color: #003366;
}
.schol-faq-answer a:hover {
    color: #CC0000;
}

/* Contact line below accordion */
.schol-faq-contact {
    margin-top: 1.25rem;
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555555;
}
.schol-faq-contact a {
    color: #003366;
}
.schol-faq-contact a:hover {
    color: #CC0000;
}

/* ── Modal body content styles ──────────────────────────── */

/* h3 inside modal body */
.schol-modal-body h3 {
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #003366;
    margin: 0 0 12px 0;
    padding: 0;
    border: none;
}

/* Eligibility description paragraph */
.schol-modal-body p {
    font-family: "Avenir-light", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 1.75;
    margin: 0 0 16px 0;
}

/* Placeholder paragraph for future content */
.schol-modal-body p.schol-modal-placeholder {
    font-size: 13px;
    color: #767676;
    font-style: italic;
    border-top: 1px dashed #c8cdd3;
    padding-top: 16px;
    margin-top: 4px;
    margin-bottom: 0;
}

/* ── Hidden modal content div inside each card ──────────────
   Invisible on the page; JS reads its innerHTML into the modal.
   Staff edit this div in the OmniUpdate source editor.        */
.schol-modal-content {
    display: none;
}

/* ── Skip navigation link (WCAG 2.4.1) ─────────────────────
   Visually hidden until focused — keyboard users can jump
   directly to the scholarship grid, bypassing filters.       */
.schol-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    text-decoration: none;
}
.schol-skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: #003366;
    color: #ffffff;
    font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    z-index: 9999;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Label in search group spans full width above input+button row */
.schol-filter-group--search > .schol-filter-label {
    width: 100%;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}
/* ── MOBILE FILTER PANEL ────────────────────────────────────
   On desktop: toggle button hidden, panel shows normally.
   On mobile: panel hidden behind a slide-up overlay, toggle
   button triggers it.
   ─────────────────────────────────────────────────────────── */

/* Toggle button — hidden on desktop */
.schol-filter-mobile-btn {
    display: none;
}

/* Panel header (title + close button) — hidden on desktop */
.schol-filter-panel-header {
    display: none;
}

/* ── Mobile breakpoint ──────────────────────────────────── */
@media screen and (max-width: 1024px) {

    /* Show toggle button */
    .schol-filter-mobile-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 18px;
        background-color: #003366;
        color: #ffffff;
        font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        border: none;
        cursor: pointer;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 500;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .schol-filter-mobile-btn:focus {
        outline: 2px solid #ffffff;
        outline-offset: -2px;
    }
    .schol-filter-icon {
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    /* Full-screen overlay — covers entire viewport */
    .schol-filter-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: rgba(0, 0, 0, 0.55) !important;
        border: none !important;
        z-index: 8000 !important;
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    /* Open state */
    .schol-filter-panel.schol-filters--open {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    /* Prevent body scroll when panel open */
    body.schol-filter-panel-open {
        overflow: hidden !important;
    }

    /* White slide-up sheet — now contains the header as first child */
    .schol-filter-panel-inner {
        background-color: #ffffff;
        width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 18px 32px 18px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
                box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
        display: block;
        margin: 0;
        border-radius: 16px 16px 0 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    /* Panel header — sticky at top of the white sheet */
    .schol-filter-panel-header {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 16px 0 12px 0;
        border-bottom: 1px solid #e0e4e9;
        margin-bottom: 12px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background-color: #ffffff;
        z-index: 2;
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .schol-filter-panel-title {
        font-family: "Avenir-bold", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        color: #003366;
    }
    .schol-filter-panel-close {
        background: none;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: #555555;
        cursor: pointer;
        padding: 4px 8px;
        -webkit-appearance: none;
    }
    .schol-filter-panel-close:focus {
        outline: 2px solid #003366;
        outline-offset: 2px;
    }

    /* Filter groups — full width stacked */
    .schol-filter-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        padding: 8px 0;
    }
    .schol-filter-group--search {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        padding: 8px 0;
        -webkit-box-ordinal-group: 8;
            -ms-flex-order: 7;
                order: 7;
        display: block;
    }
    .schol-filter-search-wrap {
        max-width: 100%;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        display: block;
    }
    .schol-filter-select,
    .schol-filter-search {
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .schol-filter-label {
        display: block;
        margin-bottom: 6px;
    }

    /* Active pills */
    .schol-active-filters {
        -webkit-box-ordinal-group: 99;
            -ms-flex-order: 98;
                order: 98;
        width: 100%;
        padding: 6px 0 0 0;
        margin-top: 0;
    }

    /* Clear All */
    .schol-filter-actions {
        width: 100%;
        padding: 10px 0 0 0;
        -webkit-box-ordinal-group: 100;
            -ms-flex-order: 99;
                order: 99;
        display: block;
    }
    .schol-filter-reset {
        color: #003366;
        text-decoration: underline;
        font-size: 13px;
    }
}