/* Table of Contents
==================================================
# Basic Typography
# Navigation Bar 
# Writing Content 
# Home Button 
# Table Styling
*/


/*--------------------*/
/* BASIC TYPOGRAPHY */
/*--------------------*/

:root {
  --micah_grey: hsl(0, 0%, 25%);
}

html {
  font-size: 16px; /* This sets the base font size for the document */
}

body {
    background: hsl(0, 100%, 100%);
    color: var(--micah_grey);
    font-family: 'Alliance No.1', Arial, sans-serif;
    font-weight: 300;
    font-size: calc(1rem + 0.3vw);
}

h1 {
    text-align: center;
    margin-top: 60px;
    font-family: 'Alliance No.2', Arial, sans-serif;
    font-weight: 300;
    margin-bottom: calc(1rem + 2vw); /* add some space below the heading */
    padding: 0 20px; /* add left and right padding */
}

/*setting up the break*/
hr {
    size: 1px;
    margin-bottom: calc(1rem + 2vw); /* add some space below */
}


/*--------------------*/
/* Navigation Bar */
/*--------------------*/

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    background-color: hsl(0, 100%, 100%);
    padding: 10px 10%;
    z-index: 1;
    font-family: 'Alliance No.2', Arial, sans-serif;
    font-size: 1rem;
}

.navbar a {
    text-decoration: none;
    color: var(--micah_grey);
    transition: background 0.5s, color 0.5s;
    padding: 2px 5px 2px 5px;
}

.navbar .work-link {
    border: 1px solid var(--micah_grey);;
}

.navbar a:hover {
    background: var(--micah_grey);
    color: hsl(0, 100%, 100%);
}

/*--------------------*/
/* Writing Content */
/*--------------------*/


#writing_content_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

/* Main header image styling */
#writing_content_container img.header_img {
  width: 40%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Content images styling - applies to all images except the header image */
#writing_content_container img:not(.header_img) {
  width: 80%;
  max-width: calc(30rem + 30vw);
  margin: 20px auto;
  display: block;
}

/* Side-by-side images container */
.image-comparison-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: calc(30rem + 30vw);
  margin: 20px auto;
}

/* This is the updated more specific selector */
#writing_content_container .image-comparison-container img {
  width: 48%; /* Slightly less than 50% to account for spacing */
  max-width: 48%;
  margin: 0 0 10px 0;
  display: inline-block; /* Changed from block to inline-block */
}

#writing_content_container .writing_text {
  width: calc(30rem + 30vw);
  overflow-y: auto;
  height: 100%;
  right: 0;
  position: relative;
}

/*adding special features for section titles*/
#writing_content_container .writing_text .section-title {
    font-size: calc(1rem + 0.7vw);
    margin-top: calc(1rem + 2vw);
}

/* Mathjax formatting */
/* MathJax styling to match dynamic font sizing */
.MathJax {
  font-size: calc(1rem + 0.3vw) !important; /* Match body text */
}

/* For displayed/centered equations */
.MathJax_Display {
  width: 100% !important;
  max-width: calc(30rem + 30vw) !important;
  margin: 20px auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.MathJax_Display .MathJax {
  font-size: calc(1rem + 0.3vw) !important;
  display: inline-block !important;
}

/* For MathJax in section titles */
.section-title .MathJax,
.section-title .mjx-chtml {
  font-size: calc(1rem + 0.7vw) !important;
}

/* Container for equations to match image styling */
.equation-container {
  width: 80%;
  max-width: calc(30rem + 30vw);
  margin: 20px auto;
  text-align: center;
  overflow-x: auto;
}

/* Make sure MathJax containers inside equation-container scale properly */
.equation-container .MathJax_Display {
  width: 100% !important;
  margin: 0 auto !important;
}

/*--------------------*/
/* Table Styling */
/*--------------------*/

/* Basic table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: calc(1rem + 0.3vw);
  font-family: 'Alliance No.1', Arial, sans-serif;
}

/* Table header styling */
thead {
  border-bottom: 2px solid var(--micah_grey);
}

th {
  text-align: left;
  padding: 8px;
  font-family: 'Alliance No.2', Arial, sans-serif;
  font-weight: 400;
}

/* Table body styling */
td {
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid rgba(64, 64, 64, 0.1);
}

/* Links within tables */
table a {
  color: var(--micah_grey);
  text-decoration: underline;
  transition: color 0.3s;
}

table a:hover {
  color: hsl(0, 0%, 50%);
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/*setting up for mobile*/
@media only screen and (max-width: 1000px) {
    #writing_content_container img {
        margin: 0 auto;
    }
    #writing_content_container .writing_text.mobile {
        width: 100%;
        padding: 0px;
    }
    /* Make header image larger on tablets */
    #writing_content_container img.header_img {
        width: 60%;
    }
    
    /* Table adjustments for tablets */
    table {
        font-size: 1rem;
    }
    
    /* MathJax adjustments for tablets */
    .equation-container {
        width: 90%;
    }
    
    .MathJax {
        font-size: 1rem !important;
    }
}

@media only screen and (max-width: 768px) {
    /* Make the image comparison container a column instead of row */
    .image-comparison-container {
        flex-direction: column;
    }
    
    /* Make images full width inside the comparison container */
    #writing_content_container .image-comparison-container img {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    /* Remove margin from the last image */
    #writing_content_container .image-comparison-container img:last-child {
        margin-bottom: 0;
    }
    
    /* Table adjustments for smaller screens */
    th, td {
        padding: 6px 4px;
    }
}

@media only screen and (max-width: 600px) {
    #writing_content_container {
        flex-direction: column;
    }
    #writing_content_container .writing_text.mobile {
        width: 100%;
        font-size: 1rem;
        padding: 0px;
    }
    /* Make header image full width on mobile */
    #writing_content_container img.header_img {
        width: 90%;
    }
    
    /* Mobile table styles - make it more compact */
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 4px 2px;
    }
    
    /* Optional: For very small screens, consider a scrollable table container */
    .table-container {
        overflow-x: auto;
    }
    
    /* MathJax adjustments for mobile */
    .equation-container {
        width: 100%;
    }
    
    .MathJax_Display {
        max-width: 100% !important;
        margin: 10px auto !important;
    }
    
    .MathJax {
        font-size: 0.9rem !important;
    }
    
    /* Scale down equation text to ensure it fits width */
    .MathJax_Display .MathJax {
        transform-origin: center !important;
        transform: scale(0.9) !important;
    }
}

/*--------------------*/
/* Home Button */
/*--------------------*/


.home-button {
    width: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: var(--micah_grey);
    border-width: 1px;
    transition: all 500ms;
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    font-family: 'Alliance No.2', Arial, sans-serif;
    text-decoration: none;
    margin-top: 20px;
}

.home-button a {
    text-decoration: none;
    border: var(--micah_grey);
    width: 10em;
    color: var(--micah_grey);
    transition: background 0.5s, color 0.5s;
    padding: 2px 5px 2px 5px;
}

.home-button a:hover {
    background: var(--micah_grey);
    color: hsl(0, 100%, 100%);
}

.article-date {
    width: 60%;
    margin: 0 auto;
    color: var(--micah_grey);
    margin-top: calc(-1rem - 1vw);
    margin-bottom: calc(1rem + 1vw);
    font-family: 'Alliance No.1', Arial, sans-serif;
    font-weight: 300;
    font-size: calc(1rem + 0.3vw);
    text-align: center; 
}