/*===================
SITEWIDE GLOBAL RESET
=====================
Rules for Page Container,
Site Header, Main Nav,
Archive Buttons Swap,
Rounded Image, Captions,
Footer Nav and Copyright
=====================*/

:root {
/* --- Layout --- */
--container-max: 1000px;
--bp-mobile: 700px; /* reference value only; media queries below can't read this var directly */

/* --- Spacing scale --- */
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 6px;   /* matches hero image/text gap */
--space-md: 20px;

/* --- Borders / radius --- */
--border-thin: 1.5px;
--border-default: 3px;
--border-thick: 3.25px;
--radius-lg: 20px;

/* --- Shared glow effect (used on header, nav, captions, footer) --- */
--glow: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));

/* --- Background wallpaper (override these three per page) ---
--bg-image: url() to the 2x2 tile
--bg-size:  tile dimensions, e.g. "200px 200px"
--bg-hue:   hue-rotate amount, e.g. 90deg — this is what changes the color per page */
--bg-image: none;
--bg-size: auto;
--bg-hue: 0deg;
}

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

/*============
PAGE CONTAINER
==============*/

.page-container {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
}

body {
overflow-x: hidden;
margin: 0;
padding: 0;
position: relative;
}

/* Recolorable wallpaper: one tile image, recolored per page via --bg-hue.
   Sits on a fixed pseudo-layer behind all content so hue-rotate never touches
   text, images, or UI — only the tile itself shifts color. Preserves the
   multi-tone/grain detail in the source image, unlike a mask would. */

body::before {
content: "";
position: var(--bg-position, fixed);
inset: 0;
z-index: -1;
background-image: var(--bg-image);
background-size: var(--bg-size);
background-repeat: repeat;
filter: hue-rotate(var(--bg-hue));
pointer-events: none;
}

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

.site-header {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
justify-content: center;
text-align: center;
padding-top: var(--space-md);
}

.site-header img {
max-width: var(--container-max);
width: 100%;
height: auto;
display: block;
transition: filter 0.4s ease;
filter: var(--glow);
}

/*===============================
RAINBOW HUE (Header Hover Effect)
================================*/

@keyframes rainbow-hue {
0%   { filter: var(--glow) hue-rotate(0deg); }
100% { filter: var(--glow) hue-rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
.site-header a:hover img {
animation: rainbow-hue 1s linear infinite;
}
}

/*=================
MAIN NAVIGATION BAR
===================*/

.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-2xs);
padding-bottom: 0;
margin-bottom: var(--space-sm); /* uniform section gap — see hero-template.css */
}

.main-nav a img {
max-width: 181px;
width: 100%;
height: auto;
  display: block;
  filter: var(--glow);
}

/*==========================================================
JELLO EFFECT (Main Nav & Footer Nav Button Hover/Tap Effect)
===========================================================*/

@keyframes jello {
0%, 100% { transform: scale(1, 1); }
30%      { transform: scale(1.15, 0.85); }
50%      { transform: scale(0.9, 1.1); }
70%      { transform: scale(1.05, 0.95); }
}

@media (prefers-reduced-motion: no-preference) {
.main-nav a:hover img,
.caption-link:hover img,
.footer-container a:not(:nth-child(2)):hover img {
animation: jello 0.6s ease;
}
}

/*=====================================
ARCHIVE BUTTON (image swap on hover/tap)
=======================================*/

.archive-btn {
position: relative;
display: block;
}

.archive-btn .img-default {
position: relative;
transition: opacity 0.22s ease;
}

.archive-btn .img-archive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.22s ease;
}

.archive-btn:hover .img-default,
.archive-btn:focus-visible .img-default,
.archive-btn.tap-active .img-default {
opacity: 0;
}

.archive-btn:hover .img-archive,
.archive-btn:focus-visible .img-archive,
.archive-btn.tap-active .img-archive {
opacity: 1;
}

.rounded-image {
display: block;
max-width: 100%;
height: auto;
border: var(--border-thick) solid var(--rounded-border-color, #000);
border-radius: var(--radius-lg);
filter: var(--glow);
}

.still-link img {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.still-link:hover img {
transform: scale(1.02);
}

/*===================
TEXT BOX (PNG FORMAT)
====================*/

.text-box {
max-width: var(--container-max);
width: 100%;
height: auto;
margin: 0 auto;
margin-top: var(--space-xs);
}

.text-box img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0 auto;
}

/*===========
CAPTION PNGS
===========*/

.caption {
margin-top: var(--space-xs);
width: 100%;
}

.caption img {
margin-top: var(--space-xs);
width: 100%;
max-width: 540px;
height: auto;
filter: var(--glow);
transition: transform 0.25s ease, opacity 0.25s ease;
}

.caption-link img:hover {
transform: scale(1.05);
}

/*====================
FOOTER NAVIGATION BAR
====================*/

.footer-nav {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
}

/* Proportional flex ratios (526 : 53 : 526) instead of fixed pixel widths,
   so this scales automatically if --container-max ever changes. */
.footer-container {
display: flex;
width: 100%;
max-width: var(--container-max);
height: 147px;
gap: 0;
}

.footer-container a:nth-child(1) { flex: 526 1 0; }
.footer-container a:nth-child(2) { flex: 53 1 0; }
.footer-container a:nth-child(3) { flex: 526 1 0; }

.footer-container img {
width: 100%;
height: 100%;
display: block;
filter: var(--glow);
transition: transform 0.3s ease;
}

.footer-container img:hover {
transform: scale(1.02);
}

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

.site-footer {
width: 100%;
text-align: center;
margin-top: var(--space-xs);
padding-bottom: var(--space-md);
}

.site-footer img {
width: 100%;
max-width: var(--container-max);
height: auto;
border: var(--border-default) solid #828281;
border-radius: var(--radius-lg);
filter: var(--glow);
display: block;
}

/*===============
MOBILE RESPONSIVE
=================*/

@media (max-width: 700px) {

.page-container {
width: 100%;
padding-left: var(--space-2xs);
padding-right: var(--space-2xs);
margin: 0 auto;
}

.site-header {
width: 99%;
margin-top: var(--border-default);
padding: var(--space-2xs) 0;
}

.main-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: var(--space-2xs);
}

.main-nav a {
width: 100%;
margin: 0;
}

.main-nav a img {
width: 100%;
height: auto;
display: block;
}

.rounded-image {
border-width: 2.5px;
}

.footer-nav {
max-width: 100%;
height: auto;
justify-content: center;
align-items: center;
gap: var(--border-default);
}

.footer-container {
width: 100%;
height: auto;
margin: 0 auto var(--border-default);
gap: var(--space-2xs);
}

.footer-container a {
flex: 1 1 auto;
}

.footer-container img {
width: 100%;
height: auto;
display: block;
}

.site-footer {
margin: 0 auto;
max-width: 99%;
display: block;
padding-bottom: 7px;
}

.site-footer img {
width: 100%;
max-width: 100%;
display: block;
border-width: var(--border-thin);
}
}