/*─────────────────────────────────────────────────────────────
 0) Offset below WP Admin Bar (32 px) when logged in
─────────────────────────────────────────────────────────────*/
body.admin-bar .slim-header {
  top: 32px !important;
}

/*─────────────────────────────────────────────────────────────
 1) Slim slide-in header (desktop only)
─────────────────────────────────────────────────────────────*/
.slim-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%) !important;          /* start off-screen */
  transition: transform .35s ease-in-out !important;
  z-index: 9999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  height: 50px !important; /* Explicitly set target height here */
}

/* Force Divi internal wrappers to respect the explicit header height */
.slim-header .et_pb_section,
.slim-header .et_pb_row {
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.show-slim .slim-header {
  transform: translateY(0) !important;              /* slide in */
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

/*─────────────────────────────────────────────────────────────
 2) Swap headers: visually hide PRIMARY during slim state
     (keeps height, so no page jump on iPad)
─────────────────────────────────────────────────────────────*/
.header-primary {                                    /* add fade support */
  transition: opacity .15s ease-in-out;
}
body.show-slim .header-primary {
  visibility: hidden !important;
  opacity: 0   !important;
  pointer-events: none !important;
}

/*─────────────────────────────────────────────────────────────
 3) Hide slim entirely on tablet & phone
─────────────────────────────────────────────────────────────*/
@media (max-width: 980px) {
  .slim-header { display:none !important; }
}

/*─────────────────────────────────────────────────────────────
 4) Force main header to show on tablets ≥ 768 px
 (overrides Divi’s et_pb_hidden_* classes)
─────────────────────────────────────────────────────────────*/
@media (min-width: 768px) {
  .header-primary.et_pb_hidden_phone,
  .header-primary.et_pb_hidden_tablet {
    display: block !important;      /* let it occupy space   */
    visibility: visible !important; /* make it visible       */
    opacity: 1 !important;          /* ensure fully opaque   */
    pointer-events: auto !important;
  }
}