/**
 * Cabecera fija en todas las páginas (sticky fallaba por overflow-x en body).
 */

:root {
  --cgc-header-height: 72px;
  --cgc-header-offset: 72px;
}

@media (max-width: 900px) {
  :root {
    --cgc-header-height: 66px;
    --cgc-header-offset: 66px;
  }
}

.site-header,
.site-nav,
header.recipe-nav,
.recipe-nav,
header.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 253, 248, 0.94) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(18, 24, 20, 0.08);
}

body.admin-bar .site-header,
body.admin-bar .site-nav,
body.admin-bar header.recipe-nav,
body.admin-bar header.nav {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .site-nav,
  body.admin-bar header.recipe-nav,
  body.admin-bar header.nav {
    top: 46px !important;
  }
}

/* Compensar altura fija — no duplicar en home (hero ya compensa) */
body:has(> .site-header) {
  padding-top: calc(var(--cgc-header-height) + env(safe-area-inset-top, 0px)) !important;
}

body.cgc-home-page {
  padding-top: 0 !important;
}

/* Héroes/hubs: quitar offset de cabecera ya aplicado en body */
body:has(> .site-header) .blog-hero,
body.blog-page:has(> .site-header) .blog-hero {
  padding-top: 28px !important;
}

body:has(> .site-header) .recursos-hero,
body.cgc-page-recursos:has(> .site-header) .recursos-hero {
  padding-top: 32px !important;
}

body:has(> .site-header) .hero,
body.cgc-static-recetas:has(> .site-header) .hero {
  padding-top: 24px !important;
}

body:has(> .site-header) .shell > .hero,
body.cgc-static-pro:has(> .site-header) .shell > .hero {
  padding-top: 20px !important;
}

body:has(> .site-header) .onboard-hero {
  padding-top: 24px !important;
}

body:has(> .site-header) .legal-shell {
  padding-top: 28px !important;
}

body:has(> .site-header) .cg-static-blog-article {
  padding-top: 20px !important;
}

/* Sombra al hacer scroll */
.site-header.is-scrolled,
.site-nav.scrolled {
  box-shadow: 0 8px 28px rgba(15, 61, 46, 0.1) !important;
}

@media (max-width: 900px) {
  html.cgc-nav-open .site-nav,
  html.cgc-nav-open .site-header {
    position: fixed !important;
    z-index: 1103 !important;
  }
}