/* ===============================================================================
   site.css — shared chrome for the weleber.net photography gallery
   Lifts the design system straight from the GIS portfolio (same palette, fonts,
   translucent nav, and topographic watermark) so a visitor crossing from the
   portfolio to the gallery feels continuity, not a jarring change.
   Page-specific styles (masonry grid, lightbox, map, admin) live in their own
   files and layer on top of this.
   =============================================================================== */

/* Color palette — copied verbatim from the portfolio so the two sites stay in
   lockstep. Forest greens + sandstone + slate read as earthy/conservation, which
   is the house tone. --accent-rust is the lone warm accent, used for hovers. */
:root {
  --forest-deep: #2c3e2d;
  --forest-mid: #3d5a3e;
  --forest-soft: #5a7c5b;
  --sandstone: #c9a96e;
  --sandstone-light: #dcc9a0;
  --sandstone-pale: #f0e6d3;
  --slate: #3a3d42;
  --slate-light: #5a5e65;
  --cream: #faf6f0;
  --cream-dark: #f2ebe0;
  --charcoal: #2a2d2e;
  --text-primary: #2a2d2e;
  --text-secondary: #5a5e65;
  --text-light: #faf6f0;
  --accent-rust: #b5654a;
}

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

html { scroll-behavior: smooth; }

/* The gallery body is intentionally DARK (charcoal/slate), unlike the portfolio's
   cream pages. A dark canvas makes photographs pop and recedes behind them — the
   spec's core visual decision for this site. */
body {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--text-light);
  background: var(--charcoal);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ TOPO WATERMARK ============
   The faint contour pattern behind content. Identical SVG to the portfolio's
   .topo-bg, drawn at 4% opacity via a ::before layer so it never competes with
   foreground content. Children are lifted to z-index 1 to sit above it. */
.topo-bg { position: relative; }
.topo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cpath d='M180 40c-35 12-78 55-95 110-20 65-8 105 30 148 28 32 75 58 130 62 48 3 95-18 132-55 42-42 68-102 55-168-10-50-48-82-95-98-38-13-82-15-128-8-12 2-22 5-29 9z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Cpath d='M195 95c-28 8-58 38-72 80-16 48-5 85 22 115 22 24 58 42 100 44 36 2 72-15 100-42 32-32 50-75 42-125-7-38-35-62-70-74-28-10-62-10-98-5-9 1-17 4-24 7z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Cpath d='M210 148c-20 5-42 28-52 58-12 35-2 62 18 82 16 16 42 30 72 31 26 1 52-12 72-32 22-22 35-52 30-88-5-28-25-45-50-54-20-7-44-6-70-2-6 1-14 3-20 5z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Cpath d='M228 200c-12 3-26 18-34 38-8 22-1 40 12 52 10 10 28 18 46 18 16 0 34-8 46-22 14-15 22-34 18-56-3-18-16-28-32-34-12-5-28-4-44-1-4 1-8 2-12 5z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Cpath d='M75 320c20-8 55-5 85 12 25 14 42 35 48 58 5 20-2 42-22 55-18 12-45 15-70 5-28-12-48-38-52-68-3-22 2-42 11-62z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Cpath d='M350 380c15-20 38-32 62-28 22 3 40 18 48 42 6 20 0 45-18 60-15 12-38 16-58 8-22-10-38-30-40-52-2-12 1-22 6-30z' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  pointer-events: none;
  z-index: 0;
}
.topo-bg > * { position: relative; z-index: 1; }

/* ============ NAV ============
   Fixed translucent dark bar with a blurred backdrop — same treatment as the
   portfolio nav so the brand reads continuously across sites. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(42, 45, 46, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
}
nav .nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .nav-name {
  font-family: 'Bitter', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sandstone-light);
  letter-spacing: 0.02em;
}
nav .nav-name a { color: inherit; text-decoration: none; }
nav .nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
nav .nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.25s, color 0.25s;
}
nav .nav-links a:hover { opacity: 1; }
/* The active view (Gallery vs Map) is marked sandstone so you always know where
   you are. The route passes an `active` flag that the template turns into this class. */
nav .nav-links a.active { opacity: 1; color: var(--sandstone); }

/* ============ PAGE SHELL ============
   main fills the space between the fixed nav and the footer. flex:1 (set on body's
   flex child) pushes the footer to the bottom even on short pages. */
main {
  flex: 1;
  padding-top: 56px;   /* clears the fixed nav so content isn't hidden beneath it */
}

/* ============ PLACEHOLDER LANDING ============
   Temporary hero shown until the masonry grid is built. Reuses the portfolio's
   charcoal-to-forest hero gradient so the chrome already looks "finished." */
.placeholder-hero {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 32px;
  background: linear-gradient(165deg,
    var(--charcoal) 0%, var(--forest-deep) 45%, #3a4f3b 72%, var(--slate) 100%);
}
.placeholder-hero h1 {
  font-family: 'Bitter', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--cream);
  margin-bottom: 16px;
  line-height: 1.15;
}
.placeholder-hero h1 span { display: block; color: var(--sandstone); font-weight: 600; }
.placeholder-rule { width: 60px; height: 2px; background: var(--sandstone); opacity: 0.6; margin: 24px 0; }
.placeholder-hero p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--sandstone-light);
  font-weight: 300;
  letter-spacing: 0.06em;
  max-width: 520px;
}

/* ============ FLASH MESSAGES ============
   Brief one-shot notices (failed login, save confirmations). Rendered in the flash
   region in base.html and shown across the app. Pinned just under the fixed nav. */
.flashes {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 32px 0;
}
.flash {
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 8px;
  border-left: 3px solid var(--sandstone);
  background: rgba(0, 0, 0, 0.3);
  color: var(--cream);
}
/* Error category: rust accent + tint, so failures read as failures at a glance. */
.flash-error {
  border-left-color: var(--accent-rust);
  background: rgba(181, 101, 74, 0.18);
}

/* ============ FOOTER ============ */
.footer-line {
  text-align: center;
  padding: 20px 32px;
  background: var(--charcoal);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.75rem;
  color: var(--slate-light);
}

/* ============ FADE-IN ON SCROLL ============
   Matches the portfolio's IntersectionObserver reveal. Elements start invisible
   and shifted down; the .visible class (added by JS when scrolled into view)
   eases them in. Kept here so the gallery grid can reuse the same effect. */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  nav .nav-inner { padding: 12px 20px; }
  nav .nav-links { gap: 14px; }
  nav .nav-links a { font-size: 0.78rem; }
}