/* Ensure root elements don't interfere with fixed positioning */
html, body {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

/* === Google Fonts === */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap");

/* === Global Reset & Base === */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: var(--text_dark);
  background-color: var(--neutral);
  line-height: 1.6;
}

/* ... rest of your style.css ... */

/* === Google Fonts === */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap");

/* === Global Reset & Base === */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: var(--text_dark);
  background-color: var(--neutral);
  line-height: 1.6;
}

/* === Color Palette === */
:root {
  --primary: #0A2540;
  --secondary: #1E40AF;
  --accent: #38BDF8;
  --neutral: #F1F5F9;
  --text_dark: #1F2937;
  --text_light: #4B5563;
}

/* === Container aligned to printable area === */
.container-nav {
  max-width: 90%;
}

/* === Navigation Links === */
.nav-link {
  color: white;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -4px;
  background-color: var(--accent);
}

/* === Mobile Menu === */
.mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding-top: 2rem;
  background-color: var(--primary);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
  margin-top: 0;
}

/* === Table Styling if needed === */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

th, td {
  padding: 1rem;
  border: 1px solid #ddd;
  text-align: left;
}

/* === Utilities === */
.text-white {
  color: white;
}

.bg-primary {
  background-color: var(--primary);
}

.font-serif {
  font-family: 'Merriweather', serif;
}


/* === Content Container Styling === */
.container {
  width: 100%;
  max-width: 1280px;      /* Max width for large screens */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;        /* ZERO padding on left for mobile-first */
  padding-right: 0;       /* ZERO padding on right for mobile-first */
}


@media (min-width: 640px) {
  .container {
    padding-left: 0 !important; /* Padding for small to medium screens */
    padding-right: 0 !important;
    /* Removed margin-left/right: 0; here to allow mx-auto to work if used */
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 0 !important; /* Padding for medium to large screens */
    padding-right: 0 !important;
    /* Removed margin-left/right: 0; here to allow mx-auto to work if used */
  }
}


/* Responsive tweak for larger screens */
@media (min-width: 1280px) {
  .container {
    padding-left: 0 !important;   /* Padding for extra large screens */
    padding-right: 0 !important;
    margin-left: auto;      /* Re-center for very large screens */
    margin-right: auto;
  }
}

/* Optional: Constrain inside content even more if needed */
section {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}