/* ========================================
   Algemene basisstijlen
   ======================================== */

.astroid-framework h1,
.astroid-framework .h1 {
    margin-bottom: 2rem;
}

.as-width-xlarge {
    width: 1160px;
}

@media (max-width: 768px) {
    .astroid-component-area .com-content-article {
      margin: 0 1rem;
    }
}

/* ========================================
   Header & navigatie
   ======================================== */

.astroid-header-section {
    border-bottom: none !important;
}

.header-position.moduletable {
    text-align: center;
}

.header-position.moduletable p {
    margin-bottom: 0;
}

.astroid-header-sticky .nav-title-text {
    font-size: 1rem;
}

.astroid-header-sticky .nav-submenu .nav-title-text {
    font-size: 0.9rem;
}


/* Submenu container */
.nav-submenu {
    padding: 0.5rem 0;              /* ruimte boven/onder */
}

/* Submenu container */
.nav-submenu {
    padding: 0.5rem 0;
    min-width: 280px;

    background: #fff;
    border-radius: 8px;

    /* 🔹 heel subtiele rand + schaduw */
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 6px 16px rgba(0,0,0,0.12);

    /* 🔹 optisch iets omhoog laten zweven */
    position: relative;
    top: 0;
      width: 220px !important;
}

.megamenu-container.nav-submenu-container {
    top: 50px !important;
      border-radius: 8px;
}


/* Klikvlak ruimer maken */
.nav-item-submenu > a {
    display: block;
    padding: 0.6rem 1rem;           /* 🔑 meer ruimte */
    line-height: 1.4;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease;
}

/* Hover / focus */
.nav-item-submenu > a:hover,
.nav-item-submenu > a:focus {
    background-color: rgba(0,0,0,0.05); /* of je themakleur */
    text-decoration: none;
}

li.nav-item-submenu a.as-menu-item {
   border-bottom: 0;
   padding: 1rem !important;
}

li.nav-item-submenu a.as-menu-item, .megamenu-container li.nav-item-submenu>a:hover {
    border-radius: 0;
}

li.nav-item-submenu:first-child a.as-menu-item, .megamenu-container li.nav-item-submenu:first-child>a:hover {
    border-radius: 6px 6px 0 0;
}

li.nav-item-submenu:last-child a.as-menu-item, .megamenu-container li.nav-item-submenu:last-child>a:hover {
    border-radius: 0 0 6px 6px;
}

a.nav-link:hover,
a.nav-link:active {
    text-decoration: underline;
}

.nav-link-item-id-101:after {
    content: "\f015";
    font-family: FontAwesome;
}

.nav-link-item-id-148:after {
    content: "\f002";
    font-family: FontAwesome;
}

.nav-link-item-id-132:after {
    content: "\f007";
    font-family: FontAwesome;
}

a.as-menu-item.menu-icon.nav-link-item-id-101.nav-link.active.item-link-component.item-level-1,
a.as-menu-item.menu-icon.nav-link-item-id-148.nav-link.item-link-component.item-level-1,
a.as-menu-item.menu-icon.nav-link-item-id-132.nav-link.active.item-link-component.item-level-1,
a.as-menu-item.menu-icon.nav-link-item-id-130.nav-link.active.item-link-component.item-level-1 {
    text-decoration: none;
}

.menu-icon .nav-title-text {
    display: none;
}

.astroid-nav .nav-item-id-132 .nav-title>.nav-item-caret {
    margin-top: 4px;
    margin-right: -20px;
}

/* open / hover */
.nav-item-dropdown.open > a .nav-item-caret,
.nav-item-dropdown:hover > a .nav-item-caret {
    opacity: 1;
}


/* ========================================
   Top sectie & home modules
   ======================================== */

.top-1-position,
.top-2-position,
.top-3-position,
.top-4-position {
    position: relative;
    padding-left: 1.5em;
}

.top-1-position::before,
.top-2-position::before,
.top-3-position::before,
.top-4-position::before {
    content: "\f054";
    position: absolute;
    left: 0;
    top: 16px;
    font-size: 1rem;
    line-height: 1;
    font-family: FontAwesome;
}

.top-home-module {
    padding: 3rem 0 4rem 0;
    font-size: 1rem;
    font-weight: 400;
}

#top-section {
    text-align: left;
    font-weight: 300;
}

#top-section h3 {
    font-weight: 400;
}

@media (max-width: 768px) {
    .top-home-module {
        padding: 2rem 0 0;
    }
    .header-position.moduletable img {
        height: 240px;
        object-fit: cover;
    }
}

/* ========================================
   Login module
   ======================================== */

.mod-login-logout .btn-primary {
    background: #144273;
    padding: 2px 16px;
    font-size: 0.8rem;
}

.mod-login-logout .btn-primary:hover {
    opacity: 0.7;
}


/* ========================================
   Content / artikelen
   ======================================== */

.content-bottom-position.moduletable {
    margin-top: 3rem;
}

/* ========================================
   Editor Front-end
   ======================================== */

.d-grid.gap-2.d-sm-block.mb-2 {
    padding-left: 1rem;
}

.form-check-inline {
    display: block;
}

joomla-tab-element label {
    font-weight: 500;
    font-size: 1.2rem;
}

joomla-tab-element .form-check .form-check-input {
    margin-top: 0.5em;
}

joomla-tab-element .form-check label {
    font-weight: 300;
    font-size: 0.9rem;
}

/* Verberg het Metadata-tabblad */
joomla-tab button[role=tab][aria-controls="metadata"] {
    display: none !important;
}

/* Toon het Publishing-tabblad (indien nodig expliciet instellen) */
joomla-tab button[role=tab][aria-controls="publishing"] {
    display: inline !important;
}

joomla-tab-element legend {
    margin: 0;
}

/* Verberg specifieke velden binnen het Publishing-tabblad */
joomla-tab-element#publishing #jform_catid-lbl,
joomla-tab-element#publishing #jform_featured,
joomla-tab-element#publishing #jform_featured-lbl,
joomla-tab-element#publishing #jform_access,
joomla-tab-element#publishing #jform_access-lbl,
joomla-tab-element#publishing #jform_tags-lbl,
joomla-tab-element#publishing #jform_created_by_alias-lbl,
joomla-tab-element#publishing #jform_created_by_alias,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__alt_text-lbl,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__alt_text,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__alt_empty-lbl,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__alt_empty,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__alt_empty-desc,
joomla-tab-element#attrib-fields-5 #jform_com_fields__profielfoto__imagefile-lbl,
joomla-tab-element#publishing joomla-field-fancy-select {
    display: none !important;
}

joomla-tab-element#publishing #jform_state option[value="2"],
joomla-tab-element#publishing #jform_state option[value="-2"] {
    display: none;
}

joomla-tab-element#publishing .buttons-wrapper {
    padding: 0;
}

joomla-tab-element#publishing .buttons-wrapper button.js-btn.btn {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: #FFF;
    font-weight: 600;
}
joomla-tab-element#attrib-fields-5 .wf-media-wrapper>.field-media-preview {
    border-width: 1px;
    border-radius: 0.25rem;
}

button.btn.btn-success.button-select {
    margin-top: 1rem;
    display: none;
}

a.btn.btn-outline-secondary.wf-media-upload-button, button.btn.btn-danger.button-clear {
    margin-top: 1rem;
}

joomla-tab-element#attrib-fields-5 input#jform_com_fields__profielfoto__imagefile {
    display: none;
}

/* Moderne browsers */
.form-control::placeholder {
    color: lightgray;
}

/* Voor oudere WebKit-browsers (Safari, Chrome) */
.form-control::-webkit-input-placeholder {
    color: lightgray;
}

/* Voor Mozilla Firefox */
.form-control::-moz-placeholder {
    color: lightgray;
}

/* Voor Microsoft Edge en Internet Explorer 10-11 */
.form-control:-ms-input-placeholder {
    color: lightgray;
}

/* Voor oudere Microsoft Edge */
.form-control::-ms-input-placeholder {
    color: lightgray;
}
/* Label login wijzigen */
form#member-profile label {
    font-weight: 600;
    font-size: 1.2rem;
}


/* ========================================
   Artikel deelblok (social share)
   ======================================== */

.article-share {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: right; /* of left/center, wat je wilt */
}

.article-share-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.article-share-buttons {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.article-share-buttons .btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;               /* ruimte tussen icoon en tekst */
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    line-height: 1;
    border: none;
}

/* Icoontjes zelf */
.article-share-buttons .btn-share i {
    font-size: 0.9rem;
}

/* Optioneel: tekst iets kleiner houden t.o.v. icoon */
.article-share-buttons .btn-share span {
    display: inline-block;
}

/* Kleuren per platform */
.article-share-buttons .btn-share.fb   { background-color: #1877f2; }
.article-share-buttons .btn-share.li   { background-color: #0a66c2; }
.article-share-buttons .btn-share.wa   { background-color: #25d366; }
.article-share-buttons .btn-share.mail { background-color: #6c757d; }

/* Hover / focus states */
.article-share-buttons .btn-share:hover,
.article-share-buttons .btn-share:focus-visible {
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.article-share-buttons .btn-share:focus-visible {
    outline: 2px solid rgba(0,0,0,0.4);
    outline-offset: 2px;
}

/* ========================================
   Nieuwsbrief pop-up
   ======================================== */

.eb-content a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    padding: 0.55rem 0;
    border-radius: 50px;
    border: 1px solid rgba(21, 72, 106, 1);
    background-color: rgba(21, 72, 106, 1);
    text-decoration: none;
    color: #FFF;
    margin-top: 0.55rem;
}

.eb-content a.button:hover {
    opacity: 0.7;
}

/* ========================================
   Footer
   ======================================== */

#footer {
    padding: 4rem 0 2rem 0;
}

#footer a {
    text-decoration: none;
    margin-left: 16px;
}

#footer a:hover {
    text-decoration: underline;
}

#footer a::before {
    content: "\f054";
    font-family: "FontAwesome";
    font-weight: 900;
    left: 0;
    position: absolute;
    font-size: 0.85em;
}
@media (max-width: 768px) {
    .astroid-footer-section .astroid-column {
      margin: 1rem 0;
    }
}

/* reCAPTCHA v3 badge: omhoog i.v.m. to-top button */
.grecaptcha-badge{
  bottom: 100px !important;   /* pas aan naar wens */
}


/* ========================================
   Responsive (>= 992px)
   ======================================== */

@media only all and (min-width: 992px) {
    .astroid-article-title,
    .astroid-article-text,
    .astroid-article-full-image {
        width: 68%;
    }

    .astroid-article-full-image .item-image img {
        width: 100%;
    }
}

/* ========================================
   iCagenda
   ======================================== */

/* ===========
   Event List
   =========== */

.ic-header-subtitle {
    font-size: 1rem;
    margin-top: -2rem;
}

.ic-header-categories {
    margin-bottom: 0;
}

.ic-list-event {
    background: none !important;
    border: 1px solid #006699;
    border-radius: 8px;
    padding: 0 !important;
    margin: 2rem 0 !important;
}

.ic-list-event:hover {
    background: rgba(0, 102, 153, 0.05) !important;
}

.ic-box-date {
    height: 150px !important;
    border-radius: 8px 0 0 8px !important;
}

.ic-box-date:hover {
    border-radius: 8px 0 0 8px !important;
}

.ic-content {
    padding: 5px 0 0 2rem !important;
}

.ic-event-title {
    border-bottom: none !important;
    font-size: 1.5rem !important;
    padding-bottom: 0 !important;
}

.ic-list-event .ic-event-title .ic-title-header h2 a.ic-text-decoration-none:hover {
    color: #993399 !important;
    text-decoration: underline !important;
}

.ic-title-cat a.ic-title-cat-btn.ic-button.ic-padding-1.ic-radius-1.ic-bg-dark {
    display: inline-block;
    margin-right: 5px !important;
}

/* 1) Alle teksten onder de titel op 1rem (excl. de h2-titel) */
.ic-list-event .ic-content .ic-title-cat,
.ic-list-event .ic-content .ic-title-cat a.ic-title-cat-btn.ic-button.ic-padding-1.ic-radius-1.ic-bg-dark,
.ic-list-event .ic-content .ic-next-date,
.ic-list-event .ic-content .ic-descshort,
.ic-list-event .ic-content .ic-descshort *,
.ic-list-event .ic-content .ic-more-info,
.ic-list-event .ic-content .ic-more-info a {
    font-size: 1rem !important;
}

.ic-list-event .ic-content .ic-place, .ic-list-event .ic-content .ic-next-date * {
    font-size: 0.85rem !important;
}

/* 2) Datum & locatie: cursief, niet vet */
.ic-list-event .ic-content .ic-next-date {
    font-style: italic;
}
.ic-list-event .ic-content .ic-next-date strong {
    font-weight: normal !important; /* strong niet vet maken */
}
.ic-list-event .ic-content .ic-place {
    font-style: italic;
    font-weight: normal !important;
}

/* 3) Intro: normale tekst (geen italic, geen bold) */
.ic-list-event .ic-content .ic-descshort,
.ic-list-event .ic-content .ic-descshort i,
.ic-list-event .ic-content .ic-descshort strong {
    font-style: normal !important;
    font-weight: normal !important;
}

/* 4) Zoveel mogelijk top-margin en top-padding onder de titel weghalen */
.ic-list-event .ic-content .ic-title-cat,
.ic-list-event .ic-content .ic-next-date,
.ic-list-event .ic-next-date,
.ic-list-event .ic-content .ic-descshort,
.ic-list-event .ic-content .ic-more-info {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ic-list-event .ic-content .ic-place {
    margin: 0 0 1rem 0 !important;
    padding-top: 0 !important;
}

.ic-more-info {
    display: none !important;
}

/* =========================
   Event List - Mobile tweak
   ========================= */
@media (max-width: 768px) {

    /* Kaartje compacter en randen alleen boven */
    .ic-list-event {
        margin: 1.25rem 0 !important;
        border-radius: 8px 8px 0 0 !important;
        overflow: hidden; /* zodat de boven-radius mooi blijft */
    }

    /* Afbeelding boven, full-width, alleen boven afgerond */
    .ic-list-event .ic-box-date {
        float: none !important;
        width: 100% !important;
        height: 180px !important;
        border-radius: 8px 8px 0 0 !important;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;      /* datum verticaal centreren */
        justify-content: center;  /* en horizontaal centreren */
    }

    /* Datum in het midden van de afbeelding */
    .ic-list-event .ic-box-date .ic-date {
        margin: 0;
        text-align: center;
    }

    /* Content onder de afbeelding, wat rustiger padding */
    .ic-list-event .ic-content {
        float: none !important;
        padding: 0.75rem 1rem 1rem 1rem !important;
    }

    /* Titel wat kleiner op mobiel */
    .ic-list-event .ic-event-title {
        font-size: 1.25rem !important;
    }
    .ic-list-event .ic-event-title h2 {
        font-size: 1.25rem !important;
        margin: 0 0 0.25rem;
    }

    /* Categorie + datum + plaats wat dichter bij elkaar */
    .ic-list-event .ic-content .ic-title-cat,
    .ic-list-event .ic-content .ic-next-date,
    .ic-list-event .ic-content .ic-place,
    .ic-list-event .ic-content .ic-descshort {
        margin-top: 0.25rem !important;
    }

    /* Introtekst iets kleiner op mobiel, beter leesbaar */
    .ic-list-event .ic-content .ic-descshort {
        font-size: 0.95rem !important;
    }

    /* Titels links uitlijnen en iets groter */
    .ic-list-event .ic-event-title,
    .ic-list-event .ic-event-title h2,
    .ic-list-event .ic-event-title h2 a {
        text-align: left !important;
    }

    .ic-list-event .ic-event-title h2 {
        font-size: 1.35rem !important;  /* iets groter dan 1.25rem */
        line-height: 1.3;
        margin: 0 0 0.15rem;
    }

    /* Categorie subtieler en naar rechts */
    .ic-list-event .ic-content .ic-title-cat {
        margin-top: 0.1rem !important;
        text-align: right;
    }

    .ic-list-event .ic-content .ic-title-cat a.ic-title-cat-btn.ic-button.ic-padding-1.ic-radius-1.ic-bg-dark {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        color: #FFF !important;
        text-shadow: #000 2px 2px 10px;
        font-size: 0.8rem !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        display: inline-block;
    }
  .ic-actionbar-readmore {
     display: none;
  }

    /* Hover op mobiel vooral rustig houden (voor tablets/muizen) */
    .ic-list-event .ic-content .ic-title-cat a.ic-title-cat-btn.ic-button.ic-padding-1.ic-radius-1.ic-bg-dark:hover {
        text-decoration: underline;
    }
}

/* =================================================
   Agenda – List cards (override na update)
   Plak ONDER je bestaande agenda CSS
   ================================================= */

/* 1) Card: strakker, overflow clippen zodat labels “aan de rand” kunnen */
.ic-list-events .ic-list-event{
  position: relative;
  overflow: hidden;                 /* belangrijk: categorie/knop netjes tegen rand */
  border-radius: 10px;              /* iets moderner */
}

/* 2) Linker beeldblok: vaste hoogte, geen extra witruimte */
.ic-list-events .ic-list-event .ic-box-date{
  height: 150px !important;
  border-radius: 10px 0 0 10px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 3) Content: minder padding onderaan (zodat kaart “dicht” is) */
.ic-list-events .ic-list-event .ic-content{
  padding: 10px 12px 10px 22px !important;  /* was 5px 0 0 2rem; nu compacter */
}

/* 4) Titel: strakker typografisch */
.ic-list-events .ic-list-event .ic-event-title h2{
  margin: 0 !important;
  line-height: 1.2;
}

.ic-list-events .ic-list-event .ic-event-title h2 a{
  text-decoration: none;
}

/* 5) Subinformatie onder titel: strak, minder verticale ruis */
.ic-list-events .ic-list-event .ic-next-date,
.ic-list-events .ic-list-event .ic-place,
.ic-list-events .ic-list-event .ic-descshort{
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
}

/* Plaats net wat subtieler */
.ic-list-events .ic-list-event .ic-place{
  font-size: 0.9rem !important;
  opacity: 0.9;
}

/* Intro: geen italic, iets compacter */
.ic-list-events .ic-list-event .ic-descshort,
.ic-list-events .ic-list-event .ic-descshort i{
  font-style: normal !important;
}

/* 6) Categorie-label rechtsboven “aangeplakt” */
.ic-list-events .ic-list-event .ic-title-cat {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    display: none;
}

/* maak de knop meer “site-stijl”: subtiel pill, geen rare padding classes */
.ic-list-events .ic-list-event .ic-title-cat a.ic-title-cat-btn{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #fff !important;           /* houdt jouw inline background kleur bruikbaar */
}

/* 7) Details knop rechtsonder “aangeplakt” */
.ic-list-events .ic-list-event .ic-actionbar{
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
}

/* knop meer “site-stijl” */
.ic-list-events .ic-list-event .ic-actionbar-readmore a.btn{
  border-radius: 10px;
  padding: 8px 12px;
  text-decoration: none;
}

/* 8) Zorg dat content rechts onderin ruimte overhoudt voor de knop */
.ic-list-events .ic-list-event .ic-content{
  padding-right: 140px !important;  /* ruimte voor categorie + knop, voorkomt overlap */
}

/* 9) Als er géén plaats of intro is, geen rare “gaten” */
.ic-list-events .ic-list-event .ic-place:empty,
.ic-list-events .ic-list-event .ic-descshort:empty{
  display: none !important;
}

/* =================================================
   Mobile: afbeelding boven, labels/knop netjes binnen card
   ================================================= */
@media (max-width: 768px){

  .ic-list-events .ic-list-event{
    border-radius: 10px !important;
  }

  .ic-list-events .ic-list-event .ic-box-date{
    float: none !important;
    width: 100% !important;
    height: 180px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .ic-list-events .ic-list-event .ic-content{
    padding: 12px 12px 52px 12px !important; /* extra bodemruimte voor vaste knop */
    padding-right: 12px !important;          /* reset desktop “ruimte rechts” */
  }

  .ic-list-events .ic-list-event .ic-title-cat{
    top: 10px;
    right: 10px;
  }

  .ic-list-events .ic-list-event .ic-actionbar{
    right: 10px;
    bottom: 10px;
  }
}

/* =================================================
   Agenda – extra verfijning (onder vorige CSS)
   ================================================= */

/* 1) Details knop: sitekleur #006699 */
.ic-list-events .ic-list-event .ic-actionbar-readmore a.btn{
  background-color: #006699 !important;
  border-color: #006699 !important;
  color: #fff !important;
  padding: 7px 11px;              /* iets compacter */
}

.ic-list-events .ic-list-event .ic-actionbar-readmore a.btn:hover{
  background-color: #004f73 !important;
  border-color: #004f73 !important;
  color: #fff !important;
}

/* 2) Card & content: top/bottom padding compacter */
.ic-list-events .ic-list-event{
  margin: 1.5rem 0 !important;    /* was 2rem */
}

.ic-list-events .ic-list-event .ic-content{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 3) Datum + locatie naast elkaar */
.ic-list-events .ic-list-event .ic-next-date,
.ic-list-events .ic-list-event .ic-place{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-style: normal !important;
  font-size: 0.9rem !important;
  font-family: inherit;           /* zelfde font */
  color: #444;
}

/* container voor datum + plaats */
.ic-list-events .ic-list-event .ic-next-date{
  margin-right: 14px !important;
}

/* 4) Subtiele “meta”-achtergrond */
.ic-list-events .ic-list-event .ic-next-date,
.ic-list-events .ic-list-event .ic-place{
  padding: 4px 8px;
  border-radius: 6px;
}

/* 5) Icoontjes (Font Awesome 5) */
.ic-list-events .ic-list-event .ic-next-date::before{
  content: "\f073";               /* fa-calendar */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85em;
  opacity: 0.8;
}

.ic-list-events .ic-list-event .ic-place::before{
  content: "\f3c5";               /* fa-map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85em;
  opacity: 0.8;
}

/* 6) Zet datum + plaats echt op één regel */
.ic-list-events .ic-list-event .ic-next-date,
.ic-list-events .ic-list-event .ic-place{
  white-space: nowrap;
}

/* 7) Op mobiel: weer netjes onder elkaar */
@media (max-width: 768px){
  .ic-list-events .ic-list-event .ic-next-date,
  .ic-list-events .ic-list-event .ic-place{
    display: inline-flex;
    margin-right: 8px !important;
    margin-top: 4px !important;
  }
}

/* 8) Pagination */
.ic-pagination {
    text-align: center;
}

.ic-pagination .ic-prev, .ic-pagination .ic-next {
    float: none;
}

.ic-pagination a {
    background: #FFF;
    font-size: 1.6rem;
    font-weight: 900;
    padding: 14px 16px;
    border-radius: 50%;
    border: none;
    color: #144273;
    text-shadow: none;
  	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
  
.ic-pagination .ic-current-page .ic-active {
    font-weight: 900 !important;
    background: #144273 !important;
    border-radius: 50%;
    padding: 14px 16px;
    font-size: 1.6rem;
    margin: 0 10px !important;
}

.ic-pagination .ic-current-page .ic-active:hover {
	background: #006699 !important;
}

#icagenda .ic-pagination a:hover {
    background: none;
    opacity: 0.7;
}

span.iCicon.iCicon-nextic {
    margin-top: 6px;
    margin-left: 5px;
}

/* ===========
   Event page
   =========== */

/* === Basis layout voor de event detail pagina === */
.ic-event-view {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
}

/* Globaal: rare achtergronden, borders en schaduwen binnen ic-event-view eruit */
.ic-event-view,
.ic-event-view .ic-event-header,
.ic-event-view .ic-info,
.ic-event-view #detail-date-list,
.ic-event-view .ic-top-buttons,
.ic-event-view .ic-dropdown-menu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Alles wat floats gebruikt binnen deze view neutraliseren waar nodig */
.ic-event-view .ic-float-left,
.ic-event-view .ic-float-right {
    float: none !important;
}

/* === Top "Terug" + agenda-knop === */

.ic-event-view .ic-top-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0 0 1.5rem;
}

/* "Terug"-link */
.ic-event-view .ic-back .small {
    font-size: 1rem;
    margin-left: 0.5rem;
    color: #000;
    font-weight: 600;
}

.ic-event-view .ic-back a {
    text-decoration: none;
}
.ic-event-view .ic-back .small a:hover {
    text-decoration: underline;
}

/* Agenda-knop */
/* "Toevoegen aan agenda" button als tekstlink */
.ic-event-view .ic-buttons .btn-info {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0;
    display: inline; /* gedraagt zich als tekst */
    color: #0988d8 !important;
    font-size: 0.95rem;
    font-weight: normal;
    text-decoration: none;
}

/* Hoverstijl als link */
.ic-event-view .ic-buttons .btn-info:hover,
.ic-event-view .ic-buttons .btn-info:focus {
    text-decoration: underline;
    background: none !important;
}


/* Dropdown-menu wat rustiger */
/* Dropdown-menu goed leesbaar maken */
.ic-event-view .ic-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 0.5rem 0 !important;
}

/* Items binnen dropdown iets lucht geven */
.ic-event-view .ic-dropdown-menu .ic-dropdown-item {
    padding: 0.35rem 0.75rem;
}

.ic-event-view .ic-dropdown-item {
    font-size: 0.9rem;
}

/* === Header: titel + categorie === */

.ic-event-view .ic-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 0;
}

.ic-event-view .ic-event-header .ic-title-header,
.ic-event-view .ic-event-header .ic-title-cat {
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .ic-event-view .ic-info {
        margin: 1.5rem 1rem;
    }
    .ic-event-view .ic-event-header {
        flex-direction: column;       /* onder elkaar ipv naast elkaar */
        align-items: flex-start;      /* alles links uitlijnen */
        gap: 0.25rem;                 /* klein beetje ruimte tussen titel en categorie */
    }
    .ic-event-view .ic-event-header .ic-title-cat {
        margin-top: 0 !important;     /* voor de zekerheid, geen extra grote gap */
    }
}


/* Titel zelf */
.ic-event-view .ic-event-header h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
}

/* Categorie-label rechts */
/* Categorie bovenaan als gewone tekst, geen badge */
.ic-event-view .ic-event-header .ic-title-cat {
    background: none !important;
    color: inherit !important;          /* zelfde kleur als gewone tekst */
    padding: 0 !important;
    margin: 0;
    border-radius: 0 !important;
    text-transform: none !important;    /* geen hoofdletters */
    font-size: 1rem;
    font-weight: normal;
}

/* Parelende social / registration blokjes weghalen (als ze leeg zijn) */
.ic-event-view .ic-event-addthis,
.ic-event-view .ic-event-registration {
    margin: 0;
    padding: 0;
}

/* === Info-blok: afbeelding + datum + locatie === */
/* Layout: image + details links, omschrijving rechts */
/* === Nieuwe layout voor .ic-info: afbeelding + details links, tekst rechts === */

/* Container zelf: geen flex/grid meer */
.ic-event-view .ic-info {
    display: block !important;
    overflow: hidden;              /* clearfix voor de floats */
    margin: 1.5rem 0;
    padding: 0;
}

/* Afbeelding links */
.ic-event-view .ic-info .ic-image {
    float: left;
    width: 40%;
    max-width: 360px;
    margin: 0 3% 0 0;
}

.ic-event-view .ic-info .ic-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Datum + locatie: direct onder de afbeelding */
.ic-event-view .ic-info .ic-details {
    float: left;
    width: 57%;
    margin: 0.5rem 0 0.85rem 0;
    font-style: italic;
    font-weight: normal;
    text-align: left;
    border-bottom: 1px solid #006699;
}

/* Omschrijving rechts naast de afbeelding/ details */
.ic-event-view .ic-info #ic-detail-desc {
    margin-left: calc(40% + 1.5rem);
    font-size: 1rem;
}

/* Mobile: alles gewoon onder elkaar */
@media (max-width: 768px) {
    .ic-event-view .ic-info .ic-image,
    .ic-event-view .ic-info .ic-details {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }

    .ic-event-view .ic-info #ic-detail-desc {
        margin-left: 0;
    }
}

/* Datum + locatie: cursief, niet vet */
.ic-event-view .ic-info .ic-event-date,
.ic-event-view .ic-info .ic-details p {
    margin: 0 0 0.5rem;
    font-style: italic;
    font-weight: normal;
}

/* Icons licht accentkleur geven */
.ic-event-view .ic-info .iCicon {
    color: #0988d8;
}

/* Kruimeltje vertical space onder info-blok */
.ic-event-view .ic-info + #ic-detail-desc {
    margin-top: 1.5rem;
}

/* === Beschrijving === */

.ic-event-view #ic-detail-desc {
    margin: 0;
    padding: 0;
}

/* Korte + lange beschrijving op 1rem houden */
.ic-event-view #ic-detail-desc .ic-short-description,
.ic-event-view #ic-detail-desc .ic-full-description {
    font-size: 1rem;
}

/* Tekstblokken: nette verticale spacing */
.ic-event-view #ic-detail-desc p {
    margin: 0 0 1rem;
}

/* Koppen in de beschrijving */
.ic-event-view #ic-detail-desc h2 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.4rem;
}
.ic-event-view #ic-detail-desc h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.2rem;
}

/* Call-to-action button in tekst */
.ic-event-view #ic-detail-desc a.button {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1.2rem;
    background-color: #0988d8;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.ic-event-view #ic-detail-desc a.button:hover {
    background-color: #086fb0;
}

/* Lege paragrafen minder ruimte laten innemen */
.ic-event-view p:empty {
    margin: 0 !important;
    padding: 0 !important;
}

/* === "Alle datums" blok === */

.ic-event-view #detail-date-list {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0 !important;
}

.ic-event-view #detail-date-list h3.alldates {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

/* De lijst met datums strak onder elkaar of naast elkaar */
.ic-event-view #detail-date-list .datesList ul.alldates {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ic-event-view #detail-date-list li.alldates {
    background-color: #f5f5f5;
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.9rem;
}

/* Algemeen: links in dit event rustig houden */
.ic-event-view a {
    color: #0988d8;
}
.ic-event-view a:hover {
    text-decoration: underline;
}

/* === Info-box netjes en minimalistisch === */

.ic-event-view .ic-info-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 2rem 0 0;
    padding: 0;
}

/* Titel als h2-stijl, links uitgelijnd */
.ic-event-view .ic-info-box-header {
    margin: 0;
    padding: 0;
    border: none !important;
    background: none !important;
}

.ic-event-view .ic-info-box-header label {
    display: block;
    margin: 1.75rem 0 0.5rem;   /* zelfde vibe als je h2's */
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}

/* Inhoud zonder randjes / achtergrond */
.ic-event-view .ic-info-box-content {
    border: none !important;
    background: none !important;
    padding: 0;
    margin: 0;
}

/* Rij-layout minimalistisch */
.ic-event-view .ic-info-box-content .ic-divRow {
    display: block;
    padding: 0;
    margin: 0;
    border: none !important;
}

/* Label "Website" verbergen */
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-label {
    display: none;
}

/* Cel met de link full width */
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value, .ic-event-view .ic-info-box-content .ic-info-website .ic-divCell {
    margin: 0;
    padding: 0;
}

/* === Link als knop met eigen tekst en extern-link icoontje === */

.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value a {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    background-color: #0988d8;
    color: #fff !important;
    text-decoration: none;
    font-size: 0;               /* URL-tekst verbergen, maar wel aanwezig laten */
    line-height: 1.2;
    white-space: nowrap;
}

/* Knoptekst */
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value a::before {
    content: "Ga naar website";
    font-size: 0.95rem;
    font-weight: 600;
}

/* Extern-link icoontje (unicode pijltje) */
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value a::after {
    content: "↗";
    font-size: 0.9rem;
    margin-left: 0.4rem;
}

/* Hover-state knop */
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value a:hover,
.ic-event-view .ic-info-box-content .ic-info-website .ic-divCell.ic-value a:focus {
    background-color: #086fb0;
    text-decoration: none;
}


/* ========================================
   Joomla Smart Search Results
   ======================================== */

/* Search button */
.js-finder-search-query.form-control {
    border-radius: 8px 0 0 8px;
}

.js-finder-search-query.form-control:focus {
    background-color: rgb(236 247 255);
    box-shadow: none;
}

/* --- Basis lijst reset --- */
#search-query-explained {
    margin-bottom: 1rem;
}

.com-finder__results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Eventuele standaard bovenrand van Joomla-resultaten uitzetten */
.com-finder__results-list > li {
    border-top: none;
    margin: 0 0 1.5rem;
}

/* Forceer border bovenaan bij het eerste resultaat */
.com-finder__results-list > li.result__item:first-child {
    border-top: 1px solid #006699 !important;
}

#search-result-list > li.result__item:first-child {
    border-top: 1px solid #006699 !important;
}

/* --- Card per resultaat --- */
.result__item {
    display: grid;
    grid-template-columns: 160px 1fr;      /* linker kolom afbeelding, rechter kolom tekst */
    grid-template-rows: auto auto;         /* rij 1: titel, rij 2: intro */
    grid-template-areas:
        "image title"
        "image desc";
    column-gap: 1.25rem;                   /* ruimte tussen afbeelding en tekst */
    
    padding: 0;                            /* zodat image tegen de rand kan */
    border: 1px solid #006699;             /* blauwe rand */
    border-radius: 8px;
    background: #fff;
    overflow: hidden;                      /* image valt netjes binnen de ronde hoeken */
}

.result__item+.result__item {
    padding-top: 0;
}

/* --- Afbeelding links, kleiner en strak tegen de rand --- */
.result__image {
    grid-area: image;
    margin: 0;
    max-width: 160px;                      /* afbeelding kleiner houden */
}

.result__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                     /* mooi opvullen zonder te vervormen */
}

/* --- Titel rechts, boven de intro --- */
.result__title {
    grid-area: title;
    margin: 0;
    padding: 1rem 1.25rem 0.25rem 0;       /* ruimte boven en rechts, links komt van de column-gap */
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

.result__title-link {
    color: #004b8d;
    text-decoration: none;
}

.result__title-link:hover,
.result__title-link:focus {
    text-decoration: underline;
}

/* --- Intro-tekst onder de titel, rechts van de afbeelding --- */
.result__description {
    grid-area: desc;
    margin: 0;
    padding: 0 1.25rem 1.25rem 0;          /* vooral rechts/onder wat ruimte */
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

.result__date {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #777;
    margin: 0 0 0.5rem;
}

/* Markering van zoekterm */
.result__description mark,
.result__title-text mark {
    background: #ffeb99;
    padding: 0 .1em;
}

/* Type / auteur / categorie verbergen */
.result__taxonomy {
    display: none;
}

/* --- Responsive: onder elkaar op mobiel --- */
@media (max-width: 768px) {
    .result__item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "image"
            "title"
            "desc";
    }

    .result__image {
        max-width: 100%;
    }

    .result__description,
    .result__title {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

/* ===== Profiel / Gegevens wijzigen (Joomla com_users) ===== */

#member-profile{
  max-width: 760px;
  margin: 0;                 /* links uitlijnen */
  padding: 0;
}

/* Form als rustige container (jouw form heeft ook .well, dus we normaliseren dat) */
#member-profile.com-users-profile__edit-form{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Fieldsets als “cards” */
#member-profile fieldset{
  margin: 0 0 18px 0;
  padding: 16px 16px 6px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  background: rgba(0,0,0,.02);
}

/* Eerste fieldset iets minder “card”-achtig als je wilt: comment deze blokken dan uit */
#member-profile fieldset:first-of-type{
  background: transparent;
  border-color: rgba(0,0,0,.08);
}

/* Legend strak en rustig */
#member-profile legend{
  float: none;
  width: auto;
  padding: 0 6px;
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.2;
  border: 0;
}

/* Elke rij: witruimte i.p.v. lijntjes */
#member-profile .control-group{
  margin: 0 0 14px 0;
  padding: 0;
}

/* Labels */
#member-profile .control-label{
  margin: 0 0 6px 0;
  padding: 0;
  text-align: left;
}
#member-profile .control-label label{
  font-size: .92rem;
  font-weight: 650;
  margin: 0;
}

/* Inputs */
#member-profile .controls{
  margin: 0;
}
#member-profile .form-control{
  padding: .5rem .65rem;
  font-size: .95rem;
  line-height: 1.25;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  box-shadow: none;
}
#member-profile .form-control:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
  border-color: rgba(13,110,253,.55);
}

/* Helptekst */
#member-profile .form-text,
#member-profile .controls small.form-text{
  margin-top: 6px;
  font-size: .84rem;
  opacity: .8;
  line-height: 1.35 !important;
}

/* Password rules en meter: iets rustiger */
#member-profile .text-muted,
#member-profile .small.text-muted{
  font-size: .84rem;
  opacity: .85;
}
#member-profile meter{
  width: 100%;
  margin-top: 8px;
}

/* Readonly */
#member-profile input[readonly]{
  cursor: not-allowed;
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.14);
}
#member-profile input[readonly]:hover,
#member-profile input[readonly]:focus{
  box-shadow: none;
  border-color: rgba(0,0,0,.14);
}

/* Desktop layout: labels links, input rechts */
@media (min-width: 768px){
  #member-profile.form-horizontal .control-group{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px 16px;
    align-items: start;
  }

  #member-profile.form-horizontal .control-label{
    margin: 6px 0 0 0;
  }
}

/* ===== Alleen Schoolgegevens (dus alleen voor schoolprofielen) ===== */
/* Deze fieldset herken je op legend-tekst niet met CSS, dus we targetten via veld-IDs */
#member-profile #jform_com_fields_school,
#member-profile #jform_com_fields_adres,
#member-profile #jform_com_fields_postcode,
#member-profile #jform_com_fields_plaats{
  /* net iets compacter, voelt “zakelijker” */
  font-size: .95rem;
}

/* (Optioneel) postcode wat smaller op desktop */
@media (min-width: 768px){
  #member-profile #jform_com_fields_postcode{
    max-width: 220px;
  }
}

/* Submit-blok layout resetten */
#member-profile .com-users-profile__edit-submit{
  display:block !important;
}

/* Forceer flex op controls */
#member-profile .com-users-profile__edit-submit > .controls{
  display:flex !important;
  flex-direction:row !important;
  gap:14px;
  width:100%;
}

/* Knoppen exact even breed */
#member-profile .com-users-profile__edit-submit .btn{
  flex:1 1 0 !important;
  width:auto !important;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

/* ===== Password input-group strak maken ===== */

#member-profile .password-group .input-group{
  display:flex;
  width:100%;
}

/* Input: geen rechter radius */
#member-profile .password-group .form-control{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-right:0; /* voorkomt dubbele rand */
}

/* Toggle-knop zelfde stijl als Opslaan */
#member-profile .password-group .input-password-toggle{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:1px solid rgba(0,0,0,.18);
  padding:0 .85rem;
  
  /* zelfde look als btn-primary */
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Hover zelfde gedrag als primaire knop */
#member-profile .password-group .input-password-toggle:hover{
  filter:brightness(.95);
}

/* Focus consistent */
#member-profile .password-group .input-password-toggle:focus{
  box-shadow:0 0 0 3px rgba(13,110,253,.15);
  outline:none;
}

/* Zorg dat hoogte exact gelijk is */
#member-profile .password-group .input-password-toggle {
  height:calc(1.25em + 1rem + 1px);
}

#member-profile .password-group .form-control {
  height:calc(1.25em + 1rem + 2px);
}

@media (max-width: 480px){
  #member-profile .com-users-profile__edit-submit > .controls{
    flex-direction:column !important;
  }
}

/* Module Volgeboekt */
.moduletable.volgeboekt {
    margin: 20px 0;
    padding: 16px 18px;
    border-radius: 6px;
    background: rgba(220, 53, 69, 0.06);
    border-left: 4px solid #dc3545;
}

.moduletable.volgeboekt .module-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #b02a37;
}

.moduletable.volgeboekt p {
    margin: 0;
    color: #842029;
}