/**
 * ============================================================================
 * MAIN HEADER RESPONSIVE - MOBILE AND TABLET ADAPTATIONS
 * ============================================================================
 * Media queries for responsive header layout across all screen sizes.
 * 
 * BREAKPOINTS:
 * - 1440px+ : Large desktop (max-width container)
 * - 1199px- : Desktop (reduced spacing)
 * - 1023px- : Tablet (hide navigation)
 * - 767px-  : Mobile (smaller logo and buttons)
 * - 480px-  : Small mobile (compact layout)
 * - 375px-  : Extra small mobile (minimal spacing)
 * ============================================================================
 */

/* ========================================================================== */
/* LARGE DESKTOP - 1440px AND ABOVE */
/* ========================================================================== */
@media (min-width: 1440px) {
  .main-header__container {
    max-width: 1400px; /* Limit width on large screens */
  }
}

/* ========================================================================== */
/* DESKTOP - UP TO 1199px */
/* ========================================================================== */
@media (max-width: 1199px) {
  .main-header__container {
    max-width: 100%; /* Full width */
    padding-inline: 30px; /* Horizontal padding */
  }

  .main-header__nav-list {
    gap: 20px; /* Reduced gap between nav items */
  }

  .main-header__nav-link {
    font-size: 15px; /* Smaller nav links */
  }

  .main-header__discover-btn {
    padding: 14px 36px; /* Smaller button padding */
    font-size: 15px; /* Smaller button text */
  }
}

/* ========================================================================== */
/* TABLET - UP TO 1023px */
/* ========================================================================== */
@media (max-width: 1023px) {
  .main-header__container {
    padding-inline: 24px; /* Reduced horizontal padding */
  }

  .main-header__logo-image {
    height: 50px; /* Smaller logo */
  }

  .main-header__nav {
    display: none; /* Hide navigation on tablet */
  }

  .main-header__discover-btn {
    padding: 12px 32px; /* Smaller button */
    font-size: 14px; /* Smaller text */
    gap: 6px; /* Reduced gap */
  }

  .main-header__discover-icon {
    width: 18px; /* Smaller icon */
    height: 18px; /* Smaller icon */
  }
}

/* ========================================================================== */
/* MOBILE - UP TO 767px */
/* ========================================================================== */
@media (max-width: 767px) {
  .main-header {
    padding: 16px 0; /* Reduced vertical padding */
  }

  .main-header__container {
    padding-inline: 20px; /* Reduced horizontal padding */
  }

  .main-header__logo-image {
    height: 45px; /* Smaller logo */
  }

  .main-header__discover-btn {
    padding: 10px 24px; /* Compact button */
    font-size: 14px; /* Smaller text */
  }
}

/* ========================================================================== */
/* SMALL MOBILE - UP TO 480px */
/* ========================================================================== */
@media (max-width: 480px) {
  .main-header {
    padding: 14px 0; /* Minimal vertical padding */
  }

  .main-header__container {
    padding-inline: 16px; /* Minimal horizontal padding */
  }

  .main-header__logo-image {
    height: 40px; /* Smaller logo */
  }

  .main-header__discover-btn {
    padding: 10px 20px; /* Compact button */
    font-size: 13px; /* Smaller text */
  }
}

/* ========================================================================== */
/* EXTRA SMALL MOBILE - UP TO 375px */
/* ========================================================================== */
@media (max-width: 375px) {
  .main-header__container {
    padding-inline: 12px; /* Minimal horizontal padding */
  }

  .main-header__logo-image {
    height: 36px; /* Very small logo */
  }

  .main-header__discover-btn {
    padding: 8px 16px; /* Very compact button */
    font-size: 12px; /* Very small text */
    gap: 4px; /* Minimal gap */
  }

  .main-header__discover-icon {
    width: 16px; /* Very small icon */
    height: 16px; /* Very small icon */
  }
}

/* ========================================================================== */
/* RETINA DISPLAYS - HIGH DPI SCREENS */
/* ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .main-header__logo-image,
  .main-header__discover-icon {
    image-rendering: -webkit-optimize-contrast; /* Crisp images on retina */
    image-rendering: crisp-edges; /* Crisp images on retina */
  }
}

/* ========================================================================== */
/* TABLET LANDSCAPE - UP TO 1023px IN LANDSCAPE */
/* ========================================================================== */
@media (max-width: 1023px) and (orientation: landscape) {
  .main-header {
    padding: 12px 0; /* Reduced padding in landscape */
  }

  .main-header__logo-image {
    height: 42px; /* Adjusted logo size */
  }

  .main-header__discover-btn {
    padding: 10px 28px; /* Adjusted button size */
  }
}

/* ========================================================================== */
/* TABLET PORTRAIT - 768px TO 1023px IN PORTRAIT */
/* ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .main-header__logo-image {
    height: 48px; /* Adjusted logo for portrait tablets */
  }
}