/* =====================================================
   Immunemap main stylesheet
   ===================================================== */


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

:root {

    --primary: #163A5F;
    --secondary: #1F8A9E;
    --accent: #00A8E8;

    --text: #2B2B2B;
    --muted: #667085;

    --background: #ffffff;
    --section-bg: #F7F9FB;

    --border: #E5E7EB;

    --radius: 14px;

    --max-width: 1200px;

    --shadow:
        0 2px 8px rgba(0,0,0,0.06);

}



/* ---------- Global ---------- */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: auto;
}


body {

    margin:0;

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);

    background:var(--background);

    line-height:1.6;

}



img {

    max-width:100%;

    display:block;

}



a {

    color:inherit;

    text-decoration:none;

}



.container {

    width:90%;

    max-width:var(--max-width);

    margin:auto;

}



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


header {

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

    background:white;

}



.navbar {

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    display:flex;

    align-items:center;

    gap:12px;

}



.logo img {

    height:45px;

}



.logo span {

    font-size:24px;

    font-weight:700;

    color:var(--primary);

}



.nav-menu {

    display:flex;

    gap:32px;

    align-items:center;

}



.nav-menu a {

    color:var(--primary);

    font-weight:500;

}



.nav-menu a:hover {

    color:var(--secondary);

}



.nav-button {

    background:var(--primary);

    color:white !important;

    padding:
        10px 22px;

    border-radius:
        30px;

}



/* ---------- Hero ---------- */


.hero {

    padding:
        80px 0;

    text-align:center;

}



.hero h1 {

    font-size:
        clamp(32px,5vw,56px);

    line-height:1.15;

    color:var(--primary);

    margin-bottom:20px;

}



.hero p {

    max-width:750px;

    margin:
        auto;

    color:var(--muted);

    font-size:20px;

}



/* ---------- Search ---------- */


.search-box {

    margin:
        45px auto 0;

    max-width:750px;

    display:flex;

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

    border-radius:
        40px;

    overflow:hidden;

    box-shadow:var(--shadow);

}



.search-box input {

    flex:1;

    border:0;

    padding:
        18px 25px;

    font-size:17px;

    outline:none;

}



.search-box button {

    width:70px;

    border:0;

    background:var(--primary);

    color:white;

    cursor:pointer;

    font-size:22px;

}



/* ---------- Sections ---------- */


.section {

    padding:
        70px 0;

}



.section.grey {

    background:
        var(--section-bg);

}



.section-title {

    text-align:center;

    color:var(--primary);

    font-size:34px;

    margin-bottom:45px;

}



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


.grid {

    display:grid;

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

    gap:25px;

}



.card {

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

    border-radius:
        var(--radius);

    padding:25px;

    background:white;

}



.card:hover {

    border-color:
        var(--secondary);

}



.cell-card {

    text-align:center;

}



.cell-card img {

    height:70px;

    margin:
        0 auto 15px;

}



.cell-card h3 {

    color:var(--primary);

    font-size:18px;

}



/* ---------- Organ explorer ---------- */


.organ-container {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    align-items:center;

}



.organ-map img {

    max-height:600px;

    margin:auto;

}



.organ-list {

    display:grid;

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

    gap:12px;

}



.organ-list a {

    padding:12px 15px;

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

    border-radius:10px;

    color:var(--primary);

}



.organ-list a:hover {

    border-color:var(--secondary);

}



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


footer {

    background:
        var(--primary);

    color:white;

    padding:
        45px 0;

}



.footer-grid {

    display:grid;

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

    gap:30px;

}



footer h3 {

    margin-top:0;

}



footer a:hover {

    text-decoration:underline;

}



.footer-bottom {

    margin-top:35px;

    padding-top:20px;

    border-top:
        1px solid rgba(255,255,255,.2);

    text-align:center;

    font-size:14px;

}

/* =====================================================
   RESPONSIVE GRIDS
   ===================================================== */


.grid {

    display:grid;

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

    gap:25px;

}





@media(max-width:1100px){


.grid {

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

}


}



@media(max-width:700px){


.grid {

    grid-template-columns:
    1fr;

}


}














/* ==========================================
   EDUCATION PAGE
   EVENTS
   ========================================== */


.event-card {

background:white;

border:1px solid #e5e7eb;

border-radius:14px;

padding:25px;

margin-bottom:30px;

}




.event-card summary {


cursor:pointer;

font-size:1.35rem;

font-weight:600;

color:var(--primary);

line-height:1.5;

}



.event-card summary span {


font-size:1rem;

font-weight:400;

color:var(--text-light);

}




.event-content {


margin-top:30px;

line-height:1.65;

}




.schedule {


width:100%;

border-collapse:collapse;

margin:20px 0 35px 0;

}




.schedule td {


border-bottom:1px solid #e5e7eb;

padding:12px;

vertical-align:top;

}



.schedule td:first-child {


width:150px;

font-weight:600;

color:var(--primary);

}



@media(max-width:700px){


.schedule td:first-child {

width:auto;

}


.schedule {


font-size:0.9rem;

}



.event-card {


padding:18px;

}


.event-card summary {


font-size:1.1rem;

}



}


/* ==========================================
   EDUCATION HEADER IMAGE
   ========================================== */


.education-header-image {

    width:100%;

    max-width:1100px;

    margin:30px auto 40px auto;

    text-align:center;

}


.education-header-image img {

    width:100%;

    height:auto;

    border-radius:16px;

    display:block;

}

/* ==============================
   CELL TYPE ICONS
   ============================== */


.cell-grid {

display:flex;

justify-content:center;

align-items:flex-start;

gap:25px;

flex-wrap:wrap;

margin:20px auto 40px auto;

}



.cell-grid a {


text-decoration:none;

color:#333;

text-align:center;

font-size:0.9rem;

width:75px;

}



.cell-grid img {


width:55px;

height:55px;

object-fit:contain;

display:block;

margin:auto auto 8px auto;

}



.cell-grid a:hover {

transform:translateY(-3px);

}




/* ==============================
   ORGAN BUTTONS
   ============================== */


.organ-grid {


display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:25px;

}



.organ-grid a {


padding:12px 25px;

border-radius:30px;

border:1px solid #ddd;

background:white;

color:var(--primary);

text-decoration:none;

transition:0.2s;

}



.organ-grid a:hover {


background:#f2f5f8;

}




@media(max-width:700px){


.cell-grid {

gap:15px;

}


.cell-grid a {

width:65px;

font-size:0.8rem;

}



.organ-grid a {

width:80%;

text-align:center;

}


}