/* ----------------------------------------------
   VETERANS RESOURCES PAGE – CLEAN RESET VERSION
   ---------------------------------------------- */

/* Main wrapper centers the entire page content */
.veteran-resources-wrapper {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 900px;
  margin: 2rem auto !important;
  padding: 1.5rem 1.75rem;
  background: #f3f4f6;
  box-sizing: border-box;
}

/* Page headings */
.vr-page-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 1.8rem;
  color: #001f3f;
  margin-bottom: 0.5rem;
}

.vr-page-subtitle {
  text-align: center;
  font-size: 0.98rem;
  color: #333333;
  max-width: 740px;
  margin: 0 auto 1.75rem;
}

/* Decorative red-white-blue bar */
.vr-flag-bar {
  width: 260px;
  max-width: 80%;
  height: 6px;
  margin: 0 auto 2rem;
  border-radius: 999px;
  background: linear-gradient(to right, #b22234, #ffffff, #3c3b6e);
}

/* --- NEW CLEAN LAYOUT FIX ---
   All cards stack vertically and stay perfectly centered */
.vr-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin: 0 auto;
}

/* Card appearance */
.vr-card {
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  border: 2px solid #d1d5db;
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* Card border color variations */
.vr-card-border-blue { border-color: #003f7f; }
.vr-card-border-red { border-color: #b22234; }
.vr-card-border-gold { border-color: #c48b1f; }

/* Card header */
.vr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.vr-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #001f3f;
}

.vr-card-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #4b5563;
}

/* Card text */
.vr-card-text {
  font-size: 0.95rem;
  color: #374151;
  margin-bottom: 0.9rem;
  line-height: 1.6;
}

/* Button group inside cards */
.vr-button-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* Buttons */
.vr-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: all 0.15s ease-in-out;
  color: #ffffff;
}

/* Blue button */
.vr-button-blue {
  background: #003f7f;
  border-color: #00234a;
}
.vr-button-blue:hover {
  background: #0050a8;
}

/* Red primary button */
.vr-button-primary {
  background: linear-gradient(135deg, #b22234, #ff4136);
  border-color: #7f1a27;
}
.vr-button-primary:hover {
  background: linear-gradient(135deg, #ff4136, #b22234);
}

/* Outline button */
.vr-button-outline {
  background: #ffffff;
  color: #003f7f;
  border-color: #003f7f;
}
.vr-button-outline:hover {
  background: #f3f4ff;
}

/* Emergency crisis box */
.vr-emergency {
  margin-top: 2rem;
  width: 100%;
  background: #fff5f5;
  border: 2px solid #b22234;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.vr-emergency-title {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #b22234;
  margin-bottom: 0.4rem;
}

.vr-emergency-text {
  font-size: 0.93rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Footer text */
.vr-footer-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  text-align: center;
  color: #6b7280;
}