/* =============================================
   weInteract GP — Component Styles
   ============================================= */

/* Two-colour gradient behind an image */
.gp-image-gradient {
    position: relative;
}

.gp-image-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, #2d3a2b, #b8860b);
}

/* Hide header CTA until scroll JS takes over */
body.home #header-cta {
    opacity: 0;
}

/* =============================================================
   .gp-card — shared card styling for the WP site.

   Purpose
   -------
   Canonical "card" look used across Elementor pages so every
   card on the site matches the visual language of the Felicity
   booking/triage app (white surface, rounded corners, soft drop
   shadow, green left accent, gentle hover lift).

   Mirror source: public/shared/style.css → .service-card +
   .service-card--fixed (background, border-radius, box-shadow,
   hover transform, left-border accent).

   Usage
   -----
   Add the CSS class `gp-card` to any Elementor container,
   section, or widget wrapper. Do NOT set visual properties via
   Elementor controls on that element — they will override this
   class. Sizing and positioning (width, margin, padding, grid
   layout) are intentionally left to Elementor.

   Per-instance overrides
   ----------------------
   All visual values are exposed as CSS custom properties so a
   single instance can be tweaked from Elementor's "Advanced →
   Custom CSS" panel without editing this file:

     --gp-card-accent         Left stripe colour   (default #3d6650 brand green)
     --gp-card-accent-width   Left stripe width    (default 3px)
     --gp-card-bg             Card surface colour  (default #ffffff)
     --gp-card-radius         Corner radius        (default 12px)
     --gp-card-shadow         Resting shadow       (default soft drop)
     --gp-card-shadow-hover   Hover shadow         (default stronger drop)

   Accessibility
   -------------
   The hover lift is suppressed when the user has
   `prefers-reduced-motion: reduce` set.
   ============================================================= */
.gp-card {
    /* Default tokens — override any of these from Elementor Custom CSS. */
    --gp-card-accent: #3d6650;
    --gp-card-accent-width: 3px;
    --gp-card-bg: #ffffff;
    --gp-card-radius: 12px;
    --gp-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --gp-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.2);

    background: var(--gp-card-bg);
    border-radius: var(--gp-card-radius);
    box-shadow: var(--gp-card-shadow);
    /* Single-side border keeps the coloured stripe on the left only. */
    border-left: var(--gp-card-accent-width) solid var(--gp-card-accent);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover — lift and deepen the shadow so the card reads as interactive. */
.gp-card:hover {
    box-shadow: var(--gp-card-shadow-hover);
    transform: translateY(-3px);
}

/* Active — settle back slightly on press, easing the hover state. */
.gp-card:active {
    transform: translateY(-1px);
    box-shadow: var(--gp-card-shadow);
}

/* Respect user motion preference — keep shadow change, drop the lift. */
@media (prefers-reduced-motion: reduce) {
    .gp-card {
        transition: none;
    }

    .gp-card:hover,
    .gp-card:active {
        transform: none;
    }
}