/*
 * Main custom styles for SDA.
 *
 * This file contains small utility classes and overrides specific to
 * the landing page. It complements Bootstrap and the theme tokens
 * defined in ``theme.css``.
 */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Modern, fluid typography adjustments */
body {
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.4;
}

/* Active navigation link styling */
#mainNavbar .nav-link.active {
  font-weight: 600;
  color: var(--bs-primary) !important;
}

/* Focus outline for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px dashed var(--bs-primary);
  outline-offset: 2px;
}

/* Hero section adjustments */
#hero {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  background-size: cover;
  background-position: center;
  color: white;

  padding: 6rem 0;
  min-height: 50vh;
  transition: background-image 2s ease-in-out;
}

/* Card styling */
.card {
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  border-color: var(--bs-card-border-color, var(--bs-border-color));
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dark .card {
  box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card h5 {
  color: var(--bs-primary);
  font-weight: 600;
}

/* Contact form disabled button appearance */
button[disabled] {
  pointer-events: none;
  opacity: 0.7;
}

/* Fade-in animations on scroll */
.fade-out {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Direct color classes for easy application */
.color1 { color: var(--brand-1); }
.color2 { color: var(--brand-2); }
.color3 { color: var(--brand-3); }
.color4 { color: var(--brand-4); }