/*
 * File: css/conf/01-layout/05.header.css
 * Logic: Header Layout, Top Bar & Burger Toggle.
 * Refactored from: 01.region-header.css
 */

/* ==========================================================================
   1. TOP HEADER (Contact & Social)
   ========================================================================== */
.wsdt-top-header {
  background-color: var(--bg-gray-light);
  border-bottom: var(--border-width-sm) solid var(--border-subtle);
  padding: var(--space-xs) 0;
}

.wsdt-top-header .wsdt-container {
  display: flex;
  flex-direction: column; /* Mobile First: Stacked */
  align-items: center;
  gap: var(--space-sm);
}

/* Desktop: Row Layout */
@media all and (min-width: 768px) {
  .wsdt-top-header .wsdt-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

.wsdt-header-contact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.wsdt-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  transition: var(--interaction-transition);
}

.wsdt-contact-link:hover {
  color: var(--text-body);
  transform: translateY(var(--interaction-lift));
}

/* ==========================================================================
   2. MAIN HEADER LAYOUT (Left & Right Regions)
   ========================================================================== */
.wsdt-header {
  background-color: var(--surface-bg);
  box-shadow: var(--shadow-sm);
}

/* Admin Toolbar Fix: Adjust sticky position for administrators */
.wsdt-is-admin .wsdt-header {
  top: var(
    --admin-toolbar-height
  ); /* Default Drupal Toolbar height (Bar + Tray) */
}

/* Alignment within the container */
.wsdt-header .wsdt-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  padding: 0; /* Height is controlled by variable */
}

/* Region Left: Branding/Logo */
.wsdt-region--header-left {
  display: flex;
  align-items: center;
}

.wsdt-site-logo img {
  height: var(--header-logo-height); /* Explicit height for Core Vitals (CLS) */
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  background-color: transparent;
}

/* Region Right: Navigation Control */
.wsdt-region--header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ==========================================================================
   3. NAVIGATION VISIBILITY (Persistent Burger Toggle)
   ========================================================================== */

/* Hide Main Menu (nav) on all resolutions (Mobile First / Drawer approach) */
.wsdt-header .wsdt-main-menu,
.wsdt-header #block-websdt-main-menu {
  display: none !important;
}

/* Show Burger Toggle on all resolutions */
.wsdt-burger-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--burger-width);
  height: var(--burger-height);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: calc(var(--z-header) + 5);
  margin-right: var(--space-sm);
}

/* Styling spans (wsdt-burger-line) based on markup */
.wsdt-burger-line {
  display: block;
  width: 100%;
  height: var(--burger-line-height);
  background-color: var(--color-primary);
  border-radius: var(--radius-xs);
  transition: var(--interaction-transition);
}

/* Hover effect for burger lines */
.wsdt-burger-toggle:hover .wsdt-burger-line {
  background-color: var(--color-secondary);
}

/* Focus state for accessibility */
.wsdt-burger-toggle:focus {
  outline: none;
}