/* ============================
   Newsletter Navigation Layouts
   ============================ */


   body.newsletter-layout .newsletter {
    display: flex; /* Set newsletter navigation to flex layout */
    flex-direction: column; /* Arrange navigation items vertically */
    width: 200px; /* Adjust navigation width */
    background-color: #ffffff; /* Light gray background */
    padding: 10px; /* Inner spacing */
    height: calc(100vh - 100px); /* Full viewport height minus header offset */
    position: sticky; /* Stick navigation to the top when scrolling */
    top: 100px; /* Offset for header */
    border-right: 0px solid #000000; /* Optional: Add border on the right if needed */
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for separation */
    overflow-y: auto; /* Allow vertical scrolling */
}

body.newsletter-layout .newsletter ul {
    list-style: none; /* Remove bullet points */
    margin: 0px;
    padding: 0px;
}

.newsletter {
    overflow-y: auto; /* Allow vertical scrolling */
    max-height: auto; /* Adjust height dynamically */
}

body.newsletter-layout .newsletter li {
    margin: 0px; /* Add spacing between navigation items */
}

body.newsletter-layout .newsletter a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Default link color */
    display: block; /* Make the entire area clickable */
    padding: 5px 10px; /* Inner padding for clickable area */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
}

body.newsletter-layout .newsletter a:hover {
    background-color: #27408B; /* Dark blue background on hover */
    color: #fff; /* White text on hover */
}

.newsletter ul ul {
    margin-left: 10px; /* Indent nested lists */
    display: none; /* Hide nested lists by default for collapsible behavior */
}


body.newsletter-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body spans the full height of the viewport */
}

/* Container spans full height */
.page-container {
    display: flex;
    flex: 1; /* Allow the page content to expand */
    height: calc(100vh - 100px); /* Full viewport height minus header offset */
    min-height: calc(100vh - 100px); /* Ensures it doesn’t shrink below this height */
}

.newsletter {
    flex-shrink: 0; /* Prevent navigation from collapsing */
}

/* Ensure the main content area uses remaining space */
body.newsletter-layout .content {
    flex-grow: 1; /* Allow the content area to expand */
    display: flex; /* Ensure content stretches */
    flex-direction: column;
    overflow: hidden; /* Prevent unnecessary overflow */
    margin-bottom: 0; /* Remove unnecessary gap at the bottom */
}

/* ============================
   Global .active Class
   ============================ */

/* Universal active state for all elements */
.active {
    background-color: #ffffff; /* White background */
    color: #000; /* Black text */
}

/* Specific active styling for newsletter navigation links */
.newsletter a.active {
    background-color: #4169E1 !important; /* Royal blue background */
    color: #ffffff !important; /* Bright white text */
    border: 3px solid #27408B; /* Optional: Darker blue border for emphasis */
}

/* ============================
   Embedded Content Adjustments
   ============================ */
.markdown-content {
    margin: 0; /* Ensure no unnecessary spacing above or below */
    padding: 0; /* Remove padding if not needed */
    margin-left: 10px;
}

.embedded-content {
    margin-top: 60px; /* Adds space between Markdown content and the embedded file ### This fixes my issue if I need to */
    padding-top: 0px; /* Ensures content is not cut off */
    overflow: hidden; /* Prevent overflow issues */
    position: relative; /* Ensure proper containment of content */
}

#embeddedContent {
    width: 100%; /* Ensure iframe spans the container width */
    height: calc(100vh - 100px); /* Adjust height dynamically based on viewport */
    border: none; /* Remove border if not needed */
    overflow: auto; /* Ensure scrollability within iframe */
    display: block; /* Ensure proper layout behavior */
}


/* ============================
   Collapsible Content Styling
   ============================ */

.collapsible-content {
    display: block; /* Start expanded by default */
    margin-left: 20px; /* Indent nested items */
}

.collapsible.active .collapsible-content {
    display: block; /* Ensure content remains visible when .active is applied */
}

.collapsible-toggle {
    cursor: pointer; /* Indicate clickability */
    font-weight: bold;
    padding: 5px 0;
}

.collapsible-toggle:hover {
    text-decoration: underline; /* Optional hover effect */
}

/* ============================
   Debugging Borders (Optional)
   ============================ */
/*   
.embedded-content {
    border: 2px dashed red; /* Debugging border 
} */