/* =====================================================
   AIRR-NA University Match
   Version 2.0
   Part 1 - Foundation
====================================================== */

/* ---------- CSS Variables ---------- */

:root{

    --primary:#036187;
    --primary-dark:#024b68;
    --primary-light:#0b7ea3;

    --background:#f4f8fb;
    --surface:#ffffff;

    --border:#d7e3ea;

    --text:#22313d;
    --text-light:#6b7c88;

    --success:#2e9b4d;
    --warning:#d9a000;
    --danger:#d63b3b;

    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    --radius:14px;

    --transition:.25s ease;

}

/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}

/* ---------- Container ---------- */

.container{

    width:min(1200px,92%);

    margin:auto;

}

/* ---------- Header ---------- */

header{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    text-align:center;

    padding:20px 20px;

    box-shadow:var(--shadow);

}

.logo{

    width:250px;

    margin-bottom:10px;

}

header h1{

    font-size:2.5rem;

    font-weight:700;

    margin-bottom:10px;

}

header p{

    font-size:1.1rem;

    opacity:.95;

}

/* ---------- Main ---------- */

main{

    padding-bottom:70px;

}

/* ---------- Cards ---------- */

.card{

    background:var(--surface);

    border-radius:var(--radius);

    margin-top:30px;

    padding:30px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-2px);

}

.card h2{

    color:var(--primary);

    margin-bottom:25px;

    padding-bottom:12px;

    border-bottom:2px solid #edf3f7;

}

/* ---------- Form Grid ---------- */

.form-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

/* ---------- Labels ---------- */

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

/* ---------- Inputs ---------- */

input,
select{

    width:100%;

    padding:14px 16px;

    font-size:16px;

    border-radius:10px;

    border:1px solid var(--border);

    transition:var(--transition);

    background:white;

}

input::placeholder{

    color:#9aa8b4;

}

input:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(3,97,135,.12);

}


/* ---------- Radio Buttons ---------- */

.radio-group{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    margin-bottom:25px;

}

.radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-weight:500;

}

.radio-group input{

    width:auto;

}

/* ---------- Button ---------- */

.button-row{

    margin:40px 0;

    text-align:center;

}

button{

    background:var(--primary);

    color:white;

    border:none;

    border-radius:40px;

    padding:16px 46px;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:

        0 8px 20px rgba(3,97,135,.25);

}

button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

button:active{

    transform:translateY(0);

}

/* ---------- Placeholder Text ---------- */

.placeholder{

    color:var(--text-light);

    text-align:center;

    padding:60px 20px;

}

/* ---------- Footer ---------- */

footer{

    background:#163140;

    color:white;

    text-align:center;

    padding:25px;

    margin-top:70px;

}

/* ---------- Utility ---------- */

.hidden{

    display:none !important;

}
/* =====================================================
   PART 2 - Dashboard, Statistics & Filters
====================================================== */

/* ---------- Applicant Dashboard ---------- */

.dashboard{

    position:relative;

    overflow:hidden;

}

.dashboard::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

}

/* ---------- Competitiveness Meter ---------- */

.meter{

    width:100%;

    height:24px;

    margin-top:10px;

    border-radius:999px;

    background:#dfe8ed;

    overflow:hidden;

}

.meter-fill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #36b24d,
        #67d96e
    );

    transition:
        width .8s ease,
        background .5s ease;

}

.meter-score{

    margin-top:20px;

    text-align:center;

    font-size:3rem;

    font-weight:700;

    color:var(--primary);

}

.meter-label{

    margin-top:10px;

    text-align:center;

    color:var(--text-light);

    font-size:1rem;

}

/* ---------- Dashboard Cards ---------- */

.dashboard-grid{

    margin-top:35px;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:22px;

}

.stat-card{

    background:white;

    border-radius:16px;

    padding:24px;

    text-align:center;

    box-shadow:0 8px 18px rgba(0,0,0,.06);

    transition:var(--transition);

    border-top:5px solid var(--primary);

}

.stat-card:hover{

    transform:translateY(-5px);

}

.stat-card h3{

    color:var(--text-light);

    font-size:.95rem;

    font-weight:600;

    margin-bottom:15px;

}

.stat-card p{

    font-size:2.3rem;

    font-weight:700;

    color:var(--primary);

}

/* ---------- Individual Colors ---------- */

#strongMatches{

    color:var(--success);

}

#borderlineMatches{

    color:var(--warning);

}

#poorMatches{

    color:var(--danger);

}

/* ---------- Results Filters ---------- */

#countryFilter,
#regionFilter,
#fitFilter{

    cursor:pointer;

}

#countryFilter:hover,
#regionFilter:hover,
#fitFilter:hover{

    border-color:var(--primary);

}

/* ---------- Loading ---------- */

#loading{

    margin:50px auto;

    text-align:center;

}

/* ---------- Spinner ---------- */

.spinner{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    border:7px solid #dce7ee;

    border-top:7px solid var(--primary);

    animation:spin 1s linear infinite;

}

#loading p{

    margin-top:18px;

    color:var(--text-light);

    font-size:1rem;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ---------- Fade Animation ---------- */

.fade-in{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- Pulse Animation ---------- */

.pulse{

    animation:pulse 1.8s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/* ---------- Responsive Dashboard ---------- */

@media (max-width:900px){

    .dashboard-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media (max-width:600px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .meter-score{

        font-size:2.4rem;

    }

}
/* =====================================================
   PART 3 - University Result Cards
====================================================== */

/* ---------- Results Grid ---------- */

#results{

    margin-top:50px;

}

#results h2{

    color:var(--primary);

    margin-bottom:25px;

}

#resultsGrid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(360px,1fr));

    gap:28px;

}

/* ---------- University Card ---------- */

.result-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 24px rgba(0,0,0,.08);

    transition:var(--transition);

    display:flex;

    flex-direction:column;

}

.result-card:hover{

    transform:translateY(-6px);

}

/* ---------- Header ---------- */

.result-header{

    background:linear-gradient(
        135deg,
        #036187,
        #0a8cbc
    );

    color:white;

    padding:28px;

}

.result-header h3{

    font-size:1.55rem;

    font-weight:700;

    margin-bottom:8px;

}

.result-location{

    opacity:.9;

    font-size:.95rem;

}

.program-name{

    margin-top:8px;

    font-weight:600;

}

/* ---------- Score ---------- */

.score-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.match-score{

    font-size:2rem;

    font-weight:700;

}

/* ---------- Fit Badge ---------- */

/* ==========================================
   Match Badges
========================================== */

.fit-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    font-size:.9rem;

    font-weight:700;

    color:white;

    letter-spacing:.3px;

}

/* ==========================================
   Simplified Fit Badges
   Likely / Target / Reach
========================================== */

.fit-likely {
    background: #2e9b4d !important;
    color: #ffffff !important;
}

.fit-target {
    background: #d9a000 !important;
    color: #222222 !important;
}

.fit-reach {
    background: #d63b3b !important;
    color: #ffffff !important;
}

/* ---------- Card Body ---------- */

.result-body{

    padding:24px;

    flex:1;

}

/* ---------- Section Headings ---------- */

.section-title{

    margin-top:22px;

    margin-bottom:14px;

    color:#036187;

    font-size:1rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ---------- Requirement Rows ---------- */

.requirement{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #edf3f7;

}

.requirement:last-child{

    border-bottom:none;

}

.requirement span:first-child{

    color:var(--text-light);

}

.requirement span:last-child{

    font-weight:600;

}

/* ---------- Divider ---------- */

.result-divider{

    height:1px;

    background:#e8eef2;

    margin:22px 0;

}

/* ---------- Match Explanation ---------- */

.match-explanation{

    background:#f5f9fc;

    border-left:5px solid var(--primary);

    padding:16px;

    margin-top:20px;

    border-radius:10px;

}

.match-explanation h4{

    margin-bottom:8px;

    color:var(--primary);

    font-size:.95rem;

}

.match-explanation p{

    color:var(--text-light);

    font-size:.95rem;

    line-height:1.5;

}

/* ---------- Result Card Links ---------- */

.result-links{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:12px;

    margin-top:28px;

}

.result-link{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    text-align:center;

    color:white;

    text-decoration:none;

    padding:14px 16px;

    border-radius:10px;

    font-weight:700;

    line-height:1.25;

    transition:.25s;

}

.profile-link{

    background:#036187;

}

.profile-link:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.catalogue-link{

    background:#163140;

}

.catalogue-link:hover{

    background:#0d222c;

    transform:translateY(-2px);

}

/* ---------- Card Footer ---------- */

.result-footer{

    background:#f8fbfd;

    border-top:1px solid #e4edf2;

    padding:14px 22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:.9rem;

    color:var(--text-light);

}

/* ---------- Empty Results ---------- */

.no-results{

    grid-column:1/-1;

    text-align:center;

    padding:70px 30px;

    background:white;

    border-radius:16px;

    box-shadow:0 10px 24px rgba(0,0,0,.06);

}

.no-results h3{

    color:var(--primary);

    margin-bottom:12px;

}

.no-results p{

    color:var(--text-light);

}

/* ---------- Responsive ---------- */

@media(max-width:768px){

    #resultsGrid{

        grid-template-columns:1fr;

    }

    .score-row{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .match-score{

    font-size:2.6rem;

    font-weight:700;

    color:white;

    line-height:1;

}

}
/* ==========================================
   Result Card Animations
========================================== */

.result-card{

    animation:fadeInUp .45s ease;

}

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.result-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 36px rgba(0,0,0,.15);

}
/* ==========================================
   Comparison Tables
========================================== */

.comparison-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:20px;

}

.comparison-table th{

    background:#036187;

    color:white;

    padding:10px;

}

.comparison-table td{

    padding:10px;

    border-bottom:1px solid #ddd;

}

.comparison-table tr:nth-child(even){

    background:#f7f7f7;

}

/* ==========================================
   Why You're a Match
========================================== */

.reason-list{

    padding-left:20px;

    margin-top:10px;

}

.reason-list li{

    margin-bottom:8px;

    color:#036187;

}
/* ==========================================
   University Notes
========================================== */

.notes-section {

    margin-top: 20px;
    padding: 15px;

    background: #f5fbfd;

    border-left: 4px solid #036187;

    border-radius: 6px;

}

.notes-section h3 {

    margin-top: 0;
    margin-bottom: 10px;

    color: #036187;

    font-size: 16px;

}

.notes-section p {

    margin: 0;

    line-height: 1.6;

    color: #444;

}
/* ==========================================
   Notes
========================================== */

.notes-text {

    overflow: hidden;

    transition: max-height .3s ease;

    line-height: 1.6;

}

.notes-text.collapsed {

    max-height: 4.8em;

}

.read-more-btn {

    margin-top: 10px;

    background: none;

    border: none;

    color: #036187;

    font-weight: 600;

    cursor: pointer;

    padding: 0;

}

.read-more-btn:hover {

    text-decoration: underline;

}
/* ==========================================
   Applicant Dashboard
========================================== */

.dashboard {

    margin: 40px 0;

}

.dashboard h2 {

    text-align: center;

    color: #036187;

    margin-bottom: 25px;

    font-size: 32px;

    font-weight: 700;

}

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}

.dashboard-card {

    background: white;

    border-radius: 14px;

    padding: 28px 20px;

    text-align: center;

    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    border-top: 6px solid #036187;

    transition: .25s ease;

}

.dashboard-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 24px rgba(0,0,0,.15);

}

.dashboard-number {

    font-size: 48px;

    font-weight: 700;

    color: #036187;

    margin-bottom: 12px;

    line-height: 1;

}

.dashboard-label {

    font-size: 16px;

    color: #666;

    font-weight: 600;

    line-height: 1.4;

}

/* Individual card colors */

.dashboard-card.likely {

    border-top-color: #2E8B57;

}

.dashboard-card.likely .dashboard-number {

    color: #2E8B57;

}

.dashboard-card.target {

    border-top-color: #F4A100;

}

.dashboard-card.target .dashboard-number {

    color: #F4A100;

}

.dashboard-card.reach {
    border-top-color: #C0392B;
}

.dashboard-card.reach .dashboard-number {
    color: #C0392B;
}

/* Mobile */

@media (max-width: 768px) {

    .dashboard-grid {

        grid-template-columns: 1fr;

    }

}
/* Force university name in result card header to white */
.result-card .result-header h2,
.result-card .result-header h3,
.result-card .result-header h2 *,
.result-card .result-header h3 * {
    color: #ffffff !important;
}

.result-card .result-header p {
    color: #ffffff !important;
    opacity: 0.95;
}

/* ==========================================
   Improvement Note
========================================== */

.improvement-note {
    margin-top: 18px;
    padding: 14px 16px;
    background: #fff8e6;
    border-left: 4px solid #d9a000;
    border-radius: 8px;
}

.improvement-note h4 {
    margin: 0 0 8px 0;
    color: #7a5700;
    font-size: 15px;
    font-weight: 700;
}

.improvement-note p {
    margin: 0;
    color: #4f3b00;
    line-height: 1.5;
}
/* ==========================================
   Education System Fields
========================================== */

.field-help {
    margin-top: 8px;
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.45;
}

#canadianAverageContainer,
#canadianProvinceContainer,
#usGpaContainer {
    align-self: start;
}