/* patrick4nh - Campaign Website Custom Styles */
/* Keep this file small — most styling uses Tailwind via CDN */

:root {
  --navy: #0B2D5E;
  --navy-dark: #061B3A;
  --red: #B91C1C;
  --red-light: #DC2626;
  --gold: #C5A26F;
  --slate: #1F2937;
  --light-bg: #F8FAFC;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--slate);
}

/* Navy buttons */
.btn-primary {
  background-color: var(--navy);
  color: white;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--navy-dark);
  transform: translateY(-1px);
}

.btn-accent {
  background-color: var(--red);
  color: white;
  transition: all 0.2s ease;
}
.btn-accent:hover {
  background-color: var(--red-light);
  transform: translateY(-1px);
}

.btn-outline {
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background-color: var(--navy);
  color: white;
}

/* Section headings */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, var(--red), var(--gold));
  border-radius: 3px;
}

/* Issue cards */
.issue-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.issue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Nav */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--red);
  transition: width 0.2s ease;
}
.nav-link:hover:after {
  width: 100%;
}

/* Form styles */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 45, 94, 0.1);
}

/* Success / toast */
.toast {
  animation: slideUp 0.3s ease forwards;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Footer legal */
.footer-legal {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Hero background: NH nature scene */
.hero-bg {
  background-image: 
    linear-gradient(rgba(11, 45, 94, 0.78), rgba(6, 27, 58, 0.82)),
    url('../images/hero-nh.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Mobile menu */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
#mobile-menu.hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Accessibility */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Print friendly */
@media print {
  .no-print { display: none !important; }
  body { font-size: 12pt; }
}
/* About story A/B layouts */
.about-layout-variant {
  display: none;
}

html.about-layout-banner .about-layout-variant[data-about-layout="banner"],
html.about-layout-stacked .about-layout-variant[data-about-layout="stacked"] {
  display: block;
}

.about-story-banner-img {
  object-position: 40% 36%;
}

.about-story-banner-overlay {
  background: transparent;
  pointer-events: none;
}

.about-story-banner-text {
  pointer-events: auto;
  background: rgba(6, 27, 58, 0.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.about-story-banner-title {
  font-size: clamp(1.2rem, 2.4vw + 0.65rem, 2.5rem);
  line-height: 1;
}

.about-story-beats {
  background: linear-gradient(180deg, #0a2854 0%, #0B2D5E 100%);
}