/* ==========================================================================
   GUL Sections — universal section-level features applied to every block.
   Activated by classes injected at render time by inject_universal_styles()
   in class-block-loader.php. Authoring controls live in block-controls.js
   (the Section Preset / Dividers / Animations / Width panels).
   ========================================================================== */


/* ── Color Schemes ──────────────────────────────────────────────────────────
 * Four canonical scheme classes. Apply to the OUTER section wrapper. Each
 * one repaints the section bg + text + sets a `--gul-ink` custom property
 * the block CSS can read for child accents (badges, dividers, buttons).
 * White is intentionally explicit (rather than just "no class") so admins
 * can switch back to it from blue/orange/dark and override per-block
 * defaults.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-cs-white {
    background-color: #ffffff;
    color: #1e293b;
    --gul-ink: #0093fe;
    --gul-ink-soft: rgba(0, 147, 254, 0.08);
}
.gul-cs-blue {
    background-color: #0e2238;
    background-image: linear-gradient(135deg, #0e2238 0%, #0a1729 100%);
    color: #e2e8f0;
    --gul-ink: #60b0fe;
    --gul-ink-soft: rgba(96, 176, 254, 0.15);
}
.gul-cs-blue h1, .gul-cs-blue h2, .gul-cs-blue h3, .gul-cs-blue h4 { color: #ffffff; }
.gul-cs-blue .gul-section-subtext,
.gul-cs-blue p { color: #cbd5e1; }
.gul-cs-blue .gul-card-divider,
.gul-cs-blue .gul-faq-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.gul-cs-blue .gul-service-card,
.gul-cs-blue .gul-package-card,
.gul-cs-blue .gul-testimonial-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
.gul-cs-blue .gul-service-card h3,
.gul-cs-blue .gul-package-card h3 { color: #ffffff; }

.gul-cs-orange {
    background-color: #fffaf0;
    background-image: linear-gradient(135deg, #fff7e6 0%, #ffeec2 100%);
    color: #4a3a14;
    --gul-ink: #d97706;
    --gul-ink-soft: rgba(217, 119, 6, 0.12);
}
.gul-cs-orange h1, .gul-cs-orange h2, .gul-cs-orange h3 { color: #1f1a0a; }

.gul-cs-dark {
    background-color: #0b0b10;
    background-image: linear-gradient(135deg, #0b0b10 0%, #1a1a24 100%);
    color: #cbd5e1;
    --gul-ink: #fcb900;
    --gul-ink-soft: rgba(252, 185, 0, 0.14);
}
.gul-cs-dark h1, .gul-cs-dark h2, .gul-cs-dark h3, .gul-cs-dark h4 { color: #ffffff; }
.gul-cs-dark p, .gul-cs-dark .gul-section-subtext { color: #94a3b8; }
.gul-cs-dark .gul-service-card,
.gul-cs-dark .gul-package-card,
.gul-cs-dark .gul-testimonial-card,
.gul-cs-dark .gul-faq-item { background: #14141d; border-color: rgba(255,255,255,0.06); color: #cbd5e1; }
.gul-cs-dark .gul-service-card h3 { color: #ffffff; }


/* ── Subtle Background Gradients ────────────────────────────────────────────
 * Layered on top of (or instead of) the color scheme. Useful when the user
 * wants a softly tinted band between two white sections so the page reads
 * less like a stack of identical white cards.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-bg-soft-blue    { background-image: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.gul-bg-soft-orange  { background-image: linear-gradient(180deg, #fff7e6 0%, #ffffff 100%); }
.gul-bg-soft-green   { background-image: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%); }
.gul-bg-soft-purple  { background-image: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%); }
.gul-bg-soft-rose    { background-image: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%); }
.gul-bg-mist         { background-image: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.gul-bg-dawn         { background-image: linear-gradient(135deg, #fef6ea 0%, #f0f7ff 100%); }
.gul-bg-sunset       { background-image: linear-gradient(135deg, #ffe1c6 0%, #ffd2e0 60%, #f0f7ff 100%); }
.gul-bg-aurora       { background-image: linear-gradient(135deg, #e0f7fa 0%, #f0f0ff 50%, #fff0f5 100%); }
.gul-bg-arctic       { background-image: linear-gradient(180deg, #e6f2ff 0%, #e0f7fa 50%, #ffffff 100%); }
.gul-bg-paper        { background-color: #fafaf7; background-image: radial-gradient(circle at 0 0, rgba(0,0,0,0.025) 1px, transparent 1px); background-size: 20px 20px; }
.gul-bg-grid         { background-color: #ffffff; background-image: linear-gradient(rgba(0,147,254,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,147,254,0.05) 1px, transparent 1px); background-size: 32px 32px; }
.gul-bg-dusk         { background-image: linear-gradient(135deg, #1a1a2e 0%, #0a1729 100%); color: #e2e8f0; }
.gul-bg-midnight     { background-image: linear-gradient(135deg, #0a1729 0%, #1a1a3e 60%, #2a0e3e 100%); color: #e2e8f0; }
.gul-bg-mesh {
    background-color: #ffffff;
    background-image:
        radial-gradient( at 12% 18%,  rgba(0, 147, 254, 0.10) 0px, transparent 50% ),
        radial-gradient( at 88% 82%,  rgba(252, 185, 0, 0.10) 0px, transparent 50% ),
        radial-gradient( at 50% 50%,  rgba(255, 255, 255, 0.8) 0px, transparent 60% );
}
.gul-bg-aurora-mesh {
    background-color: #f8fafc;
    background-image:
        radial-gradient( at 22% 28%, rgba(168, 85, 247, 0.18) 0px, transparent 50% ),
        radial-gradient( at 78% 22%, rgba(0, 147, 254, 0.15)  0px, transparent 50% ),
        radial-gradient( at 50% 90%, rgba(252, 185, 0, 0.12)  0px, transparent 60% );
}


/* ── Width Presets ──────────────────────────────────────────────────────────
 * Applied to the section's inner .gul-container. "Narrow" suits long-form
 * text; "Wide" is the default for grids; "Full" eats the page edge-to-edge.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-w-narrow  > .gul-container,
.gul-w-narrow .gul-container { max-width: 56rem; }
.gul-w-default > .gul-container,
.gul-w-default .gul-container { max-width: 80rem; }
.gul-w-wide    > .gul-container,
.gul-w-wide .gul-container { max-width: 96rem; }
.gul-w-full    > .gul-container,
.gul-w-full .gul-container { max-width: 100%; padding-left: 2rem; padding-right: 2rem; }


/* ── Card Hover Effects ─────────────────────────────────────────────────────
 * The opt-in class is applied to the SECTION wrapper, but the actual hover
 * state targets common card child selectors so a single attribute on the
 * section threads the effect down to every card inside it.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-hover-zoom  .gul-service-card,
.gul-hover-zoom  .gul-package-card,
.gul-hover-zoom  .gul-testimonial-card,
.gul-hover-zoom  .gul-location-card,
.gul-hover-zoom  .gul-pain-card,
.gul-hover-zoom  .gul-step-card,
.gul-hover-zoom  .gul-viz-card,
.gul-hover-zoom  .gul-blog-card {
    transition: transform 0.35s cubic-bezier(.2,.65,.3,1), box-shadow 0.35s ease;
}
.gul-hover-zoom  .gul-service-card:hover,
.gul-hover-zoom  .gul-package-card:hover,
.gul-hover-zoom  .gul-testimonial-card:hover,
.gul-hover-zoom  .gul-location-card:hover,
.gul-hover-zoom  .gul-pain-card:hover,
.gul-hover-zoom  .gul-step-card:hover,
.gul-hover-zoom  .gul-viz-card:hover,
.gul-hover-zoom  .gul-blog-card:hover {
    transform: scale(1.035);
    box-shadow: 0 25px 60px -15px rgba(0, 147, 254, 0.25);
}

.gul-hover-lift  .gul-service-card:hover,
.gul-hover-lift  .gul-package-card:hover,
.gul-hover-lift  .gul-testimonial-card:hover,
.gul-hover-lift  .gul-location-card:hover,
.gul-hover-lift  .gul-pain-card:hover,
.gul-hover-lift  .gul-step-card:hover,
.gul-hover-lift  .gul-viz-card:hover,
.gul-hover-lift  .gul-blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.22);
}

.gul-hover-glow  .gul-service-card,
.gul-hover-glow  .gul-package-card,
.gul-hover-glow  .gul-testimonial-card,
.gul-hover-glow  .gul-location-card,
.gul-hover-glow  .gul-pain-card,
.gul-hover-glow  .gul-step-card,
.gul-hover-glow  .gul-blog-card {
    transition: box-shadow 0.45s ease, border-color 0.45s ease;
}
.gul-hover-glow  .gul-service-card:hover,
.gul-hover-glow  .gul-package-card:hover,
.gul-hover-glow  .gul-testimonial-card:hover,
.gul-hover-glow  .gul-location-card:hover,
.gul-hover-glow  .gul-pain-card:hover,
.gul-hover-glow  .gul-step-card:hover,
.gul-hover-glow  .gul-blog-card:hover {
    border-color: rgba(0, 147, 254, 0.6);
    box-shadow:
        0 0 0 4px rgba(0, 147, 254, 0.12),
        0 25px 60px -15px rgba(0, 147, 254, 0.35);
}

.gul-hover-tilt .gul-service-card,
.gul-hover-tilt .gul-package-card,
.gul-hover-tilt .gul-testimonial-card,
.gul-hover-tilt .gul-pain-card,
.gul-hover-tilt .gul-step-card,
.gul-hover-tilt .gul-blog-card { transition: transform 0.5s cubic-bezier(.2,.65,.3,1); }
.gul-hover-tilt .gul-service-card:hover,
.gul-hover-tilt .gul-package-card:hover,
.gul-hover-tilt .gul-testimonial-card:hover,
.gul-hover-tilt .gul-pain-card:hover,
.gul-hover-tilt .gul-step-card:hover,
.gul-hover-tilt .gul-blog-card:hover {
    transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
}


/* ── Dividers (top + bottom SVG separators) ─────────────────────────────────
 * The PHP filter injects <span class="gul-divider gul-divider--top|bottom"
 * data-shape="waves|…"></span> as the first / last child of the section
 * wrapper. The SVG itself is provided inline by the renderer; this CSS
 * positions the layer, sets its height responsively, and provides a fill
 * variable so each section's color scheme bleeds through.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    color: var(--gul-divider-fill, #ffffff);
}
.gul-divider svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.gul-divider--top    { top: -1px;    }
.gul-divider--bottom { bottom: -1px; transform: scaleY(-1); }
.gul-divider[data-shape="none"] { display: none; }

/* Divider height scales — smaller on phones, larger on desktop. */
.gul-divider { height: 50px; }
@media (min-width: 768px) {
    .gul-divider { height: 80px; }
}
@media (min-width: 1280px) {
    .gul-divider { height: 110px; }
}

/* Every gul/* section becomes a positioning context for its dividers. */
.wp-block[class*="gul-"]      { position: relative; }
.wp-block[class*="wp-block-gul-"] { position: relative; }
[class*="wp-block-gul-"][class*="gul-cs-"],
[class*="wp-block-gul-"][class*="gul-bg-"],
[class*="wp-block-gul-"]:has(> .gul-divider) {
    position: relative;
    overflow: hidden;
}


/* ── Reveal Animations (variants) ───────────────────────────────────────────
 * effects.css already defines .gul-reveal + .gul-reveal--left|right|scale.
 * We add a few extras here so the inspector control can offer five named
 * choices that map cleanly to motion designers' vocabulary.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-reveal--fade   { transform: none; opacity: 0; }
.gul-reveal--fade.gul-revealed { opacity: 1; }
.gul-reveal--up     { /* default in effects.css */ }
.gul-reveal--zoom   { transform: scale(0.92); opacity: 0; }
.gul-reveal--zoom.gul-revealed { transform: scale(1); opacity: 1; }
.gul-reveal--blur   { filter: blur(8px); opacity: 0; }
.gul-reveal--blur.gul-revealed { filter: blur(0); opacity: 1; }


/* ── Stagger between adjacent gul/* sections ────────────────────────────────
 * When two consecutive sections both default to white (the most common
 * case), Customify's content area renders them as one big white slab. The
 * `+ ` selector adds a faint mist gradient on every other section to break
 * the monotony — admins can override with an explicit color scheme.
 * ────────────────────────────────────────────────────────────────────────── */
[class*="wp-block-gul-"]:not([class*="gul-cs-"]):not([class*="gul-bg-"])
    + [class*="wp-block-gul-"]:not([class*="gul-cs-"]):not([class*="gul-bg-"]) {
    background-image: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}


@media (prefers-reduced-motion: reduce) {
    .gul-hover-zoom  *:hover,
    .gul-hover-lift  *:hover,
    .gul-hover-glow  *:hover,
    .gul-hover-tilt  *:hover { transform: none !important; box-shadow: none !important; }
}


/* ── Section Layout: alignment ──────────────────────────────────────────────
 * Applies `text-align` to the inner container so headings, subtext, and
 * inline-block CTAs all reflow together. Cards themselves stay in their
 * grid (text-align: left inside a card is set by the card's own CSS).
 * ────────────────────────────────────────────────────────────────────────── */
.gul-align-left   > .gul-container,
.gul-align-left   .gul-container { text-align: left; }
.gul-align-center > .gul-container,
.gul-align-center .gul-container { text-align: center; }
.gul-align-right  > .gul-container,
.gul-align-right  .gul-container { text-align: right; }


/* ── Section Layout: button on/off ──────────────────────────────────────────
 * Section-level kill switches for primary / secondary CTAs without
 * blowing away the markup. Hides every .gul-btn--primary descendant of a
 * section the admin has set "Show Primary Button" → off on.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-no-primary   .gul-btn--primary,
.gul-no-primary   a.gul-btn--primary    { display: none !important; }
.gul-no-secondary .gul-btn--secondary,
.gul-no-secondary a.gul-btn--secondary  { display: none !important; }


/* ── Section Layout: inner column ratio ─────────────────────────────────────
 * Eight preset 2-column ratios. CSS custom properties so the same eight
 * classes work for every 2-col grid the GUL blocks render — hero, split,
 * case-study, lead-magnet, author-card, etc. Each block already uses a
 * `grid-template-columns` declaration; we override it scoped by
 * `[class*="gul-col-"]` so individual blocks don't have to opt in.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-col-50-50 { --gul-col-a: 1fr;    --gul-col-b: 1fr;    }
.gul-col-60-40 { --gul-col-a: 1.5fr;  --gul-col-b: 1fr;    }
.gul-col-70-30 { --gul-col-a: 7fr;    --gul-col-b: 3fr;    }
.gul-col-80-20 { --gul-col-a: 4fr;    --gul-col-b: 1fr;    }
.gul-col-40-60 { --gul-col-a: 1fr;    --gul-col-b: 1.5fr;  }
.gul-col-30-70 { --gul-col-a: 3fr;    --gul-col-b: 7fr;    }
.gul-col-20-80 { --gul-col-a: 1fr;    --gul-col-b: 4fr;    }

@media (min-width: 1024px) {
    [class*="gul-col-"] .gul-hero-section .gul-container,
    [class*="gul-col-"] .gul-split-grid,
    [class*="gul-col-"] .gul-case-study-grid,
    [class*="gul-col-"] .gul-lead-magnet-grid,
    [class*="gul-col-"] .gul-author-card-grid {
        grid-template-columns: var(--gul-col-a, 1fr) var(--gul-col-b, 1fr) !important;
    }
    /* When the outer wrapper itself IS the .gul-hero-section / etc. */
    .gul-hero-section[class*="gul-col-"] .gul-container,
    .gul-split-section[class*="gul-col-"] .gul-split-grid {
        grid-template-columns: var(--gul-col-a, 1fr) var(--gul-col-b, 1fr) !important;
    }
}


/* ── Section Layout: background image + overlay ─────────────────────────────
 * The PHP filter applies `background-image` + `background-size` /
 * `background-position` as inline styles on the section wrapper. The
 * overlay is an absolutely-positioned ::before layer (color from the
 * `--gul-overlay` custom property; opacity from `--gul-overlay-alpha`),
 * which sits between the bg image and the content.
 * ────────────────────────────────────────────────────────────────────────── */
.gul-has-bg-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.gul-has-bg-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--gul-overlay, rgba(0,0,0,0.4));
    opacity: var(--gul-overlay-alpha, 1);
    z-index: 1;
    pointer-events: none;
}
.gul-has-bg-image > .gul-container,
.gul-has-bg-image > *:not(.gul-divider) {
    position: relative;
    z-index: 2;
}