/* ============================================================
   fonts
   pulling in eagle lake for headings/nav and alegreya for body text.
   both are from google fonts so they need an internet connection to load.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake:wght@400;600;700&family=Alegreya&display=swap');


/* ============================================================
   base / global reset
   sets up the full-page background, default font, and text color.
   the svg background covers the whole viewport and stays fixed.
   ============================================================ */

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: 'Alegreya', cursive;
    color: #e3ccff;
    background-image: url("../static/svg/background-for-site.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f8fafc;
}


/* ============================================================
   global link styles
   default link color is white, hover/focus shifts to the accent purple.
   no underlines anywhere on the site.
   ============================================================ */

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover,
A:focus,
a:active {
    color: #c4b5fd;
}


/* ============================================================
   site header
   sticky at the top so it stays visible while scrolling.
   the inner container is a flex row that wraps on small screens.
   dark background keeps it readable over the svg backdrop.
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 0;
}

.site-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 1.5rem 1.25rem;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 0;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    flex-wrap: wrap;
}

/* the svg site title image in the header — scales fluidly */
.site-title-image {
    width: auto;
    max-width: 100%;
    max-height: 160px;
    height: auto;
    display: block;
    object-fit: contain;
    flex: 1 1 320px;
}

/* page heading inside the header (h1) */
.site-header .logo {
    margin: 0;
    text-align: center;
    width: 100%;
    color: #e3ccff;
    padding: 0.5rem 0;
    border: none;
    box-sizing: border-box;
    font-family: 'Eagle Lake', cursive;
}


/* ============================================================
   page layout
   two-column css grid on desktop: fixed sidebar nav + flexible main area.
   the sidebar collapses on mobile via the media query further down.
   ============================================================ */

.page-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
}


/* ============================================================
   left sidebar navigation
   sticky so it stays in view while scrolling long pages.
   squared-off corners to match the rest of the site aesthetic.
   ============================================================ */

.site-nav {
    background: rgba(0, 0, 0, 0.92);
    padding: 1rem;
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    position: sticky;
    top: calc(1rem + 80px);
    align-self: start;
}

/* nav links — eagle lake font, lavender color */
.site-nav a {
    display: block;
    color: #e3ccff;
    text-decoration: none;
    margin: 0.75rem 0;
    font-weight: 600;
    font-family: 'Eagle Lake', cursive;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active {
    color: #c4b5fd;
}

/* dividers between nav groups — subtle accent line */
.site-nav hr {
    border: none;
    border-top: 1px solid rgba(196, 181, 253, 0.25);
    margin: 0.6rem 0;
}


/* ============================================================
   hamburger toggle button (mobile nav)
   hidden by default on desktop. the three lines are drawn with
   css pseudo-elements so no image is needed.
   ============================================================ */

.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

/* middle bar of the hamburger icon */
.site-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #e3ccff;
    border-radius: 0;
    position: relative;
    transition: background 0.2s ease;
}

/* top and bottom bars via pseudo-elements */
.site-nav-toggle span::before,
.site-nav-toggle span::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #e3ccff;
    border-radius: 0;
    position: absolute;
    left: 0;
    transition: background 0.2s ease;
}

.site-nav-toggle span::before { top: -7px; }
.site-nav-toggle span::after  { top:  7px; }

/* accent color on hover/focus */
.site-nav-toggle:hover span,
.site-nav-toggle:hover span::before,
.site-nav-toggle:hover span::after,
.site-nav-toggle:focus span,
.site-nav-toggle:focus span::before,
.site-nav-toggle:focus span::after {
    background: #c4b5fd;
    outline: none;
}


/* ============================================================
   mobile responsive layout
   triggers on narrow viewports (under 480px) or portrait orientation
   on phones/tablets (portrait + under 768px wide).
   collapses the grid to single column and slides the nav in from the left.
   ============================================================ */

@media (max-width: 480px), (orientation: portrait) and (max-width: 768px) {

    /* show the hamburger button */
    .site-nav-toggle {
        display: flex;
    }

    /* single column layout */
    .page-layout {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    /* nav slides in from the left as a fixed overlay panel */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 80vw;
        max-width: 280px;
        height: 100vh;
        overflow-y: auto;
        z-index: 200;
        padding: 1.25rem 1rem;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
        align-self: auto;
    }

    /* nav is visible when the toggle is active */
    .site-nav.site-nav-open {
        transform: translateX(0);
        visibility: visible;
    }

    /* dim overlay behind the open nav panel */
    body.site-nav-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }
}


/* ============================================================
   main content area
   fills the remaining grid column. min-width: 0 prevents overflow
   issues inside css grid.
   ============================================================ */

main#main {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   lore tables (wildlife, history, cultures, etc.)
   the :not() selectors exclude the index page card tables so they
   don't accidentally inherit these styles.
   dark rows, purple headers, subtle borders — matches the wildlife page.
   ============================================================ */

main#main table:not(.page-card-list):not(.page-card-inner) {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    background: transparent;
    overflow: hidden;
}

main#main table:not(.page-card-list):not(.page-card-inner) tr {
    background: rgba(0, 0, 0, 0.88);
}

main#main table:not(.page-card-list):not(.page-card-inner) th,
main#main table:not(.page-card-list):not(.page-card-inner) td {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    min-width: 120px;
    color: #f8f8ff;
}

/* header row gets a deeper purple background */
main#main table:not(.page-card-list):not(.page-card-inner) th {
    background: rgba(40, 15, 60, 0.9);
    font-weight: 700;
}

/* alternating row shading */
main#main table:not(.page-card-list):not(.page-card-inner) tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.78);
}

main#main table:not(.page-card-list):not(.page-card-inner) caption {
    caption-side: top;
    padding: 0.75rem 0.9rem;
    color: #f8f8ff;
    text-align: left;
    font-weight: 600;
}


/* ============================================================
   lists inside main content
   custom bullet styling using ::before pseudo-elements.
   accent purple dots for unordered, numbered for ordered.
   ============================================================ */

main#main ul,
main#main ol {
    margin: 1rem 0 1rem 1.25rem;
    padding: 0;
}

main#main ul li,
main#main ol li {
    margin: 0.55rem 0;
    line-height: 1.75;
}

main#main ul li {
    position: relative;
    padding-left: 1.35rem;
    padding-left: 0;
    margin: 0;
}

main#main ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #c4b5fd;
    font-size: 1.15rem;
    line-height: 1;
}

main#main ol li {
    padding-left: 0;
}

main#main ol {
    counter-reset: list-counter;
}

main#main ol li {
    position: relative;
    padding-left: 2rem;
}

main#main ol li::before {
    counter-increment: list-counter;
    content: counter(list-counter) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: #c4b5fd;
    font-weight: 700;
}


/* ============================================================
   map preview + lightbox (maps & geography page)
   thumbnail images are clickable and open a full-screen overlay.
   the overlay fades in/out and closes on click or escape key.
   ============================================================ */

.hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.map-preview {
    max-width: 420px;
    margin: 1rem auto;
    cursor: zoom-in;
}

.map-preview img.thumb {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid rgba(227, 204, 255, 0.65);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

/* full-screen overlay — hidden by default */
.map-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 300;
    cursor: zoom-out;
}

.map-overlay.active {
    display: flex;
}

.map-overlay img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.map-overlay .caption {
    margin-top: 1rem;
    color: #f8f8ff;
    text-align: center;
    font-size: 1rem;
    max-width: 900px;
}


/* ============================================================
   site footer
   just sets the font — layout is handled by the html structure.
   ============================================================ */

.site-footer,
.site-footer * {
    font-family: 'Alegreya', cursive;
}


/* ============================================================
   utility link button (e.g. the "assets" button on the index page)
   styled like a nav link but with a visible border to make it feel
   more like a button. squared corners to match the site aesthetic.
   ============================================================ */

.index-utility-link {
    display: inline-block;
    color: #e3ccff;
    font-family: 'Eagle Lake', cursive;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    margin: 0 0 1rem 0;
    padding: 0.45rem 1.1rem;
    border: 2px solid #c4b5fd;
    border-radius: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.index-utility-link:hover,
.index-utility-link:focus {
    color: #ffffff;
    border-color: #ffffff;
    background: rgba(196, 181, 253, 0.15);
    outline: none;
}


/* ============================================================
   index page card list
   flex column of cards that each have an svg background image,
   a square sigil image on the left, and text on the right.
   the svg background is an absolutely positioned img element
   so it stretches reliably without css background-size issues.
   ============================================================ */

/* outer container — stacks cards vertically, full width */
.page-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0 0 0;
    box-sizing: border-box;
    align-self: stretch;
}

/* individual card — flex row with relative positioning for the bg image */
.page-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    background: transparent;
}

/* svg background — absolutely fills the card behind all content */
.page-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    object-fit: fill;
}

/* both content cells sit above the background */
.page-card-image,
.page-card-text {
    position: relative;
    z-index: 1;
}

/* left cell — square image that scales with the card height */
.page-card-image {
    flex: 0 0 120px;
    width: 120px;
    min-width: 60px;
    aspect-ratio: 1 / 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.page-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* right cell — takes up all remaining horizontal space */
.page-card-text {
    flex: 1 1 0;
    padding: 0.85rem 1rem;
    min-width: 0;
    box-sizing: border-box;
}

.page-card-text h3 {
    margin: 0 0 0.4rem 0;
    font-family: 'Eagle Lake', cursive;
    font-size: 1.05rem;
    color: #e3ccff;
}

.page-card-text h3 a {
    color: #e3ccff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-card-text h3 a:hover,
.page-card-text h3 a:focus {
    color: #c4b5fd;
}

.page-card-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #f8f8ff;
}

/* header label above the asset list on assets.html */
.asset-list-header {
    font-family: 'Eagle Lake', cursive;
    font-size: 1rem;
    color: #e3ccff;
    border-bottom: 1px solid rgba(196, 181, 253, 0.3);
    padding-bottom: 0.5rem;
    margin: 1rem 0 0.5rem 0;
}


/* ============================================================
   l2 section submenu (in-page navigation bar)
   horizontal bar of anchor links for jumping between sections
   on a single page. collapses to a dropdown on narrow/portrait viewports.
   used on jobclasses.html and any other page with subsections.
   ============================================================ */

/* container bar */
.section-subnav {
    position: relative;
    margin: 0 0 1.5rem 0;
    background: rgba(0, 0, 0, 0.88);
    border-bottom: 2px solid rgba(196, 181, 253, 0.4);
}

/* mobile toggle button — hidden on wide viewports */
.section-subnav-toggle {
    display: none;
    width: 100%;
    height: 50px;
    padding: 0 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #e3ccff;
    font-family: 'Eagle Lake', cursive;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.section-subnav-toggle:hover,
.section-subnav-toggle:focus {
    background: rgba(196, 181, 253, 0.18);
    color: #ffffff;
    outline: none;
}

/* link row — horizontal scroll if there are too many items */
.section-subnav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 181, 253, 0.4) transparent;
}

/* individual section link buttons */
nav.section-subnav a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 1.25rem;
    color: #e3ccff;
    font-family: 'Eagle Lake', cursive;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

nav.section-subnav a:last-child {
    border-right: none;
}

nav.section-subnav a:hover,
nav.section-subnav a:focus {
    background: rgba(196, 181, 253, 0.18);
    color: #ffffff;
    outline: none;
}

/* active state — set by js when a section link is clicked */
nav.section-subnav a.active {
    background: rgba(40, 15, 60, 0.9);
    color: #c4b5fd;
    border-bottom: 2px solid #c4b5fd;
}

/* on narrow/portrait viewports, collapse to a vertical dropdown */
@media (max-width: 600px), (orientation: portrait) {

    .section-subnav-toggle {
        display: flex;
        align-items: center;
    }

    /* links hidden until toggle is activated */
    .section-subnav-links {
        display: none;
        flex-direction: column;
        overflow: visible;
    }

    .section-subnav.subnav-open .section-subnav-links {
        display: flex;
    }

    /* vertical layout for each link */
    nav.section-subnav a {
        height: auto;
        padding: 0.75rem 1.25rem;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        justify-content: flex-start;
        white-space: normal;
    }

    /* active state uses a left border instead of bottom border in vertical mode */
    nav.section-subnav a.active {
        border-bottom: none;
        border-left: 3px solid #c4b5fd;
        padding-left: calc(1.25rem - 3px);
    }
}


/* ============================================================
   theme toggle
   "darker than dark mode" replaces the svg background with pure black.
   the button lives at the bottom of the left nav on every page.
   preference is saved to localStorage via theme-toggle.js.
   ============================================================ */

/* pure black background mode */
body.theme-darker {
    background-image: none;
    background-color: #000000;
}

/* the toggle button itself */
.theme-toggle-btn {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(196, 181, 253, 0.3);
    border-radius: 0;
    color: #c4b5fd;
    font-family: 'Eagle Lake', cursive;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: rgba(196, 181, 253, 0.1);
    border-color: #c4b5fd;
    color: #ffffff;
    outline: none;
}


/* ============================================================
   legacy template classes
   these are leftover from the original layout.html template.
   not actively used on any live page but keeping them here
   so nothing breaks if they show up somewhere.
   ============================================================ */

.logo {
    grid-area: logo;
    padding: 10px;
    border: 1px solid #ccc;
}

.main-nav {
    grid-area: nav;
    padding: 10px;
    border: 1px solid #ccc;
}

.main-nav ul {
    list-style: none;
    padding: 0;
}

.main-nav li {
    margin: 10px 0;
}

.content {
    grid-area: content;
    padding: 20px;
    border: 1px solid #ccc;
}

.subnav {
    position: absolute;
    top: 50%;
    right: 20px;
    background: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    z-index: 10;
}

.subnav ul {
    list-style: none;
    padding: 0;
}

.subnav li {
    margin: 5px 0;
}