/* === home.css === */
/* HERO SECTION */
.hero-section {
  background: linear-gradient(110deg, #22232d 65%, var(--color-primary) 100%);
  padding: var(--space-12) 0 var(--space-10) 0;
  box-shadow: var(--shadow-lg);
}
.hero-content h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  text-align: center;
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}
.hero-tagline {
  display: block;
  font-size: var(--font-size-lg);
  color: var(--color-neutral-200);
  font-family: var(--font-sans);
  font-weight: normal;
  margin-top: var(--space-1);
}
.hero-content p {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-6);
  margin-top: var(--space-2);
  text-align: center;
}
.search-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.search-box form {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}
.search-box input[type="search"] {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}
.search-box button {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary);
}

/* SECTIONS SPACING */
.section-spacing {
  padding: var(--space-10) 0 var(--space-8) 0;
}

/* GRIDS & CARDS */
.updates-grid, .articles-grid, .tools-grid, .community-grid, .split-columns {
  margin-top: var(--space-6);
}
.card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px) scale(1.018);
  box-shadow: var(--shadow-lg);
}
.articles-grid .card, .tools-grid .card {
  min-height: 185px;
}
.updateHighlight {
  color: var(--color-warning);
  font-weight: bold;
}

/* SPLIT GUIDE/RESOURCES */
.veteran-resources-split .card {
  min-height: 220px;
  margin-bottom: var(--space-4);
}

/* SOCIAL & NEWSLETTER */
.stay-connected-content {
  margin-top: var(--space-2);
  text-align: center;
}
.stay-connected-content h2 {
  margin-bottom: var(--space-3);
}
.social-links a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), background var(--transition-base);
}
.social-links a:hover {
  box-shadow: var(--shadow-md);
  background: var(--color-primary-hover);
}
.social-links img {
  max-width: 26px;
  max-height: 26px;
}
.newsletter-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  max-width: 260px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-primary);
}

/* FOOTER */
.footer {
  background: var(--color-surface);
  box-shadow: var(--shadow-md) 0 -4px 12px 0 rgba(0,0,0,0.18);
  padding: var(--space-6) 0 var(--space-10) 0;
  font-size: var(--font-size-sm);
  position: relative;
}
.footer-main {
  flex-wrap: wrap;
}
.footer-site-name {
  font-size: var(--font-size-lg);
  font-family: var(--font-serif);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.footer-nav ul, .footer-legal ul {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}
.footer-copyright {
  color: var(--color-neutral-400);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* COOKIE BANNER */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 -6px 32px rgba(0,0,0,0.22);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  font-size: var(--font-size-sm);
  transition: transform 0.2s ease, opacity 0.2s;
}
.cookie-consent-banner[hidden] {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}
.cookie-message a {
  color: var(--color-primary);
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  gap: var(--space-2);
}
.button-secondary {
  background: none;
  color: var(--color-warning);
  border: 1.5px solid var(--color-warning);
}
.button-secondary:hover, .button-secondary:focus-visible {
  background: var(--color-warning);
  color: var(--color-surface);
}

/* ACCESSIBILITY & MISC */
@media (max-width: 1200px) {
  .container {
    max-width: 99vw;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .articles-grid, .tools-grid, .updates-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .community-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 850px) {
  .articles-grid, .tools-grid {
    grid-template-columns: 1fr !important;
  }
  .updates-grid, .community-grid, .split-columns, .dev-qa-merch-section > .container {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .hero-content h1 {
    font-size: var(--font-size-2xl);
  }
  .footer {
    padding: var(--space-4) 0 var(--space-10) 0;
  }
  .footer-main {
    flex-direction: column;
    gap: var(--space-4);
  }
  .cookie-consent-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}
/* === END home.css === */