/*
CSS styles for research website

Need to consolidate color palette eventually. There are a lot of similar colors used
Want to have same colors for text input boxes, buttons, etc.

Author: Nicholas E. Johnson
Created: 11 September 2025
*/


/* //////////////////////////////////////////////////////// */
/* //////////////////// Default Colors //////////////////// */
/* //////////////////////////////////////////////////////// */

:root{
	--bg:#f8fafc;
	--card:#ffffff;
	--muted:#475569;
	--accent:#0284c7;
	--glass:rgba(0,0,0,0.03);
	--radius:12px;
	--text:#1e293b;
	--heading:#000;
	--border:rgba(0,0,0,0.08);
	--modal-bg:#ffffff;

}
body.dark{
	--bg:#0f1724;
	--card:#0b1320;
	--muted:#9aa4b2;
	--accent:#7dd3fc;
	--glass:rgba(255,255,255,0.035);
	--text:#e6eef6;
	--heading:#ffffff;
	--border:rgba(255,255,255,0.08);
	--modal-bg:#1b1c1e;

}


/* ///////////////////////////////////////////////////////// */
/* ///////////////// Basic Page Formatting ///////////////// */
/* ///////////////////////////////////////////////////////// */

/* Not sure if I like this */
/**{box-sizing:border-box}*/

html,body {
	height:100%;
}
body {
	margin:0;
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
	color:var(--text);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	transition:background .3s,color .3s
 }
body.dark {
	color:var(--text);
}

small {
    color: var(--muted)
}



/* ///////////////////////////////////////////////////////// */
/* ////////////////////// Page Header ////////////////////// */
/* ///////////////////////////////////////////////////////// */

header {
	display:flex;
	gap:16px;
	align-items:center;
	justify-content:space-between;
	margin-bottom:20px;
	max-width:100%;
}

p.lead {
	margin:0;
	color:var(--muted);
	font-size:14px
}


/* ////////////////////////////////////// */
/* //////////////// Logo //////////////// */
/* ////////////////////////////////////// */

/* Logo and branding on home page */
.brand {
	display:flex;
	gap:14px;
	align-items:center
}
.logo {
	width:56px;
	height:56px;
	border-radius:12px;
	background:linear-gradient(135deg,var(--accent),#60a5fa);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.2)
	
	/* If logo contained text*/
	/*font-weight:700;*/
	/*color:#fff;*/
}

/*
.mini-logo{width:15px;height:15px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#60a5fa);align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2)}
*/


/* /////////////////////////////////////// */
/* /////////// Page Navigation /////////// */
/* /////////////////////////////////////// */

/* Navigation Bar and Theme Toggle Button */
nav {
	display:flex;
	gap:10px;
	align-items:center
}
nav a {
	color:var(--muted);
	text-decoration:none;
	padding:8px 12px;
	border-radius:10px
}
nav a:hover {
	background:var(--glass);
	color:var(--accent)
}

.toggle-theme {
	cursor:pointer;
	border:1px solid rgba(0,0,0,0.1);
	padding:6px 10px;
	border-radius:8px;
	background:var(--card);
	font-size:13px;
	color:var(--muted)
}

.toggle-theme:hover {
	background:var(--glass);
	color:var(--accent)
}

body.dark .toggle-theme {
	border:1px solid rgba(255,255,255,0.1);
}


/* //////////////////////////////////////////////////////// */
/* //////////////////////// Footer //////////////////////// */
/* //////////////////////////////////////////////////////// */

footer {
	margin-top:28px;
	color:var(--muted);
	font-size:13px;
	text-align:center
}


/* ////////////////////////////////////////////////////////// */
/* /////////////////// Content Containter /////////////////// */
/* ////////////////////////////////////////////////////////// */

.container {
	max-width:1000px;
	margin:32px auto;
	padding:24px
}


/* ///////////////////////////////////////////////////////// */
/* ///////////////////// Content Cards ///////////////////// */
/* ///////////////////////////////////////////////////////// */

section h2 {
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 12px 0
}

.card {
	background:var(--card);
	padding:18px;
	border-radius:var(--radius);
	box-shadow:0 4px 12px rgba(0,0,0,.08);
	position:relative;
	
}


/* //////////////////////////////////////////////////////// */
/* ///////////////////// Publications ///////////////////// */
/* //////////////////////////////////////////////////////// */
.pub-list {
	display:flex;
	flex-direction:column;
	gap:12px;
}
.pub {
	padding:12px;
	border-radius:10px;
	background:rgba(2,132,199,0.04);
}
.pub .meta {
	color:var(--muted);
    font-size:/13px;
}
.pub .title {
	color:var(--heading);
	font-weight:600;
	margin:6px 0;
}


/* ///////////////////////////////////////////////////////// */
/* //////////////////////// Buttons //////////////////////// */
/* ///////////////////////////////////////////////////////// */
.btn {
	 display:inline-block;
	 padding:10px 14px;
	 border-radius:10px;
	 text-decoration:none;
	 font-weight:600;
	 cursor: pointer; /* shows hand cursor */
	 border: 1px solid var(--border);
}

.btn-primary {
    background: linear-gradient(90deg, var(--accent), #60a5fa);
    color: #fff;
	border: none;
}

.btn-ghost {
    border: 1px solid var(--border); /*rgba(0,0,0,0.08);*/
    color: var(--muted);
    /*background-color: inherit;*/
    /* matches parent background */
}


/* //////////////////////////////////////////////////////// */
/* //////////////////////// Modals //////////////////////// */
/* //////////////////////////////////////////////////////// */

/* Modal Background */
.modal-background{
	position:fixed;
	inset:0;
	/*background:rgba(0,0,0,0.6);*/
	display:none;
	align-items:center;
	justify-content:center;
	overflow: hidden;
    z-index: 9999;
    opacity: 1; /* required for JS fade */
}

/* Modal Box */
.modal-content{
	background:var(--modal-bg);
    color: var(--text);
	padding:18px; /*1.5rem;*/
	border-radius:12px;
	max-width:720px; /*450px;*/
	width:94%; /*90%*/
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: relative;
	
	max-height: 90vh;   /* max 80% of screen height */
	overflow-y: auto;   /* scrolls only inside modal */
	position: relative; /* ensures close button stays visible */
}

/* Close button */
.close-modal {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 1.5rem;
  cursor: pointer;
}