/* ============================================================
   SEF v1.0.2 — mobile header stacking fix
   Keeps the logo/theme header pinned to the absolute top and
   reserves vertical space so hero/page content cannot bleed behind it.
============================================================ */
@media (max-width: 900px) {
  :root {
    --sef-mobile-header-height: 64px;
  }

  html {
    scroll-padding-top: var(--sef-mobile-header-height);
  }

  #site-header,
  body.admin-bar #site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--sef-mobile-header-height) !important;
    min-height: var(--sef-mobile-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  #site-header > .container {
    width: 100% !important;
    height: var(--sef-mobile-header-height) !important;
    display: flex !important;
    align-items: center !important;
  }

  #site-header .header-inner {
    width: 100% !important;
    height: var(--sef-mobile-header-height) !important;
    min-height: var(--sef-mobile-header-height) !important;
    align-items: center !important;
  }

  #site-header .header-logo,
  #site-header .header-cta {
    align-self: center !important;
  }

  #site-header .header-logo img {
    display: block !important;
    width: 128px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  #site-header .btn-theme {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  #main-content {
    padding-top: var(--sef-mobile-header-height) !important;
  }

  body.admin-bar #main-content {
    padding-top: var(--sef-mobile-header-height) !important;
  }

  #main-content > #hero:first-child,
  #main-content > .sobre-hero:first-child,
  #main-content > .page-hero:first-child,
  #main-content > .unit-single-hero:first-child {
    margin-top: 0 !important;
  }

  #hero {
    min-height: calc(100svh - var(--sef-mobile-header-height)) !important;
  }

  #hero .hero-content {
    min-height: calc(100svh - var(--sef-mobile-header-height)) !important;
  }

  #hero .hero-media,
  #hero .hero-overlay,
  #hero #hero-canvas,
  #hero-canvas {
    top: 0 !important;
  }
}