/* --- General Page Layout and Typography --- */

/* Imports Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

/* Decorative underline for the main H1 title */
h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 2px;
}

/* Standalone styling for H2 headings */
h2 {
  font-size: 1.75rem;
  color: var(--gray-900);
  margin-top: 2rem;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 0.5rem;
}

/* Standalone styling for H3 headings */
h3 {
  font-size: 1.35rem;
  color: var(--gray-900);
}

/* --- Full-Width Page Overrides --- */
/* This is the crucial section to fix the narrow page layout */
.page {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
}

/* Hides the sidebar */
.sidebar {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Forces grid items to a single column */
.grid__item {
  position: static !important;
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Centers the main container */
#main {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Hides the site's default header/masthead */
.masthead {
  display: none !important;
}

.masthead__inner-wrap {
  margin: 0 auto !important;
}

.page__inner-wrap {
  float: none !important;
  width: 94% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
}

/* --- Responsive Design for Smaller Screens --- */
/* (Keeping only general responsive rules here) */
@media (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}