/* CSS Document */
    body {
        background-color: #296C5E;
        font-family: Arial, Helvetica, sans-serif;
        color: #2C513F;
        margin: 0;
        padding: 0;
    }
    a {
        color: #2C513F;
        
    }
    .container {
        width: 100%;
        max-width: 1000px;
        margin: 15px auto;
        border: 5px solid #C1A93B;
        background-color: #fff;
    }
    /* Header */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        background: #fff;
        padding: 15px;
    }

    .logo-container img {
        width: 268px;
        height: 146px;
    }

    .issue-info {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 16px;
        color: #2C513F;
    }

    /* Navigation */
   .main-nav {
        text-align: center; /* Center align the navigation */
        padding: 10px 0;
        background-color: #E1D3A3;
        margin: 0 10px;
    }

    .main-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: nowrap; /* Prevents items from wrapping */
        justify-content: center; /* Centers the nav items */
        gap: 10px; /* Adjust spacing between items */
    }
    /* Apply wrapping on screens smaller than 720px */
    @media screen and (max-width: 720px) {
        .main-nav ul {
            flex-wrap: wrap; /* Allows wrapping on smaller screens */
        }
    }
    .main-nav li {
        display: flex;
        align-items: center; /* Ensures text stays vertically aligned */
        text-align: center; /* Centers text within each item */
        white-space: normal; /* Allows text inside to wrap */
        max-width: 120px; /* Adjust this value based on your design */
    }

    .main-nav a {
        text-decoration: underline;
        padding: 0 10px;
        color: #2C513F;
        font-size: 12px;
        font-weight: bold;
        display: block; /* Ensures the link takes up the full width of the li */
        text-align: center; /* Centers text inside the anchor */
    }

    .main-nav a:hover {
        text-decoration: none;
    }
    .main-nav li:not(:last-child)::after {
        content: "|"; /* Adds a pipe separator */
        padding-left: 10px;
        color: black; /* Adjust color if needed */
    }
    .skip-to-content {
        position: absolute;
        top: -40px; /* Hides off-screen */
        left: 10px;
        background: #2C513F;
        color: white;
        padding: 10px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
    }

    .skip-to-content:focus {
        top: 10px; /* Moves into view when focused */
        outline: 3px solid #FFD700;
    }

    /* Main Content */
    .content {
        margin: auto;
        background: #fff;
        padding: 20px;
    }
.post-header {
        margin: 20px 20px 0;
}
.post-header hr {
    border: none;
    height: 1px;
    background-color: #B6AE80; /* Matches the existing accent color */
    margin: 10px 0;
    width: 100%;
}
.box {
            background: #FFFFFF;
            border: 2px solid #B6AE80;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .box h2 {
            font-size: 16px;
            color: #222;
        }
.box h3 {
    color: #296c5e;
    font-size: 14px;
    
}
.section-heading {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #605934;
    font-size: 18px;
    font-weight: bold;
}
    h1, h2 {
        color: #2C513F;
    }
    blockquote {
        font-style: italic;
        color: #333; /* Dark gray for readability */
        border-left: 4px solid #2C513F; /* A subtle left border */
        padding: 10px 40px;
        margin: 20px 0;
        background-color: #f9f9f9; /* Light background for contrast */
        position: relative;
    }

    blockquote p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
    }

    blockquote::before {
        content: "“"; /* Adds a large opening quote */
        font-size: 50px;
        color: #2C513F;
        position: absolute;
        top: 0px;
        left: 10px;
    }

    blockquote::after {
        content: "”"; /* Adds a large closing quote */
        font-size: 50px;
        color: #2C513F;
        position: absolute;
        bottom: -10px;
        right: 10px;
    }
    p img, figure img {
        display: block;
        margin: 0 auto;
        max-width: 100%; /* Ensures image responsiveness */
        height: auto; /* Maintains aspect ratio */
    }
    .divider, hr {
        border: none;
        height: 1px;
        background-color: #B6AE80; /* Matches the existing accent color */
        margin: 20px 0;
        width: 100%;
    }

    .article-links {
        margin-bottom: 20px;
    }

    .article-links a {
        color: #2C513F;
        text-decoration: underline;
    }

    /* Footer */
    .footer {
        background: #fff;
        text-align: center;
        padding: 20px;
        border-top: solid 1px #CCC;
        margin: 0 10px;
    }

    .footer a {
        color: #0075c5;
        text-decoration: underline;
    }
.note {
            flex-basis: 100%;
            background: white;
            padding: 20px;
            margin-top: 20px;
            border-radius: 5px;
        }
.two-col main {
            display: flex;
            flex-direction: row;
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }
        .two-col main > article, .two-col .articles {
            flex: 2;
            background: white;
            margin-left: 20px;
            border-radius: 5px;
        }
        .two-col aside {
            flex: 1;
            background: white;
            border-radius: 5px;
        }

table {
  width: 100%;
  border: 1px solid #ccc;  /* 1-pixel grey border on the outer edge */
  border-collapse: collapse; /* Merge borders for a cleaner look */
  table-layout: fixed;   /* Ensures columns take equal width unless otherwise specified */
}

table caption {
    margin-bottom: 1em;
}

table th,
table td {
  border: 1px solid #ccc; /* 1-pixel grey border inside as well */
  padding: 10px;          /* 10px cell padding */
  /* text-align: left;    If you need a default alignment, uncomment or modify */
}
table tbody tr th {
    text-align: left;
    font-weight: normal;
    
}
table.table-auto-width {
  border: 1px solid #ccc;       /* 1px gray border around the table */
  border-collapse: collapse;    /* Merge borders for a cleaner look */
  table-layout: auto;           /* Columns expand to fit the text */
}
/* Applies a 3-column layout to ul elements with the class .columns-3 */
.columns-3 {
  column-count: 3;        /* Number of columns */
  column-gap: 1.5rem;     /* Spacing between columns */
  /* Fallback vendor prefixes (optional) */
  -webkit-column-count: 3;
  -webkit-column-gap: 1.5rem;
  -moz-column-count: 3;
  -moz-column-gap: 1.5rem;
}

.columns-3 li {
  /* Ensure each list item stays together */
  break-inside: avoid;
  /* Vendor prefixes for older browsers */
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}
.visual-header {
    font-weight: bold; 
    text-align: center;
}
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: inherit;
}