/* =====================================================================
   SWM Intranet — theme on top of Bootstrap 5.3
   Change brand colours here only.
   ===================================================================== */
:root {
    --swm-blue:        #0b5cad;
    --swm-blue-dark:   #084585;
    --swm-blue-light:  #e8f1fb;
    --swm-muted-bg:    #eef1f4;
    --swm-radius:      .75rem;

    --bs-primary:      var(--swm-blue);
    --bs-primary-rgb:  11, 92, 173;
    --bs-link-color:   var(--swm-blue);
    --bs-link-color-rgb: 11, 92, 173;
    --bs-link-hover-color: var(--swm-blue-dark);
    --bs-body-font-size: .95rem;
}

.btn-primary {
    --bs-btn-bg: var(--swm-blue);
    --bs-btn-border-color: var(--swm-blue);
    --bs-btn-hover-bg: var(--swm-blue-dark);
    --bs-btn-hover-border-color: var(--swm-blue-dark);
    --bs-btn-active-bg: var(--swm-blue-dark);
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header ---------------------------------------------------------------- */
.site-header { background: var(--swm-blue); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar { padding-block: .5rem; }
.main-menu {
    background: #fff;
    border-radius: .5rem;
    padding: .15rem .25rem;
}
.main-menu .nav-link {
    color: var(--swm-blue) !important;
    font-size: .875rem;
    padding: .35rem .7rem !important;
    border-radius: .35rem;
}
.main-menu .nav-link:hover,
.main-menu .nav-link.active { background: var(--swm-blue-light); text-decoration: none; }
@media (max-width: 991.98px) {
    .main-menu { margin-top: .75rem; }
}

/* Hero ------------------------------------------------------------------ */
.hero { background: var(--swm-blue-light); }
.hero-img { aspect-ratio: 2 / 1; object-fit: cover; max-height: 440px; }
@media (min-width: 768px) { .hero-img { aspect-ratio: 3 / 1; } }
/* Slider arrows: close to the edges, in a dark round button so they show on light and dark slides */
.hero .carousel-control-prev,
.hero .carousel-control-next { width: 4.5rem; opacity: 1; }
.hero .carousel-control-prev { justify-content: flex-start; padding-left: 1rem; }
.hero .carousel-control-next { justify-content: flex-end;   padding-right: 1rem; }
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
    width: 2.75rem; height: 2.75rem;
    background-color: rgba(8, 69, 133, .75);   /* --swm-blue-dark */
    background-size: 1.1rem;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    transition: background-color .15s ease, transform .15s ease;
}
.hero .carousel-control-prev:hover .carousel-control-prev-icon,
.hero .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--swm-blue-dark); transform: scale(1.08); }
.hero .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.hero .carousel-control-next:focus-visible .carousel-control-next-icon { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 575.98px) {
    .hero .carousel-control-prev,
    .hero .carousel-control-next { width: 3rem; }
    .hero .carousel-control-prev { padding-left: .5rem; }
    .hero .carousel-control-next { padding-right: .5rem; }
    .hero .carousel-control-prev-icon,
    .hero .carousel-control-next-icon { width: 2.25rem; height: 2.25rem; background-size: .9rem; }
}

/* Sections -------------------------------------------------------------- */
.band-muted { background: var(--swm-muted-bg); }
.section-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
.widget-title  { font-size: 1rem;   font-weight: 600; margin-bottom: .75rem; }

.widget-card {
    border: 0;
    border-radius: var(--swm-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
}
.widget-card .list-group-item:first-child { border-top-left-radius: var(--swm-radius); border-top-right-radius: var(--swm-radius); }
.widget-card .list-group-item:last-child  { border-bottom-left-radius: var(--swm-radius); border-bottom-right-radius: var(--swm-radius); }

/* Zelf regelen: 1 / 2 / 3 columns */
.link-grid { display: grid; grid-template-columns: 1fr; gap: .35rem 2rem; }
@media (min-width: 576px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .link-grid { grid-template-columns: repeat(3, 1fr); } }
.link-grid a { font-size: .9rem; display: inline-flex; align-items: center; }
.link-grid i { font-size: 1.25rem; margin-right: .1rem; }

/* Laatste updates */
.updates-list .list-group-item { font-size: .9rem; padding-block: .8rem; }
.update-num { background: var(--swm-blue-light); color: var(--swm-blue); min-width: 1.75rem; }

/* News cards */
.news-card {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--swm-radius); aspect-ratio: 4 / 3; background: #dfe7ef;
}
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.news-card:hover img { transform: scale(1.04); }
.news-card:hover { text-decoration: none; }
.news-card-caption {
    position: absolute; inset: auto 0 0 0; padding: .75rem .9rem;
    background: linear-gradient(to top, rgba(8, 69, 133, .95), rgba(8, 69, 133, .75));
    color: #fff;
}
.news-card-title { font-size: .9rem; font-weight: 500; line-height: 1.3; }
.news-card-meta  { font-size: .75rem; opacity: .85; margin-top: .15rem; }

/* Snelkoppelingen */
.quick-links .card-body { background: linear-gradient(160deg, #eef5fd, #dcebfa); border-radius: var(--swm-radius); }
.quick-links a { display: inline-block; padding: .3rem 0; font-weight: 600; font-size: .875rem; color: var(--swm-blue-dark); }

/* People lists */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--swm-blue); color: #fff; font-size: .8rem; font-weight: 600;
}
.name-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.name-list li + li { border-top: 1px dashed #e3e7ec; }

/* Events */
.event-date {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: .5rem; background: var(--swm-blue-light); color: var(--swm-blue);
    line-height: 1; flex-shrink: 0;
}
.event-date .d { font-weight: 700; font-size: 1rem; }
.event-date .m { font-size: .7rem; text-transform: uppercase; }

/* Footer */
.site-footer { background: #dfe3e8; color: #4b5563; }

/* Auth ------------------------------------------------------------------ */
.auth-body { background: var(--swm-muted-bg); }
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 440px; border: 0; border-radius: var(--swm-radius); }
.auth-logo { width: 180px; max-width: 60%; }

/* Content ---------------------------------------------------------------- */
/* Text from the editor (news, FAQ answers, pages) */
.content-body h2 { font-size: 1.35rem; margin-top: 1.5rem; }
.content-body h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.content-body blockquote { border-left: 4px solid var(--swm-blue-light); padding-left: 1rem; color: var(--bs-secondary-color); }
/* Editor (Quill) in the admin forms */
.editor { background: #fff; min-height: 14rem; font-size: var(--bs-body-font-size); }
.ql-toolbar.ql-snow { background: #fff; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.ql-container.ql-snow { border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); }
/* Kennisbank: the question from the homepage link stands out */
.faq-item:target .accordion-button { background: var(--swm-blue-light); }
.ql-container.ql-snow { font-family: inherit; font-size: var(--bs-body-font-size); }
/* Quill labels in Dutch (they are CSS content in quill.snow.css) */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Tekst'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Kop'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Tussenkop'; }
.ql-snow .ql-tooltip::before { content: 'Link:'; }
.ql-snow .ql-tooltip[data-mode=link]::before { content: 'Link invoeren:'; }
.ql-snow .ql-tooltip a.ql-action::after { content: 'Wijzigen'; }
.ql-snow .ql-tooltip a.ql-remove::before { content: 'Verwijderen'; }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: 'Opslaan'; }