/* CLS (Cumulative Layout Shift) Fixes for External REST Header/Footer */

/* Fix 1: Reserve space for header logo using aspect-ratio */
.restHeader_logo .logo {
  /* Natural size is 300x60, aspect ratio is 5:1 */
  aspect-ratio: 5 / 1;
  width: 166px; /* Desktop width from CSS */
  height: auto;
}

@media (max-width: 1200px) {
  .restHeader_logo .logo {
    width: 86px; /* Mobile width from CSS */
  }
}

/* Fix 2: Reserve space for footer logo using aspect-ratio */
.restFooter_logo {
  /* Natural size is 300x60, aspect ratio is 5:1 */
  aspect-ratio: 5 / 1;
  width: 320px;
  height: auto;
}

@media (max-width: 770px) {
  .restFooter_logo {
    width: 234px; /* Mobile width */
  }
}

/* Fix 3: Navigation collapse should not take up space when hidden */
.restHeader_collapse:not(.show) {
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

.restHeader_collapse.show {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

/* Fix 4: Prevent flash of unstyled text during font loading */
@font-face {
  font-family: 'Barlow';
  font-display: swap;
  /* This overrides the default font-display behavior */
}

/* Fix 5: Reserve minimum height for header to prevent shift */
.restHeader {
  min-height: 80px; /* Default header height */
}

@media (max-width: 1200px) {
  .restHeader {
    min-height: var(--restHeaderHeight, 80px);
  }
}