/* 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:      rgba(255, 255, 255, 1.00);
  --mshms-shadow-box:     0 2px 12px 0 rgba(0, 0, 0, 0.15);
  --mshms-shrink-padding: 8px;
  --mshms-backdrop-blur:  0px;
}

/* ============================================================
   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 (supports opacity + glassmorphism)
   ============================================================ */
.mshms-is-sticky.mshms-bg {
  background-color:    var(--mshms-sticky-bg) !important;
  backdrop-filter:     blur(var(--mshms-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--mshms-backdrop-blur));
  transition: background-color var(--mshms-speed) var(--mshms-easing);
}

/* ============================================================
   Shrink on Sticky — compact padding
   ============================================================ */
.mshms-is-sticky.mshms-shrink {
  padding-top:    var(--mshms-shrink-padding) !important;
  padding-bottom: var(--mshms-shrink-padding) !important;
  transition: padding-top    var(--mshms-speed) var(--mshms-easing),
              padding-bottom 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;
}