/* Navigator Styles */
nav.menu {
    margin-top: 40px; /* Adds space above the navigation */
	margin-right: 20px;
}

.navigator {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    /*background-color: #fff;*/
    /*border: 1px solid #ccc;*/
    /*border-radius: 10px;*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.navigator h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: #1C3CFF;
    margin-bottom: 20px;
}

.navigator-item {
    margin-bottom: 20px;
}

.navigator-item h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.navigator-item p {
    font-size: 16px;
	font-weight: 400;
}

.navigator-item a {
    color: #1C3CFF;
    text-decoration: none;
}

.navigator-item a:hover {
    text-decoration: none;
}

/* Additional Mannauara-Specific Styles */
.mannauara-banner {
    text-align: center;
    background-color: #1C3CFF;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
}

.mannauara-banner h1 {
    font-size: 28px;
    margin: 0;
}

.mannauara-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: #666;
}



	/* General Section Styles */
section {
    margin: 20px auto;
    max-width: 900px;
    padding: 20px;
    background-color: #f9f9f9;
    /*border-radius: 10px;*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

section h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 28px;
    color: #486E10;
    margin-bottom: 15px;
}

section p {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

/* Navigator Section */
.navigator ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.navigator ul li {
    margin-bottom: 10px;
}

.navigator ul li a {
    color: #1C3CFF;
    text-decoration: none;
    font-weight: 300;
}

.navigator ul li a:hover {
    text-decoration: none;
    color: #000000;
}

/* TOC Section */
.toc-container ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.toc-container ul li {
    margin-bottom: 15px;
}

.toc-container ul ul {
    margin-left: 20px; /* Indent nested lists */
}

.toc-container ul li a {
    color: #1C3CFF;
    text-decoration: none;
    font-weight: 300;
}

.toc-container ul li a:hover {
    text-decoration: none;
    color: #000000;
}

/* Documentation Section */
.docs ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.docs ul li {
    margin-bottom: 10px;
}

.docs ul li a {
    color: #1C3CFF;
    text-decoration: none;
    font-weight: 300;
}

.docs ul li a:hover {
    text-decoration: none;
    color: #000000;
}

/* Team Section */
.team ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.team ul li {
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #333;
}

/* Graphics Section */
.graphics ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.graphics ul li {
    margin-bottom: 10px;
}

.graphics ul li a {
    color: #1C3CFF;
    text-decoration: none;
    font-weight: 300;
}

.graphics ul li a:hover {
    text-decoration: none;
    color: #000000;
}

/* Glossary Section */
.glossary ul {
    list-style: none; /* Remove bullets */
    padding: 0;
}

.glossary ul li {
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #333;
}

.glossary ul li strong {
    color: #1C3CFF;
}

/* Contact Section */
.contact a {
    color: #1C3CFF;
    text-decoration: none;
    font-weight: 300;
}

.contact a:hover {
    text-decoration: none;
    color: #000000;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #666;
    border-top: 1px solid #ccc;
}
.general-section {
    max-width: 900px; /* Limits the section width for readability */
    margin: 20px auto; /* Centers the section and adds vertical spacing */
	font-size: 16px;
    padding: 20px; /* Adds space inside the section */
   /* background-color: #fff; /* White background for clarity */
    /*border: 1px solid #ccc; /* Subtle border for structure */
    /*border-radius: 10px; /* Rounds the corners for a modern look */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a light shadow for depth */
}

.general-section h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px; /* Larger font for section headers */
    font-weight: 400; /* Regular weight for clarity */
    color: #1C3CFF; /* Highlighted blue color for headers */
    margin-bottom: 15px; /* Space below the header */
}

.general-section h3 {
    font-family: 'Raleway', sans-serif; /* Matches the general style */
    font-size: 20px; /* Slightly smaller than main section titles */
    font-weight: 400; /* Medium weight for readability */
    color: #333; /* Matches the color scheme for section headings */
    margin-bottom: 7px; /* Adds spacing below the heading */
}


.general-section p {
    font-family: 'Raleway', sans-serif;
    font-size: 16px; /* Standard font size for paragraphs */
    line-height: 1.6; /* Improves readability */
    color: #333; /* Neutral text color */
    margin-bottom: 15px; /* Adds space between paragraphs */
}

.general-section ul {
    list-style: none; /* Removes default bullets */
    padding: 0; /* Removes default padding */
    margin: 15px 0; /* Adds vertical spacing */
}

.general-section ul li {
    font-family: 'Raleway', sans-serif;
    font-size: 16px; /* Matches paragraph font size */
    margin-bottom: 10px; /* Adds spacing between list items */
}

.general-section ul li::before {
    content: "• "; /* Adds a custom bullet point */
    color: #1C3CFF; /* Matches header color for consistency */
    font-weight: bold;
}

.general-section a {
    color: #1C3CFF; /* Links in the same blue color */
    text-decoration: none; /* Removes underline */
    font-weight: 400; /* Regular weight for readability */
}

.general-section a:hover {
    text-decoration: none; /* Adds underline on hover */
    color: #003BFF; /* Darker blue for hover effect */
}
.general-section table {
    width: 100%; /* Full width of the section */
    border-collapse: collapse; /* Remove space between table cells */
    margin-top: 20px; /* Add spacing above the table */
}

.general-section th, 
.general-section td {
    border: 1px solid #ccc; /* Light border for each cell */
    padding: 10px; /* Space inside each cell */
    text-align: left; /* Align text to the left */
    font-family: 'Raleway', sans-serif; /* Consistent font style */
    font-size: 16px; /* Adjust font size for readability */
}

.general-section th {
    background-color: #f4f4f4; /* Light background for header row */
    font-weight: 600; /* Bold font for headers */
}

.general-section td {
    background-color: #fff; /* White background for content rows */
}

.general-section tr:nth-child(even) td {
    background-color: #f9f9f9; /* Light gray background for alternating rows */
}

.general-section-toc h2 {
    font-family: 'Raleway', sans-serif; /* Use the existing font */
    font-weight: 300; /* Medium weight for emphasis */
    font-size: 24px; /* Slightly larger font for section titles */
    color: #1C3CFF; /* Distinct blue color for headings */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 15px; /* Add spacing below the heading */
    text-align: left; /* Align to the left */
    /*border-bottom: 1px solid #ccc; /* Subtle underline for section separation */
    padding-bottom: 2px; /* Space between text and underline */
}
	.general-section-toc h3 {
    font-family: 'Raleway', sans-serif; /* Use the existing font */
    font-weight: 300; /* Slightly lighter than h2 for hierarchy */
    font-size: 20px; /* Smaller size for subsections */
    color: #1C3CFF; /* Neutral dark color for contrast */
    margin-top: 15px; /* Add some space above each subsection */
    margin-bottom: 5px; /* Minimal space below */
    text-align: left; /* Align to the left */
    padding-left: 7px; /* Slight indent for visual hierarchy */
    /*border-left: 1px solid #333; /* Vertical line for visual distinction */

}



.general-section-toc h4 {
    font-family: 'Raleway', sans-serif; /* Match overall design */
    font-weight: 300; /* Lightweight for subtler emphasis */
    font-size: 18px; /* Smaller than h3 for clear hierarchy */
    color: #1F1E1E; /* Slightly lighter gray for differentiation */
    margin-top: 10px; /* Space above each subsection */
    margin-bottom: 5px; /* Space below */
    text-align: left; /* Align to the left */
    padding-left: 20px; /* Further indent for hierarchy */
    /*border-left: 2px solid #88C4F9; /* Subtle vertical line for emphasis */
}


.general-section-toc h5 {
    font-family: 'Raleway', sans-serif; /* Match the site's design */
    font-weight: 300; /* Lightweight for minimal emphasis */
    font-size: 16px; /* Smaller size to reflect its lower level */
    color: #272727; /* Light gray for a subtle appearance */
    margin-top: 5px; /* Minimal space above */
    margin-bottom: 5px; /* Minimal space below */
    text-align: left; /* Align to the left */
    padding-left: 30px; /* Further indent for deep hierarchy */
    /*border-left: 1px solid #ccc; /* Thin vertical line for hierarchy indication */
    font-style: italic; /* Optional: Adds a slightly distinct style */
}

.emphasis-bullet-list {
    list-style-type: disc; /* Standard bullet style */
    padding-left: 20px; /* Indent the list */
    margin: 10px 0;
}

.emphasis-bullet-list li {
    font-style: italic; /* Italicized text */
    font-weight: 500; /* Medium font weight */
    text-decoration: underline; /* Underline each list item */
    text-underline-offset: 2px; /* Add some space between the text and underline */
    text-decoration-thickness: 1px; /* Set a thin underline */
    color: #1C3CFF; /* Optional: Add a color for emphasis (blue) */
    margin-bottom: 8px; /* Space between list items */
}

.faq-question {
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    color: #1C3CFF;
    margin-bottom: 10px;
}

.faq-answer {
    display: none;
    margin-left: 20px;
}

.faq-question:hover {
    text-decoration: underline;
}

.faq-question.active + .faq-answer {
    display: block;
}

/* Style for the Roman numeral list */
.roman-list {
    list-style-type: upper-roman; /* Roman numerals for upper levels */
    padding-left: 20px; /* Indent the list */
    margin-bottom: 20px; /* Add spacing between top-level items */
}

.roman-list > li {
    margin-bottom: 10px; /* Add spacing between Roman numeral items */
}

/* Style for the numbered list */
.numbered-list {
    list-style-type: decimal; /* Default numbers for second-level items */
    margin-top: 10px; /* Add spacing before nested list */
    padding-left: 30px; /* Indent second-level list */
}

.numbered-list > li {
    margin-bottom: 5px; /* Add spacing between numbered items */
}

.emphasis-text {
    /*font-style: italic; /* Italicize the text */
    font-weight: 300; /* Medium weight between regular (400) and strong (700) */
    color: inherit; /* Use the same color as surrounding text */
    line-height: 1.9; /* Maintain readability */
    background-color: #f5f5f5; /* Light gray background */
    padding: 6px 6px; /* Add padding to ensure the background covers the text nicely */
    border: 1px solid #E93A00; /* Black border around the text */
    border-radius: 3px; /* Optional: Rounded corners for a softer look */
}


.content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
	margin-top: 10px;
	margin-bottom: 20px;
	border: 1px solid #FCAF96; /*Example: light gray border;*/
    padding: 10px; /*Optional: Add some padding for better visual spacing*/
	border-radius: 5px; /*Add rounded corners */
  
  }
.content p { /*Target the <p> tags inside .content*/
  font-style: italic;
}
 
.content, .image-content { /* Apply styles to both content types */
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out; 
  }

  .content span { 
    font-style: italic;
    /*border: 1px solid #ccc;*/
    padding: 10px; 
    /*border-radius: 5px; */
    display: block; 
  }

  .image-content img { /* Style the image */
    max-width: 100%; 
    height: auto;
    display: block;
    margin-top: 10px; 
  }

.navigator-link {
    text-decoration: none;
    color: #1C3CFF; /* Standard blue for links */
    padding: 6px 9px; /* Adds padding for hover effect */
    border-radius: 3px; /* Rounds the corners of the background */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
    position: relative; /* Needed for the ::after positioning */
}

.navigator-link:hover {
    color: #FFFFFF; /* White text color on hover */
    background-color: #A77E70; /* Orange background on hover */
    border: 1px solid #0031ED; /* Orange border on hover */
}

.navigator-link:hover::after {
    content: " Through Navigator"; /* Additional text */
    color: #FFFFFF; /* Matches hover text color */
    position: absolute; /* Position relative to the link */
    left: 100%; /* Place text immediately after the link */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for proper vertical alignment */
    white-space: nowrap; /* Prevent text wrapping */
    font-size: 14px; /* Slightly smaller font for the additional text */
    padding-left: 5px; /* Add some space between the link and the additional text */
}