/* Brand variables */
:root {
  --brand-primary: #dc2626;
  --brand-primary-hover: #b91c1c;
  --brand-dark: #1f2937;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Bootstrap primary color override */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.navbar-nav .nav-link.active {
  color: var(--brand-primary) !important;
  font-weight: 600;
}

/* Logo placeholder (top-left, links to home) */
.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px dashed #9ca3af;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.05em;
}

.brand-text {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-dark);
}

/* Hero */
.hero {
  padding: 4rem 0 3rem;
  background-color: #f8f9fa;
}

/* Skip-to-content link: hidden until keyboard-focused */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background-color: var(--brand-dark);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Landmark focused via skip link doesn't need a visible outline */
#main-content:focus {
  outline: none;
}

/* Muted text on dark backgrounds (e.g. footer) needs higher contrast
   than Bootstrap's .text-muted, which is tuned for light backgrounds */
.footer-muted {
  color: #ced4da;
}

/* Keep tap targets comfortably sized on touch devices */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}