/* ==========================================================================
   PHC section-header spacing
   --------------------------------------------------------------------------
   Enforces the design-spec gap rhythm at the top of Methodology, Team, and
   FAQ sections:
       eyebrow  ↔ title       = 16px
       title    ↔ description = 16px
       description ↔ next     = 48px desktop+tablet / 32px mobile
                                (= outer container flex_gap, untouched here)

   Implementation: the section containers keep their outer flex_gap at
   48/48/32, which governs the description→next-element spacing. We pull the
   eyebrow and H2 back with negative margin-bottom so the 48→16 collapse lands
   exactly at the first two slots. The third widget (description) keeps its
   natural gap of 48/32 against the next element.

   Math:
       desktop/tablet outer gap  48  →  target 16  →  margin-bottom -32px
       mobile outer gap          32  →  target 16  →  margin-bottom -16px

   This file owns header spacing on these sections. Do NOT add
   `margin-bottom` rules on eyebrow/H2 widgets via Elementor widget settings
   or via `xpro_custom_css` on the section container — they will conflict.

   The Programs section is already correctly structured (an inner
   `.phc-programs-header` wrapper groups eyebrow/H2/description at a native
   16px flex_gap), so it does not need these rules.

   Selectors target direct `> .e-con-inner > .elementor-widget-*` children,
   so the rules only hit top-level section widgets and can't leak into card
   interiors or nested containers.
   ========================================================================== */

/* Selector notes:
   1. Do NOT use `:first-of-type` — Elementor wraps every widget in a `<div>`,
      so `.elementor-widget-heading:first-of-type` never matches (the first
      `<div>` sibling is the eyebrow text-editor). The direct-child `>` already
      limits matches to top-level widgets of the section.
   2. The heading rule uses `:has(+ .elementor-widget-text-editor)` so it only
      pulls the H2 up when a description widget follows. The program page's
      "What's Included" section reuses `.phc-methodology-section` but has no
      description widget (layout is eyebrow → H2 → cards). On that section the
      heading correctly retains its full flex-gap to the next sibling (cards).
   3. The eyebrow rule uses `:first-child` unconditionally because every
      section that reuses these classes still leads with an eyebrow text-editor. */
.phc-methodology-section > .e-con-inner > .elementor-widget-text-editor:first-child,
.phc-methodology-section > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor),
.phc-team-section        > .e-con-inner > .elementor-widget-text-editor:first-child,
.phc-team-section        > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor),
#phc-faq-section         > .e-con-inner > .elementor-widget-text-editor:first-child,
#phc-faq-section         > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor) {
    margin-bottom: -32px !important;
}

@media (max-width: 767px) {
    .phc-methodology-section > .e-con-inner > .elementor-widget-text-editor:first-child,
    .phc-methodology-section > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor),
    .phc-team-section        > .e-con-inner > .elementor-widget-text-editor:first-child,
    .phc-team-section        > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor),
    #phc-faq-section         > .e-con-inner > .elementor-widget-text-editor:first-child,
    #phc-faq-section         > .e-con-inner > .elementor-widget-heading:has(+ .elementor-widget-text-editor) {
        margin-bottom: -16px !important;
    }
}