/* ================================================================
   RULE OF LAW GROUP — SHARED STYLES
   Extracted from page-level <style> blocks for single-source editing.
   ================================================================ */

/* ===== RESET & VARIABLES ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --navy: #0F1A2E;
  --navy-deep: #0A1220;
  --navy-light: #1A2A45;
  --parchment: #F1E9DA;
  --parchment-light: #F7F2E8;
  --parchment-dark: #E0D5C1;
  --brass: #B08A3E;
  --brass-light: #D4AC5A;
  --brass-dark: #8A6B2E;
  --ink: #151515;
  --red: #A52323;
  --red-light: #C43030;
  --white: #FAFAF7;
  --heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--parchment);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.loaded {
  opacity: 1;
}

/* ===== PARCHMENT TEXTURE OVERLAY ===== */
/* z-index fixed from 9999 → 1 so it never blocks nav or interactions */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ===== NAVIGATION ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
  padding: 1.25rem 0;
}

.nav.scrolled {
  background: rgba(15, 26, 46, 0.97);
  box-shadow: 0 2px 30px rgba(0,0,0,0.3);
  padding: 0.75rem 0;
  backdrop-filter: blur(10px);
}

/* Variant: always-solid nav (used on donate, privacy, terms) */
.nav--solid {
  background: rgba(15, 26, 46, 0.97);
  box-shadow: 0 2px 30px rgba(0,0,0,0.3);
  padding: 0.75rem 0;
  backdrop-filter: blur(10px);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--parchment);
}

.nav-logo svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-logo-text {
  font-family: var(--heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.nav-logo-text span {
  display: block;
  font-size: 0.55em;
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brass-light);
  transition: width 0.3s;
}

.nav-links a:hover { color: var(--brass-light); }
.nav-links a:hover::after { width: 100%; }

/* Active nav indicator */
.nav-links a.active { color: var(--brass-light); }
.nav-links a.active::after { width: 100%; }

.nav-cta {
  background: var(--brass) !important;
  color: var(--navy) !important;
  padding: 0.6rem 1.5rem;
  border-radius: 2px;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  transition: background 0.3s, transform 0.2s !important;
}

.nav-cta:hover {
  background: var(--brass-light) !important;
  transform: translateY(-1px);
}

.nav-cta::after { display: none !important; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--parchment);
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.25rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--red-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(165, 35, 35, 0.35);
}

.btn-secondary {
  background: transparent;
  color: var(--parchment);
  border: 1.5px solid var(--brass);
}
.btn-secondary:hover {
  background: var(--brass);
  color: var(--navy);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--brass-light);
  border: 1.5px solid rgba(176, 138, 62, 0.3);
}
.btn-ghost:hover {
  border-color: var(--brass-light);
  color: var(--parchment);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--navy);
  color: var(--parchment);
}
.btn-dark:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 26, 46, 0.25);
}

/* ===== SECTION SHARED ===== */
.section {
  padding: 6rem 2rem;
  position: relative;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::before {
  content: '';
  width: 30px;
  height: 1.5px;
  background: var(--brass);
}

.section-title {
  font-family: var(--heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.section-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #444;
  max-width: 720px;
}

/* ===== SECTION DIVIDERS ===== */
/* Angled clip-path divider between light/dark sections */
.section-divider-angle {
  position: relative;
}
.section-divider-angle::after {
  content: '';
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  height: 3rem;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  z-index: 2;
}

/* Brass rule line with decorative endpoints */
.section-divider-brass {
  position: relative;
}
.section-divider-brass::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(200px, 30%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* ===== PAGE HERO (shared by news, accomplishments, privacy, terms) ===== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--navy-deep);
  overflow: hidden;
  padding: 10rem 2rem 5rem;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(176, 138, 62, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(165, 35, 35, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}

.page-hero::after {
  content: 'We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.';
  position: absolute;
  top: 10%;
  right: -5%;
  width: 50%;
  font-family: var(--heading);
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(176, 138, 62, 0.04);
  pointer-events: none;
  transform: rotate(-3deg);
}

/* Centered variant for legal pages */
.page-hero--centered {
  padding: 8rem 2rem 3rem;
  text-align: center;
}
.page-hero--centered::after {
  display: none;
}
.page-hero--centered .page-hero-content {
  max-width: 800px;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.page-hero-rule {
  width: 80px;
  height: 2px;
  background: var(--brass);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeSlideRight 0.8s 0.3s forwards;
}

.page-hero--centered .page-hero-rule {
  margin-left: auto;
  margin-right: auto;
}

.page-hero-headline {
  font-family: var(--heading);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  color: var(--parchment);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  max-width: 800px;
  opacity: 0;
  animation: fadeSlideUp 1s 0.5s forwards;
}

.page-hero-sub {
  font-family: var(--body);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  color: var(--parchment-dark);
  line-height: 1.65;
  max-width: 660px;
  opacity: 0;
  animation: fadeSlideUp 1s 0.7s forwards;
}

/* ===== QUOTE BLOCK (shared across pages) ===== */
.quote-block {
  background: var(--navy-deep);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.quote-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(176, 138, 62, 0.06) 0%, transparent 60%);
}

.quote-block-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.quote-block-icon {
  width: 48px;
  height: 48px;
  color: var(--brass);
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.quote-block blockquote {
  font-family: var(--heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: var(--parchment);
  line-height: 1.5;
  margin: 0 auto 1.25rem;
}

.quote-block cite {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brass-light);
  letter-spacing: 0.05em;
  font-style: normal;
}

.quote-block .quote-brass-line {
  width: 60px;
  height: 2px;
  background: var(--brass);
  margin: 0 auto 2rem;
}

.quote-block .quote-brass-line-bottom {
  width: 60px;
  height: 2px;
  background: var(--brass);
  margin: 2rem auto 0;
}

/* ===== EMAIL SIGNUP SECTION ===== */
.signup-section {
  background: var(--navy-deep);
  color: var(--parchment);
  text-align: center;
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.signup-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(176, 138, 62, 0.08) 0%, transparent 60%);
}

.signup-inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.signup-section .section-label {
  justify-content: center;
}
.signup-section .section-label::before { display: none; }

.signup-section .section-title {
  color: var(--parchment);
  text-align: center;
}

.signup-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--parchment-dark);
  margin-bottom: 2rem;
}

.signup-form {
  display: flex;
  gap: 0.75rem;
  max-width: 500px;
  margin: 0 auto;
}

.signup-input {
  flex: 1;
  padding: 0.9rem 1.25rem;
  font-family: var(--body);
  font-size: 0.95rem;
  border: 1.5px solid rgba(176, 138, 62, 0.3);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--parchment);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.signup-input::placeholder {
  color: rgba(241, 233, 218, 0.4);
}

.signup-input:focus {
  border-color: var(--brass-light);
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.15);
}

.signup-btn {
  background: var(--brass);
  color: var(--navy);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  white-space: nowrap;
}

.signup-btn:hover {
  background: var(--brass-light);
  transform: translateY(-1px);
}

.signup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Newsletter success/error states */
.signup-success,
.signup-error {
  display: none;
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 1rem 1.5rem;
  border-radius: 2px;
  margin-top: 1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.signup-success {
  background: rgba(176, 138, 62, 0.15);
  border: 1px solid var(--brass);
  color: var(--brass-light);
}

.signup-error {
  background: rgba(165, 35, 35, 0.15);
  border: 1px solid var(--red);
  color: var(--red-light);
}

.signup-success.visible,
.signup-error.visible {
  display: block;
}

/* ===== LEGAL CONTENT (privacy, terms) ===== */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

.legal-content h2 {
  font-family: var(--heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--parchment-dark);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
  margin: 0.5rem 0 1.5rem 1.5rem;
}

.legal-content li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 0.5rem;
}

.legal-content .last-updated {
  font-size: 0.85rem;
  color: var(--brass-dark);
  font-weight: 500;
  margin-bottom: 2rem;
}

.legal-content a {
  color: var(--brass-dark);
}

/* ===== FORM SHARED ===== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.form-label .required {
  color: var(--red);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--parchment-dark);
  border-radius: 2px;
  background: var(--parchment-light);
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #aaa;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  width: 100%;
  margin-top: 0.5rem;
}

.form-submit:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 26, 46, 0.25);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Honeypot field — must be invisible to humans */
.ohnohoney {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Form status messages */
.form-status {
  display: none;
  font-family: var(--body);
  font-size: 0.9rem;
  padding: 1rem 1.25rem;
  border-radius: 2px;
  margin-top: 1rem;
}

.form-status.success {
  display: block;
  background: rgba(176, 138, 62, 0.1);
  border: 1px solid var(--brass);
  color: var(--brass-dark);
}

.form-status.error {
  display: block;
  background: rgba(165, 35, 35, 0.08);
  border: 1px solid rgba(165, 35, 35, 0.3);
  color: var(--red);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--ink);
  color: rgba(241, 233, 218, 0.6);
  padding: 4rem 2rem 2rem;
  position: relative;
}

/* Subtle brass gradient border at top of footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, var(--brass) 50%, transparent 90%);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(176, 138, 62, 0.12);
}

.footer-brand .nav-logo {
  margin-bottom: 1rem;
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 280px;
}

.footer-col h4 {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.25rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 0.6rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: rgba(241, 233, 218, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--parchment);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.8rem;
}

.footer-bottom a {
  color: rgba(241, 233, 218, 0.4);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-bottom a:hover {
  color: var(--parchment);
}

.footer-legal {
  display: flex;
  gap: 2rem;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideRight {
  from { opacity: 0; width: 0; }
  to { opacity: 1; width: 80px; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* Hero scales slow drift */
@keyframes heroDrift {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(-8px); }
}

/* Hero scales subtle pulse */
@keyframes heroScalePulse {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.08; }
}

/* Brass shimmer for hero rule and decorative lines */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Brass glow pulse behind hero headline */
@keyframes brassGlow {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.15; transform: scale(1.02); }
}

/* ===== SCROLL-TRIGGERED REVEALS ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (up to 7 for news archive) */
.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.15s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.2s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.25s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.3s; }
.stagger-children .reveal:nth-child(7) { transition-delay: 0.35s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 26, 46, 0.98);
    padding: 2rem;
    gap: 1.5rem;
    border-top: 1px solid rgba(176, 138, 62, 0.2);
  }

  .page-hero {
    padding: 8rem 1.5rem 3.5rem;
  }

  .page-hero--centered {
    padding: 7rem 1.5rem 2.5rem;
  }

  .page-hero::after {
    display: none;
  }

  .signup-form { flex-direction: column; }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .section { padding: 4rem 1.5rem; }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}