/*!
 * Alan Sans CSS Variables
 * Defines CSS custom properties for consistent typography
 */

:root {
  /* Font family variables - Override existing variables */
  --ff-body: 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  --ff-heading: 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  --ff-accent-red: #EC2427;
  
  /* Font weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* Ensure body uses Alan Sans */
body {
  font-family: var(--ff-body);
}

/* Ensure headings use Alan Sans */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
}

/* Fix any layout issues caused by font changes */
.article-page {
  /* Ensure proper spacing is maintained */
  line-height: 1.6;
}

.article-header__title {
  /* Maintain proper heading spacing */
  font-family: var(--ff-heading);
}

.article-body__content {
  /* Maintain proper body text spacing */
  font-family: var(--ff-body);
}

/* Ensure footer doesn't overlay content */
footer {
  clear: both !important;
  margin-top: 3rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fix any container issues */
.container-fluid {
  min-height: auto !important;
}

#main {
  min-height: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure proper page flow */
body {
  position: relative !important;
}

/* Fix article page specific layout */
.article-page {
  margin-bottom: 48px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Ensure content has proper spacing */
.site-container {
  margin-bottom: 3rem !important;
}

/* Fix image spacing issues */
.article-hero {
  margin: 32px 0 !important;
  position: relative !important;
}

.article-hero__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  object-fit: cover !important;
}

/* Fix any image gaps */
img {
  vertical-align: middle !important;
}

/* Ensure proper spacing for the big image in legacy templates */
.bigimg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 1rem 0 !important;
}

/* Ensure proper spacing for article content */
.article-text {
  font-family: var(--ff-body);
  line-height: 1.75;
}

.article-text p {
  margin-bottom: 1.5em;
}

.article-text h1,
.article-text h2,
.article-text h3,
.article-text h4,
.article-text h5,
.article-text h6 {
  font-family: var(--ff-heading);
  margin-top: 2em;
  margin-bottom: 1em;
}

.article-text h1:first-child,
.article-text h2:first-child,
.article-text h3:first-child,
.article-text h4:first-child,
.article-text h5:first-child,
.article-text h6:first-child {
  margin-top: 0;
}