/* ============================================================
   TREASURE THINGS OF NEW OLD — DESIGN SYSTEM
   A calm, reading-focused Christian resource library.

   Visual concept: aged parchment meets living forest —
   "new" (fresh growth, clarity) and "old" (treasured,
   time-tested scripture). Deep forest green anchors trust;
   warm treasury gold marks what is precious. A single
   signature motif — a wax-seal "treasure mark" — appears at
   moments of emphasis (hero, section dividers, empty states)
   rather than being scattered as decoration.
   ============================================================ */

/* -------------------- Design Tokens -------------------- */
:root {
  /* Color: named, then applied semantically */
  --color-forest-900: #14261f;   /* deepest text / dark surfaces */
  --color-forest-700: #1e4d3f;   /* primary brand green */
  --color-forest-600: #2a6350;
  --color-forest-100: #e7efe9;   /* tinted surfaces */
  --color-parchment-50: #faf8f3; /* page background */
  --color-parchment-100: #f2eee2;
  --color-gold-600: #b8892f;     /* treasury gold accent (buttons secondary/links) */
  --color-gold-500: #c9a227;     /* brighter gold for the signature seal */
  --color-clay-600: #a8462f;     /* warm terracotta-red for primary CTAs (download etc) */
  --color-clay-700: #8f3a26;

  --color-primary: var(--color-forest-700);
  --color-primary-dark: var(--color-forest-900);
  --color-secondary: var(--color-gold-600);
  --color-accent: var(--color-clay-600);
  --color-background: var(--color-parchment-50);
  --color-surface: #ffffff;
  --color-border: #ded6c3;
  --color-muted: #6b6355;
  --color-text: #26241e;
  --color-success: #2f7a52;
  --color-warning: #b8892f;
  --color-danger: #a8462f;

  /* Typography */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* Spacing scale (multiples of 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20, 38, 31, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 38, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 38, 31, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* -------------------- Base -------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Prevent images from ever overflowing their container — the single
   biggest cause of accidental horizontal scroll on content pages. */
img, svg { max-width: 100%; height: auto; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a { color: var(--color-forest-700); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-clay-600); }

::selection { background: var(--color-gold-500); color: #fff; }

/* Visible focus states everywhere (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--color-gold-500);
  outline-offset: 2px;
}

.section { padding: var(--sp-8) 0; }
.section-tight { padding: var(--sp-6) 0; }
.surface { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.text-muted-custom { color: var(--color-muted) !important; }
.text-accent { color: var(--color-clay-600) !important; }
.text-gold { color: var(--color-gold-600) !important; }
.bg-brand { background-color: var(--color-primary) !important; }
.bg-parchment { background-color: var(--color-parchment-100) !important; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-600);
}

/* -------------------- Signature: Treasure Seal -------------------- */
.treasure-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--color-gold-500), var(--color-gold-600) 70%);
  color: var(--color-forest-900);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.treasure-seal i { font-size: 1.1rem; }

/* Uploaded site logo, shown in place of the treasure-seal icon in the
   navbar/admin sidebar brand mark once one exists (see Setting::logoUrl()).
   Height-constrained rather than cropped into the seal's circle, since a
   real logo's proportions and shape aren't known in advance. */
.navbar-brand-logo {
  max-height: 40px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.divider-seal {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  color: var(--color-gold-600);
}
.divider-seal::before,
.divider-seal::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* -------------------- Navbar -------------------- */
.site-navbar {
  background: var(--color-forest-900);
  padding: var(--sp-3) 0;
}
/* Explicit, not inherited from Bootstrap's .navbar-expand — brand and
   nav-links are two flex items that wrap onto separate lines (brand on
   top, full nav row below) whenever they don't both fit on one line,
   e.g. if the site name text is long. Each item's own internal layout
   (nav-links laid out in a row, see .navbar-nav below) is unaffected
   by this — only whether brand and nav share a row or not. */
.site-navbar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--sp-2);
}
.site-navbar .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.site-navbar .navbar-brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: #cfd8d1;
  letter-spacing: 0.02em;
}
.site-navbar .nav-link {
  color: #e7efe9;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: var(--radius-sm);
}
.site-navbar .nav-link.active,
.site-navbar .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.site-navbar .btn-nav-cta {
  background: var(--color-gold-600);
  color: #1c1a12;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-5);
}
.site-navbar .btn-nav-cta:hover { background: var(--color-gold-500); }

/* This navbar is intentionally never collapsed behind a hamburger
   toggle, on any screen size — every link stays visible, laid out
   horizontally, at all times, including on mobile. flex-direction is
   set explicitly (rather than relying on Bootstrap's bare
   `.navbar-expand` class to do it) since that class's row-layout rule
   wasn't reliably taking effect once the toggler/collapse-wrapper
   markup was removed. flex-wrap lets the row break onto a second line
   on narrow screens instead of overflowing — that's what keeps "always
   show every link" from re-introducing horizontal scroll. */
.site-navbar .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}
@media (max-width: 575.98px) {
  .site-navbar .nav-link { padding: 0.4rem 0.65rem !important; font-size: var(--fs-sm); }
  .site-navbar .btn-nav-cta { padding: 0.4rem var(--sp-4); font-size: var(--fs-sm); }
}

/* -------------------- Buttons -------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: 0.6rem 1.4rem; transition: all var(--transition-fast); }
.btn-primary-brand {
  background: var(--color-clay-600);
  border-color: var(--color-clay-600);
  color: #fff;
}
.btn-primary-brand:hover { background: var(--color-clay-700); border-color: var(--color-clay-700); color: #fff; }
.btn-outline-brand {
  background: transparent;
  border: 1.5px solid var(--color-forest-700);
  color: var(--color-forest-700);
}
.btn-outline-brand:hover { background: var(--color-forest-700); color: #fff; }
.btn-gold {
  background: var(--color-gold-600);
  border-color: var(--color-gold-600);
  color: #1c1a12;
}
.btn-gold:hover { background: var(--color-gold-500); color: #1c1a12; }
.btn:disabled, .btn.is-loading { opacity: 0.7; cursor: not-allowed; }

/* -------------------- Hero -------------------- */
/* Two stacked pieces: a full-width, fully responsive image (never
   cropped — the hero image carries its own baked-in text), followed by
   a plain content block (headline, scripture refs, CTA) on a solid
   brand background. No overlay, so nothing competes with text in the
   image itself. */
.hero-image-wrap {
  width: 100%;
  line-height: 0;           /* removes the small inline-image gap under the img */
  background: var(--color-forest-900);
}
.hero-image {
  width: 100%;
  height: auto;             /* fully responsive, image never cropped */
  display: block;
}

.hero-content {
  background: var(--color-forest-900);
  color: #fff;
  padding: var(--sp-7) 0 var(--sp-8);
  text-align: center;
}
.hero-content h1 {
  color: #fff;
  font-size: var(--fs-4xl);
  max-width: 900px;
  margin: 0 auto var(--sp-4);
}
.hero-content .scripture-ref {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
  font-size: var(--fs-sm);
  margin: var(--sp-1) var(--sp-2);
  color: #f2eee2;
}

/* -------------------- Cards -------------------- */
.card-resource {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 100%;
}
.card-resource:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-cover {
  aspect-ratio: 3 / 4;
  background: var(--color-parchment-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-forest-900);
  position: relative;
  overflow: hidden;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.card-resource .play-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.card-resource .play-badge span {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-clay-600); font-size: 1.25rem;
}
.card-resource .card-body-custom { padding: var(--sp-5); }
.card-resource .category-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-forest-700);
  background: var(--color-forest-100);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: var(--sp-2);
}

/* -------------------- Blog Post Body -------------------- */
.post-body {
  font-size: var(--fs-lg);
  line-height: 1.85;
  color: var(--color-text);
  max-width: 68ch;
}

/* -------------------- Forms -------------------- */
.form-label { font-weight: 600; color: var(--color-forest-900); font-size: var(--fs-sm); }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  padding: 0.65rem 0.9rem;
  background: var(--color-surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-forest-600);
  box-shadow: 0 0 0 3px rgba(30, 77, 63, 0.15);
}
.form-text { color: var(--color-muted); }
.invalid-feedback { font-size: var(--fs-xs); }

/* -------------------- Alerts / Toasts -------------------- */
.alert { border-radius: var(--radius-md); border: none; }
.alert-brand-success { background: #e4f2ea; color: var(--color-success); }
.alert-brand-danger { background: #fbeae6; color: var(--color-danger); }

#toast-region { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 1080; }

/* -------------------- Footer -------------------- */
.site-footer {
  background: linear-gradient(180deg, rgba(20,38,31,0.3), rgba(20,38,31,0.3)),
              url('../images/footer-mountains.jpg') center/cover no-repeat;
  color: #dfe7e2;
  padding: var(--sp-7) 0 var(--sp-5);
}
.site-footer .scripture-line {
  text-align: center;
  color: #cfe0d5;
  font-style: italic;
  font-family: var(--font-heading);
  max-width: 800px;
  margin: 0 auto var(--sp-2);
  font-size: var(--fs-sm);
}
.site-footer hr { border-color: rgba(255,255,255,0.15); }
.site-footer a { color: #dfe7e2; }
.site-footer a:hover { color: var(--color-gold-500); }

/* -------------------- Empty / 404 states -------------------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); }
.empty-state .treasure-seal { width: 64px; height: 64px; margin-bottom: var(--sp-4); }
.empty-state .treasure-seal i { font-size: 1.6rem; }

/* -------------------- Breadcrumb -------------------- */
.breadcrumb { background: transparent; padding: 0; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-muted); }

/* -------------------- Loaders -------------------- */
.spinner-brand {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------- Auth cards -------------------- */
.auth-wrapper { min-height: 70vh; display: flex; align-items: center; }
.auth-card { max-width: 420px; margin: 0 auto; padding: var(--sp-7) var(--sp-6); }
.auth-card .treasure-seal { margin: 0 auto var(--sp-4); }

/* -------------------- Utility -------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-forest-900); color: #fff;
  padding: var(--sp-2) var(--sp-4); z-index: 2000; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

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

.text-shadow {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 12px rgba(0, 0, 0, 0.5);
}