/**
 * DWiA Header Custom Styles
 * Widened header band by 30% and navigation styling updates
 *
 * @package DWiA Theme
 * @version 1.0.0
 */

/* =========================================
   HEADER - WIDENED BY 30%
========================================== */
.dwia-header {
  padding: 1.3rem 0; /* Increased from ~1rem (30% increase in vertical padding) */
}

.dwia-header-content {
  min-height: 78px; /* Increased from ~60px (30% increase) */
}

/* Increase brand logo size by 30% */
.dwia-brand-logo img {
  max-height: 78px !important; /* Increased from 60px (30% increase) */
}

/* Increase brand text size proportionally */
.dwia-brand-short {
  font-size: 1.95rem; /* Increased by ~30% */
}

.dwia-brand-long {
  font-size: 1.17rem; /* Increased by ~30% */
}

/* =========================================
   NAVIGATION - ALL CAPS STYLING
========================================== */
.dwia-nav-menu {
  font-size: 0.95rem; /* Slightly larger for better readability with ALL CAPS */
  letter-spacing: 0.15em; /* Increased letter spacing for ALL CAPS */
  flex-wrap: nowrap; /* Prevent wrapping on desktop */
  justify-content: flex-end; /* Align to right */
}

.dwia-nav-menu li {
  white-space: nowrap; /* Prevent text wrapping within menu items */
}

.dwia-nav-menu a {
  font-weight: 600; /* Bolder for ALL CAPS visibility */
  display: inline-block; /* Ensure proper spacing */
}

/* Adjust for longer German text */
[lang="de"] .dwia-nav-menu,
html[lang="de-DE"] .dwia-nav-menu {
  font-size: 0.85rem; /* Slightly smaller for German */
  letter-spacing: 0.1em; /* Reduced letter spacing */
  gap: 1.5rem; /* Reduced gap between items */
}

/* =========================================
   RESPONSIVE - MAINTAIN PROPORTIONS
========================================== */

/* Large desktop - ensure header doesn't break */
@media (min-width: 1025px) and (max-width: 1400px) {
  .dwia-nav-menu {
    gap: 2rem; /* Reduce gap on smaller desktops */
  }

  [lang="de"] .dwia-nav-menu,
  html[lang="de-DE"] .dwia-nav-menu {
    gap: 1.25rem;
  }
}

@media (max-width: 1024px) {
  .dwia-nav-menu {
    font-size: 0.85rem;
    gap: 1.5rem;
  }

  [lang="de"] .dwia-nav-menu,
  html[lang="de-DE"] .dwia-nav-menu {
    font-size: 0.8rem;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .dwia-header {
    padding: 1rem 0;
  }

  .dwia-header-content {
    min-height: 65px;
    flex-wrap: wrap; /* Allow header content to wrap on mobile */
  }

  .dwia-brand-logo img {
    max-height: 65px !important;
  }

  .dwia-brand-short {
    font-size: 1.6rem;
  }

  .dwia-brand-long {
    font-size: 1rem;
  }

  .dwia-nav-menu {
    font-size: 0.75rem; /* Smaller font for mobile */
    gap: 0.5rem; /* Tighter spacing */
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on mobile */
    width: 100%; /* Full width for better distribution */
    margin-top: 0.5rem; /* Space from logo */
  }

  [lang="de"] .dwia-nav-menu,
  html[lang="de-DE"] .dwia-nav-menu {
    font-size: 0.7rem;
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .dwia-brand-short {
    font-size: 1.3rem;
  }

  .dwia-brand-long {
    font-size: 0.85rem;
  }

  .dwia-nav-menu {
    font-size: 0.65rem; /* Very small but readable on small mobile */
    gap: 0.3rem;
    letter-spacing: 0.08em;
    padding: 0.25rem 0;
  }

  .dwia-nav-menu li a {
    padding: 0.3rem 0.4rem; /* Smaller touch targets acceptable at this size */
  }

  [lang="de"] .dwia-nav-menu,
  html[lang="de-DE"] .dwia-nav-menu {
    font-size: 0.6rem;
    gap: 0.25rem;
    letter-spacing: 0.05em;
  }
}