/* DESKTOP LAYOUT FIX - Compact header with responsive logo sizing */
/* Cache-busting update: 2026-01-07 - Force CSS reload for logo size changes */

/* Override CSS variables globally */
:root {
  --spacing-3xl: 48px !important;
  --spacing-2xl: 32px !important;
  --spacing-xl: 24px !important;
}

/* Fix hero and sections at ALL viewport widths */
.hero,
.hero__container,
[class*="hero"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  margin: 0 !important;
  max-height: none !important;
}

.section,
section,
[class*="section"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  margin: 0 !important;
}

/* Remove any min-height that might be causing issues */
.hero,
.section,
body > section:first-of-type {
  min-height: auto !important;
}

/* ========== HEADER FIXES - Compact & Responsive ========== */

/* Base header - compact vertical spacing - MOBILE (<768px) */
.header {
  position: sticky !important;
  top: 0 !important;
  max-height: 370px !important;
  height: auto !important;
  z-index: 1000 !important;
}

.header__container {
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-height: 370px !important;
}

/* Base logo sizing - mobile and small screens - Optimized for cropped logo */
.header__logo img,
.header img,
.logo img {
  max-height: 270px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Tablet and medium screens (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .header {
    max-height: 420px !important;
  }

  .header__container {
    padding: 14px 24px !important;
    max-height: 420px !important;
  }

  .header__logo img,
  .header img,
  .logo img {
    max-height: 340px !important;
  }
}

/* Desktop screens (1200px - 1919px) */
@media (min-width: 1200px) and (max-width: 1919px) {
  .header {
    max-height: 460px !important;
  }

  .header__container {
    padding: 16px 24px !important;
    max-height: 460px !important;
  }

  .header__logo img,
  .header img,
  .logo img {
    max-height: 375px !important;
  }

  .hero {
    padding: 40px 0 !important;
  }

  .section {
    padding: 40px 0 !important;
  }
}

/* Large desktop screens (1920px+) */
@media (min-width: 1920px) {
  .header {
    max-height: 520px !important;
  }

  .header__container {
    padding: 18px 24px !important;
    max-height: 520px !important;
  }

  .header__logo img,
  .header img,
  .logo img {
    max-height: 445px !important;
  }

  .hero {
    padding: 36px 0 !important;
  }

  .section {
    padding: 36px 0 !important;
  }
}