@import url("theme.css");

/* =====================================
   NOTE TO DEVELOPERS
-----------------------------------------

This file defines COMPONENTS and LAYOUT.

Do NOT hardcode:

• Colors
• Fonts
• Shadows
• Border Radius
• Theme Dimensions
• Animation Timing

These belong in theme.css.

===================================== */

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

/* =====================================
   Base
===================================== */

body{

    font-family:var(--font);
    color:var(--text);

    background-color:var(--background);

    background-image:
        url("/assets/images/chem-background.png");

    background-repeat:no-repeat;
    background-position:center;
    background-size:min(1800px,100vw);
    background-attachment:fixed;

    overflow-x:hidden;
    overflow-y:auto;

}

/* =====================================
   Header
===================================== */


header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    display:grid;
    grid-template-columns:auto 1fr auto;

    align-items:center;

    padding:0 var(--header-padding);

    background:var(--header-bg);

    border-bottom:1px solid var(--border);
	
	z-index: 2;

}

/* =====================================
   Logo
===================================== */

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    display:block;

    height:var(--logo-height);
    width:auto;

}

/* =====================================
   Navigation
===================================== */

nav{

    display:flex;
    justify-content:flex-end;
    align-items:center;

    flex:1;

    gap:10px;

    margin-left:40px;

}

/* =====================================
   Navigation Links
===================================== */

nav a,
.nav-button{

    display:flex;
    align-items:center;
    justify-content:center;

    height:48px;

    padding:0 10px;

    background:transparent;
    border:none;
    border-radius:0;

    color:var(--text);

    text-decoration:none;

    font:inherit;
    font-size:1.08rem;
    font-weight:600;

    cursor:pointer;

    position:relative;

    text-shadow:
        0 1px 0 rgba(255,255,255,.90),
        0 -1px 1px rgba(0,0,0,.12);

    transition:
        color .20s ease,
        transform .20s ease,
        text-shadow .20s ease;

}

/* Hover */

nav a:hover,
.nav-button:hover{

    color:var(--primary);

    transform:
        translateY(-2px)
        scale(1.04);

    text-shadow:
        0 1px 0 #ffffff,
        0 2px 2px rgba(0,0,0,.18),
        0 6px 12px rgba(0,0,0,.22);

}

/* Active */

nav a.active,
.nav-button.active{

    color:var(--primary);

    text-shadow:
        0 1px 0 #ffffff,
        0 2px 2px rgba(0,0,0,.22),
        0 8px 14px rgba(180,38,38,.20);

}

/* Click */

nav a:active,
.nav-button:active{

    transform:
        translateY(0)
        scale(.98);

}

/* =====================================
   Dropdown
===================================== */

.nav-dropdown{

    position:relative;

}

.nav-button{

    gap:6px;

}

.dropdown-menu{

    position:absolute;

    top:54px;
    left:0;

    width:340px;

    padding:18px;

    display:flex;
    flex-direction:column;
    gap:18px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);

    z-index:1000;

}

.dropdown-section{

    display:flex;
    flex-direction:column;

    gap:6px;

}

.dropdown-section h4{

    margin-bottom:4px;

    color:var(--primary);

    font-size:.9rem;

}

.dropdown-section a{

    display:block;

    padding:8px 12px;

    border-radius:8px;

    color:var(--text);

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        padding-left .18s ease;

}

.dropdown-section a:hover{

    background:#F5F7FA;

    color:var(--primary);

    padding-left:18px;

}

/* =====================================
   Main
===================================== */

main{
    max-width:1100px;
    margin:0 auto;

	padding:
		calc(var(--header-height) + 1px)
		24px
		calc(var(--footer-height) + 17px);
}

/* =====================================
   Application Window
===================================== */

.app-window{
    width:100%;

    background:var(--surface);

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

    overflow:hidden;

    box-shadow:var(--shadow);
}

/* --- Title Bar --- */

.window-title{
    padding:var(--window-title-padding);

    background:var(--window-title-bg);

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

    font-size:1.2rem;
    font-weight:600;
}

/* --- Body --- */

.window-body{
    padding:var(--window-padding);

    display:flex;
    flex-direction:column;

    gap:var(--form-gap);
}

/* =====================================
   Homepage Content
===================================== */

.hero{
    width:min(900px,95vw);
    margin:8px auto 0;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.intro{
    display:flex;
    flex-direction:column;
    gap:10px;

    padding:26px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);

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

    box-shadow:var(--shadow);
}

.intro h1{
    font-size:2.4rem;
    color:var(--primary);

    margin:0;
}

.tagline{
    font-size:1.15rem;
    font-weight:600;

    color:var(--muted);
}

.intro p{
    line-height:1.65;
    max-width:760px;
}

.example{
    margin-top:8px;
    padding-top:12px;

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

    font-size:.95rem;
    color:var(--muted);
}

.example code{
    font-family:var(--font-mono);
    background:rgba(0,0,0,.05);
    padding:2px 6px;
    border-radius:6px;
}

.information{
    width:min(900px,95vw);
    margin:24px auto 0;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.info-box{
    padding:22px;
    background:rgba(255,255,255,.92);
    border:1px solid var(--border);
    border-radius:var(--radius);
    backdrop-filter:blur(8px);
}

.info-box h2{
    margin-bottom:14px;
    color:var(--primary);
}

.info-box ol,
.info-box ul{
    margin-left:20px;
    line-height:1.7;
}

.seo{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border);
    line-height:1.7;
    color:var(--muted);
}

/* =====================================
   Form
===================================== */

/* --- Input Group --- */

.input-group{
    display:flex;

    width:100%;

    background:var(--surface);

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

    overflow:hidden;

    transition:var(--transition);
}

.input-group input{
    flex:1;

    height:var(--control-height);

    padding:0 16px;

    border:none;
    outline:none;

    background:transparent;

    color:var(--text);

    font-family:var(--font-mono);
    font-size:.95rem;
}

.input-group input::placeholder{
    color:var(--muted);
    font-family:var(--font);
}

/* --- Input Focus --- */

.input-group:focus-within{
    border-color:var(--primary);
    box-shadow:var(--focus-ring);
}

/* --- Select --- */

select{
    width:100%;
    height:var(--control-height);

    padding:0 48px 0 16px;

    background:var(--surface);

    color:var(--text);

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

    outline:none;

    cursor:pointer;

    font:inherit;

    transition:var(--transition);

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    /* SVG cannot currently use CSS variables */

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8.9.9L8 12.1 2.3 6.4z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
}

select:hover{
    border-color:var(--draw-hover);
}

select:focus{
    border-color:var(--primary);
    box-shadow:var(--focus-ring);
}

/* --- Buttons --- */

.draw,
.run{
    font-family:var(--font);
    font-weight:600;

    cursor:pointer;

    transition:var(--transition);
}

.draw{
    width:180px;

    background:var(--draw);
    color:var(--text);

    border:none;
    border-left:1px solid var(--border);
}

.draw:hover{
    background:var(--draw-hover);
}

.run{
    height:var(--control-height);

    background:var(--primary);
    color:var(--button-text);

    border:none;
    border-radius:var(--radius);
}

.run:hover{
    background:var(--primary-hover);
}

.draw:focus-visible,
.run:focus-visible{
    box-shadow:var(--focus-ring);
}

/* =====================================
   Footer
===================================== */

footer{

    position:fixed;

    bottom:0;
    left:0;

    width:100%;
    height:var(--footer-height);

    display:grid;
    grid-template-columns:1fr auto 1fr;

    align-items:center;

    padding:0 var(--footer-padding);

    background:var(--surface);

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

    color:var(--muted);

    font-size:.9rem;

}

footer span{

    display:flex;
    align-items:center;

    position:relative;
    top:2px;

}

#version{

    justify-self:start;
    justify-content:flex-start;

}

.footer-center{

    justify-self:center;
    justify-content:center;

}

.footer-right{

    justify-self:end;
    justify-content:flex-end;

}

/* =====================================
   JSME Modal
===================================== */

.hidden{
    display:none !important;
}

.modal{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.35);

    z-index:1000;
}

.modal-window{

    width:760px;
    max-width:95vw;

    background:var(--surface);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    display:flex;
    flex-direction:column;
}

.modal-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 24px;

    background:var(--window-title-bg);

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

.modal-close{

    background:none;
    border:none;

    font-size:1.6rem;

    cursor:pointer;
}

.modal-body{
    flex:1;
    padding:16px;
}

#jsme_container{

    width:100%;
	max-width:700px;
    height:50vh;

    margin:0 auto;

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

    overflow:hidden;
}

.modal-footer{

    display:flex;
    justify-content:flex-end;
    gap:12px;

    padding:20px 24px;

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

}
.modal-footer button{

    width:110px;
    height:42px;

    border:none;
    border-radius:var(--radius);

    font-family:var(--font);
    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

#cancelJsme{

    background:var(--draw);
    color:var(--text);

}

#cancelJsme:hover{

    background:var(--draw-hover);

}

#applyJsme{

    background:var(--primary);
    color:var(--button-text);

}

#applyJsme:hover{

    background:var(--primary-hover);

}

/* =====================================
   Accessibility
===================================== */

.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;

}

/* =====================================
   Validation
===================================== */

.validation{

    min-height:20px;
    font-size:.9rem;
    font-weight:500;

}

.validation.success{

    color:#16a34a;

}

.validation.error{

    color:#dc2626;

}

/* =====================================
   Prediction Modal
===================================== */

#predictionModal .modal-window{

    width:600px;
    max-width:90vw;

}

#predictionModal .modal-body{

    max-height:400px;
    overflow-y:auto;

}

#outputContent{

    font-family:var(--font-mono);
    line-height:1.8;
    white-space:pre-wrap;

}

/* =====================================
   Team
===================================== */

.team-section{
    width:min(1000px,95vw);
    margin:24px auto;
}

.team-section h1{
    margin-bottom:12px;
    color:var(--primary);
}

.team-section > p{
    margin-bottom:28px;
    line-height:1.7;
    max-width:800px;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.team-card{
    padding:24px;
    background:rgba(255,255,255,.92);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.team-card h2{
    margin-bottom:8px;
    font-size:1.2rem;
}

.team-title{
    color:var(--muted);
    font-weight:600;
}

/* Team Photo */

.team-photo{
    width:120px;
    height:120px;

    margin:0 auto 18px;

    border-radius:50%;

    overflow:hidden;

    background:#f3f4f6;

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

    box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.team-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}

.team-photo.placeholder::after{
    content:"Coming Soon";

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:var(--muted);
    font-size:.85rem;
}

/* Categories */

.team-category{
    margin:48px 0 20px;

    padding-bottom:10px;

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

    color:var(--primary);

    font-size:1.6rem;
}

/* Team Introduction */

.team-intro{
    margin-bottom:36px;
}

.team-intro h1{
    margin-bottom:10px;
    color:var(--primary);
    font-size:2.5rem;
}

.team-tagline{
    margin-bottom:16px;

    font-size:1.1rem;
    font-weight:600;

    color:var(--primary);
}

.team-intro p{
    line-height:1.7;
}

/* Team Description */

.team-description{

    margin-top:12px;

    line-height:1.6;

    color:var(--muted);

    font-size:.95rem;

}

/* Team Links */

.team-links{

    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:18px;

    padding-top:16px;

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

}

.team-links a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.team-links a:hover{

    text-decoration:underline;

}

/* =====================================
   Research Downloads
===================================== */

.downloads-table{

    width:100%;

    margin-top:18px;

    border-collapse:collapse;

}

.downloads-table th{

    padding:14px;

    text-align:left;

    background:rgba(0,0,0,.04);

    color:var(--primary);

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

}

.downloads-table td{

    padding:14px;

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

}

.downloads-table tr:last-child td{

    border-bottom:none;

}

.downloads-table tr:hover{

    background:rgba(0,0,0,.025);

}

/* =====================================
   Mobile
===================================== */

@media (max-width:768px){

	header{

		padding:0 16px;

	}

	nav{

		gap:16px;

	}

	nav a{

		font-size:.9rem;

	}

    .app-window{

        width:min(95vw,700px);

    }

    .input-group{

        flex-direction:column;

    }

    .draw{

        width:100%;

        border-left:none;
        border-top:1px solid var(--border);

    }

    footer{

        flex-direction:column;
        justify-content:center;

        gap:6px;
        height:auto;
        padding:14px;

    }

    .modal-window{

        width:95vw;
        height:90vh;

    }

    #jsme_container{

        width:100%;
        height:340px;

    }

}