/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
	
/*	 Colors (--color-*)
These define the color palette, allowing for easy updates to the theme. 
--color-text: #444;: Defines a dark grey for general body text.
--color-bg: #fff;: Sets a white background for the page.
--color-accent: #700;: Sets a dark red color intended for interactive elements, links, or highlights.
--color-border: #000;: Sets black for borders, dividers, or outlines. 	
*/	
    --color-text: #444;
    --color-bg: #fff;
    --color-accent: #700;
    --color-border: #000;
	
/* Typography (--font-main)
		--font-main: Courier Prime , monospace;: Sets a global font stack. It prioritizes "Courier Prime" and falls 
		back to generic monospace fonts if the first isn't available. 
*/ 	
    --font-main: "Courier Prime", monospace;

/* Layout Sizing (--max-width, --container-width)
--max-width: 1440px;: Defines the maximum width of the content area before it stops expanding on large screens.
--container-width: 85%;: Sets the default width of content containers to 85% of their parent element's width (responsive).
*/

    --max-width: 1440px;
    --container-width: 85%;

/* Spacing Scale (--space-*)
These provide a consistent spacing system using rem units (relative to root font size), which is better for accessibility than fixed pixels. 
--space-xs: 0.3rem;: Very small spacing (e.g., tight padding).
--space-sm: 0.5rem;: Small spacing (e.g., button padding).
--space-md: 1rem;: Medium spacing (e.g., standard margins).
--space-lg: 2rem;: Large spacing (e.g., gap between sections).
--space-xl: 3rem;: Extra-large spacing (e.g., padding on a large container). 
*/
    --space-xs: 0.3rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
	
/* Borders (--radius-sm)
*/
   --radius-sm: 3px; /* Sets a small border-radius */

/* Grid Control (--grid-min)
	--grid-min: 260px;: This variable is used in the Grid (minmax) to control responsiveness.	
	How it works: When creating a grid, setting column widths to repeat(auto-fit, minmax(var(--grid-min), 1fr))
	tells the browser to fit as many columns as possible, provided each is at least 260px wide. If screen space is too tight, they will wrap to a new line. 
*/ 
 --grid-min: 260px; /* tweak this to control wrapping */
}


/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1.2rem);
	line-height: 1.3;
    min-height: 100vh;
}

/* Media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Form elements inherit font */
input, button, textarea, select {
    font: inherit;
}

ol {
	list-style: decimal;
	padding-left: 1.5rem;
	width: 50%;
	margin: 1em auto;
}



/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.2s ease;
}

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

h1, h2, h3 {
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

h1 {
    font-size: clamp(1.5rem, 1.875vw, 1.875rem);
    margin: var(--space-sm) 0;
	margin-top: 2em;
    text-align: center;
}

h2{
    font-size: clamp(1.5rem, 1.875vw, 1.875rem);
    text-align: center;
	margin-top: 2em;
}

p {
    max-width: 75ch;
    margin: var(--space-md) auto;
    width: 100%;
}

.small-text{
	font-size: 80%;
    max-width: 85ch;
}




/* 	===============================================================
	LAYOUT
	========================================================================== */

.container,
.header-inner {
    margin: 0 auto;
    width: min(var(--max-width), var(--container-width));
}

/* === Responsive Grid === */
.row {
    display: grid;
    gap: var(--space-xl);
 }

/* === Column overrides === */

/* 1 Column: Always full width */
.col1 {
    grid-template-columns: 1fr;
    text-align: center;
}

/* 2 Columns: 1 col on mobile, 2 cols on tablet/desktop */
.col2 {
    grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-min), 45%), 1fr));
    text-align: center;
    margin: var(--space-md) 0;
}

/* 4 Columns: 1 col on mobile, then scales up to 4 */
.col4 {
    /* Adjusts from 1 to 2 to 4 columns automatically based on space */
    grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-min), 20%), 1fr));
}

/* Images inside grid */
.row img {
    border: 2px solid var(--color-border);
    margin: 0 auto;
    max-height: 650px;
    max-width: 1000px;
    width: auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header .header-inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    margin: var(--space-md) auto var(--space-lg);
}

.site-header .header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-header .header-text h1 {
    margin-bottom: var(--space-sm);
}

a.site-title {
    color: black;
	font-size: clamp(1.6875rem, 1.35rem + 0.75vw, 1.8rem);    
	text-decoration: none;
    letter-spacing: -1px;
    word-spacing: -10px;
}

a.site-title:hover {
    color: maroon;
}

.main-nav ul {
	background: orange;
    gap: clamp(12px, 2vw, 22px);
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: clamp(18px, 1.6875vw, 20px);
    letter-spacing: 0.08em;
}

 .main-nav a {
    font-size: clamp(18	px, 1.6875vw, 20px);
    letter-spacing: 0.08em;
}

/* ==========================================================================
   FIGURES / IMAGES
   ========================================================================== */

figure {
    display: flex;
    flex-direction: column;
}

figure img {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

figcaption {
    font-family: var(--font-main);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    letter-spacing: -0.1rem;
    margin-top: var(--space-xs);
    text-align: center;
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

picture {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

picture img {
	max-height: 550px;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-menu-img {
    height: 80px;
    width: auto;
    margin-top: var(--space-xl);
}

ul.footer-menu {
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
    font-variant-caps: all-small-caps;
    text-align: center;
    margin: var(--space-xs) auto;
    width: fit-content;
    max-width: 47ch;
}

.footer-menu li {
    display: inline-block;
}

footer {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    margin: var(--space-lg) auto 0;
    padding: var(--space-md);
    text-align: left;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.contact-form {
    margin: 0 auto;
    max-width: 500px;
    width: 50%;
}

input,
textarea {
    font-family: var(--font-main);
    font-size: 1rem;
    padding: var(--space-md);
    width: 100%;
}

label {
    display: block;
    margin-top: var(--space-md);
}

button {
    background: #666;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 1.3rem;
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.hidden {
    display: none;
}

.center-something {
    text-align: center;
	margin: 0 auto;
}

.smudgy {
    word-spacing: -0.2em;
}

.change-css {
    opacity: 0;
    margin-left: 50%;
}

.logo{
	border: 1px solid black;
}




/* ==========================================================================
   IMAGE PROTECTION
   ========================================================================== */

.img-protect {
    position: relative;
}

.img-protect::after {
    content: "";
    position: absolute;
    inset: 0;
}

.img-protect img {
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}


/* ==========================================================================
   @MEDIA
   ========================================================================== */


@media (max-width: 768px) {
      /* If your UL uses grid */
    ul{
        display: grid;
        grid-template-columns: 1fr; /* Force 1 column */
    }
    
    /* Ensure list items take full width */
    li {
        width: 100%;
        text-align: center; /* Optional: centers text for mobile */
    }
}