/* =========================================================================
   Algemene styles — Allround Web
   Laadt op elke pagina via de aw-module loader (awcf-public.php).
   Paginaspecifieke regels ALTIJD achter een eigen class houden.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Ledenconferentie 2026 — conceptpagina (post 77468), scope: .aw-conf
   Kleuren komen overeen met de Global Colors in Elementor-kit 40782.
   ------------------------------------------------------------------------- */

.aw-conf {
    --conf-ink: #28282C;
    --conf-body: #3A3A3F;
    --conf-muted: #6B7280;
    --conf-border: #E3E8F2;
    --conf-blue: #78A3E1;
    --conf-deep: #3C63A0;
    --conf-soft: #ECF2FA;
    --conf-soft2: #F5F8FC;
}

/* Leesbaarheid: het thema zet body-tekst op #7A7A7A (4.48:1 op wit, onder
   WCAG AA). Het ontwerp gebruikt #3A3A3F (10.9:1). Alleen binnen .aw-conf. */
.aw-conf .elementor-widget-text-editor {
    color: var(--conf-body);
}

/* --- Inhoudstabel: actieve en hover-staat als in het ontwerp --------------
   Let op: Elementor zet 'elementor-item-active' op de <a> zelf
   (.elementor-toc__list-item-text), niet op het <li> of de wrapper. De pill
   moet daarom op de link staan, niet op de wrapper. */
.aw-conf .elementor-toc__list-item-text {
    display: block;
    flex: 1 1 auto;                 /* wrapper is flex: zonder dit krimpt de
                                       pill naar de tekst i.p.v. de kolom */
    padding: 9px 14px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    text-decoration: none;          /* thema onderstreept links standaard */
}

.aw-conf .elementor-toc__list-item-text:hover {
    background: var(--conf-soft2);
    text-decoration: none;
}

.aw-conf .elementor-toc__list-item-text.aw-toc-current {
    background: var(--conf-soft);
    border-left-color: var(--conf-blue);
    color: var(--conf-deep);
    font-weight: 600;
}

/* Ruimte onder "Op deze pagina", en de titel uitlijnen met de itemtekst
   (items hebben 14px binnenmarge links). */
.aw-conf .elementor-toc__header {
    margin-bottom: 10px;
    padding-left: 14px;
}

/* Iets lucht tussen de items onderling, zoals in het ontwerp. */
.aw-conf .elementor-toc__list-item + .elementor-toc__list-item {
    margin-top: 2px;
}

/* --- Taallabels bij programmaonderdelen ("NL", "EN / FR", "Concept") ------ */
.aw-conf .aw-tag {
    margin-left: 6px;
    color: var(--conf-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- Hero: regellengte begrenzen zoals in het ontwerp -------------------- */
/* Elementor zet .elementor.elementor .e-con > .elementor-widget{max-width:100%}
   met vier classes; dat wint van een selector op de widget-wrapper zelf.
   Daarom het binnenelement begrenzen. */
.aw-conf .aw-hero-title .elementor-heading-title {
    max-width: 820px;
    overflow-wrap: break-word;      /* "Ledenconferentie" is één lang woord en
                                       liep over op zeer smalle schermen */
}
.aw-conf .aw-hero-sub .elementor-widget-container { max-width: 640px; }

/* --- Timeline: punten op de lijn ----------------------------------------
   Vervangt 18 losse containers; scheelt evenveel DOM-knopen. Blijft ook op
   mobiel staan, daarom houdt .aw-timeline daar zijn linkermarge. */
.aw-conf .aw-slot { position: relative; }

.aw-conf .aw-slot::before {
    content: "";
    position: absolute;
    left: -29px;
    top: 20px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--conf-blue);
}

.aw-conf .aw-slot.is-break::before {
    background: var(--conf-border);
    border-color: var(--conf-border);
}

/* --- Kamerprijzen: opmaak exact volgens het ontwerp ---------------------- */
.aw-conf .aw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.aw-conf .aw-table th,
.aw-conf .aw-table td {
    /* thema zet randen rondom en een grijze kopachtergrond; alleen de
       onderlijn uit het ontwerp overhouden */
    border: 0;
    border-bottom: 1px solid var(--conf-border);
    background: none;
}

.aw-conf .aw-table th {
    padding: 10px 12px;
    text-align: left;
    color: var(--conf-muted);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--conf-border);
}

.aw-conf .aw-table td {
    padding: 12px;
    border-bottom: 1px solid var(--conf-border);
}

.aw-conf .aw-table tr:last-child td { border-bottom: none; }

/* --- Eind-CTA: tekst begrenzen, knoppen rechts --------------------------- */
.aw-conf .aw-cta-text { max-width: 520px; }

/* --- Locatiefoto als banner i.p.v. volledige afbeelding ------------------ */
.aw-conf .aw-venue-photo img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

/* --- Scroll-marge: de sitekop is sticky (~156px), dus zonder marge valt de
       bovenkant van een aangeklikte sectie erachter ---------------------- */
.aw-conf .elementor-menu-anchor {
    display: block;
    scroll-margin-top: 150px;
}

/* =========================================================================
   Mobiel / tablet (<= 960px) — volgt de media query uit het HTML-ontwerp
   ========================================================================= */
@media (max-width: 960px) {

    /* Inhoudstabel wordt een horizontale strip boven de inhoud. */
    .aw-conf .elementor-toc__header {
        display: none;
    }

    .aw-conf .elementor-toc__body > .elementor-toc__list-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--conf-border);
        -webkit-overflow-scrolling: touch;
    }

    /* De lijst is genest (dagen zitten in een <ul> onder Programma). Met
       display:contents vervallen de li- en ul-boxen, zodat alle links op één
       rij komen — het equivalent van .toc .sub{display:contents} uit het
       ontwerp. */
    .aw-conf .elementor-toc__list-item,
    .aw-conf .elementor-toc__body ul ul {
        display: contents;
    }

    .aw-conf .elementor-toc__list-item-text-wrapper {
        flex: 0 0 auto;
    }

    .aw-conf .elementor-toc__list-item-text {
        white-space: nowrap;
        padding: 8px 10px;
        border-left: 0;
        border-radius: 0;
        border-bottom: 2px solid transparent;
    }

    .aw-conf .elementor-toc__list-item-text.aw-toc-current {
        border-left: 0;
        border-bottom-color: var(--conf-blue);
    }

    .aw-conf .elementor-toc__list-item + .elementor-toc__list-item {
        margin-top: 0;
    }

    /* Lucht tussen de navigatiekolom (strip + "Registreer nu") en de eerste
       sectiekop eronder. De marge moet op de kolom staan, niet op de
       TOC-widget zelf: die krijgt van Elementor margin-bottom:0. */
    .aw-conf .aw-toc-col {
        margin-bottom: 40px;
    }

    /* Nette, subtiele scrollbalk onder de strip in plaats van de systeembalk. */
    .aw-conf .elementor-toc__body > .elementor-toc__list-wrapper {
        scrollbar-width: thin;
        scrollbar-color: var(--conf-border) transparent;
    }

    .aw-conf .elementor-toc__body > .elementor-toc__list-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .aw-conf .elementor-toc__body > .elementor-toc__list-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .aw-conf .elementor-toc__body > .elementor-toc__list-wrapper::-webkit-scrollbar-thumb {
        background: var(--conf-border);
        border-radius: 999px;
    }
}

/* --- Tijdkolom in het programma mag niet krimpen ------------------------
   Met flex-wrap:nowrap kunnen de kolommen kleiner worden dan hun ingestelde
   breedte; op tablet werd 88px zo 77px en braken alle tijden naar 2 regels. */
.aw-conf .aw-slot > .e-con:first-child {
    flex-shrink: 0;
}

.aw-conf .aw-slot > .e-con:first-child .elementor-heading-title {
    white-space: nowrap;
}

/* --- Knoptekst links uitlijnen ------------------------------------------
   Elementor centreert knoptekst; bij een lange label over twee regels leest
   dat rommelig ("Registreer als spreker / bestuurslid / vrijwilliger"). */
.aw-conf .elementor-button-content-wrapper {
    justify-content: flex-start;
}

.aw-conf .elementor-button-text {
    flex-grow: 0;
    text-align: left;
}

/* --- Ledenmelding (User Registration) -----------------------------------
   Kaart voor "alleen beschikbaar voor leden", tussen header en footer
   (module awcf_ledenmelding). 10-11-2026. De plugin zet zelf inline-CSS
   met p:last-child als flex en links als knoppen; daarom body-prefix. */
body .aw-ledenmelding {
    padding: 72px 24px 88px;
    background: #F5F8FC;
}

body .aw-ledenmelding .urcr-access-card {
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 44px 40px 40px;
    background: #FFFFFF;
    border: 1px solid #DDE5F0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(87, 98, 131, 0.08);
    text-align: center;
}

body .aw-ledenmelding .urcr-access-card::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ECF2FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576283' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 24px no-repeat;
}

body .aw-ledenmelding .urcr-access-card p,
body .aw-ledenmelding .urcr-access-card p:last-child {
    display: block;
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: #576283;
}

body .aw-ledenmelding .urcr-access-card p > a {
    display: inline;
    padding: 0;
    background: none;
    color: #FE5624;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    body .aw-ledenmelding {
        padding: 40px 16px 56px;
    }

    body .aw-ledenmelding .urcr-access-card {
        padding: 32px 20px 28px;
    }

    body .aw-ledenmelding .urcr-access-card p,
    body .aw-ledenmelding .urcr-access-card p:last-child {
        font-size: 16px;
    }
}
/* Taalwissel header mobiel/tablet (cmtc.nl, 10-11-2026) */
.elementor-element-a7f1m01 .wpml-ls{padding-left:0;padding-right:0}
.elementor-element-a7f1m01 .wpml-ls-link{padding-left:4px;padding-right:4px}
.elementor-element-a7f1m01 .wpml-ls-last-item .wpml-ls-link{padding-right:0}
.elementor-element-a7f1t01 .wpml-ls{padding-right:0}
.elementor-element-a7f1t01 .wpml-ls-last-item .wpml-ls-link{padding-right:0}