/* app/static/css/components/header.css */
/* Header Component using base CSS variables */

.header {
  /* Use header component variables */
  background-color: var(--header-background);
  color: var(--header-color);
  border-bottom: var(--border-width-default) solid var(--header-border-color);
  box-shadow: var(--header-box-shadow);
  padding: var(--spacing-md) 0; /* Changed from --spacing-sm */
  margin-bottom: var(--spacing-lg); /* Add space below the header */

  position: relative; /* Establishes a stacking context */
  z-index: var(
    --z-index-sticky,
    1020
  ); /* Use z-index variable, ensure it's high enough */
}

.header__container {
  /* Uses .container class from global.css for width/padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__brand {
  display: flex;
  align-items: center;
  color: inherit; /* Inherit color from .header */
  text-decoration: none;
}

.header__logo {
  height: 2rem; /* Keep fixed height for logo? Or use variable? */
  margin-right: var(--spacing-xs); /* Use spacing variables */
  /* Consider adding max-height as well */
  max-height: calc(
    var(--header-height) - var(--spacing-md) * 2 /* Adjusted for new padding */
  ); /* Example constraint */
}

.header__title {
  font-size: var(--font-size-lg); /* Use font size variables */
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading); /* Use heading font */
  margin: 0;
  color: inherit; /* Inherit color */
}

/* Class for when logo is not present (if needed) */
.header__logo--not-present {
  display: none;
}

/* --- Mobile Navigation Toggle --- */
.header__toggle {
  display: block; /* Displayed by default on mobile */
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  width: 2.5rem; /* Slightly larger touch target */
  height: 2.5rem; /* Slightly larger touch target */
  position: relative;
  z-index: calc(
    var(--z-index-sticky, 1020) + 10
  ); /* Ensure toggle is above nav panel */
  color: inherit; /* Inherit color for potential icon fonts */
}

.header__toggle-line {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor; /* Use text color for lines */
  margin: 0.3rem auto; /* Center lines if needed */
  transition:
    transform var(--transition-duration-default) ease-in-out,
    opacity var(--transition-duration-default) ease-in-out; /* Use transition variables */
  position: relative; /* Needed for absolute positioning during animation */
  left: 0; /* Reset left for centering via margin */
}

/* --- Mobile Navigation Panel --- */
/* Default state: Hide both standard and mobile-specific nav panels */
.header__nav,
.header__nav--mobile {
  /* Apply default hiding to both classes */
  display: none; /* Hidden by default */
  flex-direction: column;
  gap: var(--spacing-sm); /* Use spacing variables */
  position: absolute;
  top: 100%; /* Position below the header */
  left: 0;
  right: 0;
  background: var(--header-background); /* Use header background */
  padding: var(--spacing-md); /* Use spacing variables */
  border-bottom: var(--border-width-default) solid var(--header-border-color);
  z-index: var(--z-index-sticky, 1020); /* Same level or just below header */
  box-shadow: var(--shadow-md); /* Use shadow variables */
}

/* Active state: Show the specific panel that has the .active class */
.header__nav.active,
.header__nav--mobile.active {
  /* Apply active showing to both classes */
  display: flex; /* Show when active */
}

.header__link {
  color: var(--header-color); /* Use header text color */
  padding: var(--spacing-xs) 0;
  text-decoration: none;
  font-family: var(--font-family-base); /* Use base font */
  font-size: var(--font-size-md); /* Use base font size */
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: color var(--transition-duration-default)
    var(--transition-timing-function-default);
}

.header__link:hover {
  color: var(--color-link); /* Use link color variable on hover */
}

/* Style for icon-only links (if used) */
.header__link--icon i {
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}

/* Header active toggle animation */
.header__toggle.active .header__toggle-line:nth-child(1) {
  transform: translateY(calc(0.3rem + 2px)) rotate(45deg); /* Adjust translate based on margin/height */
}

.header__toggle.active .header__toggle-line:nth-child(2) {
  opacity: 0;
}

.header__toggle.active .header__toggle-line:nth-child(3) {
  transform: translateY(calc(-0.3rem - 2px)) rotate(-45deg); /* Adjust translate based on margin/height */
}

/* --- Desktop Navigation (Responsive) --- */
@media (min-width: 768px) {
  /* Adjust breakpoint as needed */
  .header__toggle {
    display: none; /* Hide toggle on desktop */
  }

  /* Show standard nav, ensure mobile-specific one is hidden */
  .header__nav {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    position: static; /* Reset positioning */
    padding: 0;
    border: none;
    background: none; /* Transparent background */
    gap: var(--spacing-md); /* Adjust gap for desktop */
    align-items: center;
    z-index: auto; /* Reset z-index */
    box-shadow: none; /* Remove shadow */
  }
  .header__nav--mobile {
    display: none !important; /* Ensure mobile nav is always hidden on desktop */
  }

  .header__link {
    padding: 0; /* Reset padding */
  }
}

/* Screen Reader Only class (can be in global.css or here) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}