/* Gainstack Blocks — front-end polish layered on top of theme.json.
   Kept tiny on purpose: this is the whole "extra CSS" footprint (vs the live
   site's ~64 stylesheets). */

/* Sections sit flush. Each homepage section (pattern) carries its own top/
   bottom padding, so the block-gap WordPress inserts between top-level blocks
   just leaves white strips — between header and hero, and between every
   section. Zero the top-level gaps so the dark/light bands butt cleanly. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
main.wp-block-group > *,
main.wp-block-group > .wp-block-cover,
main.wp-block-group > .wp-block-group { margin-top: 0; margin-bottom: 0; }

/* Image cards (category tiles, goals) — rounded + subtle zoom on hover.
   Full-bleed covers (hero, made-in-USA) are excluded via :not(.alignfull). */
.wp-block-cover:not(.alignfull) {
  border-radius: 10px;
  overflow: hidden;
}
.wp-block-cover:not(.alignfull) .wp-block-cover__image-background {
  transition: transform .4s ease;
}
.wp-block-cover:not(.alignfull):hover .wp-block-cover__image-background {
  transform: scale(1.05);
}

/* Featured-product cards — gentle lift on hover. */
.wp-block-columns .wp-block-group.has-border-color {
  transition: box-shadow .2s ease, transform .2s ease;
}
.wp-block-columns .wp-block-group.has-border-color:hover {
  box-shadow: 0 12px 30px rgba(21, 27, 37, .12);
  transform: translateY(-3px);
}

/* Hero entrance animation (respects reduced-motion). */
@keyframes gs-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wp-block-cover.alignfull .wp-block-cover__inner-container > * {
  animation: gs-rise .7s ease both;
}
.wp-block-cover.alignfull .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .1s; }
.wp-block-cover.alignfull .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-cover .wp-block-cover__image-background,
  .wp-block-cover .wp-block-cover__inner-container > * { animation: none; transition: none; }
}

/* ── Mega-menu: native nav submenu → wide multi-column dark dropdown ──
   Uses !important to beat WordPress core's white-background / inherited-white-
   text submenu defaults, and grid (not CSS columns — core makes it flex). */
@media (min-width: 782px) {
  .gs-nav .wp-block-navigation__submenu-container {
    background-color: #0F1420 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    padding: 1.1rem 1.35rem !important;
    box-shadow: 0 22px 44px rgba(0,0,0,.4) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 0.1rem 1.75rem;
    width: max-content !important;
    min-width: 360px;
  }
  .gs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .gs-nav .wp-block-navigation__submenu-container a {
    color: #cbd2dd !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0.3rem 0.2rem !important;
  }
  .gs-nav .wp-block-navigation__submenu-container a:hover { color: #fff !important; }
  /* Open on hover / keyboard focus (desktop). */
  .gs-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
  .gs-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}