/* This file contains BASE CSS rules that are identical across all pages of the website. */
/* BASE RULES: html, body, img, a, h1-6, light-theme */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* This ensures that the page background always spans 100% of the viewport */
    width: 100%; 
}

/* Common CSS Variables for Dark/Light Mode */
:root {
    --color-primary: #ffffff;
    --color-secondary: #000000;
    --font-family-header: 'Gideon Roman', serif;
    --font-family-body: 'Roboto Serif', serif;
    --border-color: var(--color-primary);
    --header-bg: rgba(0, 0, 0, 0.6); /* Semi-transparent Black */
}

[data-theme="light"] {
    --color-primary: #000000;
    --color-secondary: #ffffff;
    --border-color: var(--color-primary);
    --header-bg: rgba(255, 255, 255, 0.6); /* Semi-transparent White */
}

/* All images grayscale */
img {
    filter: grayscale(100%);
}

/* All hyperlinks */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--color-primary);
}

a:visited {
    color: var(--color-primary);
    text-decoration: none;
}

/* Common Heading Base Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-header);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
}

/* Common H1 Specific Style */
h1 {
    font-size: 3em;
    text-align: center;
    margin-bottom: 40px;
}

/* Common H2 + H3 Styles */
h2 { font-size: 2em; margin-top: 60px; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; text-align: center; }
h3 { font-size: 1.5em; margin-top: 40px; margin-bottom: 20px; }

/* Common Unorderd List Styles */
ul {
    list-style-type: none;
    padding-left: 0;
}

/* Common Body Layout and Styling */
body {
    font-family: var(--font-family-body);
    background-color: var(--color-secondary);
    color: var(--color-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.5s ease, color 0.5s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll due to potential overflows */
}

body.menu-open {
    overflow: hidden;
}

/* === MEDIA QUERIES :: RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.3em; }
    blockquote { font-size: 1em; padding: 0px 20px; }
}

/* Landscape/Portrait adaptation (subtle changes) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Adjustments for very narrow landscape views (e.g., small phones held sideways) */
    .container { padding: 10px; }
}

@media (max-width: 360px) {
    h1 { font-size: 1.5em; margin-bottom: 20px; }
    h2 { font-size: 1.4em; margin-top: 20px; }
}