@charset "UTF-8";
/* === Base Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --space: 1rem; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  color: #333;
  align-items: center;
  min-height: 100vh;
}

.note {
  font-size: 0.85rem;   /* about 85% of normal text size */
  color: #555;          /* lighter gray */
  margin: 0.25rem 0;    /* small vertical spacing */
  line-height: 1.4;     /* good readability */
  text-align: left;
}

.note.center {
    text-align: center;
}

.note.center.bold {
    text-align: center;
    font-weight: bold;
}

/* Helpful global */
img { max-width: 100%; height: auto; display: block; }

/* Header bar spans full width; content constrained by .container */
header {
  background-color: #b41c1c;
  padding: 1rem 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.header-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; }

/* Mobile-first nav */
.nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.nav-list[hidden] { display: none; }

.nav-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .6rem .9rem;
  border-radius: 4px;
  transition: background .2s ease;
}
.nav-list a:hover,
.nav-list a:focus-visible { background: #900000; outline: none; }

/* Toggle button */
.nav-toggle {
  appearance: none;
  background: #900000;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .6rem .9rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Desktop: show full nav, hide button */
@media (min-width: 768px){
  .nav-toggle { display: none; }
  .nav-list { flex-direction: row; gap: 1rem; }
}

/* === Hero === */
.hero {
  background: url('patriot-banner.jpg') no-repeat center center / cover;
  padding: 4rem 2rem;
  text-align: center;
  color: white;
  background-color: #444; /* fallback */
}

.hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* === Sections & Typography === */
section {
  padding: clamp(1rem, 3vw, 2rem);
  max-width: 1000px;
  margin: auto;
}

section h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  text-align: center;
  margin-bottom: 1rem;
  border-bottom: 2px solid #b41c1c;
  display: inline-block;
  padding-bottom: 0.3rem;
}

p, li { font-size: clamp(1rem, 1.2vw, 1.0625rem); }

.event {
  background: #fff;
  border-left: 5px solid #b41c1c;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

ul { list-style-type: disc; margin-left: 1.5rem; }

.centered-text { text-align: center; }

/* === Photos & Videos Grids === */
.photos,
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.photos img,
.videos iframe {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 6px;
}

/* === Footer & Forms === */
footer {
  background-color: #eee;
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 1rem auto;
  gap: 0.5rem;
}

form input,
form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

form button {
  background-color: #b41c1c;
  color: white;
  padding: 0.7rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

form button:hover { background-color: #900000; }

/* === Gallery === */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Use aspect-ratio for responsive thumbs; replaces fixed height */
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery figcaption {
  padding: 0.5rem;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
}

.gallery img:hover {
  transform: scale(1.75);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Desktop-first: big tiles, max 3 columns */
.gallery--fullimage {
  width: 100%;          /* wide enough for two bold columns */
  margin-inline: auto;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(310px, 1fr)); /* two bold columns */
}

/* Override the generic section rule for the gallery only */
section#gallery {
  max-width: 1000px;         /* remove the 1000px cap just for gallery */
  padding-left: 0;
  padding-right: 0;
}

/* Make sure the gallery block itself is centered and columns centered */
.gallery--fullimage {
  max-width: 1100px;       /* your chosen width for big tiles */
  margin-inline: auto;     /* center the whole block in the viewport */
  justify-content: center; /* center the column tracks */
}

.gallery--fullimage img {
  /* Show the entire image */
  width: 100%;
  height: 500px;
  aspect-ratio: 2 / 3;     /* turn off the forced ratio */
  object-fit: cover;     /* no cropping */
  background: #f2f2f2;     /* subtle backdrop around portraits */
  padding: 4px;            /* small frame so “contain” looks intentional */
}

/* Optional: soften the hover zoom for tall portraits */
.gallery--fullimage img:hover {
  transform: scale(1.06);
}

/* Large screens: still 3 columns (keeps impact) */
@media (min-width: 1600px){
  .gallery--fullimage { max-width: 1500px; } /* optional gentle widen */
}

/* Tablets: drop to 2 columns */
@media (max-width: 1100px){
  .gallery--fullimage {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    max-width: 1100px;
  }
}

/* Phones: single column */
@media (max-width: 750px){
  .gallery--fullimage {
    grid-template-columns: 1fr 1fr;
    max-width: 85%;
  }
}

/* === Quote Grid === */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 0;
}

.quote-grid figure {
  background: #fff;
  border: 1px solid #ccc;
  border-left: 5px solid #b41c1c;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quote-grid blockquote {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
  color: #444;
}

.quote-grid figcaption {
  font-size: 0.9rem;
  color: #666;
  text-align: right;
}

/* === Responsive Enhancements === */

/* Collapse grids on small screens */
@media (max-width: 600px){
  .gallery { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
}

/* Friendlier nav on small screens */
@media (max-width: 700px){
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
  nav ul li a { padding: .6rem .9rem; }
}

/* Tighter hero on small screens */
@media (max-width: 600px){
  .hero { padding: 2rem 1rem; }
  .hero h1 { margin-bottom: .25rem; }
  .hero p { font-size: 1rem; }
}

/* Use a wider crop on large screens if you like */
@media (min-width: 1024px){
  .gallery img { aspect-ratio: 16 / 9; }
}

/* Touch devices: disable hover zoom (no hover on phones) */
@media (hover: none) and (pointer: coarse){
  .gallery img:hover { transform: none; box-shadow: none; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Base styles */
.nav-toggle {
  appearance: none;
  background: #900000;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .6rem .9rem;
  font-weight: 700;
  cursor: pointer;
}

/* Space things a bit */
header { display: grid; gap: .75rem; }

/* Mobile: show button, hide list by default (via [hidden]) */
.nav-list[hidden] { display: none; }

/* Desktop: show full nav, hide button */
@media (min-width: 768px){
  .nav-toggle { display: none; }
  .nav-list { display: flex; gap: 1rem; }
}

/* Desktop layout */
@media (min-width: 768px){
  .nav-toggle { display: none; }
  .nav-list { display: flex; gap: 1rem; }
}

/* Base nav list styles (mobile-first) */
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;   /* stack on mobile */
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

/* Hide when HTML has [hidden] (used by JS) */
.nav-list[hidden] { display: none; }

/* Links */
.nav-list a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 0.6rem 0.9rem;
  transition: background 0.3s ease;
}
.nav-list a:hover {
  background-color: #900000;
  border-radius: 4px;
}

/* Toggle button base */
.nav-toggle {
  appearance: none;
  background: #900000;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .6rem .9rem;
  font-weight: 700;
  cursor: pointer;
}

/* Desktop: show full nav, hide button */
@media (min-width: 768px){
  .nav-toggle { display: none; }
  .nav-list {
    flex-direction: row;
    gap: 1rem;
  }
}

#gallery h2 {
  text-align: center;
  display: block;  /* reset from inline-block so centering works naturally */
  margin-inline: auto;
}

#gallery h3 {
    text-align: center;
    display: block;
    margin-inline: auto;
}

#gallery h4 {
    text-align: center;
    display: block;
    margin-inline: auto;
}

.featured-image {
  display: block;              /* makes margin auto work */
  margin: 1.5rem auto;          /* centers in its container */
  max-width: 820px;             /* match your gallery's source width */
  width: 100%;                  /* responsive down to mobile */
  height: 520px;                /* fixed height for impact */
  object-fit: contain;            /* fills frame, slight crop if needed */
  background: #f2f2f2;          /* same subtle backdrop */
  border-radius: 6px;           /* match gallery corners */
  padding: 4px;                 /* same small frame feel */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* soft shadow for depth */
}

#feature h2 {
  text-align: center;
  display: block;  /* reset from inline-block so centering works naturally */
  margin-inline: auto;
}

#quotes h2 {
  text-align: center;
  display: block;  /* reset from inline-block so centering works naturally */
  margin-inline: auto;
}

/* Document Grid container */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1000px;     /* match your section cap */
  margin: 1.5rem auto;
  padding: 0;
}

/* Card — mirrors .gallery figure look */
.doc-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;                  /* clean edges on hover */
  display: flex;
  flex-direction: column;
  padding: 0.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Optional: subtle left accent like quote cards */
.doc-card--accent { border-left: 5px solid #b41c1c; }

/* Title — bold, coordinated color */
.doc-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .4rem 0;
  color: #333;
}

/* Link — pill-ish, echoes nav hover color */
.doc-card a.doc-link {
  align-self: flex-start;
  text-decoration: none;
  font-weight: 600;
  padding: .45rem .7rem;
  border-radius: 4px;
  background: #f0f2f5;
  color: #0b57d0;                    /* readable link blue */
  border: 1px solid #d7d7d7;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  margin-bottom: .45rem;
}
.doc-card a.doc-link:hover {
  background: #900000;
  color: #fff;
  border-color: #900000;
}

/* Detail text — same tone as figcaption */
.doc-card p {
  margin: 0;
  font-size: .92rem;
  color: #555;
  line-height: 1.45;
}

/* Small meta row option (date, size, etc.) */
.doc-meta {
  margin-top: .5rem;
  font-size: .82rem;
  color: #666;
}

.no-save { position: relative; }

.no-save::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;   /* overlay handles events, not the img */
}

.no-save img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* iOS: reduce long-press menu */
}

.gallery figure:hover img { 
  transform: scale(1.06);           /* your existing hover, adjust as needed */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero {
  position: relative;
}

.about-card {
  position: relative;              /* stays inside hero */
  width: min(100% - 2rem, 800px);  /* responsive width */
  margin: 1.25rem auto 0;          /* center in hero */
  background: #fff;
  border: 1px solid #ccc;
  border-left: 5px solid #b41c1c;  /* matches quote cards */
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 1rem 1.25rem;
  color: #333;
}

.about-card h2 {
  font-size: 1.25rem;
  margin: 0 0 .5rem 0;
}

.about-card p {
  margin: 0 0 .75rem 0;
  line-height: 1.5;
  color: #555;
}

.about-cta {
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: 4px;
  background: #f0f2f5;
  color: #0b57d0;
  text-decoration: none;
  border: 1px solid #d7d7d7;
  font-weight: 400;
}
.about-cta:hover { background: #900000; color: #fff; border-color: #900000; }

@media (max-width: 700px){
  .about-card { width: min(100% - 1.5rem, 720px); padding: .9rem 1rem; }
}