/*
 * ============================================================
 * SORE HAARKLINIEK — Component Library & Design System
 * ============================================================
 *
 * HOW TO USE THIS FILE
 * --------------------
 * This file contains reusable CSS components for adding new
 * sections and content blocks without touching Elementor HTML.
 *
 * To add a new section to a page:
 *   1. Open the relevant fragment: resources/views/fragments/pages/<name>.blade.php
 *   2. Copy a component template from the BLADE SNIPPETS section below (in comments)
 *   3. Paste it where the new section should appear
 *   4. Edit text/links — CSS classes are already styled here
 *
 * This file is loaded on every page via head-assets.php (common_style_ids → sore-components-css).
 *
 * ============================================================
 * DESIGN TOKENS
 * ============================================================
 *
 * COLORS
 *   Primary dark:   #054977          (nav hover, button hover bg)
 *   Accent blue:    #6795AC          (button default bg, borders)
 *   Light blue bg:  #F4FBFF          (section backgrounds, cards)
 *   Sage green:     #D5E8DF          (alternative button, highlights)
 *   Text black:     #070807E6        (all body text, headings)
 *   White:          #FFFFFF
 *   Divider:        #00000026        (borders, input borders)
 *
 * FONTS
 *   Headings H1–H3: "Ovo" (serif, elegant) — font-weight: 400
 *   Headings H4–H6: "Manrope" (sans-serif) — font-weight: 500–600
 *   Body text:      "Manrope" — font-weight: 400, font-size: 14px, line-height: 1.6em
 *
 * FONT SIZES (desktop)
 *   H1: 60px  |  H2: 48px  |  H3: 34px  |  H4: 24px  |  H5: 20px  |  H6: 15px
 *   Tablet: H1→36px, H2→30px, H3→25px  |  Mobile: H1→30px, H2→27px, H3→24px
 *
 * SPACING / LAYOUT
 *   Max content width:  1280px
 *   Section padding:    80px top/bottom (desktop), 50px (tablet), 40px (mobile)
 *   Column gap:         30px (desktop), 20px (tablet/mobile)
 *   Border radius:      24px (buttons, inputs, images, cards)
 *
 * BUTTONS
 *   Default:  bg #D5E8DF, text #070807E6, border 1px solid #6795AC, radius 24px, padding 16px 30px
 *   Hover:    bg #054977, text #FFFFFF, border #054977
 *   With icon: add <span class="elementor-button-icon"> before text span (see snippet below)
 *
 * ============================================================
 * BLADE SNIPPET: SECTION WRAPPER (full-width, light bg)
 * ============================================================
 *
 * <div class="e-flex e-con-boxed e-con e-parent sore-section sore-section--light">
 *     <div class="e-con-inner">
 *         {{-- content here --}}
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: SECTION WRAPPER (white bg)
 * ============================================================
 *
 * <div class="e-flex e-con-boxed e-con e-parent sore-section">
 *     <div class="e-con-inner">
 *         {{-- content here --}}
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: CENTERED SECTION HEADING (H2 + subtitle)
 * ============================================================
 *
 * <div class="elementor-widget elementor-widget-heading sore-heading-center">
 *     <div class="elementor-widget-container">
 *         <h2 class="elementor-heading-title">Uw sectie titel</h2>
 *     </div>
 * </div>
 * <div class="elementor-widget elementor-widget-text-editor sore-subheading-center">
 *     <div class="elementor-widget-container">
 *         <p>Korte beschrijving van deze sectie.</p>
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: 3-COLUMN GRID
 * ============================================================
 *
 * <div class="e-con-full e-flex e-con e-child sore-grid-3col">
 *     <div class="e-con-full e-flex e-con e-child sore-card">
 *         {{-- card content --}}
 *     </div>
 *     <div class="e-con-full e-flex e-con e-child sore-card">
 *         {{-- card content --}}
 *     </div>
 *     <div class="e-con-full e-flex e-con e-child sore-card">
 *         {{-- card content --}}
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: 2-COLUMN (text left, image right)
 * ============================================================
 *
 * <div class="e-con-full e-flex e-con e-child sore-grid-2col">
 *     <div class="e-con-full e-flex e-con e-child" style="flex:1; min-width:0;">
 *         <div class="elementor-widget elementor-widget-heading">
 *             <div class="elementor-widget-container">
 *                 <h2 class="elementor-heading-title">Titel</h2>
 *             </div>
 *         </div>
 *         <div class="elementor-widget elementor-widget-text-editor">
 *             <div class="elementor-widget-container">
 *                 <p>Beschrijving tekst.</p>
 *             </div>
 *         </div>
 *         <div class="elementor-widget elementor-widget-button">
 *             <div class="elementor-widget-container">
 *                 <div class="elementor-button-wrapper">
 *                     <a class="elementor-button elementor-button-link elementor-size-sm" href="/pagina">
 *                         <span class="elementor-button-content-wrapper">
 *                             <span class="elementor-button-text">Meer lezen</span>
 *                         </span>
 *                     </a>
 *                 </div>
 *             </div>
 *         </div>
 *     </div>
 *     <div class="e-con-full e-flex e-con e-child" style="flex:1; min-width:0;">
 *         <div class="elementor-widget elementor-widget-image">
 *             <div class="elementor-widget-container">
 *                 <img src="/assets/images/uw-afbeelding.jpg" alt="Beschrijving" loading="lazy">
 *             </div>
 *         </div>
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: ICON LIST (checkmarks or bullets)
 * ============================================================
 *
 * <div class="elementor-widget elementor-widget-icon-list">
 *     <div class="elementor-widget-container">
 *         <ul class="elementor-icon-list-items">
 *             <li class="elementor-icon-list-item">
 *                 <span class="elementor-icon-list-icon">
 *                     <svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
 *                         <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
 *                     </svg>
 *                 </span>
 *                 <span class="elementor-icon-list-text">Lijst item tekst</span>
 *             </li>
 *         </ul>
 *     </div>
 * </div>
 *
 * ============================================================
 * BLADE SNIPPET: HORIZONTAL DIVIDER
 * ============================================================
 *
 * <div class="elementor-widget elementor-widget-divider">
 *     <div class="elementor-widget-container">
 *         <div class="elementor-divider">
 *             <span class="elementor-divider-separator"></span>
 *         </div>
 *     </div>
 * </div>
 *
 * ============================================================
 * COMPONENT CSS
 * ============================================================
 */

/* ----- Section Wrapper ----- */

.sore-section {
    padding: var(--sore-section-pad-lg) 0;
}

.sore-section--light {
    background-color: var(--sore-bg-light);
}

.sore-section--sage {
    background-color: var(--sore-sage);
}

.sore-section--dark {
    background-color: var(--sore-primary);
    color: var(--sore-white);
}

.sore-section--dark .elementor-heading-title,
.sore-section--dark .elementor-text-editor,
.sore-section--dark p {
    color: var(--sore-white);
}

/* ----- Heading Alignment Helpers ----- */

.sore-heading-center {
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.sore-subheading-center {
    text-align: center;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

/* ----- Grid Layouts ----- */

.sore-grid-3col {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.sore-grid-3col > * {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 260px;
}

.sore-grid-2col {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    width: 100%;
    align-items: center;
}

.sore-grid-2col > * {
    flex: 1 1 calc(50% - 30px);
    min-width: 280px;
}

/* ----- Card ----- */

.sore-card {
    background: var(--sore-white);
    border-radius: var(--sore-radius);
    padding: 32px;
    box-shadow: var(--sore-shadow-card);
    flex-direction: column;
}

.sore-card--accent {
    background: var(--sore-bg-light);
    border: 1px solid rgba(103, 149, 172, 0.2);
}

/* ----- Step indicator (numbered steps: "Stap 1", "Stap 2" etc.) ----- */

.sore-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--sore-sage);
    color: var(--sore-primary);
    font-family: var(--sore-font-heading);
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ----- Highlighted text / tag pill ----- */

.sore-tag {
    display: inline-block;
    background: var(--sore-sage);
    color: var(--sore-primary);
    font-family: var(--sore-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--sore-radius);
    margin-bottom: 12px;
}

/* ----- Horizontal rule / spacer ----- */

.sore-spacer--sm { height: 24px; }
.sore-spacer--md { height: 48px; }
.sore-spacer--lg { height: 80px; }

/* ----- Responsive overrides ----- */

@media (max-width: 1024px) {
    .sore-section {
        padding: var(--sore-section-pad-md) 0;
    }

    .sore-grid-2col {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .sore-section {
        padding: var(--sore-section-pad-sm) 0;
    }

    .sore-grid-3col > *,
    .sore-grid-2col > * {
        flex: 1 1 100%;
    }

    .sore-grid-2col {
        flex-direction: column;
        gap: 24px;
    }
}