/*
Theme Name: IMMER.MINT
Description: Custom Hello Elementor child theme for IMMER.MINT.
Version: 1.0.7
Template: hello-elementor
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: immer-mint
*/

/* Paragraph rhythm inside Elementor text widgets, including legacy wrappers. */
.elementor-widget-text-editor {
    --mint-paragraph-spacing: 1em;
}

.elementor-widget-text-editor p {
    margin-block: 0 var(--mint-paragraph-spacing) !important;
}

.elementor-widget-text-editor p:last-child {
    margin-block-end: 0;
}

.immer-mint-logo {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 1rem;
    height: auto;
    margin: 0 auto;
    display: block;
}

.mint-gradient {
    --mint-cloud-background:
        radial-gradient(ellipse at center, #E15ACB 0%, rgba(225, 90, 203, 0) 65%),
        radial-gradient(ellipse at center, #65C5FF 0%, rgba(101, 197, 255, 0) 65%),
        radial-gradient(ellipse at center, rgba(225, 90, 203, 0.8) 0%, rgba(225, 90, 203, 0) 70%),
        radial-gradient(ellipse at center, rgba(101, 197, 255, 0.8) 0%, rgba(101, 197, 255, 0) 70%);
}

/* Use on a text span or an Elementor Heading widget. */
.mint-gradient,
.elementor-widget-heading.mint-gradient .elementor-heading-title,
.elementor-widget-heading.mint-gradient .elementor-heading-title a,
.elementor-widget-button.mint-gradient .elementor-button,
.elementor-button.mint-gradient,
button.mint-gradient {
    /* Soft overlapping clouds create an organic, noise-like color field. */
    background-color: #9864F8;
    background-image: var(--mint-cloud-background);
    background-size: 160% 240%, 170% 260%, 130% 220%, 140% 230%;
    background-position: 0% 20%, 100% 80%, 80% 0%, 20% 100%;
    background-repeat: no-repeat;
    animation: mint-gradient-flow 12s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* The heading paints the gradient when its widget carries the class. */
.elementor-widget-heading.mint-gradient {
    background: none;
    animation: none;
}

@media (forced-colors: active) {
    .mint-gradient,
    .elementor-widget-heading.mint-gradient .elementor-heading-title,
    .elementor-widget-heading.mint-gradient .elementor-heading-title a,
.elementor-widget-button.mint-gradient .elementor-button,
.elementor-button.mint-gradient,
button.mint-gradient {
        background: none;
        animation: none;
        -webkit-text-fill-color: CanvasText;
        color: CanvasText;
    }
}



/* Each cloud follows its own closed path; the loop has no jump or reversal. */
@keyframes mint-gradient-flow {
    0%, 100% {
        background-position: 0% 20%, 100% 80%, 80% 0%, 20% 100%;
    }
    25% {
        background-position: 30% 100%, 70% 0%, 0% 30%, 100% 70%;
    }
    50% {
        background-position: 100% 70%, 0% 30%, 20% 100%, 80% 0%;
    }
    75% {
        background-position: 70% 0%, 30% 100%, 100% 70%, 0% 30%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mint-gradient,
    .elementor-widget-heading.mint-gradient .elementor-heading-title,
    .elementor-widget-heading.mint-gradient .elementor-heading-title a,
.elementor-widget-button.mint-gradient .elementor-button,
.elementor-button.mint-gradient,
button.mint-gradient {
        animation: none;
        /* Keep the same soft color field, without motion. */
    }
}
/* Add mint-hero-gradient to the outer Elementor hero container. */
.mint-hero-gradient {
    --mint-hero-duration: 12s;
    background-color: #fff;
    background-image:
        linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.94) 28%, rgba(255, 255, 255, 0.35) 58%, rgba(255, 255, 255, 0.12) 100%),
        radial-gradient(ellipse at 78% 50%, rgba(152, 100, 248, 0.24) 0%, rgba(152, 100, 248, 0) 48%),
        radial-gradient(ellipse at 60% 80%, rgba(101, 197, 255, 0.28) 0%, rgba(101, 197, 255, 0) 52%),
        radial-gradient(ellipse at 88% 24%, rgba(225, 90, 203, 0.14) 0%, rgba(225, 90, 203, 0) 44%);
    background-size: 100% 100%, 140% 160%, 150% 150%, 130% 170%;
    background-position: center, 65% 40%, 40% 75%, 80% 25%;
    background-repeat: no-repeat;
    animation: mint-hero-flow var(--mint-hero-duration) ease-in-out infinite;
}

/* Independent cloud paths return to the starting field for a seamless loop. */
@keyframes mint-hero-flow {
    0%, 100% {
        background-position: center, 65% 40%, 40% 75%, 80% 25%;
    }
    25% {
        background-position: center, 90% 70%, 65% 95%, 55% 45%;
    }
    50% {
        background-position: center, 70% 95%, 85% 65%, 35% 75%;
    }
    75% {
        background-position: center, 40% 65%, 55% 35%, 65% 55%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mint-hero-gradient {
        animation: none;
    }
}

@media (forced-colors: active) {
    .mint-hero-gradient {
        background: Canvas;
        animation: none;
    }
}
/* On a Button widget, paint the button rather than its outer wrapper. */
.elementor-widget-button.mint-gradient {
    background: none;
    animation: none;
    -webkit-text-fill-color: currentColor !important;
    color: inherit;
}

.elementor-widget-button.mint-gradient .elementor-button,
.elementor-button.mint-gradient,
button.mint-gradient {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    /* Elementor generates page-specific normal/hover backgrounds. */
    background-color: #9864F8 !important;
    background-image: var(--mint-cloud-background) !important;
    background-size: 160% 240%, 170% 260%, 130% 220%, 140% 230%;
    background-repeat: no-repeat;
    color: #fff !important;
}

.elementor-widget-button.mint-gradient .elementor-button:focus-visible,
.elementor-button.mint-gradient:focus-visible,
button.mint-gradient:focus-visible {
    outline: 2px solid #34204f;
    outline-offset: 3px;
}

@media (forced-colors: active) {
    .elementor-widget-button.mint-gradient .elementor-button,
    .elementor-button.mint-gradient,
    button.mint-gradient {
        background-color: ButtonFace !important;
        background-image: none !important;
        color: ButtonText !important;
        border: 1px solid ButtonText;
        animation: none;
    }

    .elementor-widget-button.mint-gradient .elementor-button:focus-visible,
    .elementor-button.mint-gradient:focus-visible,
    button.mint-gradient:focus-visible {
        outline-color: Highlight;
    }
}
/* Label spans and icons must not inherit transparent text from mint-gradient. */
.elementor-widget-button.mint-gradient .elementor-button .elementor-button-content-wrapper,
.elementor-widget-button.mint-gradient .elementor-button .elementor-button-text,
.elementor-widget-button.mint-gradient .elementor-button .elementor-button-icon,
.elementor-button.mint-gradient .elementor-button-content-wrapper,
.elementor-button.mint-gradient .elementor-button-text,
.elementor-button.mint-gradient .elementor-button-icon {
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Category accents: automatic in loops, or explicit on any widget/container.
 * Keep automatic selectors at one-class specificity so manual classes win.
 */
.e-loop-item {
    --category-color: #626775;
}

.e-loop-item:where(:has(.category-label a[href*="/immer-xr/"])) {
    --category-color: #596CFA;
}

.e-loop-item:where(:has(.category-label a[href*="/immer-gen/"])) {
    --category-color: #9864F8;
}

.e-loop-item:where(:has(.category-label a[href*="/immer-real/"])) {
    --category-color: #46BDA9;
}

/* Manual classes work both inside and outside Loop Grid items. */
.category-immer-xr {
    --category-color: #596CFA;
}

.category-immer-gen {
    --category-color: #9864F8;
}

.category-immer-real {
    --category-color: #46BDA9;
}

/* category-accent uses the nearest inherited category, with a neutral fallback.
 * Explicit category classes also apply the accent themselves.
 */
:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real),
:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real) :is(.elementor-heading-title, a, p) {
    color: var(--category-color, #626775) !important;
}

:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real) svg {
    color: var(--category-color, #626775) !important;
}

:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real) svg [fill]:not([fill="none"]) {
    fill: var(--category-color, #626775) !important;
}

:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real) svg [stroke]:not([stroke="none"]) {
    stroke: var(--category-color, #626775) !important;
}

/* Fill ordinary SVG paths without turning outline-only artwork into solids. */
:is(.category-accent, .category-immer-xr, .category-immer-gen, .category-immer-real) svg :is(circle, path):not([fill]):not([stroke]) {
    fill: currentColor;
}

.clickable-card {
  position: relative;
}

.clickable-card > .card-link-overlay {
  position: absolute !important;
  inset: 0;
  margin: 0;
  z-index: 10;
}

.card-link-overlay a {
  position: absolute;
  inset: 0;
  font-size: 0;
}

.card-link-overlay a:focus-visible {
  outline: 3px solid #00a6a6;
  outline-offset: -3px;
}