/*
 * ISPFilter — antispam-gateway.nl
 *
 * Alleen geladen op een site met theme = 'ispfilter' (Layout::siteTheme), en
 * elke regel begint met body.site-ispfilter, zodat dit bestand een andere site
 * niet kan raken, ook niet als het daar per ongeluk geladen zou worden.
 *
 * WAT ER VERANDERT, EN WAT NIET
 *
 * Het ISPWeb-blauw wordt petrol. Verder blijft alles van de moedersite: de
 * letters, de opbouw van de blokken, de groene knop en de band met de vier
 * accentkleuren boven de footer. Die band is het handschrift van ISPWeb, en
 * dat dit een dienst van ISPWeb is, mag je zien.
 *
 * De groene knop blijft groen om dezelfde reden als bij de seizoenen: het is de
 * ene kleur op de site die "hier drukken" betekent.
 *
 * WAAROM ZO VEEL REGELS
 *
 * site.css zet zijn blauw op bijna zeventig plaatsen als vaste kleurcode en
 * niet als variabele. De variabelen hieronder dekken alles wat ispweb.css en
 * de Bootstrap-hulpklassen (bg-primary, text-primary, bg-light-blue) doen; de
 * losse regels daarna zijn precies de plekken in site.css die het blauw er
 * vast in hebben staan. Wie in site.css een nieuwe vaste kleur toevoegt, moet
 * hier kijken.
 *
 * CONTRAST
 *
 * #137a89 is het donkerste petrol dat nog als accent leest, en haalt 5:1 op
 * wit -- het lichtere #1a8a9a uit het logo haalt maar 4,1:1 en is daarom
 * alleen decoratie (de illustraties), nooit tekst of een knop met tekst.
 */

body.site-ispfilter {
    --bs-primary: #0f4c5c;
    --bs-primary-rgb: 15, 76, 92;
    --bs-secondary: #137a89;
    --bs-secondary-rgb: 19, 122, 137;
    --bs-light-blue: #eff8f8;
    --bs-light-blue-rgb: 239, 248, 248;

    --ispweb-primary: #0f4c5c;
    --ispweb-secondary: #137a89;
    --ispweb-light-blue: #eff8f8;
    --ispweb-blue: #137a89;
}

/* -- koppen en accentwoorden ------------------------------------------------ */

body.site-ispfilter h1,
body.site-ispfilter .h1,
body.site-ispfilter h2,
body.site-ispfilter .h2 {
    color: #0f4c5c;
}

body.site-ispfilter h1 span,
body.site-ispfilter .h1 span,
body.site-ispfilter h2 span,
body.site-ispfilter .h2 span,
body.site-ispfilter h6 span,
body.site-ispfilter .h6 span,
body.site-ispfilter p span,
body.site-ispfilter .p span {
    color: #137a89;
}

/* The pricing cards and other dark panels put white text on primary; the
   accent span inside them has to stay readable there too. */
body.site-ispfilter .bg-primary h2 span,
body.site-ispfilter .bg-primary p span {
    color: #9fd8df;
}

/* -- knoppen ---------------------------------------------------------------- */

body.site-ispfilter .btn-primary {
    --bs-btn-bg: #0f4c5c;
    --bs-btn-border-color: #0f4c5c;
    --bs-btn-hover-bg: #0c3f4c;
    --bs-btn-hover-border-color: #0b3a46;
    --bs-btn-focus-shadow-rgb: 51, 103, 116;
    --bs-btn-active-bg: #0b3a46;
    --bs-btn-active-border-color: #0a3540;
    --bs-btn-disabled-bg: #0f4c5c;
    --bs-btn-disabled-border-color: #0f4c5c;
}

body.site-ispfilter .btn-secondary {
    --bs-btn-bg: #137a89;
    --bs-btn-border-color: #137a89;
    --bs-btn-hover-bg: #106875;
    --bs-btn-hover-border-color: #0f626e;
    --bs-btn-focus-shadow-rgb: 54, 142, 155;
    --bs-btn-active-bg: #0f626e;
    --bs-btn-active-border-color: #0e5c67;
    --bs-btn-disabled-bg: #137a89;
    --bs-btn-disabled-border-color: #137a89;
}

body.site-ispfilter .btn-outline-primary {
    --bs-btn-color: #0f4c5c;
    --bs-btn-border-color: #0f4c5c;
    --bs-btn-hover-bg: #0f4c5c;
    --bs-btn-hover-border-color: #0f4c5c;
    --bs-btn-active-bg: #0f4c5c;
    --bs-btn-active-border-color: #0f4c5c;
}

body.site-ispfilter .btn-outline-secondary {
    --bs-btn-color: #137a89;
    --bs-btn-border-color: #137a89;
    --bs-btn-hover-bg: #137a89;
    --bs-btn-hover-border-color: #137a89;
    --bs-btn-active-bg: #137a89;
    --bs-btn-active-border-color: #137a89;
}

body.site-ispfilter .link-primary {
    color: #0f4c5c !important;
}

body.site-ispfilter .link-secondary,
body.site-ispfilter .text-link:hover {
    color: #137a89 !important;
}

body.site-ispfilter .form-check-input:checked {
    background-color: #0f4c5c;
    border-color: #0f4c5c;
}

/* -- header en menu --------------------------------------------------------- */

body.site-ispfilter .header-section .header-menu .menu .menu-li .menu-link:hover .link,
body.site-ispfilter .header-section .header-menu .menu .menu-li.active .menu-link:hover .link {
    color: #137a89;
}

body.site-ispfilter .header-section .btn-mobile-menu-wrapper .btn-mobile-menu .lines,
body.site-ispfilter .header-section .btn-mobile-menu-wrapper .btn-mobile-menu .lines::before,
body.site-ispfilter .header-section .btn-mobile-menu-wrapper .btn-mobile-menu .lines::after {
    background-color: #137a89;
}

body.site-ispfilter .mobile-menu-section {
    background-color: #0f4c5c;
}

/*
 * The ISPFilter logo is wider than ISPWeb's for the same height (nine letters
 * against six), so at the 130px the header gives a logo it pushes the menu onto
 * a second line on a laptop screen. A little lower keeps the menu on one line;
 * the scrolled header keeps its 60px.
 */
@media (min-width: 992px) {
    body.site-ispfilter .header-section .logo-container .logo-image {
        height: 110px;
    }
}

body.site-ispfilter.scroll .header-section .logo-container .logo-image,
body.site-ispfilter .scroll .header-section .logo-container .logo-image {
    height: 60px;
}

/* -- footer ----------------------------------------------------------------- */

body.site-ispfilter .footer-section {
    background-color: #0f4c5c;
}

body.site-ispfilter .copyright-section {
    background-color: #0b3a46;
}

/* -- inhoud ----------------------------------------------------------------- */

body.site-ispfilter .toggle-list .toggle-list-item-question {
    background-color: #137a89;
    border-color: #137a89;
}

body.site-ispfilter .about-section .bg-block::after {
    background-color: #137a89;
}

/*
 * The cards on this site come in threes and sixes, and the shared grid fills a
 * wide column with four -- which left an empty fourth slot beside every row.
 * Three across from a laptop up, two on a tablet, one on a phone.
 */
@media (min-width: 768px) {
    body.site-ispfilter .longform .block-body .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    body.site-ispfilter .longform .block-body .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* A pair stays a pair: two cards in a row of three is a hole. */
    body.site-ispfilter .longform .block-body .feature-grid:has(> li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * A card on Hoe werkt het carries a list of checks. The shared card rule is
 * written as `.feature-grid li`, which reaches the items of that inner list as
 * well and turns every line into a card of its own; these undo that for a list
 * inside a card.
 */
body.site-ispfilter .longform .block-body .feature-grid li ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

body.site-ispfilter .longform .block-body .feature-grid li li {
    padding: 0;
    margin: 0 0 0.3rem;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

body.site-ispfilter .longform .block-body .feature-grid li li::before {
    content: none;
}