/*
Theme Name: Hello Elementor Child - RenoVast Bouwservice
Template: hello-elementor
Version: 2.0
Description: IT Live managed — premium brochure-level design
*/

/* ═══════════════════════════════════════════════════
   CSS VARIABLES — Brochure-level design tokens
   ═══════════════════════════════════════════════════ */

:root {
    --primary: #7ebfff;
    --primary-dark: #5a9fd4;
    --primary-light: #a8d5ff;
    --dark: #1E1D24;
    --dark-lighter: #2a2932;
    --dark-card: #252430;
    --text: #5E5E5E;
    --text-light: #8a8a8a;
    --white: #ffffff;
    --off-white: #f8f9fa;
    --gold: #d4a855;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 50px;
    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow-md: 0 12px 32px rgba(126,191,255,.12);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
    --shadow-glow: 0 8px 24px rgba(126,191,255,.3);
    --smooth: cubic-bezier(.23,1,.32,1);
    --bounce: cubic-bezier(.68,-.55,.265,1.55);
}

/* ═══════════════════════════════════════════════════
   1. RESET & FULL-WIDTH
   ═══════════════════════════════════════════════════ */

.site-main,
.elementor-page .page-content,
.elementor-page .site-content,
.elementor-page .entry-content,
body.elementor-page .site-main .entry-content {
    max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.e-con.e-parent, .elementor-widget-html {
    max-width: 100% !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
}
.e-con-boxed > .e-con-inner { max-width: 100% !important; padding: 0 !important; }
.page-header, .entry-header, .page-header .entry-title, h1.entry-title, .post-header { display: none !important; }
/* Dienst Builder pages — hide WP default title, use builder hero */
body.page-template-default .entry-header,
body.page-template-default h1.entry-title,
body.page .entry-header { display: none !important; }
.elementor-widget-html { overflow: visible !important; }
.elementor-location-header, .elementor-location-footer { max-width: 100% !important; width: 100% !important; }
body.elementor-page .site-header:not(.elementor-location-header) { display: none; }
body { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════
   2. TYPOGRAPHY — Poppins, smooth rendering
   ═══════════════════════════════════════════════════ */

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark); line-height: 1.15; }
p { line-height: 1.85; color: var(--text); }
a { color: var(--primary); transition: all .3s var(--smooth); }
a:hover { color: var(--primary-dark); }
::selection { background: var(--primary); color: #fff; }
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════
   3. HERO — Premium parallax, gradient, animations
   ═══════════════════════════════════════════════════ */

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
@keyframes scrollLine {
    0% { height: 0; }
    50% { height: 20px; }
    100% { height: 0; top: 20px; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.renovast-hero-section { position: relative; }
.renovast-hero-section::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--white), transparent);
    pointer-events: none; z-index: 1;
}
.renovast-hero-section h1 { animation: heroFadeUp 1s var(--smooth) .2s both; }
.renovast-hero-section h2 { animation: heroFadeDown .8s var(--smooth) .1s both; }
.renovast-hero-section p { animation: heroFadeUp 1s var(--smooth) .4s both; }
.renovast-hero-section a { animation: heroFadeUp 1s var(--smooth) .6s both; }

/* ═══════════════════════════════════════════════════
   4. SCROLL REVEAL — Smooth enter animations
   ═══════════════════════════════════════════════════ */

.ilv-reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity .9s var(--smooth), transform .9s var(--smooth);
}
.ilv-reveal.ilv-visible { opacity: 1; transform: translateY(0); }

.ilv-reveal-left {
    opacity: 0; transform: translateX(-60px);
    transition: opacity .9s var(--smooth), transform .9s var(--smooth);
}
.ilv-reveal-left.ilv-visible { opacity: 1; transform: translateX(0); }

.ilv-reveal-right {
    opacity: 0; transform: translateX(60px);
    transition: opacity .9s var(--smooth), transform .9s var(--smooth);
}
.ilv-reveal-right.ilv-visible { opacity: 1; transform: translateX(0); }

.ilv-reveal-scale {
    opacity: 0; transform: scale(.88);
    transition: opacity .8s var(--smooth), transform .8s var(--smooth);
}
.ilv-reveal-scale.ilv-visible { opacity: 1; transform: scale(1); }

.ilv-stagger > * { transition-delay: calc(var(--i, 0) * .12s); }

/* ═══════════════════════════════════════════════════
   5. FEATURE CARDS — Glass morphism, float, shine
   ═══════════════════════════════════════════════════ */

.feature-card {
    transition: all .5s var(--smooth) !important;
    position: relative; overflow: hidden;
    animation: float 7s ease-in-out infinite;
}
.feature-card:nth-child(2) { animation-delay: .3s; animation-duration: 8s; }
.feature-card:nth-child(3) { animation-delay: .6s; animation-duration: 7.5s; }

/* Shine sweep */
.feature-card::before {
    content: ''; position: absolute; top: -100%; left: -100%;
    width: 300%; height: 300%;
    background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
    transition: .8s var(--smooth);
}
.feature-card:hover::before { top: -50%; left: -50%; }
.feature-card:hover {
    transform: translateY(-14px) scale(1.03) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: none !important;
}
/* Blue card glow */
.feature-card[style*="background: #7ebfff"]:hover,
.feature-card:nth-child(2):hover {
    box-shadow: 0 25px 60px rgba(126,191,255,.4) !important;
}

/* ═══════════════════════════════════════════════════
   6. SERVICE CARDS — Arrow reveal, border glow
   ═══════════════════════════════════════════════════ */

.services-grid-desktop > div {
    transition: all .4s var(--smooth) !important;
    position: relative; overflow: hidden;
}
.services-grid-desktop > div::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--smooth);
}
.services-grid-desktop > div:hover::before { transform: scaleX(1); }
.services-grid-desktop > div::after {
    content: '→'; position: absolute; bottom: 24px; right: 24px;
    width: 40px; height: 40px; background: var(--primary); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; opacity: 0; transform: translateX(-10px) scale(.8);
    transition: all .4s var(--bounce);
}
.services-grid-desktop > div:hover::after { opacity: 1; transform: translateX(0) scale(1); }
.services-grid-desktop > div:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--primary) !important;
}

/* Service icon hover */
.services-grid-desktop > div img {
    transition: transform .4s var(--smooth) !important;
}
.services-grid-desktop > div:hover img {
    transform: scale(1.1) rotate(-3deg) !important;
}

/* ═══════════════════════════════════════════════════
   7. PROJECT CARDS — Image zoom, white text, shadow
   ═══════════════════════════════════════════════════ */

/* IT Live Projects plugin cards */
.ilp-card {
    transition: transform .5s var(--smooth), box-shadow .5s !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}
.ilp-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-lg) !important;
}
.ilp-card img {
    transition: transform .6s var(--smooth) !important;
}
.ilp-card:hover img {
    transform: scale(1.06) !important;
}
.ilp-card h3 {
    color: var(--dark) !important;
    font-weight: 700 !important;
}
.ilp-card p {
    color: var(--text) !important;
}

/* Before/After slider styling */
.ilp-ba-slider {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.ilp-ba-handle > div {
    box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
    transition: transform .2s var(--smooth);
}
.ilp-ba-handle > div:hover {
    transform: translate(-50%,-50%) scale(1.15) !important;
}

/* Filter buttons */
.ilp-filter {
    transition: all .3s var(--smooth) !important;
    border-radius: var(--radius-xl) !important;
}
.ilp-filter:hover, .ilp-filter.active {
    background: var(--dark) !important;
    color: #fff !important;
    border-color: var(--dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Legacy inline project cards (in HTML widgets) */
[style*="border-radius: 12px"][style*="overflow: hidden"][style*="box-shadow"] {
    transition: transform .5s var(--smooth), box-shadow .5s !important;
}
[style*="border-radius: 12px"][style*="overflow: hidden"][style*="box-shadow"]:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-lg) !important;
}
[style*="border-radius: 12px"][style*="overflow: hidden"] > img {
    transition: transform .6s var(--smooth) !important;
}
[style*="border-radius: 12px"][style*="overflow: hidden"]:hover > img {
    transform: scale(1.06) !important;
}
/* White text on dark overlay */
[style*="linear-gradient(to top"] h4,
.renovast-projects h4 {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
}
[style*="linear-gradient(to top"] p,
.renovast-projects [style*="opacity: 0.95"] {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}

/* ═══════════════════════════════════════════════════
   8. BUTTONS — Ripple, glow, premium hover
   ═══════════════════════════════════════════════════ */

a[href*="offerte"],
a[style*="padding: 16px"],
.renovast-btn {
    transition: all .4s var(--smooth) !important;
    position: relative; overflow: hidden;
}
a[href*="offerte"]:hover,
.renovast-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-glow) !important;
}
/* Ripple */
a[href*="offerte"]::after,
a[style*="background: #7ebfff"]::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; background: rgba(255,255,255,.2);
    border-radius: 50%; transform: translate(-50%,-50%);
    transition: width .6s var(--smooth), height .6s var(--smooth);
}
a[href*="offerte"]:hover::after,
a[style*="background: #7ebfff"]:hover::after {
    width: 400px; height: 400px;
}

/* ═══════════════════════════════════════════════════
   9. STATS — Tabular nums, glow
   ═══════════════════════════════════════════════════ */

.renovast-stats [style*="font-size: 42px"],
.renovast-stats [style*="font-size: 56px"] {
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 30px rgba(126,191,255,.3);
}

/* ═══════════════════════════════════════════════════
   10. FORMS — Glass input focus
   ═══════════════════════════════════════════════════ */

.ilf-form input:focus,
.ilf-form textarea:focus,
.ilf-form select:focus,
input[name="naam"]:focus,
input[name="email"]:focus,
textarea[name="bericht"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(126,191,255,.1), var(--shadow-sm) !important;
    transform: translateY(-1px);
    transition: all .3s var(--smooth) !important;
}
.ilf-submit:hover, button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(30,29,36,.2) !important;
}

/* ═══════════════════════════════════════════════════
   11. HEADER — Scroll shadow, glass effect
   ═══════════════════════════════════════════════════ */

.elementor-location-header {
    transition: all .4s var(--smooth);
}
.header-scrolled .elementor-location-header {
    box-shadow: 0 4px 30px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ═══════════════════════════════════════════════════
   12. DIENST PAGES — Bottom border animation
   ═══════════════════════════════════════════════════ */

.dienst-card, [class*="dienst-item"] {
    transition: all .4s var(--smooth) !important;
}
.dienst-card:hover, [class*="dienst-item"]:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-md) !important;
}
[style*="color: #7ebfff"] { text-shadow: 0 0 12px rgba(126,191,255,.25); }

/* Checkmark glow */
[style*="color: #10b981"],
[style*="color: #7ebfff"] {
    transition: text-shadow .3s;
}

/* ═══════════════════════════════════════════════════
   13. IMAGES — Smooth lazy load
   ═══════════════════════════════════════════════════ */

img { max-width: 100%; height: auto; }
img[loading="lazy"] { opacity: 0; transition: opacity .5s var(--smooth); }
img[loading="lazy"].loaded, img[loading="lazy"][complete] { opacity: 1; }

/* ═══════════════════════════════════════════════════
   14. SCROLLBAR — Gradient
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-dark), #4a8fc4); }
.services-slider-mobile::-webkit-scrollbar { height: 6px; }
.services-slider-mobile::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

/* ═══════════════════════════════════════════════════
   15. GLASS MORPHISM utility
   ═══════════════════════════════════════════════════ */

.ilv-glass {
    background: rgba(30,29,36,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .services-grid-desktop > div::after { display: none; }
}

@media (max-width: 768px) {
    .services-grid-desktop { display: none !important; }
    .services-slider-mobile { display: block !important; }
    .feature-cards-container { grid-template-columns: 1fr !important; }
    .feature-card { animation: none !important; transform: none !important; }
    .feature-card::before { display: none; }
    .renovast-hero-section { background-attachment: scroll !important; padding: 120px 0 160px !important; }
    .renovast-hero-section h1 { font-size: 34px !important; }
    .renovast-hero-section::after { height: 80px; }
    .renovast-stats > div > div > div { grid-template-columns: repeat(2,1fr) !important; }
    .renovast-cta > div > div { flex-direction: column !important; }
    .renovast-cta a { width: 100% !important; text-align: center !important; }
    a[href*="offerte"], button[type="submit"] { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .ilv-reveal, .ilv-reveal-left, .ilv-reveal-right, .ilv-reveal-scale {
        opacity: 1 !important; transform: none !important;
    }
}