/* Import Open Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');


/* Base Styles */

@font-face {
    font-family: 'Averta';
    src: url('fonts/AvertaDemoPECuttedDemo-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Averta';
    src: url('fonts/AvertaDemoPE-ExtraBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


body {
  font-family: 'Averta', sans-serif;
  background-color: #f8f9fa; /* Light gray background */
  color: #333; /* Dark text */
}

.navbar {
    background-color: #11aa96; /* Change to your preferred color */
    width: 100%;                /* Make the banner full width */
    margin: 0;                  /* Remove any margins */
    padding: 0;                 /* Remove padding if needed */
    position: relative;         /* Ensure the banner stays in the right place */
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Averta', sans-serif;
  color: #11aa96; /* EcoCommons green */
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Custom style for numbered sections */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    color: #11aa96; /* Set your preferred color here */
    font-weight: bold; /* Optionally set font weight or other styles */
}

h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.75em;
}

/* Links */
a {
  color: #6ACDFF; /* EcoCommons blue */
  text-decoration: none;
}

a:hover {
  color: #0056b3; /* Darker blue on hover */
}

/* Code blocks */
code, pre {
  background-color: #e0f7fa; /* Light blue background */
  color: #00796b; /* Teal text */
  padding: 5px;
  border-radius: 5px;
}

/* Blockquotes */
blockquote {
  background-color: #e9ecef; /* Light gray background */
  padding: 15px;
  border-left: 5px solid #2e8b57; /* Green border */
  margin: 20px 0;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

table th, table td {
  padding: 10px;
  border: 1px solid #ddd;
}

table th {
  background-color: #f1f1f1;
  color: #333;
}

/* Custom Header with PNG Background */
header {
  background-size: cover;
  background-position: center;
  height: 120px; /* Adjust the height to avoid overlap */
  width: 100%;
  padding: 20px; /* Add padding to ensure text does not overlap */
  margin-bottom: 50px; /* Push the content below the header */
  text-align: center; /* Center the text */
}

/* Header Text Styling */
header h1 {
  font-family: 'Averta', sans-serif;
  font-size: 2.5em;
  margin: 0;
  color: #f6aa70; /* EcoCommons Orange */
  opacity: 0;
}

header p {
  font-family: 'Averta', sans-serif;
  font-size: 1.2em;
  color: white;
  margin: 5px 0; /* Spacing between author and date */
}


/* Additional Spacing */
p {
  line-height: 1.6;
}

/* Image Styling */
img {
  max-width: 100%;
  height: auto;
}

/* Optional Styling for Code Blocks */
code, pre {
  background-color: #e0f7fa; /* Light blue for code blocks */
  color: #00796b; /* Teal color for code text */
  padding: 5px;
  border-radius: 5px;
}

/* Optional Styling for Blockquotes */
blockquote {
  background-color: #e9ecef; /* Light gray background */
  padding: 15px;
  border-left: 5px solid #11aa96; /* EcoCommons green */
  margin: 20px 0;
}

/* Optional Table Styling */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

table th, table td {
  padding: 10px;
  border: 1px solid #ddd;
}

table th {
  background-color: #f1f1f1;
  color: #333;
}

/* Footer Styling */
footer {
  background-color: #f6aa70; /* EcoCommons green */
  color: white;
  text-align: center;
  padding: 20px;
  position: relative;
  bottom: 0;
  width: 100%;
}

footer p {
  margin: 0;
  font-size: 1em;
}

/* Optional Footer Link Styling */
footer a {
  color: #f6aa70; /* EcoCommons Orange */
  text-decoration: none;
}

footer a:hover {
  color: #FFD27D; /* Lighter orange on hover */
}


/* Ensure footer stays at the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

/* Move the entire .quarto-container to the left */
.quarto-container {
  max-width: 1000px; /* Adjust this as needed */
  margin-left: auto; /* Keep the content centered */
  margin-right: auto;
  padding-left: 50px; /* Add left padding for inner spacing */
  padding-right: 50px;
  position: relative; /* Allow for relative adjustments */
  left: -50px; /* Move the whole container 30px to the left */
}

/* Adjust the sidebar relative to the container */
#quarto-margin-sidebar {
  overflow: auto; /* Allow scrolling for overflowing content */
  max-height: 100vh; /* Ensure the sidebar doesn't exceed the viewport height */
  padding: 10px; /* Add padding for better readability */
  position: relative; /* Allow relative adjustment */
  left: 0; /* Reset any specific sidebar movement */
  width: 300px; /* Adjust this value if needed */
}