/**
 * SimplyIrfan Magazine v2.10.69 — final header behavior and interaction polish.
 * Loaded after all existing header and Customizer styles.
 */

/* Sticky header: keep the header above page content at every breakpoint. */
.site-header {
  top: 0 !important;
  z-index: 1000 !important;
  width: 100%;
}

/* The hamburger is three clean lines, not a bordered square button. */
.site-header .header-inner > .menu-toggle {
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px !important;
}
.site-header .header-inner > .menu-toggle:hover,
.site-header .header-inner > .menu-toggle:active {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.site-header .header-inner > .menu-toggle span {
  border: 0 !important;
  box-shadow: none !important;
}
.site-header .header-inner > .menu-toggle:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
  border-radius: 3px !important;
}

/* Dark mode uses white, not the theme's blue accent, for header hover/active. */
html[data-theme="dark"] .site-header .primary-nav .nav-list > li:hover > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li:focus-within > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li.current-menu-item > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li.current_page_item > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list .sub-menu a:hover,
html[data-theme="dark"] .site-header .primary-nav .nav-list .sub-menu a:focus-visible,
html[data-theme="dark"] .site-header .header-actions .icon-button:hover,
html[data-theme="dark"] .site-header .header-inner > .menu-toggle:hover {
  color: #fff !important;
}
html[data-theme="dark"] .site-header .primary-nav .nav-list > li:hover > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li:focus-within > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li.current-menu-item > a,
html[data-theme="dark"] .site-header .primary-nav .nav-list > li.current_page_item > a {
  box-shadow: inset 0 -2px #fff !important;
}
html[data-theme="dark"] .site-header .primary-nav .nav-list .sub-menu a:hover,
html[data-theme="dark"] .site-header .primary-nav .nav-list .sub-menu a:focus-visible,
html[data-theme="dark"] .site-header .header-actions .icon-button:hover {
  background: rgba(255,255,255,.10) !important;
}