/**
 * @file
 * Sticky header styles for webkit header.
 *
 * Using position: sticky with proper top offset to work below Drupal toolbar.
 * The header stays in place while content scrolls underneath.
 */

.it-header-wrapper.sticky-top {
  position: -webkit-sticky !important; /* Safari support */
  position: sticky !important;
  top: 39px !important; /* Drupal toolbar height */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important; /* High z-index to stay above all Bootstrap Italia content */
  background-color: #1a1a1a !important; /* Dark theme background */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Force slim header wrapper to be visible (Bootstrap Italia hides it in some contexts) */
.it-header-wrapper.sticky-top .it-header-slim-wrapper {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 48px !important;
  background: #1a1a1a !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
}

/* Ensure container doesn't interfere with sticky behavior */
#it-page-front {
  position: relative;
  overflow: visible !important;
}

/* When Drupal toolbar is in horizontal mode (default) */
body.toolbar-horizontal .it-header-wrapper.sticky-top {
  top: 39px !important;
}

/* When Drupal toolbar is in vertical/tray mode */
body.toolbar-vertical .it-header-wrapper.sticky-top {
  top: 39px !important;
}

/* When toolbar is fixed (admin logged in) */
body.toolbar-fixed .it-header-wrapper.sticky-top {
  top: 39px !important;
}

/* No adjustment needed when no toolbar (anonymous user) */
body:not(.toolbar-fixed):not(.toolbar-horizontal) .it-header-wrapper.sticky-top {
  top: 0 !important;
}

/* Enhanced styling when header is in sticky state */
.it-header-wrapper.sticky-top.is-sticky {
  /* Enhanced shadow for better visual feedback when sticky */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;

  /* Smooth transition for visual changes */
  transition: box-shadow 0.2s ease-in-out;
}