/*
 * Alternating light background between homepage sections, instead of a
 * hairline border, to separate content that would otherwise sit flush
 * against the same white background (Latest updates / Start your
 * investment journey / Minister quote / Latest from Twitter). Matches
 * DGA's own real reference implementation (beta.industry.sa), which
 * separates sections with background-color shifts rather than dividers.
 * Scoped to the front page only (body.home).
 *
 * The hero (1st child) is untouched -- it already has its own strong
 * color break at the bottom edge.
 *
 * "Start your investment journey" and the Minister quote section are
 * merged into one continuous gray block (both tinted, no white sandwiched
 * between them) per explicit request -- a plain white band between two
 * gray sections read as a stray gap rather than a deliberate section.
 * Twitter (last) stays a separate white->gray break after that block so
 * there's still one visible rhythm change, not one long uniform gray span.
 *
 * Structural note: on this template (partials/components.blade.php,
 * ACF flexible-content "components" field) the front page renders, in
 * order: hero_banner, latest_posts, content_list_text_image, blockquote,
 * content_gutenberg. latest-posts.blade.php and blockquote.blade.php put
 * their lg:my-24/my-16 vertical spacing directly on the section itself
 * (the div/section that's the direct child of <main>); content-list-
 * text-image.blade.php and content-gutenberg.blade.php put it one level
 * deeper, on an inner div. All four are normalized to padding here (not
 * just the two getting a tint) -- margin on adjacent sections collapses
 * together by default, so converting only some of them to padding while
 * leaving others as margin broke that collapsing and left a stray blank
 * gap between an untouched-margin section and a converted-padding one.
 * Padding everywhere keeps every section flush against its neighbor
 * regardless of background color.
 */
body.home main#main > *:nth-child(3),
body.home main#main > *:nth-child(4) {
  /* NOT --background-neutral-50 (#f9fafb) -- that's the exact same shade
     as the page's own ambient body background (see `body { background-
     color: var(--background-body) }` in dga-tokens.css, --background-body
     also resolves to --colors-neutral-50), so the "tint" was completely
     invisible against the page. Confirmed via computed-style check: this
     rule's high specificity (an ID selector, main#main) was correctly
     winning the cascade the whole time -- the bug was the color choice,
     not the rule being overridden. Reference site (industry.sa) actually
     uses #f3f4f6 (--colors-neutral-100) for this exact alternating-section
     convention, confirmed by frequency-counting background-color values
     across its saved homepage HTML. */
  background-color: var(--background-neutral-100);
}

body.home main#main > *:nth-child(2),
body.home main#main > *:nth-child(4) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

body.home main#main > *:nth-child(3) > div,
body.home main#main > *:nth-child(5) > div {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  body.home main#main > *:nth-child(2),
  body.home main#main > *:nth-child(4) {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  body.home main#main > *:nth-child(3) > div,
  body.home main#main > *:nth-child(5) > div {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Position-independent safety net: a plugin injects an inline <style> node as
   a direct child of <main>, which shifts the nth-child() counting above and
   left the Minister (blockquote) and Twitter (content-gutenberg) sections
   with their raw lg:my-24 (96px) *margins* while neighbours use padding --
   margins don't collapse against padding, so a stray blank band appeared.
   Normalise EVERY lg:my-24 under the home <main> to padding, regardless of
   DOM position. Idempotent with the rules above. */
body.home main#main .lg\:my-24 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  body.home main#main .lg\:my-24 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}