/**
 * Header Component
 * Full accessibility support
 * Header block for labelling context and providing primary actions
 */

/* ========================================
   HEADER CUSTOM PROPERTIES
   ======================================== */

.c-header {
  /* Base properties */
  --c-header-background: var(--ds-color-surface);
  --c-header-border-color: var(--ds-color-border);
  --c-header-text-color: var(--ds-color-text);
  --c-header-padding-block: var(--ds-space-m);
  --c-header-padding-inline: var(--ds-space-l);
  --c-header-gap: var(--ds-space-m);
  
  /* Shadow */
  --c-header-shadow: var(--ds-shadow-s);
  
  /* Typography */
  --c-header-title-font-size: var(--ds-font-size-l);
  --c-header-title-font-weight: var(--ds-font-weight-semibold);
  --c-header-title-line-height: var(--ds-line-height-s);
  
  /* Transitions */
  --c-header-transition: background-color var(--ds-duration-fast) var(--ds-ease-out),
                         border-color var(--ds-duration-fast) var(--ds-ease-out),
                         box-shadow var(--ds-duration-fast) var(--ds-ease-out);
}

/* ========================================
   BASE HEADER STYLES
   ======================================== */

.c-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--c-header-padding-block) var(--c-header-padding-inline);
  background: var(--c-header-background);
  border-bottom: 1px solid var(--c-header-border-color);
  color: var(--c-header-text-color);
  gap: var(--c-header-gap);
  transition: var(--c-header-transition);
  position: relative;
}

/* Header content area */
.c-header__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--c-header-gap);
  min-width: 0; /* Allow content to shrink */
}

/* Header title */
.c-header__title {
  margin: 0;
  font-size: var(--c-header-title-font-size);
  font-weight: var(--c-header-title-font-weight);
  line-height: var(--c-header-title-line-height);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header subtitle */
.c-header__subtitle {
  margin: 0;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text-weak);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header actions area */
.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  flex-shrink: 0;
}

/* Header start area (before title) */
.c-header__start {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  flex-shrink: 0;
}

/* Header end area (after title) */
.c-header__end {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  flex-shrink: 0;
}

/* ========================================
   SIZE VARIANTS
   ======================================== */

/* Small header */
.c-header--size-s {
  --c-header-padding-block: var(--ds-space-s);
  --c-header-padding-inline: var(--ds-space-m);
  --c-header-gap: var(--ds-space-s);
  --c-header-title-font-size: var(--ds-font-size-m);
}

.c-header--size-s .c-header__actions,
.c-header--size-s .c-header__start,
.c-header--size-s .c-header__end {
  gap: var(--ds-space-xs);
}

/* Large header */
.c-header--size-l {
  --c-header-padding-block: var(--ds-space-l);
  --c-header-padding-inline: var(--ds-space-xl);
  --c-header-gap: var(--ds-space-l);
  --c-header-title-font-size: var(--ds-font-size-xl);
}

.c-header--size-l .c-header__actions,
.c-header--size-l .c-header__start,
.c-header--size-l .c-header__end {
  gap: var(--ds-space-m);
}

/* ========================================
   LAYOUT VARIANTS
   ======================================== */

/* Centered header */
.c-header--centered {
  justify-content: center;
  text-align: center;
}

.c-header--centered .c-header__content {
  justify-content: center;
}

/* Stacked header (vertical layout) */
.c-header--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-s);
}

.c-header--stacked .c-header__content {
  width: 100%;
  justify-content: space-between;
}

.c-header--stacked .c-header__actions {
  width: 100%;
  justify-content: flex-end;
}

/* Borderless header */
.c-header--borderless {
  border-bottom: none;
}

/* Elevated header (with shadow) */
.c-header--elevated {
  box-shadow: var(--c-header-shadow);
}

/* Sticky header */
.c-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-header);
  box-shadow: var(--c-header-shadow);
}

/* ========================================
   COLOR VARIANTS
   ======================================== */

/* Primary header */
.c-header--primary {
  --c-header-background: var(--ds-color-primary);
  --c-header-border-color: var(--ds-color-primary-strong);
  --c-header-text-color: var(--ds-color-text-on-primary);
}

/* Secondary header */
.c-header--secondary {
  --c-header-background: var(--ds-color-secondary);
  --c-header-border-color: var(--ds-color-secondary-strong);
  --c-header-text-color: var(--ds-color-text-on-secondary);
}

/* Dark header */
.c-header--dark {
  --c-header-background: var(--ds-color-surface-strong);
  --c-header-border-color: var(--ds-color-border-strong);
  --c-header-text-color: var(--ds-color-text-on-dark);
}

/* Light header */
.c-header--light {
  --c-header-background: var(--ds-color-surface-weak);
  --c-header-border-color: var(--ds-color-border-weak);
  --c-header-text-color: var(--ds-color-text);
}

/* ========================================
   BREADCRUMB INTEGRATION
   ======================================== */

.c-header__breadcrumb {
  margin-bottom: var(--ds-space-xs);
}

.c-header--with-breadcrumb {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-xs);
}

.c-header--with-breadcrumb .c-header__content {
  width: 100%;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .c-header {
    --c-header-padding-inline: var(--ds-space-m);
    --c-header-gap: var(--ds-space-s);
  }
  
  .c-header__actions,
  .c-header__start,
  .c-header__end {
    gap: var(--ds-space-xs);
  }
  
  /* Stack on tablet if many actions */
  .c-header--auto-stack .c-header__actions {
    flex-wrap: wrap;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .c-header {
    --c-header-padding-inline: var(--ds-space-s);
    --c-header-padding-block: var(--ds-space-s);
    --c-header-gap: var(--ds-space-xs);
  }
  
  .c-header__title {
    font-size: var(--ds-font-size-m);
  }
  
  /* Auto-stack on mobile */
  .c-header--auto-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-s);
  }
  
  .c-header--auto-stack .c-header__content {
    width: 100%;
  }
  
  .c-header--auto-stack .c-header__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .c-header {
    --c-header-padding-inline: var(--ds-space-xs);
  }
  
  .c-header__title {
    font-size: var(--ds-font-size-s);
  }
  
  /* Hide subtitle on very small screens */
  .c-header__subtitle {
    display: none;
  }
  
  /* Simplify actions on small screens */
  .c-header__actions {
    gap: var(--ds-space-xs);
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-header {
    background: transparent !important;
    border-bottom: 1px solid #000 !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  
  .c-header__actions {
    display: none !important;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus management */
.c-header:focus-within {
  outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-header {
    border-bottom-width: 2px;
  }
  
  .c-header--elevated {
    border: 2px solid;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-header,
  .c-header *,
  .c-header *::before,
  .c-header *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   INTEGRATION WITH LAYOUT
   ======================================== */

/* When used in layout system */
.l-layout .c-header {
  border-bottom: none; /* Layout handles borders */
}

.l-layout--sticky-header .c-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-header);
  box-shadow: var(--c-header-shadow);
}

/* Top bar integration */
.l-layout__top-bar + .l-layout__header .c-header {
  border-top: 1px solid var(--c-header-border-color);
}

/* ========================================
   UTILITIES
   ======================================== */

/* Header with loading state */
.c-header--loading {
  position: relative;
  overflow: hidden;
}

.c-header--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ds-color-primary),
    transparent
  );
  animation: header-loading 1.5s infinite;
}

@keyframes header-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Header with notification indicator */
.c-header__notification {
  position: relative;
}

.c-header__notification::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--ds-color-danger);
  border-radius: 50%;
  border: 2px solid var(--c-header-background);
}