/* Import Google Fonts: Poppins for titles, EB Garamond for body */
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=EB+Garamond:wght@400&display=swap";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital@0;1&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quattrocento:wght@400;700&display=swap'); */


:root {
  /* Font families */
  --serif-font: 'EB Garamond', 'Times New Roman', serif;
  --sans-serif-font: 'Jost', 'Futura', 'Helvetica Neue', sans-serif;
  
  /* Hiroshige palette colors */
  --hiroshige-1: #e76254;
  --hiroshige-2: #ef8a47;
  --hiroshige-3: #f7aa58;
  --hiroshige-4: #ffd06f;
  --hiroshige-5: #ffe6b7;
  --hiroshige-6: #aadce0;
  --hiroshige-7: #72bcd5;
  --hiroshige-8: #528fad;
  --hiroshige-9: #376795;
  --hiroshige-10: #1e466e;
  
  /* Primary colors following Hiroshige order preference */
  --primary-color: var(--hiroshige-10);  /* 1e466e - darkest blue */
  --secondary-color: var(--hiroshige-2); /* ef8a47 - warm orange */
  --accent-color: var(--hiroshige-9);    /* 376795 - deep blue */
  --text-color: #000000;     
  --light-bg: #fefefe;
  --section-bg: #f8f9fa;
}

/* Basic Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* FONT CHANGE: Use serif font variable for body text */
  font-family: var(--serif-font);
  font-size: 1.1rem; /* Slightly larger for better readability */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-bg);
}

/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .header-title {
  margin-bottom: .5rem;
  /* FONT CHANGE: Use sans-serif font variable */
  font-family: var(--sans-serif-font);
  font-weight: 700; /* Bold Poppins */
  line-height: 1.2;
  color: inherit;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--hiroshige-7);
  text-decoration: underline;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width:768px) { .container { max-width: 720px; } }
@media(min-width:992px) { .container { max-width: 960px; } }
@media(min-width:1300px) { .container { max-width: 1140px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col-4, .col-6, .col-12, .col-md-4, .col-md-6, .col-md-8, .justify-content-start {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}
.justify-content-start { justify-content: flex-start!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-3 { margin-bottom: 1rem!important; }
.mt-3 { margin-top: 1rem!important; }
.mt-6 { margin-top: 4rem!important; }
.pt-4 { padding-top: 1.5rem!important; }
@media (min-width: 768px) {
  .pt-md-10 { padding-top: 6rem!important; }
}

/* Page structure */
.page { display: flex; min-height: 100vh; flex-direction: column; }
.page .wrapper { flex: 1 0 auto; }

/* Header */
.header {
  color: var(--primary-color);
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 15px rgba(50, 50, 93, .2);
  padding: 0.5rem 0;
}
.header .container { display: flex; justify-content: space-between; align-items: center; }
.header .header-title { margin: 0; }
.header .header-title a { text-decoration: none; color: var(--primary-color); }

/* Footer */
.footer { background: var(--primary-color); padding: 10px 0; }
.footer .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-direction: column; }
@media(min-width:576px) { .footer .footer-inner { flex-direction: row; } }
.footer .footer-menu { list-style: none; margin: 0; padding: 0; flex: 1; text-align: center;}
.footer .footer-menu li { display: inline-block; margin-right: 15px; }
.footer .footer-menu li a { color: var(--hiroshige-5); text-decoration: none; font-size: .9rem; font-family: var(--sans-serif-font); }
.footer .footer-menu li a:hover { text-decoration: underline; }
.footer .copyright { font-weight: 700; color: var(--hiroshige-5); text-decoration: none; font-size: .9rem; font-family: var(--sans-serif-font);}

/* Main Menu */
.main-menu { display: none; }
@media(min-width:768px) { .main-menu { display: block; } }
.main-menu > ul { display: flex; align-items: center; list-style: none; margin:0; padding:0; }
.main-menu > ul > li { list-style: none; font-size: 1.1rem; }
.main-menu > ul > li > a { 
  padding: 10px 14px; 
  display: inline-block; 
  text-decoration: none; 
  color: var(--primary-color);
  /* FONT CHANGE: Use sans-serif font variable for navigation */
  font-family: var(--sans-serif-font);
  font-weight: 400; /* Lighter than titles */
  font-size: 1rem;
}
.main-menu > ul > li > a:hover { background: var(--primary-color); color: var(--hiroshige-5); }

/* Hamburger Menu (from hamburgers.css) */
.hamburger { padding: 15px; display: inline-block; cursor: pointer; transition-property: opacity,filter; transition-duration: .15s; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
@media (min-width: 768px) { .hamburger { display: none; } }
.hamburger-box { width: 36px; height: 23px; display: inline-block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 36px; height: 3px; background-color: var(--primary-color); border-radius: 3px; position: absolute; transition-property: transform; transition-duration: .15s; transition-timing-function: ease; }
.hamburger-inner { display: block; top: 50%; margin-top: -1.5px; }
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.hamburger--slider.is-active .hamburger-inner { transform: translate3d(0,10px,0) rotate(45deg); }
.hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.14285714px,-7px,0); opacity: 0; }
.hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0,-20px,0) rotate(-90deg); }

/* Mobile Menu Overlay */
.main-menu-mobile { 
  position: fixed; 
  background: rgba(55, 103, 149, 0.95); 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100vh; 
  opacity: 0; 
  visibility: hidden; 
  transition: all .35s ease; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 1000;
  pointer-events: none;
}
.main-menu-mobile.open { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: auto;
}
.main-menu-mobile ul { 
  font-size: 2rem; 
  text-align: center; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}
.main-menu-mobile ul li a { 
  color: #fff; 
  text-decoration: none; 
  font-family: var(--sans-serif-font); 
  padding: 10px; 
  display: block; 
  transition: color 0.2s ease;
}
.main-menu-mobile ul li a:hover {
  color: var(--hiroshige-5);
}
body.lock-scroll { 
  overflow: hidden; 
}

/* Mobile Menu Close Button */
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 1001;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
  color: var(--hiroshige-5);
  transform: scale(1.1);
  outline: none;
}
.mobile-menu-close span {
  display: block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 20px;
}

/* Home Page Specific */
.page-home .banner {
  width: 100%;
  padding-bottom: 25%; /* Adjust this for banner height */
  background-image: url('../images/BannerWebsite.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


/* News List */
.news-list {
  margin-top: 1rem;
}
.news-item {
  display: flex;
  margin-bottom: 0.75rem;
  align-items: flex-start;
}
.news-date {
  font-weight: bold;
  color: var(--primary-color);
  min-width: 120px;
  flex-shrink: 0;
  margin-right: 1rem;
  font-size: 0.95rem;
  font-family: var(--sans-serif-font);
}
.news-update {
  flex: 1;
  line-height: 1.5;
}

.page-home .tile { text-align: center; margin-bottom: 2rem; }
.page-home .tile img { max-width: 80%; height: auto; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out; }
.page-home .tile img:hover { transform: scale(.95); }
.page-home h4, .page-home h5 { color: var(--primary-color); }
.page-home .tile h5 { margin-top: 1rem; }

/* Publications list */
.publications ul { list-style: none; padding-left: 0; }
.publications ul li { margin-bottom: 1rem; }
.publication .authors { display: inline; list-style: none; padding-left: 0; font-size: 0.95rem; }
.publication .authors li { display: inline; margin: 0; }
.publication .authors li:after { content: ", "; }
.publication .authors li:last-child:after { content: "."; }
.publication .title { font-weight: 700; }
.publication .venue { font-style: italic; }
.publication .ai { vertical-align: middle; margin-left: 5px; font-size: 1.2em; }

/* Teaching page course list */
.course-list {
  list-style: none;
  padding-left: 0;
}
.course-list li {
  margin-bottom: 0.25rem;
}

/* Research page project blocks */
.project-block {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}
.project-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.project-title {
  margin-bottom: 1.5rem;
}
.project-block img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.project-meta {
  font-weight: bold;
}
.project-description {
  margin-top: 1rem;
}
.project-collaborators, .project-links {
  margin-top: 1rem;
}

/* Generic page content */
.page-content .title-1 { color: var(--primary-color); }
.content { color: var(--text-color); }
.content h3, .content h5 { color: var(--primary-color); }

/* About page photo styling */
.about-photo {
  width: 100%;
  border-radius: 5px;
  margin-top: 1.7rem; /* Adjust to align with the H1 title */
}