/* ==========================================================================
   GUL × Customify Bridge
   Loaded ONLY when the active theme is Customify (or a Customify child).
   Customify's content area constrains everything to its container width and
   adds top/bottom margins to `.alignfull` blocks. Both behaviors break
   full-width hero / divider / gradient sections. This file undoes the
   constraint for gul/* blocks and re-establishes the GUL design tokens on
   top of Customify's theme.json so the inspector pickers stay consistent.
   ========================================================================== */


/* ── Full-bleed escape for gul/* blocks ───────────────────────────────────
 * Customify wraps post content in `.entry-content` with a max-width of
 * ~720–1200px depending on the page layout. `.alignfull` is supposed to
 * break out of that container, but Customify also adds 2rem block-margin
 * to alignfull / alignwide which produces the "blank white strip" the
 * user reported on breadcrumbs. Force gul/* alignfull blocks to span the
 * viewport edge-to-edge with zero block-margin.
 * ──────────────────────────────────────────────────────────────────────── */
.customify-theme [class*="wp-block-gul-"].alignfull,
body.customify-theme [class*="wp-block-gul-"].alignfull,
.entry-content > [class*="wp-block-gul-"].alignfull {
    margin-left:  calc( 50% - 50vw ) !important;
    margin-right: calc( 50% - 50vw ) !important;
    max-width:    100vw !important;
    width:        100vw !important;
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}
.customify-theme [class*="wp-block-gul-"].alignwide,
.entry-content > [class*="wp-block-gul-"].alignwide {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}

/* Breadcrumbs sit right under the header — Customify default ~24px
 * top-padding inside .entry-content adds noise. */
.customify-theme .wp-block-gul-breadcrumbs.alignfull {
    margin-top: 0 !important;
}
.customify-theme .entry-content > :first-child.wp-block-gul-breadcrumbs {
    margin-top: -1rem !important;
}


/* ── Container width re-alignment ─────────────────────────────────────────
 * Customify exposes a Customizer setting for site container width
 * (default ~1170px). gul/* sections use their own .gul-container at
 * 80rem (1280px). On Customify with a constrained outer width the
 * full-width breakout above gives us back the viewport, but inside,
 * .gul-container's 80rem could exceed the user's preferred site width.
 * We respect a CSS custom property `--gul-customify-container` that
 * Customify users can set in Additional CSS to clamp the section
 * interior to whatever their theme width is.
 * ──────────────────────────────────────────────────────────────────────── */
.customify-theme .gul-container {
    max-width: var( --gul-customify-container, 80rem );
}


/* ── Suppress Customify's default body padding inside our sections ─────── */
.customify-theme [class*="wp-block-gul-"] > .gul-container {
    padding-left:  clamp( 1rem, 5vw, 2rem );
    padding-right: clamp( 1rem, 5vw, 2rem );
}


/* ── Customify primary button bridge ──────────────────────────────────────
 * Customify's `.button` and `.wp-block-button__link` get their own
 * brand color from the Customizer. When a GUL block emits a `gul-btn`
 * inside Customify content, we want our gradient pill to win — and
 * also pass our brand colors back upward via CSS custom properties so
 * Customify-styled inline links inside our sections inherit a
 * compatible accent. */
.customify-theme [class*="wp-block-gul-"] a:not(.gul-btn):not(.gul-faq-q):not(.gul-svc-card__media-link):not(.gul-blog-card__cta) {
    color: var( --gul-link, #0093fe );
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s, color 0.2s;
}
.customify-theme [class*="wp-block-gul-"] a:not(.gul-btn):not(.gul-faq-q):not(.gul-svc-card__media-link):not(.gul-blog-card__cta):hover {
    color: var( --gul-link-hover, #007bda );
    border-bottom-color: currentColor;
}


/* ── Customify header / footer offset ────────────────────────────────────
 * Customify ships a sticky header on some templates. When our hero
 * starts immediately under it, the dot pattern can sit under the
 * transparent header strip and look weird. Add a small top-margin
 * compensator only when the theme reports a sticky-header class.
 * ──────────────────────────────────────────────────────────────────────── */
body.has-sticky-header .wp-block-gul-hero.alignfull {
    padding-top: clamp( 5rem, 8vw, 7rem );
}


/* ── Customify page-builder mode ──────────────────────────────────────────
 * Customify offers a "Builder" template that strips the title and
 * .entry-content padding. Detect via body class so our sections can
 * collapse any extra top space cleanly. */
body.page-template-template-fullwidth-php [class*="wp-block-gul-"].alignfull,
body.page-template-page-fullwidth [class*="wp-block-gul-"].alignfull {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}


/* ── Customify color palette → GUL bridge ─────────────────────────────────
 * If a Customify install has the brand color set in the Customizer, the
 * <body> picks up `--customify-accent-color` (or similar). Map it to our
 * `--gul-link` custom property so non-button anchors inside our sections
 * adopt the customer's accent color while our buttons keep our gradient.
 * ──────────────────────────────────────────────────────────────────────── */
.customify-theme {
    --gul-link:        var( --customify-accent-color, #0093fe );
    --gul-link-hover:  var( --customify-accent-color-hover, #007bda );
}