/* ===================================================================
   Thuisstudie.nl brand overrides on top of the Assan theme.
   Placeholder huisstijl: blauw #175caa / oranje #f28c1e.
   =================================================================== */
:root {
    --ts-blauw: #175caa;
    --ts-blauw-donker: #114682;
    --ts-oranje: #f28c1e;
    --ts-oranje-donker: #d97a12;
}

.btn-primary {
    --bs-btn-bg: #175caa;
    --bs-btn-border-color: #175caa;
    --bs-btn-hover-bg: #114682;
    --bs-btn-hover-border-color: #114682;
    --bs-btn-active-bg: #114682;
    --bs-btn-active-border-color: #114682;
}
.btn-info {
    --bs-btn-bg: #f28c1e;
    --bs-btn-border-color: #f28c1e;
    --bs-btn-hover-bg: #d97a12;
    --bs-btn-hover-border-color: #d97a12;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #d97a12;
    --bs-btn-active-color: #fff;
}
.btn-outline-info {
    --bs-btn-color: #d97a12;
    --bs-btn-border-color: #f28c1e;
    --bs-btn-hover-bg: #f28c1e;
    --bs-btn-hover-border-color: #f28c1e;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #f28c1e;
    --bs-btn-active-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: #175caa;
    --bs-btn-border-color: #175caa;
    --bs-btn-hover-bg: #175caa;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #175caa;
}
.text-primary { color: #175caa !important; }
.bg-primary { background-color: #175caa !important; }
.bg-primary-subtle { background-color: #e2ecf8 !important; }
.text-bg-primary-subtle { background-color: #e2ecf8 !important; color: #114682 !important; }
.text-info { color: #d97a12 !important; }
.bg-info { background-color: #f28c1e !important; }
.link-primary { color: #175caa !important; }

/* Dark-mode variants for the overrides above */
[data-bs-theme="dark"] .bg-primary-subtle,
[data-bs-theme="dark"] .text-bg-primary-subtle { background-color: #16324f !important; }
[data-bs-theme="dark"] .text-bg-primary-subtle { color: #cfe0f4 !important; }
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary { color: #6ea8e8 !important; }

/* Provider logo placeholder chips (until real logos are available) */
.logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Header: always-visible search field (Class Central model) */
@media (max-width: 991.98px) {
    .ts-search { flex-basis: 100%; }
}
@media (min-width: 992px) {
    .ts-search { max-width: 34rem; margin-left: auto !important; margin-right: auto !important; }
}

/* Sticky elements below the sticky header. --ts-header-h is measured
   from the real header height in layouts/frontend.blade.php (it grows
   on mobile when the search field wraps to its own row); the fallback
   covers no-JS and pre-load. Top edge aligns with the sticky sidebar
   (header + 1rem). */
.ts-sticky-offset { top: calc(var(--ts-header-h, 4.75rem) + 1rem) !important; }

/* Masks the 1rem channel between header and stuck pill bar so content
   scrolling underneath doesn't show. var(--bs-body-bg) adapts to the
   light/dark color mode automatically. */
.ts-sticky-offset::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 1rem;
    background: var(--bs-body-bg);
}

/* The bar's rounded top corners leave notches where content still
   peeks through. Two radial gradients paint only the notch (outside
   the .375rem arc) so the rounding stays intact. */
.ts-sticky-offset::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .375rem;
    background-image:
        radial-gradient(circle at 100% 100%, transparent .375rem, var(--bs-body-bg) .375rem),
        radial-gradient(circle at 0 100%, transparent .375rem, var(--bs-body-bg) .375rem);
    background-size: .375rem .375rem;
    background-position: left top, right top;
    background-repeat: no-repeat;
}

/* Sticky sidebar (provider page): pins below the measured header once
   scrolled to it. lg+ only — below that the sidebar is a stacked row
   and sticking would pin the cards over the content column. The low
   z-index keeps it under the header (z 1020) when the column bottom
   pushes it up at the end of the page. */
@media (min-width: 992px) {
    .ts-sidebar-sticky { top: calc(var(--ts-header-h, 4.75rem) + 1rem); z-index: 1; }
}

/* Anchor jumps land below the sticky header. Provider-page sections
   get an extra margin so the heading clears the pill nav, whose
   bottom edge sits at header + 1rem + bar height (~70px below the
   header). */
html {
    scroll-padding-top: calc(var(--ts-header-h, 4.75rem) + .5rem);
}
[id^="aanbieder-"] {
    scroll-margin-top: 4rem;
}

/* Fixed mobile CTA bar (course page) */
.cta-bar-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, .08);
}
@media (min-width: 768px) {
    .cta-bar-mobile { display: none !important; }
}

/* Rounded bottom corners on the hero band */
.rounded-bottom-4 {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* Long-form course content (stored as semantic HTML in
   course_translations.long_description) */
.ts-content > * {
    margin-top: 0;
    margin-bottom: 2.5rem;
}
.ts-content > *:last-child {
    margin-bottom: 0;
}
.ts-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.ts-content ul {
    list-style: none;
    padding-left: 0;
}
.ts-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
}
.ts-content ul li:last-child {
    margin-bottom: 0;
}
.ts-content ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ts-blauw);
    font-weight: 700;
}
[data-bs-theme="dark"] .ts-content ul li::before {
    color: #6ea8e8;
}