/*
Theme Name: Hello Elementor Child - AZMC
Template: hello-elementor
Version: 1.0
Description: IT Live managed — AZMC Zorg premium design
*/

:root {
    --primary: #0066CC;
    --primary-dark: #004C99;
    --primary-light: #3399FF;
    --accent: #00A651;
    --accent-light: #33CC77;
    --dark: #1a1a2e;
    --dark-lighter: #2a2a3e;
    --text: #333333;
    --text-light: #666666;
    --bg: #ffffff;
    --bg-alt: #f7f9fc;
    --border: #e2e8f0;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,.06);
    --transition: all .3s ease;
}

/* Full-width reset (zelfde als Renovast) */
.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;
}
.e-con-boxed > .e-con-inner { max-width: 1680px !important; margin: 0 auto !important; padding: 0 2rem !important; }

/* Content sections — breathing room links/rechts */
.elementor-widget-html section {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}
/* Hero/CTA sections met achtergrond: WEL full width background, content gecentreerd */
.elementor-widget-html section[style*="background-image"],
.azmc-hero,
.azmc-cta-section {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}
.page-header, .entry-header, .page-header .entry-title, h1.entry-title, .post-header { display: none !important; }
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; }

/* Global overrides */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Better image handling — prevent pixelation on small images */
img { max-width: 100%; height: auto; }
.azmc-hero { image-rendering: auto; }
.azmc-hero img,
section[style*="background-image"] {
    image-rendering: -webkit-optimize-contrast;
}
/* Smooth small hero backgrounds instead of pixelated stretch */
.azmc-hero,
[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   Widget improvements — features/diensten cards 3-kolom grid
   ═══════════════════════════════════════════════════ */

/* Sections with consecutive h3+p pairs → auto 3-column card grid */
.elementor-widget-html section:has(> h3:nth-of-type(3)) {
    & > h2, & > h2 + p { text-align: center; }
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 4rem 2rem;
}
/* h2 title + subtitle span full width */
.elementor-widget-html section:has(> h3:nth-of-type(3)) > h2,
.elementor-widget-html section:has(> h3:nth-of-type(3)) > h2 + p:not(:has(strong)) {
    grid-column: 1 / -1;
}
/* Each h3 becomes a card with its following p */
.elementor-widget-html section > h3 {
    background: var(--bg-light, #f8f9fa);
    padding: 1.5rem 1.5rem 0.5rem;
    border-radius: 12px 12px 0 0;
    margin: 0;
    color: var(--accent-1, var(--primary-color, #1a4d7a));
    font-size: 1.1rem;
}
.elementor-widget-html section > h3 + p {
    background: var(--bg-light, #f8f9fa);
    padding: 0 1.5rem 1.5rem;
    border-radius: 0 0 12px 12px;
    margin: 0;
    color: var(--text-light, #6c757d);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Tablet: 2 kolommen, max 90% breed */
@media (max-width: 1024px) {
    .e-con-boxed > .e-con-inner { max-width: 90% !important; padding: 0 1.5rem !important; }
    .elementor-widget-html section { max-width: 90%; }
    .elementor-widget-html section:has(> h3:nth-of-type(3)) {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Mobiel: 1 kolom, full width, GEEN padding */
@media (max-width: 768px) {
    .e-con-boxed > .e-con-inner { max-width: 100% !important; padding: 0 !important; }
    .elementor-widget-html section { max-width: 100%; padding-left: 0; padding-right: 0; }
    .elementor-widget-html section:has(> h3:nth-of-type(3)) {
        grid-template-columns: 1fr;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}