/* Shared finishing touches inspired by the facturatie page.
   Existing page grids, images and brand colors remain the foundation. */
:root {
    --site-line: rgba(4, 173, 225, .2);
    --site-surface: #111d30;
    --site-accent: #a3d080;
    --site-shadow: 0 20px 55px rgba(0, 0, 0, .18);
}
html[data-theme="light"] {
    --site-line: #cbdde7;
    --site-surface: #fff;
    --site-accent: #416b28;
    --site-shadow: 0 20px 55px rgba(16, 23, 40, .07);
}
body { margin-bottom: 0; }
header { position: sticky; top: 0; z-index: 1000; }
#main-menu-block { margin-bottom: 0 !important; padding-block: 1rem; }
#main-menu-block.fixed-header { position: static; animation: none; }
.navbar-brand img { width: 180px; max-width: 100%; height: auto; }
.main-menu a { font-size: .9rem; }
.main-menu a:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--searche-blue); outline-offset: 5px;
}
.theme-toggle-switch input {
    display: block; position: absolute; width: 1px; height: 1px; opacity: 0;
}
.theme-toggle-switch input:focus-visible + .theme-toggle-slider {
    outline: 2px solid var(--searche-blue); outline-offset: 5px;
}
/* Soft, static light pools: contained at the viewport, behind all content. */
.site-backdrop { overflow: clip; }
.site-content {
    font-size: 1rem;
    position: relative;
    isolation: isolate;
    --glow-x: 2%;
    --glow-y: 14rem;
    --glow-secondary-x: 98%;
    --glow-secondary-y: 72rem;
    --glow-strength: .13;
}
.site-content::before {
    content: "";
    position: absolute;
    inset: 0 -10rem;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 24rem 26rem at var(--glow-x) var(--glow-y),
            rgba(4, 173, 225, var(--glow-strength)), rgba(4, 173, 225, .025) 55%, transparent 78%),
        radial-gradient(ellipse 28rem 30rem at var(--glow-secondary-x) var(--glow-secondary-y),
            rgba(4, 173, 225, .085), transparent 75%);
}
.site-content[data-page="CustomSoftware"] { --glow-x: 95%; --glow-y: 20rem; --glow-secondary-x: 0%; }
.site-content[data-page="WebshopsWebsites"] { --glow-x: 8%; --glow-y: 8rem; --glow-secondary-y: 85rem; }
.site-content[data-page="AboutUs"] { --glow-x: 92%; --glow-y: 18rem; }
.site-content[data-page="Contact"] { --glow-x: 98%; --glow-y: 25rem; }
.site-content[data-page="TermsAndConditions"] { --glow-strength: .07; --glow-secondary-y: 100rem; }
html[data-theme="light"] .site-content { --glow-strength: .09; }
html[data-theme="light"] .site-content[data-page="TermsAndConditions"] { --glow-strength: .05; }
.site-content h1, .site-content h2, .site-content h3 { letter-spacing: -.035em; line-height: 1.2; }
.site-content h1 { font-size: 2.5rem; margin-bottom: 1.4rem; }
.site-content h2, .site-content .fs-xxl { font-size: 2.25rem; margin-bottom: 1.25rem; }
.site-content p { color: var(--text-secondary); line-height: 1.8; }
.site-content .screen-height-block {
    min-height: 0; height: auto; margin: 0; padding: 5rem 0;
}
.site-content > .screen-height-block:first-child { padding-block: 5.5rem; }
.site-content > .screen-height-block + .screen-height-block { border-top: 1px solid var(--site-line); }
.site-content .screen-height-block > .row { padding-inline: 0; row-gap: 2rem; }
.site-content .screen-height-block > .row > [class*="col-"] { padding-inline: 1.5rem; }
.site-content .site-kicker {
    display: inline-flex; align-items: center; gap: .7rem; color: var(--site-accent);
    font-size: .8rem; letter-spacing: .1em; font-weight: 700; text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.site-kicker::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; flex-shrink: 0; }
.site-content .img-block-rounded {
    width: 100%; max-width: 425px; height: auto; aspect-ratio: 1;
    /* Package-card shape with a soft, pale-blue halo for depth. */
    border: 1px solid rgba(125, 211, 252, .38);
    border-radius: 1.25rem;
    padding: .5rem;
    background: linear-gradient(125deg, #121f3b, #172c46);
    box-shadow:
        0 12px 28px -10px rgba(125, 211, 252, .18),
        0 22px 65px -12px rgba(94, 190, 245, .22);
}
html[data-theme="light"] .site-content .img-block-rounded {
    border-color: rgba(100, 185, 235, .38);
    box-shadow:
        0 12px 28px -10px rgba(80, 165, 220, .16),
        0 22px 65px -12px rgba(100, 195, 245, .25);
}
.site-content .img-block-rounded img { border-radius: .75rem; }
.site-content .img-block-rounded::before,
.site-content .img-block-rounded::after {
    content: none;
}
.site-content .screen-height-block:has(.fs-xxl) {
    margin-block: 2rem; padding: 3.5rem 1rem; border: 1px solid var(--site-line);
    border-radius: 1.5rem; background: linear-gradient(125deg, var(--site-surface), var(--card-bg));
}
.site-content .list-none { padding: 1.5rem; border: 1px solid var(--site-line); border-radius: 1rem; background: var(--site-surface); }
.site-content .list-none li { display: flex; gap: .8rem; padding: .65rem 0; line-height: 1.65; }
.site-content .list-none svg { flex-shrink: 0; color: var(--site-accent); margin-top: .2rem; }
.review-card { background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 1rem; box-shadow: var(--site-shadow); }
.review-card::after { display: none; }
.review-card:hover { transform: translateY(-3px); }
.review-carousel { padding-inline: 2rem; }
.review-carousel .carousel-control-prev { left: -2rem; color: var(--searche-blue); }
.review-carousel .carousel-control-next { right: -2rem; color: var(--searche-blue); }
.contact-form {
    max-width: 850px; margin-top: 2.25rem; padding: 2rem;
    border: 1px solid var(--site-line); border-radius: 1.25rem;
    background: var(--site-surface); box-shadow: var(--site-shadow);
}
.contact-form input, .contact-form textarea {
    font-size: 1rem; padding: .85rem 1rem; border-radius: .65rem;
    border-color: var(--site-line); background: var(--bg-primary);
}
.contact-form .form-label { font-weight: 600; font-size: .95rem; margin-top: .6rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder,
html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder { color: var(--text-secondary); opacity: .7; }
.site-content .screen-height-block:has(h4) { max-width: 900px; margin-inline: auto; }
.site-content h4 { font-size: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--site-line); }
body > footer { border-top: 1px solid var(--site-line); background: var(--bg-secondary); padding: 4rem 0 2rem; font-weight: 400; }
body > footer h2 { font-size: 1.15rem !important; color: var(--text-primary); }
body > footer li { padding-bottom: .6rem; color: var(--text-secondary); }
body > footer .list-none li { display: flex; align-items: flex-start; gap: .6rem; }
body > footer svg { color: var(--site-accent); flex-shrink: 0; }
body > footer .fs-small { border-top: 1px solid var(--site-line); padding-top: 1.5rem; font-size: .875rem; color: var(--text-secondary); }
@media (max-width: 1199px) {
    #main-menu-block > .container { display: grid; grid-template-columns: 1fr auto; }
    .site-navigation { display: contents; }
    .site-navigation > .navbar-toggler { grid-column: 2; grid-row: 1; }
    #navbarSupportedContent { grid-column: 1 / -1; text-align: left; max-height: 70vh; overflow-y: auto; }
    #navbarSupportedContent .main-menu { padding-top: 1rem; }
    #navbarSupportedContent .nav-link { padding: .7rem 1rem; }
    #navbarSupportedContent .nav-item:last-child { margin: .5rem 0 0 !important; padding: .7rem 1rem !important; }
    #navbarSupportedContent .theme-toggle { margin-left: 0; justify-content: flex-start; }
}
@media (max-width: 767px) {
    .site-content::before { inset-inline: -7rem; }
    .site-content { font-size: 16px; }
    .site-content .screen-height-block, .site-content > .screen-height-block:first-child { padding-block: 3.5rem; }
    .site-content .screen-height-block > .row > [class*="col-"] { padding-inline: .75rem; }
    .site-content h1 { font-size: 2.5rem; }
    .site-content h2, .site-content .fs-xxl { font-size: 2rem; }
    .site-content .img-block-rounded { margin-inline: auto; }
    .contact-form { padding: 1.1rem; }
    .review-carousel { padding-inline: 1rem; }
    .review-card { padding: 1.3rem; }
    .review-carousel .carousel-control-prev { left: -1.5rem; }
    .review-carousel .carousel-control-next { right: -1.5rem; }
    body > footer { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .review-card, #main-menu-block, .btn-searche-primary { transition: none; }
    .review-card:hover { transform: none; }
}

.digital-tools-menu > .dropdown-toggle {
    border: 0;
    background: transparent;
    color: var(--text-primary);
}
.digital-tools-menu > .dropdown-toggle::after { margin-left: .45rem; vertical-align: .18em; }
.digital-tools-menu .dropdown-menu {
    min-width: 12rem;
    padding: .45rem;
    border: 1px solid var(--site-line);
    border-radius: .8rem;
    background: var(--navbar-bg);
    box-shadow: var(--site-shadow);
}
.digital-tools-menu .dropdown-item {
    padding: .65rem .8rem;
    border-radius: .5rem;
    color: var(--text-primary);
}
.digital-tools-menu .dropdown-item:hover,
.digital-tools-menu .dropdown-item:focus {
    color: var(--searche-blue);
    background: color-mix(in srgb, var(--searche-blue) 10%, transparent);
}
@media (min-width: 1200px) {
    .digital-tools-menu:hover > .dropdown-menu,
    .digital-tools-menu:focus-within > .dropdown-menu { display: block; margin-top: 0; }
}
@media (max-width: 1199px) {
    #navbarSupportedContent .digital-tools-menu > .dropdown-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    #navbarSupportedContent .digital-tools-menu .dropdown-menu {
        position: static;
        margin: 0 .75rem .5rem;
        box-shadow: none;
    }
    #navbarSupportedContent .digital-tools-menu .dropdown-item { padding: .7rem 1rem; }
}