/*
 Theme Name: Hello Elementor Child
 Theme URI: https://elementor.com/
 Description: Child theme for Hello Elementor
 Author: Stephanie Seasly, Day & Night Media Design + Automations
 Template: hello-elementor
 Version: 1.0.0
*/

/* --------------------------------------------------------------
GLOBAL BRAND VARIABLES
-------------------------------------------------------------- */

:root {
    --color-primary: #523bf9;
    --color-secondary: #00cbff;
    --color-accent1: #36edb3;
    --color-accent2: #7e8eea;
    --color-bg: #0E162C;
    --color-surface: #10023B;
    --color-text: #e6e6ec;


    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(135deg, var(--color-accent1), var(--color-accent2));
    --gradient-duotone: linear-gradient(135deg, var(--color-primary), var(--color-accent2));

    --gradient-soft-primary: linear-gradient(135deg, rgba(87,0,250,0.4), rgba(0,153,255,0.4));
    --gradient-soft-accent: linear-gradient(135deg, rgba(134,239,172,0.4), rgba(209,87,182,0.4));

    --gradient-overlay-dark: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

/* --------------------------------------------------------------
UTILITY CLASSES
-------------------------------------------------------------- */

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-soft-primary { background: var(--gradient-soft-primary); }
.bg-gradient-soft-accent { background: var(--gradient-soft-accent); }

.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card {
    background: var(--color-surface);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s ease;
}
.card:hover {
    transform: translateY(-6px);
    border-color: var(--color-accent1);
}

.btn-gradient-primary {
    background: var(--gradient-primary);
    color: var(--color-text);
    border-radius: 2px;
    padding: 16px 32px;
    font-weight: 600;
    transition: 0.3s ease;
}
.btn-gradient-primary:hover { filter: brightness(1.15); }

.btn-gradient-accent {
    background: var(--gradient-accent);
    color: var(--color-text);
    border-radius: 8px;
    padding: 16px 32px;
    font-weight: 600;
    transition: 0.3s ease;
}
.btn-gradient-accent:hover { filter: brightness(1.15); }

.border-gradient-primary {
    border: 3px solid transparent;
    border-image: var(--gradient-primary) 1;
}

.max-width-800 { max-width: 800px; margin: 0 auto; }
.max-width-1200 { max-width: 1200px; margin: 0 auto; }

/* --------------------------------------------------------------
GLASS HERO KIT — gradient ground, orb glow, frosted panel, gradient button
Add the class names below to any Elementor Section/Container's
Advanced > CSS Classes field to use them on a page.
-------------------------------------------------------------- */

.dnm-hero {
    position: relative;
    background: linear-gradient(145deg, var(--color-bg) 0%, var(--color-surface) 55%, var(--color-primary) 130%);
    border-radius: 20px;
    overflow: hidden;
}
.dnm-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.dnm-orb.dnm-orb-accent1 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(54,237,179,.55), transparent 70%);
    top: -60px; right: 40px;
}
.dnm-orb.dnm-orb-secondary {
    width: 260px; height: 180px;
    background: radial-gradient(ellipse, rgba(0,203,255,.5), transparent 70%);
    bottom: -60px; left: -20px;
}

.dnm-glass {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 34px rgba(0,0,0,.4);
}

.dnm-btn-primary {
    display: inline-block;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(82,59,249,.4);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    text-decoration: none;
}
.dnm-btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,203,255,.5);
}
.dnm-btn-secondary {
    display: inline-block;
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
    text-decoration: none;
}
.dnm-btn-secondary:hover {
    background: rgba(255,255,255,.14);
    border-color: var(--color-secondary);
}

/* Anything someone types into stays on solid white, not glass, for outdoor legibility */
.dnm-form-surface { background: #fff; color: #10023B; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
    .dnm-btn-primary, .dnm-btn-secondary { transition: none; }
}