/* MenuDoc Sticky Header Menu on Scroll — Frontend Styles */

/* ============================================================
   CSS Custom Properties (overridden via PHP inline style)
   ============================================================ */
:root {
  --mshms-z-index:    1000;
  --mshms-speed:      300ms;
  --mshms-easing:     cubic-bezier(0.4, 0, 0.2, 1);
  --mshms-sticky-bg:  #ffffff;
  --mshms-shadow-box: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Spacer — preserves page layout when header becomes fixed
   ============================================================ */
.mshms-spacer {
  display: block;
  /* height is set dynamically by JS */
}

/* ============================================================
   Sticky State
   ============================================================ */
.mshms-is-sticky {
  position: fixed !important;
  /* top is intentionally omitted — JS sets it via inline style so the admin bar
     offset and sticky_offset setting are respected. !important would win over
     inline styles and force top:0, which ignores the admin bar. */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--mshms-z-index) !important;
}

/* Developer hook — no visual styles, just a state marker */
.mshms-not-sticky {
  /* intentionally empty */
}

/* ============================================================
   Shadow when sticky
   ============================================================ */
.mshms-is-sticky.mshms-shadow {
  box-shadow: var(--mshms-shadow-box);
  transition: box-shadow var(--mshms-speed) var(--mshms-easing);
}

/* ============================================================
   Background when sticky
   ============================================================ */
.mshms-is-sticky.mshms-bg {
  background-color: var(--mshms-sticky-bg) !important;
  transition: background-color var(--mshms-speed) var(--mshms-easing);
}

/* ============================================================
   Scroll Direction — hide/show header
   ============================================================ */
body.mshms-header-hidden .mshms-is-sticky {
  transform: translateY(-100%);
  transition: transform var(--mshms-speed) var(--mshms-easing);
}

body.mshms-header-visible .mshms-is-sticky {
  transform: translateY(0);
  transition: transform var(--mshms-speed) var(--mshms-easing);
}

/* ============================================================
   Enter Animations (applied once when first becoming sticky)
   ============================================================ */

/* Fade */
body.mshms-anim-fade .mshms-is-sticky {
  animation: mshmsFadeIn var(--mshms-speed) var(--mshms-easing) both;
}

@keyframes mshmsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide down */
body.mshms-anim-slide .mshms-is-sticky {
  animation: mshmsSlideDown var(--mshms-speed) var(--mshms-easing) both;
}

@keyframes mshmsSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================================
   Debug Overlay
   ============================================================ */
.mshms-debug-overlay {
  position:       fixed;
  bottom:         10px;
  left:           10px;
  background:     rgba(0, 0, 0, 0.82);
  color:          #4ade80;
  font:           12px/1.5 monospace, monospace;
  padding:        8px 12px;
  border-radius:  6px;
  z-index:        99999;
  pointer-events: none;
  max-width:      340px;
  word-break:     break-all;
}