@font-face {
    font-family: 'Chom';
    src: url('/fonts/Chomsky.woff2') format('woff2');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "Chelt";
    src: url('/fonts/CheltenhamStdBookCondIt.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Chelt-light";
    src: url('/fonts/CheltenhamStdLight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* General Styles */
body {
    font-family: 'Georgia', serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

}

/* Title Section: Fully Centered */
.title-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-container {
    text-align: center;
    padding-top: 5px;
    background-color: white;
    position: relative;
    z-index: 500;
    transition: all 0.3s ease;
    /* Smooth transition effect */
}

#center {
    text-align: center;
    font-family: 'Chom', 'Times New Roman', serif, serif;
    margin-top: 0;
    margin-bottom: 0;
}

/* Content starts below the title */
.article-container,
.footer {
    padding-top: 20px;
    text-align: center;
}

.related-articles {
    padding-top: 20px;
    text-align: center;
    width: 90%;
    margin: 0;
    padding: 0;
}


/* General Nav Styling */
.header {
    padding: 10px;
    padding-top: 10px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 4px double #ababab;
    background-color: white;
    position: relative;
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Centering and spacing for the nav bar */
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    flex-wrap: wrap;
    width: auto;
}

.nav a {
    text-decoration: none;
    color: black;
    padding: 5px 10px;
    position: relative;
}

.nav a:hover {
    text-decoration: underline;
}

.separator {
    margin: 0 15px;
    color: #ccc;
}

/* Dropdown Menu Styling */
.nav-section {
    position: relative;
}

.dropdown-content {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    /* Full width of the viewport */
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    /* Adds a shadow effect */
    z-index: 1;
    /* Ensures the dropdown stays above other content */
    padding: 10px 0;
    /* Padding for dropdown content */
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    /* Centers the text inside the dropdown */
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.nav-section:hover .dropdown-content {
    display: block;
}

/* Hide the nav links by default for mobile */
.nav {
    display: flex;
    /* Default flex display */
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: max-height 0.3s ease;
}

/* Responsive styling for mobile */
@media (max-width: 768px) {
    .nav {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 50px;
        /* Position it under the header */
        left: 0;
        background-color: white;
        z-index: 1;
    }

    /* Display the nav when the active class is toggled */
    .nav.active {
        display: flex;
    }
}

/* Main Article Styles */
.article-container {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-color: #fff;

}

.main-article {
    max-width: 800px;
    text-align: left;
}

.article-title {
    font-family: 'Chelt', serif;
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #000;
    max-width: 600px;
    margin-left: 12%;
    margin-right: 12%;

}

.annotation-title {
    font-family: 'Chelt-light', serif;
}


.article-title-sub {
    font-family: 'Georgia', serif;
    font-size: 21px;
    line-height: 1.3;
    max-width: 600px;
    margin-left: 12%;
    margin-right: 12%;
}

.article-author {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    margin-left: 12;
    margin-right: 12%;
}

.author-profile {
    margin: 0%;
}

.author-profile-sub {
    display: flex;
    padding: 0;
    margin-right: 70%;
    width: 300px;


}

.author-profile-sub p {
    font-size: 15px;
}


.profile-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8%;
}

.article-image {
    margin: 20px 0;
    text-align: center;
}

.article-image img {
    max-width: 80%;
    height: auto;
}

.image-caption {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
    text-align: left;
    margin-left: 12%;
    margin-right: 12%;

}

.article-content {
    max-width: 600px;
    padding: 20px 0;
    text-align: left;
    margin-left: 12%;
    margin-right: 12%;
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.normal-content {
    /* font-size: 25px; */
    line-height: 1.4;
    margin-bottom: 20px;
    color: #333;
    font-family: 'Georgia', serif;
}

p a {
    color: #000000;
    text-decoration: underline;
}

p a:visited {
    color: #5d4967;
}

p a:hover {
    color: #424242;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .main-article {
        margin: 0;
    }

    .article-title,
    .article-title-sub,
    .article-author,
    .article-content {
        margin-left: 12px;
        margin-right: 12px;
    }

    .author-profile {
        align-items: center;
        margin: 10px;
        padding: 10px;
        justify-content: flex-start;
    }

    .author-profile-sub {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        width: auto;
    }

    .author-profile-sub p {
        font-size: 14px;
        margin: 0;
    }

    .profile-photo {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
}


/* Related Articles Styles */
.related-articles {
    margin-top: 40px;
    text-align: left;
    padding: 0 20px;
    max-width: 800px;
    margin: 40px auto;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.related-articles h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.related-articles ul {
    list-style-type: none;
    padding: 0;
}

.related-articles li {
    margin-bottom: 10px;
}

.related-articles a {
    color: #000;
    text-decoration: none;
}

.related-articles a:hover {
    text-decoration: underline;
}

/* Footer Styles */
.footer {
    background-color: #fff;
    color: #666;
    padding: 20px 0;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-top: 1px solid #e5e5e5;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-nav {
    margin-top: 10px;
}

.footer-nav a {
    color: #666;
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
    font-weight: normal;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
}

.annotated-text {
    border-left: 3px solid #ccc;
    margin-left: 5%;
    margin-right: 5%;
    color: #8f8f8f;
    font-style: italic;
    font-size: 18px;
    display: block;
    flex-direction: column;
    align-items: center;
}

.annotated-text p, img, h2, h1, h3, h4 {
    padding-left: 10px;
}

.annotated-text img {
    max-width: 80%;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.description,
.question {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}

.description {
    background-color: #f2f2f2;
    margin: 15px;
}

.question {
    background-color: #fff;
}

.expert-title {
    font-weight: bold;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

.podcast-container {
    width: 100%;
    height: 600px;
    position: relative;
    margin-bottom: 40px;
}

.podcast-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
    background-position: center;
    min-height: 90%;
    color: white;
    position: relative;
    text-align: center;
    padding: 20px;
}

.podcast-header:hover .overlay {
    background-color: rgba(0, 0, 0, 0.121);
    /* Darker overlay on hover */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.011);
    /* Default overlay */
    z-index: 1;
    transition: background-color 0.5s ease;
    /* Smooth transition for overlay */
}

.podcast-content {
    z-index: 2;
}

.podcast-date {
    font-size: 16px;
    margin-bottom: 9px;
    opacity: 0.8;
    font-family: "Arial", sans-serif;
}

.podcast-title {
    font-family: 'Chelt-light', serif;
    font-size: 36px;
    margin-bottom: 20px;
}

.podcast-description {
    font-family: 'Georgia', serif;
    font-size: 20px;
    max-width: 600px;
    line-height: 1.4;
    margin: 0 auto;
    margin-bottom: 30px;
}

.podcast-playbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 0;
    height: 0;
    border: none;
    /* Remove any default borders */
    background: none;
    /* Remove any default background */
    outline: none;
    /* Remove any default outline */

    border-left: 40px solid #fff;
    /* Triangle shape */
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
    margin-left: 10px;
}


/* Hide any direct text content */
#playButton {
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

/* When hovered over the background image */
.podcast-header:hover .play-button {
    transform: scale(0.8);
    /* Slightly reduce size of the triangle */
}

.podcast-header:hover .play-button::before {
    content: '';
    position: absolute;
    top: -12px;
    /* Adjust position to center around triangle */
    left: -12px;
    width: 64px;
    /* Circle size around the play button */
    height: 64px;
    border: 2px solid #fff;
    /* Circle border */
    border-radius: 50%;
    /* Make it a circle */
    transition: all 0.3s ease;
}

.timeline-bar {
    -webkit-appearance: none;
    /* Remove default styling */
    appearance: none;
    width: 80%;
    /* Adjust based on your design */
    height: 8px;
    /* Thickness of the track */
    background: #E1E7EA;
    /* Lighter color for the track */
    border-radius: 5px;
    /* Rounded edges */
    cursor: pointer;
    outline: none;
}

/* Styling for the slider thumb/knob */
.timeline-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    /* Size of the knob */
    height: 15px;
    background: #fff;
    /* White color for the knob */
    border-radius: 50%;
    /* Circular knob */
    border: 2px solid #fff;
    /* White border for the knob */
    cursor: pointer;
}

.timeline-bar::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
}

/* Remove focus outline */
.timeline-bar:focus {
    outline: none;
}


.duration {
    margin-left: 20px;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .podcast-header {
        height: 400px;
    }

    .timeline-bar {
        width: 250px;
    }

    .play-button {
        border-left-width: 30px;
        /* Adjust button size for smaller screens */
        border-top-width: 20px;
        border-bottom-width: 20px;
    }
}

.skip-button {
    background: none;
    /* No background */
    border: none;
    /* No border */
    color: white;
    /* White color for the icon */
    font-size: 24px;
    /* Adjust size as needed */
    cursor: pointer;
    padding: 0 10px;
    /* Minimal padding for alignment */
    outline: none;
    /* Remove outline */
    transition: transform 0.2s ease;
    /* Add a subtle effect on hover */
}

.skip-button:hover {
    transform: scale(1.2);
    /* Slightly enlarge icon on hover */
}

.podcast-header:hover .skip-button {
    transform: scale(0.8);
}

.transcript-button-container {
    margin-top: 20px;
    margin-bottom: 50px;
}

.transcript-button {
    display: inline-flex;
    align-items: center;
    background-color: #E1E7EA;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: Arial, sans-serif;
}

.transcript-button:hover {
    background-color: #CBD2D6;
}

.transcript-icon {
    width: 30px;
    height: 35px;
    margin-right: 10px;
    margin-top: 7px;
}


/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    overflow: hidden;
    /* Prevents scrolling of the entire page when modal is open */
}

.modal-content {
    background-color: #fff;
    margin: auto;
    margin-top: 5vh;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    /* Adjust as needed for responsive design */
    max-width: 700px;
    /* Prevents modal from becoming too wide */
    max-height: 80%;
    /* Ensures the modal doesn't exceed viewport height */
    overflow-y: scroll;
    /* Enables scrolling within the modal */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Close button */
.close-button {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

.close-button:hover {
    color: #000;
}

/* Styling for Speaker Name */
.speaker-name {
    font-size: 16px;
    color: #777;
    /* Slightly gray text */
    margin-bottom: 5px;
    font-weight: bold;
}

/* Typography for Paragraphs */
.transcript-paragraph p {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
    margin-top: 0;
}