/* =============================== */
/* === 1. RESET AND BOX-SIZING === */
/* =============================== */

/* Apply box-sizing globally */
* {
    box-sizing: border-box;
}

/* Ensure HTML5 elements display correctly in older browsers */
header, section, main, footer {
    display: block;
}

/* =================================== */
/* === 2. DARK THEME CSS VARIABLES === */
/* =================================== */

/* This CSS uses hard-coded/in-line colours for the default "light theme", for
 * basic compatibility when JavaScript and/or CSS variables are not supported.
 *
 * The theme-toggle button is only visible when JavaScript is enabled.
 * If "dark theme" is selected, a LocalStorage entry sets the data-theme to "dark".
 * If "light theme" is re-selected, the LocalStorage entry is deleted.
 * 
 * DEFAULT LIGHT THEME:

:root {
    --bg-color: #fff;
    --text-color: #2a2a2a;

    --link-color: #004080;
    --link-hover: #0056b3;
    --link-focus: #000;
    --link-focus-outline: #80d8ff;

    --nav-bg-color: #000;
    --nav-text-color: #fff;
    --nav-link-hover-color: #ff56b3;
    --nav-link-focus-color: #80d8ff;
    --nav-link-focus-outline: #80d8ff;
    
    --footer-bg-color: #f4f4f4;
    --border-color: #ddd;
    
    --code-bg-color: #000;
    --code-text-color: #f4f4f4;
    --pre-bg-color: #f4f4f4;
    --pre-text-color: #000;
    --input-bg-color: #f4f4f4;
    --input-text-color: #000;
    
    --details-bg-color: #f5f5f5;
    --details-text-color: #2a2a2a;
    --details-not-summary-bg-color: #f5f5f5;
    --details-not-summary-text-color: #333333;

    --button-bg-color: #007bff;
    --button-color: #fff;
    --button-hover-bg-color: #0056b3;
    --button-focus-bg-color: #0056b3;
    --button-focus-outline-color: #000;

    --theme-button-bg-color: #007bff;
    --theme-button-color: #fff;
    --theme-button-hover-bg-color: #0056b3;
    --theme-button-focus-bg-color: #0056b3;

	--table-heading-bg-color: #f5f5f5;


} */

/* Dark theme variables*/
[data-theme="dark"] {
    --bg-color: #1e1e1e;
    --text-color: #e0e0e0;

    --link-color: #80d8ff;
    --link-hover: #a3e0ff;
    --link-focus: #80d8ff;
    --link-focus-outline: #80d8ff;

    --nav-bg-color: #333;
    --nav-text-color: #e0e0e0;
    --nav-link-hover-color: #ff56b3;
    --nav-link-focus-color: #80d8ff;
    --nav-link-focus-outline: #80d8ff;

    --footer-bg-color: #333;
    --border-color: #444;
    
    --code-bg-color: #2b2b2b;
    --code-text-color: #e0e0e0;
    --pre-bg-color: #2b2b2b;
    --pre-text-color: #e0e0e0;
    --input-bg-color: #2b2b2b;
    --input-text-color: #e0e0e0;
    
    --details-bg-color: #2b2b2b;
    --details-text-color: #e0e0e0;
    --details-not-summary-bg-color: #2b2b2b;
    --details-not-summary-text-color: #e0e0e0;

    --button-bg-color: #444;
    --button-color: #e0e0e0;
    --button-hover-bg-color: #555;
    --button-focus-bg-color: #555;
    --button-focus-outline-color: #80d8ff;

    --theme-button-bg-color: #444;
    --theme-button-color: #e0e0e0;
    --theme-button-hover-bg-color: #555;
    --theme-button-focus-bg-color: #555;
    
    --table-heading-bg-color: #2b2b2b;
}

/* ========================= */
/* === 3. PAGE STRUCTURE === */
/* ========================= */

html {
    font-size: 16px; /* Default font size -- can use em and rem units for scaling */
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #2a2a2a;
}
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

main {
    max-width: 900px;
    text-align: left;
    padding: 20px;
    margin: 0 auto;
    margin-top: 100px;
}

main.gallery-page {
    max-width: none; /* Removes the 900px limit */
    width: auto; /* Allows natural width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Keeps content centered */
}



footer {
    padding: 10px;
    text-align: center;
    margin-top: 30px;
    background-color: #f4f4f4;
}

[data-theme="dark"] footer {
    background-color: var(--footer-bg-color);
}

/* ======================== */
/* === 4. MAIN ELEMENTS === */
/* ======================== */

.highlight {
	font-weight: bold;
}

a {
    color: #004080;
}

[data-theme="dark"] a {
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
    color: #0074d9;
}

[data-theme="dark"] a:hover {
    color: var(--link-hover);
}

a:focus {
    text-decoration: underline;
    outline-offset: 2px;
    outline: 2px solid;
    outline-color: #000;
}

[data-theme="dark"] a:focus {
	outline-color: var(--link-focus);
}

/* When a local anchor link is clicked, scroll up a bit to prevent the nav bar obscuring the top of the linked section */
[id] {
    scroll-margin-top: 96px; /* Approx height of nav bar */
}

img {
    max-width: 100%; /* fit width */
    height: auto; /* maintain aspect ratio */
    display: block; /* block element (not in-line for responsive design) */
}

.image-gallery img {
    width: auto;
    height: auto;
    display: block;
}

.image-gallery {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 250px; /* Adds spacing between images */
    margin-bottom: 175px;
    margin-top: 110px;
    align-items:center;
}

h1 { /* Main page title (Ahoy!, Arch, Lineage, etc.) */
    text-align: center;
    font-size: 3rem;
    margin-top: 2.75rem;
    color: #2a2a2a;
}

[data-theme="dark"] h1 {
    color: var(--text-color);
}

h2 { /* NONSENSE and STUFF headings */
    display: inline-block; /* Allows the visible "Skip" link next to "Nonsense" h2 header. */
    margin: 20px 10px 10px 0px;
    font-size: 2rem;
}

h2 + a { /* The visible "Skip" link next to the "Nonsense" h2 header */
    font-size: 1rem;
}

h3 {
	font-size: 1.3rem;
}


p {
    margin-bottom: 20px;
    font-size: 1rem;
}

q {
    font-style: italic;
}

code {
    font-family: monospace;
    padding: 2px 4px;
    border-radius: 3px;
    background: #f4f4f4;
    color: #000;
}

[data-theme="dark"] code {
    background: var(--code-bg-color);
    color: var(--code-text-color);
}

pre {
    padding: 10px;
    overflow-x: auto;
    border: 1px solid;
    border-color: #ddd;
	background: #f4f4f4;
    color: #000;
}

[data-theme="dark"] pre {
    border-color: var(--border-color);
    background: var(--pre-bg-color);
	color: var(--pre-text-color);
}

pre code {
    display: block;
}

ul, ol {
    list-style-position: outside;
}

ol.spaced-list li,
ul.spaced-list li {
    margin-bottom: 10px;
}

ol li span.bullet-label,
ul li span.bullet-label {
    font-weight: bold;
    margin-right: 0.5em;
}

ol li span.bullet-label-caps,
ul li span.bullet-label-caps {
	text-transform: uppercase;
    font-weight: bold;
    margin-right: 0.5em;
    
}

/* ================= */
/* === 5. TABLES === */
/* ================= */

table {
    border-collapse: collapse;
    margin: 20px 10px;
}

/* Make the caption (table title) invisible, but available to screen-readers */
table caption {
    position: absolute;
    left: -999px;
    top: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

th, td {
    padding: 4px 20px 4px 10px;
    text-align: left;
    border: 1px solid;
    border-color: #ddd;
}

[data-theme="dark"] th, td {
	border-color: var(--border-color);
}

th {
	font-weight: normal;
    background-color: #f5f5f5;
}

[data-theme="dark"] th {
	background-color: var(--table-heading-bg-color);
}

/* ========================== */
/* === 6. NAVIGATION MENU === */
/* ========================== */

nav {
	position: fixed;       /* Fixes the nav bar to the viewport */
    top: 0;                /* Positions it at the top of the viewport */
    left: 0;               /* Positions it at the left edge */
    width: 100%;           /* Ensures the nav bar spans the full width */
    padding: 10px 15px;
    display: flex;
    flex-wrap: nowrap;		/* Don't wrap nav bar to multiple rows; use horizontal scrolling */
    align-items: center;
	justify-content: flex-start;	/* left-align nav bar items */
    z-index: 1000;
    white-space: nowrap;   /* Prevent wrapping of links */
    overflow-x: auto;      /* Allow horizontal scrolling */
    background-color: #000;
}

[data-theme="dark"] nav {
	background-color: var(--nav-bg-color);
}

nav a {
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
	border-radius: 4px;
    white-space: nowrap; /* Prevent individual link text from wrapping */
    margin: 5px 10px; /* space between links */
    padding: 16px 12px; /* Padding required for ARIA min touch area: 48x48 */
	color: #fff;
}

[data-theme="dark"] nav a {
	color: var(--nav-text-color);
}

nav a:hover {
    text-decoration: underline;
    color: #ff56b3;
}

[data-theme="dark"] nav a:hover {
    color: var(--nav-link-hover-color);
}

nav a:focus {
	outline-offset: 2px;
	outline: 2px solid;
	outline-color: #80d8ff;
}

[data-theme="dark"] nav a:focus {
	outline-color: var(--nav-link-focus-outline);
}

/* Invert colours on active nav link */
nav a.active {
    color: #000;
    background-color: #fff;
}

[data-theme="dark"] nav a.active {
    color: var(--nav-bg-color);
    background-color: var(--nav-text-color);
}

/* =========================== */
/* === 7. FORMS AND INPUTS === */
/* =========================== */

input[type="text"],
textarea {
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    margin-right: 10px;
    border: 1px solid;
    border-color: #ddd;
    background-color: #f4f4f4;
    color: #000;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] textarea {
    border-color: var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 10px;
    border: 1px solid;
    border-color: #ddd;
    background-color: #fff;
    color: #2a2a2a;
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    border-color: var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}

input:focus,
textarea:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline-offset: 2px;
    outline: 2px solid;
    outline-color: #80d8ff;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline-color: var(--link-focus-outline);
}

/* ================== */
/* === 8. BUTTONS === */
/* ================== */

/* Default button styles */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
}

[data-theme="dark"] button {
    background-color: var(--button-bg-color);
    color: var(--button-color);
}

button:hover { /* inherit default text color from button */
    background-color: #0056b3;
}
[data-theme="dark"] button:hover {
    background-color: var(--button-hover-bg-color);
}

button:focus { /* inherit default text color from button */
	outline-offset: 2px;
    outline: 2px solid;
    outline-color: #000;
    background-color: #0056b3;
}
[data-theme="dark"] button:focus {
    outline-color: var(--button-focus-outline-color);
    background-color: var(--button-focus-bg-color);
}

/* Styles for the Toggle button */
nav button#theme-toggle {
    cursor: pointer;             /* Button can be clicked with mouse */
    margin: 0 10px 0 0;          /* Only extra space to right */
    padding: 6px;
    font-size: 2.25rem;
    background-color: #007bff;
    color: #fff;
}

/* Theme-toggle button looks the same in dark theme! */
/* [data-theme="dark"] nav button#theme-toggle { } */

nav button#theme-toggle:hover {
    background-color: #0056b3;
}

/* Theme-toggle button hover looks the same in dark theme */
/* [data-theme="dark"] nav button#theme-toggle:hover { } */

nav button#theme-toggle:focus {
    outline-offset: 2px;
    outline: 2px solid;
    outline-color: #80d8ff;    
	background-color: #0056b3;
}

[data-theme="dark"] button#theme-toggle:focus {
    outline-color: var(--nav-link-focus-outline);
 }

/* ===================== */
/* === 9. SKIP LINKS === */
/* ===================== */

.skip-link { 
    position: absolute;
    left: -999px; /* Hidden until focused */
    top: -999px;
}

.skip-link:focus {
    z-index: 100; /* Display on top of other objects... */
    border-radius: 2px;
    left: 10px;
    top: 100px;
    padding: 10px;
    background: #000;
    color: #fff;
}

/* ====================================== */
/* === 10. DETAILS & SUMMARY ELEMENTS === */
/* ====================================== */

/* Styling for <details> and <summary> for collapsible content */
details {
    margin: 20px 0;
    padding: 15px;
	border-radius: 4px;
    border: 1px solid;
    border-color: #ddd;
    background-color: #f5f5f5;    
    color: #2a2a2a;
}

[data-theme="dark"] details {
    border-color: var(--border-color);
    background-color: var(--details-bg-color);
    color: var(--details-text-color);
}

summary {
    font-weight: bold;
    cursor: pointer;
}

summary:hover,
summary:focus {
    text-decoration: underline;
    outline-offset: 2px;
    outline: 2px solid;
    outline-color: #80d8ff;
}

[data-theme="dark"] summary:hover,
[data-theme="dark"] summary:focus {
	outline-color: var(--link-focus-outline);
}

details > *:not(summary) {
    margin-top: 10px;
    border-radius: 4px;
    color: #333333;
    background-color: #f5f5f5;
}

[data-theme="dark"] details > *:not(summary) {
    color: var(--details-not-summary-text-color);
    background-color: var(--details-not-summary-bg-color);
}

/* Add spacing below clickable text when expanded */
details[open] summary {
    margin-bottom: 2rem;
}

article details ul li, article details ol li {
    margin-top: 8px;
}

/* Imitate ChatGPT's style by bolding certain text after bullet points */
article details ol li .chatgpt-bullet-heading,
article details ul li .chatgpt-bullet-heading {
    font-weight: bold;
}

article details h2 {
	font-size: 1.5rem;
}



/* =========================================== */
/* === 11. MEDIA QUERIES FOR SMALL SCREENS === */
/* =========================================== */

@media (max-width: 600px) {
    html {
        font-size: 14px; /* 16px is default for larger screens */
    }
    
    main {
        max-width: 100%; /* Use full width */
        padding: 8px; /* Reduce padding */
    }

	.skip-link:focus {
		top: 86px;
	}

    nav a {
        margin: 0 5px;
        padding: 17px 12px; /* Increase 16px padding if font-size is reduced (for accessibility). */
    }
    
    [id] {
        scroll-margin-top: 90px; /* Scroll down when opening an anchor link; allow space for nav bar */
	}
}