/**
 * ============================================================================
 * MAIN HEADER - SITE-WIDE NAVIGATION COMPONENT
 * ============================================================================
 * This stylesheet defines the main header that appears at the top of every page.
 * It contains the logo, navigation menu, and search/discover button.
 * 
 * STRUCTURE:
 * - Header container (full width)
 * - Inner container (max-width with centering)
 * - Logo (left side)
 * - Navigation menu (center)
 * - Discover button (right side)
 * 
 * LAYOUT TECHNIQUE:
 * - Uses Flexbox for horizontal alignment
 * - Responsive spacing with logical properties (margin-inline)
 * - Supports RTL (Right-to-Left) layouts automatically
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN HEADER CONTAINER - FULL-WIDTH WRAPPER */
/* ========================================================================== */
/* The outermost container that spans the entire viewport width */
.main-header {
  width: 100%; /* Full viewport width */
  background: none; /* Transparent background (page background shows through) */
  padding: 20px 0; /* Vertical padding only (horizontal handled by inner container) */
}

/* ========================================================================== */
/* INNER CONTAINER - CONTENT WRAPPER WITH MAX-WIDTH */
/* ========================================================================== */
/* Centers content and prevents it from stretching too wide on large screens */
.main-header__container {
  display: flex; /* Enable flexbox layout */
  align-items: center; /* Vertically center all children */
  justify-content: space-between; /* Space items evenly (logo left, button right) */
  max-width: 1200px; /* Maximum width for readability */
  margin: 0 auto; /* Center horizontally */
  padding: 0 20px; /* Horizontal padding for mobile screens */
}

/* ========================================================================== */
/* LOGO SECTION - BRAND IDENTITY */
/* ========================================================================== */
/* Contains the site logo/brand image */
.main-header__logo {
  flex-shrink: 0; /* Prevent logo from shrinking when space is limited */
}

/* Logo link wrapper - Makes entire logo clickable */
.main-header__logo-link {
  display: block; /* Remove inline spacing */
  text-decoration: none; /* Remove underline */
}

/* Logo image styling */
.main-header__logo-image {
  display: block; /* Remove inline spacing below image */
  height: 60px; /* Fixed height for consistency */
  width: auto; /* Maintain aspect ratio */
}

/* ========================================================================== */
/* NAVIGATION SECTION - MAIN MENU */
/* ========================================================================== */
/* Contains the primary navigation links */
.main-header__nav {
  flex-shrink: 0; /* Prevent navigation from shrinking */
  margin-inline-start: auto; /* Push to the right (RTL-aware) */
  margin-inline-end: 20px; /* Space before discover button (RTL-aware) */
}

/* Navigation list container */
.main-header__nav-list {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center items */
  gap: 30px; /* Space between navigation items */
  list-style: none; /* Remove bullet points */
}

/* Individual navigation item */
.main-header__nav-item {
  display: block; /* Block-level for better click area */
}

/* Navigation link styling */
.main-header__nav-link {
  color: #ffffff; /* White text color */
  text-decoration: none; /* Remove underline */
  font-size: 16px; /* Readable font size */
  font-weight: 400; /* Regular weight */
}

/* ========================================================================== */
/* DISCOVER BUTTON - SEARCH/DISCOVER TRIGGER */
/* ========================================================================== */
/* Button that opens the search popup modal */
.main-header__discover-btn {
  display: flex; /* Flexbox for icon + text layout */
  align-items: center; /* Vertically center icon and text */
  gap: 8px; /* Space between icon and text */
  background-color: #211d25; /* Dark background color */
  color: #ffffff; /* White text color */
  border: none; /* Remove default button border */
  padding: 16px 48px; /* Generous padding for better click target */
  font-size: 16px; /* Readable font size */
  font-weight: 500; /* Medium weight for emphasis */
  cursor: pointer; /* Show pointer cursor on hover */
  flex-shrink: 0; /* Prevent button from shrinking */
}

/* Search icon inside discover button */
.main-header__discover-icon {
  width: 20px; /* Icon width */
  height: 20px; /* Icon height */
  filter: brightness(0) invert(1); /* Convert icon to white color */
}