/**************************** General ********************************/
html {
  font-size: 18px;
  font-family: "Atkinson Hyperlegible", sans-serif;
  background-color: #f9f9f9;
  scroll-behavior: smooth;
  scroll-padding-top: 15rem;
  color: #333333;
}

body {
  display: flex;
  flex-direction: column;
  background-color: inherit;
  min-height: 100vh; /* Full viewport height */
  /*justify-content: space-between;*/
  /*flex-wrap: wrap;*/
  margin: 0;
}

h1 {
  color: #2d2d2d;
  margin: 1rem 0;
  font-size: 2rem;
}

h2 {
  color: #2d2d2d;
  font-size: 1.5rem;
}

h3 {
  color: #444444;
}

.tag {
  display: inline-block;
  background-color: #6d9e7a;
  color:  #f9f9f9;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 5px 10px;
  margin-left: 4px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Light shadow for depth */
    &:hover {
        background-color: #8fbc8f;  /* Slightly lighter olive green on hover */
        transform: scale(1.05);  /* Slight zoom effect */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);  /* Slightly darker shadow on hover */
    }
}

p {
  font-size: 1rem;
}

a {
  color: #6d9e7a;
  text-decoration: none;
}

/********************* Preamble *******************/

#preamble {
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure it's above other content */
  background-color: inherit; /* So it doesn't go transparent when scrolling */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
  padding: 0.5rem 1rem;
}

.menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  /* margin: 10px; */
  /* padding: 10px; */
}

.menu-button{
  color: #8fbc8f;
  border: 0;
  background: none;
  margin: 5px;
  padding: 5px;
}

.menu-icon {
  display: block;
  /* background-color: #ffffcc; */
}

.close-menu-icon {
  display: none;
  /* background-color: #ffffcc; */
}

.menu-container .sidetoc {
  position: absolute;
  display: none; /* initially hidden */
  top: 100%; /* below the button */
  left: 0;
  width: 15rem;
  /* background-color:  #f9f9f9; */
  /* border: 1px solid  #f9f9f9; */
  padding: 1em;
  z-index: 100; /* ensure it's on top */
  max-height: 80vh;
  overflow-y: auto;
  font-size: 1.1rem;
  /* font-weight: bold; */
  ul {
      list-style-type: none;
      padding-left: 0;
  }
  a {
      text-decoration: none;
      transform-origin: center;
      transition: font-weight 0.1s linear;
      &:hover {
        font-size: 1.2rem;
        font-weight: 600;
        /* transform: scale(2); */
      }
      &.active {
        font-size: 1.2rem;
        font-weight: 600;
        /* transform: scale(2); */
      }
  }
}

/* When menu is toggled */
.menu-container.expanded {
  .sidetoc {
      display: block;
  }
  .menu-icon {
      display: none;
  }
  .close-menu-icon {
      display: block;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  padding: 10px;
}

.nav-links {
  display: flex;
  flex-direction: row;
  font-size: 1.1rem;
  font-weight: bold;
}

.nav-item {
  display: flex;
  flex-direction: column; /* Stack icon above the text */
  align-items: center;
  margin: 0 20px;
  text-align: center;
}

.selected {
    color: #6d9e7a;
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-thickness: 0.2rem;
}

/* Hovering effects on the nav bar elements */
.nav-links a:hover,
.nav-links a:focus {
  color: #8fbc8f;
  font-size: 1.3rem;
  /* text-decoration: underline #8fbc8f; */
  text-decoration-thickness: 0.3rem;
  text-underline-offset: 0.1rem;
}

/********************* Postamble *******************/

/* #footnotes { */
/*     margin-top: auto; */
/* } */

#footnotes,
#text-footnotes {
    display: flex;
    flex-direction: column;
}

.footdef {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    text-align: left;
    gap: 0.3rem;
}

.home h2.footnotes {
  display: none;
}

.home .footdef sup {
  position: relative;
  top: 0.5rem; /* tweak this value to lower the sup a bit */
  font-size: 0.8rem;
  line-height: 1;
}

.home p.footpara,
.home .footdef {
    font-size: 0.8rem;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #333333;
    background-color: #8fbc8f;
    padding: 0.5rem;
}
footer p {
    font-size: 0.8rem;
    margin: 0; /* Remove the margin between paragraphs */
}
footer a {
   color: #f9f9f9;
}

/********************* Content container *******************/

.content {
    flex: 2 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: justify;
    margin: 2rem;
    padding: 2rem 33rem 15rem;
}

.home {
    justify-content: space-between;
    text-align: center;
}

header {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.post-info {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.post-dates {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.post-header-sep {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem; /* space between icon and lines */
  margin: 1rem 0rem;
}

.post-header-sep .line {
  flex: 1;
  height: 1px;
  background-color: #333333;
}
.online-presence {
  display: flex;
  justify-content: center; /* centers items horizontally */
  text-align: center;
  gap: 1rem; /* optional: space between icons*/
}

/* Enable and style side TOC in big screens */
#table-of-contents {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    margin: 10px;
    padding: 10px;
    ul {
      list-style-type: none;
    }
    a {
      text-decoration: none;
      transform-origin: center;
      transition: font-weight 0.1s linear;
      &:hover {
        font-size: 18px;
        font-weight: 600;
        /* transform: scale(2); */
      }
      &.active {
        font-size: 18px;
        font-weight: 600;
        /* transform: scale(2); */
      }
    }
}

/* /\* Style for the title (i.e. anchor element) of each blog post in the archive *\/ */
/* .year-posts li a { */
/*   color: #333333; */
/* } */

/***************** Styles for bibliographic entries *********************/
.csl-entry {
  display: flex; /* Use flexbox for alignment */
  align-items: flex-start; /* Align items at the start of the container */
  gap: 0.5em; /* Add spacing between the citation number and text */
  margin-bottom: 0.5em; /* Optional: Add spacing between entries */
}

/*Custom colour for in-line citations links*/
.cite-inline a {
  color: #0052cc;
  cursor: pointer;
}

.csl-left-margin {
  flex-shrink: 0; /* Prevent the citation number from shrinking */
  font-weight: bold; /* Optional: Make the citation number bold */
}

.csl-right-inline {
  flex-grow: 1;
  a {
    /* Color for link in the references section*/
    color: #800000;
  }
  /* Selecting the anchor elements of class "back-link" */
  a.back-link {
    color: #0052cc;
    margin-left: 10px;
  }
}



/********************** Dark mode styles ************************/
/* Target all the html with class "dark" and all its children */
html.dark {
  background-color: #1e1e1e;
  color: #E0E0E0;
  h1, h2 {
    color: #E0E0E0;;
  }
  h3 {
    color: #f2f2f2;
  }
  .csl-right-inline {
    a {
      color: #ff8243;
    }
    a.back-link {
      color: #73c2fb;
    }
  }
}

/********************** Light/Dark theme toggle stylying ************************/
.theme-button {
  border: 0;
  background: none;
  margin: 5px;
  padding: 5px;
}
.sun {
  display: block;
  color: #ffcc00;
  /* background-color: #ffffcc; */
  border-radius: 50%;
}
.moon {
  display: none;
  color: #fffae6;
}

/* The rule applies to .sun only when it is a descendant of an element with the .dark class*/
html.dark .sun {
  display: none;
}
/* The rule applies to .moon only when it is a descendant of an element with the .dark class*/
html.dark .moon {
  display: block;
  /* background-color: #ffffcc; */
  border-radius: 50%;
}

html.dark .menu-nav-button {
    color: #6d9e7a;
}

/***************************************************************/

/* Class provided by Phosphor icons (see Navigation.astro)*/
.ph-duotone {
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem; /* Space between icon and text */
}

/* Class provided by Phosphor icons (see Navigation.astro)*/
.ph-thin {
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem; /* Space between icon and text */
}

/* Class provided by Phosphor icons (see Navigation.astro)*/
.ph-light {
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem; /* Space between icon and text */
}

/* Class provided by Phosphor icons (see Navigation.astro)*/
.ph-bold {
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem; /* Space between icon and text */
  /* background-color: #2ca44e; */
}

/* Class provided by Phosphor icons (see ThemeToggle.astro)*/
.ph-fill {
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem; /* Space between icon and text */
  /* background-color: #2ca44e; */
}


/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* STYLES BELOW NOT REVISED  */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.mobile-menu {
  /*flex-grow: 5;*/
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

/* .hamburger .line { */
/*   display: block; */
/*   width: 40px; */
/*   height: 5px; */
/*   margin-bottom: 10px; */
/*   background-color: #009933; */
/* } */

/* #social-pictures { */
/*   padding: 0.5rem 0.5rem; */
/* } */

.menu-links {
  display: none;
  flex-flow: column wrap;
  flex: 1 0 100%;
  font-size: 1.2rem;
  font-weight: bold;
  align-items: center;
}

/********************** Styles for small-medium screens *****************************************/
/* Media query for small screens */
@media screen and (max-width: 640px) {
  html {
      font-size: 14px;
  }
  .content{
      padding: 2rem 2rem 15rem;
  }
  .menu-nav-button {
      background: none;
      border: 0;
      margin: 5px;
      padding: 5px;
  }
  .nav-links {
    display: none;
  }
  .nav-links-menu {
    display: inline-block;
    position: relative;
      .nav-links-dropdown {
          position: absolute;
          display: none; /* initially hidden */
          background: #f5f5f5;
          flex-direction: row;
          top: 100%; /* below the button */
          left: 50%;
          transform: translateX(-50%); /* center it */
          margin-top: 0.5rem; /* spacing below the button */
          border: 1px solid #ccc;
          border-radius: 0.5rem;
          padding: 0.5rem;
          z-index: 1000;
          font-size: 0.7rem;
      }
  }
  .nav-links-menu.expanded {
    .nav-links-dropdown {
        display: flex;
    }
  }

  .sidetoc {
    display: none;
    background: #f5f5f5;
    top: 100%; /* directly below the navbar */
    width: 100%;
    left: 0;
    opacity: 1; /* fully visible */
    z-index: 1100;
    overflow: hidden; /* hide content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    transition: height 0.3s ease-in-out; /* smooth transition */
    padding: 1rem;
  }

  html.dark .sidetoc,
  html.dark .nav-links-dropdown {
      background: #2a2a2a;
  }
  .menu-container.expanded .sidetoc{
      display: block;
  }
}


/********************** Styles/Layout for big screens *****************************************/
/* Media query for big screens */
@media screen and (min-width: 1024px) {
    .nav-links-menu {
        display: none;
    }
}



@media screen and (min-width: 640px) {
  .mobile-menu {
    display: none;
  }
}

/* Media query for medium screens */
@media screen and (max-width: 1024px) {
  .sidebar {
    display: none;
  }
  .side-toc {
    display: none;
  }
  /* .side-footnotes { */
  /*   display: none; */
  /* } */
}