:root {
    --background-color: #FAF9F6;
    --form-bg-color: var(--background-color);
    --form-disabled-bg: color-mix(in srgb, var(--background-color) 95%, #000000);
    --form-disabled-text: color-mix(in srgb, var(--secondary-color) 70%, #ffffff);
    --placeholder-text-color: color-mix(in srgb, var(--secondary-color) 60%, #ffffff);
    --table-head-bg: color-mix(in srgb, var(--background-color) 96%, #000000);
    --table-th-bg: color-mix(in srgb, var(--background-color) 98%, #000000);
    --table-tfoot-bg: color-mix(in srgb, var(--background-color) 94%, #000000);
    --section-bg: color-mix(in srgb, var(--background-color) 97%, #000000);
    --progress-bg: color-mix(in srgb, var(--background-color) 93%, #000000);
    --blockquote-bg: color-mix(in srgb, #000000 2%, var(--background-color));
    
    --primary-color: #556B2F; /* grounding, olive-toned green */
    --secondary-color: #444444; /* soft charcoal for emotional weight */
    --accent-color: #DAA520; /* gold tone – subtle optimism */
    
    --text-color: #222222;
    --border-color: #D3D3D3;
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    --button-disabled-color: color-mix(in srgb, var(--secondary-color) 30%, #ffffff);
    --button-text-color: #ffffff;
    
    --base-size: 4vw;
    --space-1: calc(var(--base-size) * 0.5);
    --space-2: var(--base-size);
    --space-3: calc(var(--base-size) * 1.5);
}



html {
    font-size: 24px;
}
body {
    padding: var(--space-2);
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--background-color);
    color: var(--secondary-color);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

main, section, article, form {
    width: 100%;
    margin: var(--space-1) 0;
    background: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }

p {
    text-align: left;
    line-height: 1.6;
    margin: var(--space-1) 0;
}

ul, ol {
    padding-left: 1.2em;
}
ul li::marker {
    color: var(--primary-color);
}
ol li::marker {
    font-weight: bold;
    color: var(--accent-color);
}

button, input, select, textarea {
    width: 100%;
    font-size: 1em;
    padding: var(--space-1);
    border-radius: var(--space-1);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-1);
}

button {
    background-color: var(--accent-color);
    color: var(--button-text-color);
    border: none;
    box-shadow: 0 2px 4px var(--shadow-color);
    cursor: pointer;
}
button:hover {
    background-color: var(--primary-color);
}
button:disabled {
    background-color: var(--button-disabled-color);
    cursor: not-allowed;
}

dialog {
    width: 95%;
    padding: var(--space-2);
    border-radius: var(--space-1);
    box-shadow: 0 2px 10px var(--shadow-color);
    background: var(--background-color);
    color: var(--secondary-color);
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

blockquote, aside {
    padding: var(--space-1);
    margin: var(--space-2) 0;
    background: var(--blockquote-bg);
    border-left: 4px solid var(--accent-color);
    font-style: italic;
    border-radius: var(--space-1);
}

figure {
  margin: var(--space-1) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
    align-items: center;

}

figcaption {
    font-size: 0.9em;
    color: var(--secondary-color);
    margin-top: var(--space-1);
    font-style: italic;
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-2) 0;
}
dt {
    font-weight: bold;
    color: var(--primary-color);
}
dd {
    margin: 0;
    color: var(--secondary-color);
}

details {
    background: var(--table-th-bg);
    padding: var(--space-1);
    margin: var(--space-2) 0;
    border-left: 4px solid var(--accent-color);
    border-radius: var(--space-1);
}
summary {
    font-weight: bold;
    cursor: pointer;
    color: var(--accent-color);
    padding-bottom: 4px;
}

progress {
    width: 100%;
    height: 16px;
    appearance: none;
    background-color: var(--progress-bg);
    border-radius: var(--space-1);
    overflow: hidden;
    margin: var(--space-1) 0;
}

mark {
    background-color: var(--accent-color);
    padding: 0 4px;
    border-radius: var(--space-1);
}

cite {
    font-style: italic;
    color: var(--secondary-color);
    font-size: 0.9em;
    display: block;
    margin-top: var(--space-1);
}

address {
    font-style: normal;
    background: var(--table-th-bg);
    padding: var(--space-1);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--space-1);
    margin: var(--space-2) 0;
}

time {
    font-weight: bold;
    color: var(--accent-color);
}

  /* ====== TABLES ====== */
table {
  width: 100%;
  max-width: 100vw;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
  border: 1px solid #ccc; /* adds outer border */
}

thead th {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 3px 5px;
  font-size: 13px;
  text-align: left;
  white-space: normal;
  border: 1px solid #ccc; /* adds header cell border */
}

th, td {
  font-size: 13px;
  padding: 3px 5px; /* tighter padding */
  max-width: 100vw;
  word-break: break-word;
  white-space: normal;
  box-sizing: border-box;
  border: 1px solid #ccc; /* adds border to all cells */
}

tbody tr th {
  text-align: left;
  line-height: 1.3;
}

caption {
  font-size: 12px;
  padding: 6px 0;
  text-align: left;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-2);
  background-color: var(--section-bg);
  color: var(--secondary-color);
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
}

footer a {
  color: var(--secondary-color);
  text-decoration: none;
  margin: 4px 0;
  font-weight: 500;
}

footer a:hover {
  color: var(--accent-color);
}

footer p {
  margin: 0.5em 0;
}

	/* =========================
   MAIN MENU STYLING (FINAL REVISION)
========================= */

/* ✅ Shared Container for Both Desktop and Mobile */
.main-menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    flex-wrap: wrap;
}


#menu-list li {
        list-style: none;
    }



/* =========================
   MOBILE MENU STYLING
========================= */

    /* ✅ Stack logo and menu vertically */
    .main-menu-container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ✅ Adjusted Logo Position */
    .site-logo {
        margin-bottom: 10px;
    }

    /* ✅ Hamburger Styling */
    #mobile-menu {
        display: block;
        font-size: 88px;
        padding: 10px;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    /* ✅ Mobile Menu List - Left Justified, Top to Bottom, No Overlaps */
    #menu-list {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
        gap: 15px; /* Prevent overlapping boxes */
        width: 100%;
    }

    #menu-list.active {
        display: flex !important;
    }

    /* ✅ Full-Width Clickable Menu Items */
    #menu-list a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        margin: 0;
    }

    #menu-list a:hover {
        background-color: var(--button-hover-color);
    }



	.site-logo {
    width: 120px;
    height: auto;
}