/**
 * Header-specific CSS
 * Styles for header.php only
 * 
 * @package Astra Child
 * @since 1.0.0
 * 
 * CSS Version: 202412251050
 * Last Updated: 2024-12-25 10:50
 */

/* ============================================
   TOP INFO BAR
   ============================================ */

/* Top info bar container */
body > div:first-of-type[class*="bg-"] {
  background-color: var(--color-dark);
}

/* ============================================
   HEADER NAVIGATION
   ============================================ */

/* Header container */
#header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Logo link styling - base styles in style.css */

/* Logo image styling */
#header img[alt="EmbroideryPack Logo"] {
  height: 2.5rem; /* 40px on mobile */
  width: auto;
  max-width: none; /* Remove max-width constraint */
  object-fit: contain;
  display: block;
}

/* Larger logo on medium screens */
@media (min-width: 768px) {
  #header img[alt="EmbroideryPack Logo"] {
    height: 3rem; /* 48px on tablet */
  }
}

/* Even larger logo on large screens */
@media (min-width: 1024px) {
  #header img[alt="EmbroideryPack Logo"] {
    height: 3.5rem; /* 56px on desktop */
  }
}

/* Logo link - no padding, gap handles spacing */
#header a[href*="/"]:has(img[alt="EmbroideryPack Logo"]) {
  min-width: fit-content; /* Ensure logo has enough space */
  flex-shrink: 0; /* Prevent logo from shrinking */
}

/* ============================================
   SITE NAME STYLING
   ============================================ */

/* Site name styles - base styles in style.css, only header-specific overrides here if needed */

/* Search bar container */
#header .max-w-xl {
  position: relative;
}

/* Search input */
#header input[type="text"] {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#header input[type="text"]:focus {
  outline: none;
}

/* Search button */
#header button.rounded-full {
  transition: transform 0.2s ease;
}

#header button.rounded-full:active {
  transform: scale(0.95);
}

/* Search Results Dropdown */
#search-results {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

#search-results::-webkit-scrollbar {
  width: 6px;
}

#search-results::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 0 0 0.75rem 0.75rem;
}

#search-results::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#search-results::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

#search-results a {
  text-decoration: none;
  color: inherit;
}

#search-results a:hover {
  background-color: #f1f5f9 !important;
}

/* ============================================
   NAVIGATION MENU
   ============================================ */

/* Navigation menu container */
#header nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Navigation menu links */
#header nav a {
  transition: color 0.2s ease;
  position: relative;
}

#header nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

#header nav a:hover::after {
  width: 100%;
}