/* css/base.css */

/* 
   Contains base styles for the entire site, including:
   - CSS variable overrides from the original style.css
   - Global element styling (box-sizing, typography)
   - Main layout structure (header, nav, main, footer)
*/

:root {
    /* color-scheme: light dark; */
    
    /* General Theme */
    --clr-bg-overlay: rgba(245, 222, 179, 0.8); /* wheat with 80% opacity */
    --clr-bg: wheat; /* Page background */
    --clr-text-primary: #046b62; /* Main text color - dark green */
    --clr-text-light: #fff; /* Light text on dark backgrounds */
    --clr-text-subtle: #ccc; /* Subtle text, like for modal captions or button text */
    --clr-focus: aqua; /* Focus ring color for accessibility */
    --clr-link: #000; /* Primary link color */
    --clr-link-hover: orangered; /* Link hover color */
    --clr-link-border: #000;
    --clr-header-border-bottom: #000;
    --clr-border: #ccc; /* Default border color */

    /* Components */
    --clr-notes-bg: wheat; /* Background for notes sections */
    --clr-card-bg: #fdf5e6; /* old lace, slightly off-white for cards */
    --clr-accent-danger: red; /* For things like rules or important markers */

    /* Font & Sizing */
    --ff: monospace;
    --max-w-readable: 75ch;
    --text-indent: 2rem;
    --bar-size: 25vh; /* Default stripe height */
    --stripe-size: 40px; /*Default stripe width*/
    --nav-height: 45px; /* Explicit height for the navigation bar */

    /* Stripe Colors */
    --stripe-clr-1: orange;
    --stripe-clr-2: #000;
    --stripe-alt-clr-1: #ff0000;
    --stripe-alt-clr-2: #000;

    /* Navigation */
    --clr-nav-bg: #333;
    --clr-nav-hover-bg: #555;

    /* Buttons */
    --clr-button-bg: #111;
    --clr-button-border: #000;

    /* Modal */
    --clr-modal-bg: rgba(0, 0, 0, 0.9);
    --clr-modal-close-hover: #bbb;
    --clr-shadow-light: rgba(0, 0, 0, 0.2);

    /* Distance Chart */
    --clr-program-flyers-base: #f3d099; /* papayawhip #FFEFD5 - main color for program flyers table */
    --clr-table-header-bg: #333;
    --clr-table-row-header-bg: #f2f2f2;
    --clr-table-zero-bg: #e0e0e0;
    --clr-table-row-even-bg: var(--clr-program-flyers-base);
    --clr-table-row-odd-bg: color-mix(in srgb, var(--clr-program-flyers-base), white 15%); /* Slightly lighter than base */
    --clr-highlight-row: #F4A460;
    --clr-highlight-col: #F4A460; /* sandybrown */

    /* Font Sizes */
    --font-size-100: 0.625rem;  /* 10px */
    --font-size-200: 0.75rem;   /* 12px */
    --font-size-300: 0.875rem;  /* 14px */
    --font-size-400: 1rem;      /* 16px (Base size) */
    --font-size-500: 1.125rem;   /* 18px */
    --font-size-600: 1.25rem;   /* 20px */
    --font-size-700: 1.5rem;    /* 24px */
    --font-size-800: 1.75rem;   /* 28px */
    --font-size-900: 2rem;      /* 32px */
    --font-size-h1: 4.5rem;     /* 72px */

    /* Font Weights */
    --font-weight-100: 100;    /* Thin */
    --font-weight-300: 300;    /* Light */
    --font-weight-400: 400;    /* Regular (default) */
    --font-weight-500: 500;    /* Medium */
    --font-weight-600: 600;    /* Semi-Bold */
    --font-weight-700: 700;    /* Bold */
    --font-weight-900: 900;    /* Extra Bold */

    /* Font Families */
    --font-family-serif: "Times New Roman", "Georgia", serif;
    --font-family-sans-serif: "Arial", "Helvetica", sans-serif;
    --font-family-monospace: "Courier New", "Lucida Console", monospace;
    --font-family-cursive: "Yellowtail", cursive;

}

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Reserve space for the scrollbar to prevent layout shifts */
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p,
li,
figcaption {
    max-width: var(--max-w-readable);
}

address {
    background-color: var(--clr-bg);
    width: fit-content;
    padding: 1rem;
    border-radius: 8px;
    margin-inline: auto;
}
    
/* 
   Style for text fragments that are scrolled to via a URL.
   This customizes the browser's default highlight.
*/
::target-text {
    background-color: var(--clr-highlight-col);
    color: #000; /* Use black for high contrast against the highlight color */
}

/* 
   Style for the user's text selection highlight.
   Uses theme variables to adapt to light/dark mode.
*/
::selection {
    background-color: var(--clr-highlight-col);
    color: var(--clr-text-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space under the image */
}

body {
    background-color: var(--clr-bg); /* fall back color */
    background-image: url(../images/abstract1.png);
    color: var(--clr-text-primary);
    font-family: var(--ff);
    position: relative; /* Needed for pseudo-element */
}

body::before {
    content: "";
    position: fixed; /* Make it cover the viewport */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--clr-bg-overlay);
    z-index: -1;  /* Place it behind the content */
    pointer-events: none; /* Let clicks go through */
}

header {
    position: relative;
    font-family: serif;
    border-bottom: 5px solid var(--clr-header-border-bottom);
    display: flex;
    justify-content: space-between;
    text-align: center;

    div {
        display: flex;
        flex-direction: column;

        h1 {
            font-size: clamp(1.5rem, 5vw, 2.5rem);
            font-weight: bold;
            padding-inline: .75rem;
        }

        h2 {
            font-size: clamp(1.1rem, 5vw, 1.7rem);
            padding-inline: .75rem;
        }
    }
}

#header1, #header3 {
    justify-content: center; /* Vertically center the images in their containers */
}

.butterfly {
    display: none;
}

.header-right {
    display: none;
}

.eagle1 {
    display: none;
}

.ver {
    position: absolute;
    font-size: var(--font-size-300);
    top: 2px;
    right: 3px;
}

/* <<<<<<<< Nav start >>>>>>>> */
nav {
    margin-top: 1rem;
    border-bottom: 5px solid var(--clr-header-border-bottom);

    ul {
        padding-inline: 15px;
        margin-bottom: 0; /* Remove margin to prevent gap below nav */

        li {
            position: relative;
            background-color: var(--clr-bg);
            list-style-type: none;
            border: 2px solid var(--clr-link-border);
            border-radius: 5px;
            padding-inline: .5rem;
            margin-bottom: .15rem;
    
            a {
                display: block;
                color: var(--clr-text-primary);
                text-decoration: none;
                width: 100%;
                height: 100%;
            }

            a:hover {
                color: var(--clr-link-hover);
            }
        }
    }
}

.active {
    background-color: var(--clr-button-bg);
    
    a {
        color: var(--clr-text-light);
    }
}
/* <<<<<<<< Nav End >>>>>>>> */

main {
    margin-top: 1rem;
    margin-bottom: 3rem;
    padding-inline: 1rem;
}

footer {
    font-size: var(--font-size-200);
    border-top: 5px solid var(--clr-header-border-bottom);
    padding-top: 1rem;
    margin-bottom:  3rem;
    text-align: center;
}