/* Variables */
:root {
    --color-1: black;
    --color-2: white;
    --color-3: #bb6117;
}

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

/* General Box Sizing for All Elements */
* {
    box-sizing: border-box;
}


.collapsible-section {
    margin-bottom: 1em;
    overflow: hidden;
}

.collapsible-header {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #6e6e6e; /* Border for the title section only */
    /* border-radius: 8px;  */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth animation for scaling and color */
}

.collapsible-header:hover {
    background-color: #bb6117; /* Slightly darker background on hover */
	/* #bb6117 */
	/* #ef795a */
    transform: scale(1.02); /* Scale up slightly */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

.collapsible-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.collapsible-content {
    padding: 15px;
    display: none;
    border-top: none; /* To avoid border between content and header */
}

.collapsible-content.active {
    display: block;
}



/* Styling for Timeline */
.timeline {
    margin: 0 auto;
    position: relative;
    max-width: 80em; /* Increased max-width for more space (previously 46em) */
    padding-left: 3.15em; /* Add more padding to separate it from the left side */
    list-style: none; /* Remove default list styling */
}

.timeline:before {
    background-color: #bb6117;
    content: '';
    position: absolute;
    top: 0;
    left: 2em; /* Adjusted left alignment to better align with timeline events */
    width: 4px; /* Increased width for better visibility */
    height: 100%;
}

/* Timeline Event Styling */
.timeline-event {
    position: relative;
    list-style: none;
    margin-bottom: 3em; /* Space between timeline events for clarity */
}

/* Hover Effect for Timeline Event Icon */
.timeline-event:hover .timeline-event-icon {
    transform: rotate(-45deg);
    background-color: var(--color-3);
}

.timeline-event:hover .timeline-event-thumbnail {
    box-shadow: inset 40em 0 0 0 var(--color-3);
}

/* Timeline Event Content */
.timeline-event-copy {
    /* padding: 1.5em 2em; */
    position: relative;
    left: 3em; /* Adjusted so the content aligns properly with the icon and line */
    width: calc(100% - 5em); /* Account for padding and alignment */
    background: none;
	text-align: left; /* Ensure text is left-aligned */
}

.timeline-event-copy h3 {
    font-size: 1.75em;
    margin-top: 0;
}

.timeline-event-copy h4 {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.timeline-event-copy strong {
	text-align: left; /* Ensure headers, thumbnail, and strong elements are left-aligned */

    font-weight: 700;
}

.timeline-event-copy p:not(.timeline-event-thumbnail) {
    padding-bottom: 1.2em;
}

/* Timeline Event Icon Styling */
.timeline-event-icon {
    transition: transform 0.2s ease-in;
    transform: rotate(45deg);
    background-color: var(--color-1);
    outline: 8px solid var(--color-2);
    display: block;
    position: absolute;
    top: 0.5em;
    left: -1.5em; /* Adjust to align with new spacing */
    width: 1em;
    height: 1em;
}

.timeline-event-thumbnail {
    transition: box-shadow 0.5s ease-in 0.1s;
    color: var(--color-2);
    font-size: 0.9em; /* Increase size for emphasis */
    font-weight: bold;
    background-color: var(--color-1);
    box-shadow: inset 0 0 0 0em #bb6117;
    display: inline-block;
    margin-bottom: 1em;
    padding: 0.4em 1em; /* More padding to make it look bigger */
}

/* Card styling */

/* Card Styling for Timeline Event */
.timeline-card {
    background-color: #f0f0f0; /* Light grey background for the card */
    border-radius: 8px;
    padding: 1.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-left: 0em; /* Increased margin to give more space between the vertical line and card */
}

.timeline-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.timeline-card-title {
    font-size: 1.5em; /* Reduced size for better fit */
    font-weight: 600; /* Bold but not too prominent */
    color: #333;
    text-align: left; /* Left-align text */
	padding: 0 !important;

}

.timeline-card-description {
    font-size: 0.9em; /* Slightly smaller than before for compact text */
    color: #667;
    text-align: left; /* Ensure description text is left-aligned */
	margin-bottom: 0; /* Remove any extra margin below the description */
	padding: 0 !important;
}


.download-link {
    color: #bb6117;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9em; /* Keep download link aligned with text size */
	margin: 0; /* Remove any margin */
	padding: 0 !important;
}

.download-link:hover {
    text-decoration: underline;
	padding: 0 !important;
}

/* Link Styling */
.timeline-card-description a {
    color: #333; /* Dark gray color */
    text-decoration: none; /* Remove default underline for a cleaner look */
    transition: color 0.3s ease; /* Smooth transition for hover effects */
}

.timeline-card-description a:hover {
    color: #555; /* Slightly lighter gray on hover for subtle effect */
}

.paper-download-link{
	padding: 0 !important;

}


/* Make sure timeline line uses the intended color */
ul.timeline-items {
    border-left: var(--timeline-line-width) solid var(--color-timeline) !important;
  }
  
  /* Ensure any other unintended border or background color is overridden */
  ul.timeline-items, li.timeline-item h3::before {
    border-color: #568aa3 !important; /* Replace #568aa3 with your desired timeline color */
  }
  
  /* Override the orange color if there's a conflicting element causing it */
  ul.timeline-items,
  .timeline-title,
  .timeline-item {
    border-color: var(--color-timeline) !important;
  }