:root {
  --bg: #f1ddbf;
  --mainbg: #ffffff;
  --menu: #b00;
  --mainhover: white;
}

@font-face{
    font-family: 'Fira Sans';
    src:
      local('Fira Sans Light'),
      local('FiraSans-Light'),
      url('/fonts/CrimsonText-Regular.woff') format('woff');
    font-weight: 300;
    font-style:  normal;
}

@font-face{
    font-family: 'Fira Sans';
    src:
      local('Fira Sans'),
      local('FiraSans-Regular'),
      url('/fonts/CrimsonText-Regular.woff') format('woff');
    font-weight: 400;
    font-style:  normal;
}

@font-face{
    font-family: 'Fira Sans';
    src:
      local('Fira Sans Italic'),
      local('FiraSans-Italic'),
      url('/fonts/CrimsonText-Italic.woff') format('woff');
    font-weight: 400;
    font-style:  italic;
}

@font-face{
    font-family: 'Fira Sans';
    src:
      local('Fira Sans Bold'),
      local('FiraSans-Bold'),
      url('/fonts/CrimsonText-Bold.woff') format('woff');
    font-weight: 700;
    font-style:  normal;
}

html
{
  font-size: large;
  overflow-y: scroll;

  /* Not sure how to solve this more elegantly; but it ensures that the
   * navigation bar does not cut off any anchors */
  scroll-padding-top: 5em;
}

body
{
  line-height:  1.6;
  color:        #444;
  text-align:   justify;
  margin:       0;
  padding:      0;
  font-family: 'Fira Sans', sans-serif;
  background-color: #eeeeee ; /* single source of truth */
  /* opacity:0.5; */
}



header
{
  padding:        0px;
  border-bottom:  1px solid lightgray;
  position:       fixed;
  top:            0;
  width:          100%;
  background:     var(--mainbg);
}

table
{
  line-height:  1.0;
  margin-left:  auto;
  margin-right: auto;
}

main
{
  max-width:  40em;
  margin:     5% auto;
  min-height: 40em;
  padding:    5em;
  border:     1px solid lightgray;
  background-color: var(--mainbg);
}

figure
{
  margin: 5% auto;
}

figure.center
{
  text-align: center;
}

figure.person img
{
  border-radius: 50%;
}

figure.publication
{
  margin-left : auto;
  margin-right: auto;
}

figcaption
{
  font-weight: 300;
}

h1, h2, h3
{
  line-height: 1.2
}

h1
{
  font-size:     2.0em;
  margin-top:    1.0em;
  margin-bottom: 1.0em;
}

h2
{
  font-size:     1.5em;
  margin-top:    0.5em;
  margin-bottom: 0.5em;
}

#logos ul
{
  list-style-type:  none;
  padding-left:     0px;
  margin:           0;
  overflow:         hidden;
  width:            100%;
  display:          inline;
}
* Main site header container */
.site-header {
  width: 100%;
}

/* Logos section */
.logos-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px solid #ddd;
}

/* Logo containers */
.logo-left,
.logo-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ensure both logos have the same height */
.logo-left img,
.logo-right img {
  height: 40px; /* Fixed height for consistency */
  width: auto;
}

.logo-left span,
.logo-right span {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

/* Center content */
.header-center {
  flex: 1;
  text-align: center;
  padding: 0 20px;
}

.header-center h1 {
  margin: 0;
  color: #666;
  font-size: 1.2rem;
  font-style: italic;
}

/* Menu section */
.menu-section {
  display: flex;
  align-items: stretch;
  background: var(--menu);
  margin: 0;
  width: 100%;
  min-height: 50px;
}

/* Menu list */
.menu-section ul {
  justify-content: center;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

/* Menu items */
.menu-section li {
  display: flex;
  align-items: center;
  background: var(--menu);
  transition: background-color 0.3s ease;
  border-right: 1px solid var(--menu);
}

.menu-section li:last-child { 
  border-right: none; 
}

.menu-section li:hover {
  background: var(--mainhover);
}

.menu-section a {
  display: block;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.menu-section li:hover a {
  color: var(--menu);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logos-section {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .logo-left,
  .logo-right {
    justify-content: center;
  }
  
  .header-center {
    order: -1;
  }
  
  .menu-section ul {
    flex-direction: column;
  }
  
  .menu-section li {
    border-right: none;
    border-bottom: 1px solid #900;
  }
  
  .menu-section a {
    text-align: center;
  }
}

footer
{
  padding:     10px;
  border-top:  1px solid lightgray;
  padding-top: 0.5em;
  background:  #f2f2f2;
}

#footer-logos
{
  margin:     1% auto;
  text-align: center;
}

#footer-text
{
  width: 100%;
  margin: 1% auto;
}

.people-card-container {
  display: flex;
  max-width: 100%;
  margin: auto;
  flex-wrap: wrap;
  row-gap: 1em;
  column-gap: 1em;
  justify-content: left;
}

.card-person {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);

  flex: 1 1 500px; /* increase minimum width */
  max-width: 800px; /* wider max width */
}

/* Image */
.card-person figure.person {
  margin: 0;
  flex-shrink: 0;
}

.card-person figure.person img {
  border-radius: 50%;
  width: 120px;  /* slightly bigger image */
  height: 120px;
  object-fit: cover;
}

/* Details */
.card-details {
  flex-grow: 1;
  text-align: left;  /* force left alignment */
}

.card-name {
  font-weight: bold;
  font-size: 1.5em;
}

.card-job {
  font-style: italic;
  color: #555;
  margin-bottom: 15px;
}

/* Icons */
.card-icons {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
  gap: 15px;
}

.card-icons li img {
  width: 16px;
  height: 16px;
}

/* Contact info */
.card-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1em;
}

.card-contact span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-contact img {
  width: 16px;
  height: 16px;
}

/* Responsive: stack image on top on small screens */
@media (max-width: 600px) {
  .card-person {
    flex-direction: column;
    align-items: left;
    text-align: left;
  }

  .card-person figure.person img {
    width: 120px;
    height: 120px;
  }

  .card-details {
    width: 100%;
  }

  .card-icons {
    justify-content: center;
  }
}

/* 
.card-title
{
  font-size  : 1.0rem;
  font-weight: bold; 
  margin-bottom: 3px;
}

.card-venue
{
  font-size: 1.0rem;
}

.card-category
{
  font-weight:    bold; 
  text-transform: uppercase;
}

.card-job
{
  font-style: italic;
  font-size:  smaller;
}

.card-bio, .card-summary
{
  clear:       both;
  padding-top: 1em;
  font-size:   smaller;
}

.card-summary
{
  font-size: 0.90rem;
}

.card-profiles dt, .card-profiles dd
{
  display  : block;
  float    : left;
  font-size: smaller;
  display: flex;
}

.card-references
{
  font-size  : small;
  padding-top: 0.5em;
}

.card-profiles dt
{
  clear: left;
  width: 10%;
}

.card-tool 
{
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 10px;
  flex-wrap  : wrap;
} */

.tool-left {
  flex: 3; /* 30% of the width */
  padding: 10px;
}

.tool-right {
  flex: 7; /* 70% of the width */
  justify-content: space-between; /* Ensures spacing between text and icons */
  align-items: center;
  padding: 10px;
}

.tool-title-container {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Ensures spacing between text and icons */
  width: 100%;
}

.tool-title {
  font-size  : 1.50rem;
  font-weight: bold; 
  /*font-size: larger;*/
  flex: 4; /* Takes up 80% of the space */
}

.tool-icons {
  flex: 1; /* Takes up 20% of the space */
  display: flex;
  justify-content: space-around; /* Evenly space icons */
}

.wiki-toc
{
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 10px;
  flex-wrap  : wrap;
}

/* Stops any superscripts from ruining our lines */
sup
{
    line-height: 0;
}

time
{
  font-weight: bold;
}

#toc
{
  padding:        10px;
  border-bottom:  1px solid lightgray;
  border-top:     1px solid lightgray;
}

@media (max-width: 960px)
{
  nav li, #TableOfContents li, #logos li
  {
    display: block;
  }

  nav li
  {
    padding-left: 1em;
  }

  /* Ensures that the header does not overlap with the content */
  header
  {
    position: relative;
    padding: 0px;
  }

  
  th, td
  {
    display: block;
    width:   100%;
  }

  main
  {
    padding: 1em;
  }
}

@media only screen and (max-width: 690px) {
  .card-tool {
    display: block;
  }
  .tool-left {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

article.news
{
  margin-bottom: 1em;
}

ul.card-icons 
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-icons img 
{
  width: 16px; 
}

ul.card-icons li 
{
  display: inline;
  margin: 0; 
}

.card-person 
{
  width: 200px; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-content: center;
  text-align: center;
}

.card-person a 
{
  text-decoration: none;
}

/*
 * Styling publication lists
 */

.publications ul
{
  list-style-type: none;
  padding-left: 0px;
}

.publications li
{
  padding: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 10px; /* Space between images */
  max-width: 100%;
  margin: auto;
  justify-content: center; /* Extra centering insurance */
}

.project-column a {
  display: block; /* Ensures the link fills the grid cell */
  width: 100%;
  height: 100%;
}

.project-column img {
  width: 100%;
  height: auto;
  object-fit: cover;
}