/*
 * Page builder additions to the Webflow theme.
 *
 * Loaded AFTER id-oiltools-v2.css. It adds only what the builder needs and the
 * exported stylesheet does not provide. Where it does restyle a theme class,
 * the block says which client request asked for it.
 */

/* ---------------------------------------------------------------------------
 * Column counts
 *
 * The export's grid classes hardcode their own column count and are wildly
 * inconsistent about it: .grid-4 is really a 2x2 grid, .grid-3 drops straight
 * from 3 to 1 column, and .track-record-grid stays 4 across on a phone.
 *
 * The builder therefore keeps the theme class for gaps, padding and colour,
 * and layers the column count on top with .cms-cols-N. One predictable ladder
 * for every row: 4 -> 2 -> 1 and 3 -> 2 -> 1.
 * ------------------------------------------------------------------------- */
.cms-cols {
    display: grid;
    grid-auto-columns: 1fr;
}

.cms-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 991px) {
    .cms-cols-3,
    .cms-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px) {
    .cms-cols-2,
    .cms-cols-3,
    .cms-cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Compact spacing
 *
 * The export expressed "less vertical space" by inventing a background variant
 * (.c-diff for grey, .c-pictures for dark). The builder splits the two, so any
 * background can be compact.
 * ------------------------------------------------------------------------- */
.section.is-compact {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
 * Scroll reveal
 *
 * The export's Webflow interactions set inline opacity:0 on 13 elements, which
 * left them invisible whenever the JS failed. Here the visible state is the
 * default: the hiding rule only applies once JS has confirmed it can reveal
 * them again by setting .has-reveal on <html>.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        transition: opacity .5s ease, transform .5s ease;
    }

    .has-reveal [data-reveal]:not(.is-revealed) {
        opacity: 0;
        transform: translateY(1.25rem);
    }
}

/* ---------------------------------------------------------------------------
 * Accessibility helpers the export lacked
 * ------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ---------------------------------------------------------------------------
 * Hero overlay
 *
 * The export put white, shadowed text straight over an uncontrolled photo,
 * which becomes unreadable on a light upload. The builder offers a scrim.
 * ------------------------------------------------------------------------- */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-overlay.is-licht { background: rgba(29, 29, 29, .35); }
.hero-overlay.is-donker { background: rgba(29, 29, 29, .6); }

.hero-wrapper,
.card-hero_wrapper {
    position: relative;
    z-index: 2;
}

/* The tall hero centres its text by stretching the wrapper over the whole
 * photo (position: absolute, inset: 0). Making it relative here, as this file
 * once did, collapsed it to its own height and left the text at the top. It
 * only needs the stacking help on a phone, where the theme makes it static.
 * The even padding keeps the text in the true middle. */
.home_hero-wrapper {
    padding-top: 2rem;
}

@media screen and (max-width: 479px) {
    .home_hero-wrapper {
        position: relative;
    }
}

/* ---------------------------------------------------------------------------
 * Builder-only blocks the export has no styling for
 * ------------------------------------------------------------------------- */
/* Two columns, so a list of certificates does not hang on the left edge of
 * an otherwise empty row. One column on a phone. */
.cms-downloads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem 2rem;
    margin-top: 1.5rem;
}

@media screen and (max-width: 767px) {
    .cms-downloads { grid-template-columns: 1fr; }
}

.cms-download-logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.cms-caption {
    margin-top: .5rem;
    color: var(--gray500);
}

.cta-wrapper.is-narrow {
    max-width: 40rem;
}

.cms-map {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    overflow: hidden;
    border-radius: .5rem;
    background-color: var(--gray100);
}

.cms-map.is-normaal { height: 24rem; }
.cms-map.is-hoog { height: 36rem; }

.cms-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-map-consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

/* Mobile order swap for the "text with image" row. */
@media screen and (max-width: 767px) {
    .grid-2.c-resp-reverse .order-1 { order: 1; }
    .grid-2.c-resp-reverse .order-2 { order: 2; }
}

/* ---------------------------------------------------------------------------
 * Product detail
 * ------------------------------------------------------------------------- */
.cms-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media screen and (max-width: 767px) {
    .cms-specs { grid-template-columns: 1fr; }
}

.cms-spec h4 { margin-bottom: .25rem; }
.cms-spec p { margin-bottom: 0; }

/* Lightbox, replacing the Webflow widget. */
[x-cloak] { display: none !important; }

.cms-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    background: rgba(29, 29, 29, .9);
    cursor: zoom-out;
}

.cms-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cms-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    padding: .5rem 1rem;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}

.personalia {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.personalia-image {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 * Heading levels without a size change
 *
 * The export hangs its typography on the element (h1..h4 each set their own
 * font-size), which means every correction to the heading structure would also
 * be a design change. These classes carry the size that the old element gave,
 * so a heading can be promoted or demoted for structure without a single pixel
 * moving.
 *
 * .heading-card        reproduces h3 (card titles in a row without its own heading)
 * .heading-card-large  reproduces h2 (the large card of the overzicht row)
 * .heading-spec        reproduces h4 (specification labels)
 *
 * The export's headings GROW on a phone: h2 goes 2 -> 2.25 -> 2rem and h3 goes
 * 1.5 -> 2 -> 1.5rem across the 767px and 479px breakpoints. These classes
 * therefore carry the same ladder. A flat font-size would match the design on
 * a desktop and quietly shrink the heading on a phone.
 * ------------------------------------------------------------------------- */
.heading-card {
    font-size: 1.5rem;
}

.heading-card-large {
    font-size: 2rem;
}

.heading-spec {
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

@media screen and (max-width: 767px) {
    .heading-card {
        font-size: 2rem;
    }

    .heading-card-large {
        font-size: 2.25rem;
    }

    .heading-spec {
        font-size: 1.75rem;
        line-height: 1.4;
    }
}

@media screen and (max-width: 479px) {
    .heading-card,
    .heading-spec {
        font-size: 1.5rem;
    }

    .heading-card-large {
        font-size: 2rem;
    }
}

/* ---------------------------------------------------------------------------
 * Large card hover
 *
 * Webflow keeps per-page custom code in the page <head>, outside the exported
 * stylesheet. index.html carried the hover for the large card there: the button
 * slides up and the photo turns grey. The overzicht row can put that card on
 * any page, so the hover lives here instead of in one page's head. Desktop
 * only, as in the export: below 992px the theme already parks the button at
 * top: 0.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .product-and-services_link-block:hover .product-and-services_button-wrapper {
        top: 0;
    }

    /* Reversed at the client's request: the photo rests in grey and turns
     * to colour under the pointer. Without a pointer (below 992px) it simply
     * stays in colour. */
    .product-and-services_image {
        filter: grayscale(100%);
    }

    .product-and-services_link-block:hover .product-and-services_image {
        filter: none;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .product-and-services_button-wrapper,
    .product-and-services_image {
        transition: top .4s ease, filter .4s ease;
    }
}

/* ---------------------------------------------------------------------------
 * USP icon
 *
 * The usp style shows an uploaded icon or logo in the box the export sized for
 * its square checkmark. Contain keeps a wide logo from being squashed into it.
 * ------------------------------------------------------------------------- */
.usp-icon_checkmark {
    object-fit: contain;
}

/* An uploaded icon or logo is not a tick: it gets room to be read and loses
 * the white tile the export drew around its checkmark. */
.usp-icon_checkmark.is-custom {
    width: auto;
    max-width: 100%;
    height: 5rem;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

@media screen and (max-width: 479px) {
    .usp-icon_checkmark.is-custom {
        height: 3.5rem;
    }
}

/* ---------------------------------------------------------------------------
 * Text row alignment
 *
 * The theme centres .container-heading by default, so the "Links" choice of
 * the text row did nothing. A centred list keeps its ticks and its lines
 * together: the list itself is centred as a block, its text reads from the
 * left.
 * ------------------------------------------------------------------------- */
.container-heading.is-left {
    align-items: flex-start;
    text-align: left;
}

.container-heading .w-richtext ul,
.container-heading .w-richtext ol {
    display: inline-block;
    text-align: left;
}

/* ---------------------------------------------------------------------------
 * Card colours
 *
 * A card is one big link, so the theme painted every line in it red. Only the
 * title (and the line above it) keeps the red; the text underneath reads as
 * text. On a dark section the theme's .c-white takes over.
 * ------------------------------------------------------------------------- */
.product-thumbnail-grid_child p,
.product-thumbnail-grid_child .text-size-xs-small {
    color: var(--font-color);
}

.product-thumbnail-grid_child.c-white p,
.product-thumbnail-grid_child.c-white .text-size-xs-small {
    color: var(--white);
}

/* A team member: the role stays red, the name is plain dark text. */
.product-thumbnail-grid_child.is-person .heading-product {
    color: var(--id-oiltools-dark);
}

.product-thumbnail-grid_child.is-person.c-white .heading-product {
    color: var(--white);
}

/* The arrow sits on the white photo tile, so it is red on every background;
 * .c-white used to turn it white on white. */
.product-thumbnail-hover {
    color: var(--id-oiltools-red);
}

/* Something to see under the pointer: the photo comes a little closer and the
 * arrow steps aside. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-thumbnail-image,
    .product-thumbnail-hover,
    .product-thumbnail-wrapper {
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    .product-thumbnail-grid_child:hover .product-thumbnail-image {
        transform: scale(1.06);
    }

    .product-thumbnail-grid_child:hover .product-thumbnail-hover {
        transform: translateX(.35rem);
    }
}

@media (hover: hover) {
    .product-thumbnail-grid_child:hover .product-thumbnail-wrapper {
        border-color: var(--id-oiltools-red);
        box-shadow: 0 1.25rem 2.5rem #00000033;
    }
}

/* Statistics: the big number is red, what it counts is plain dark text. */
.track-record_child .usp-heading,
.track-record_child p {
    color: var(--id-oiltools-dark);
}

/* ---------------------------------------------------------------------------
 * Contact row on a dark background
 *
 * The white card with the address inherited the section's white text, and the
 * form labels kept their dark grey.
 * ------------------------------------------------------------------------- */
.contact-details {
    color: var(--font-color);
}

.section.c-dark-bg .field-label {
    color: var(--white);
}

/* ---------------------------------------------------------------------------
 * Category page and "related" block
 *
 * The export stacked three bottom margins under the last grid (the grid, its
 * wrapper and the section padding). The section padding is enough.
 * ------------------------------------------------------------------------- */
.cms-category .productpage-wrapper,
.cms-related .productpage-wrapper {
    margin-bottom: 0;
}

.cms-category .productpage-bottom:last-child .products-thumbnail-grid,
.cms-related .other-products-thumbnail-grid {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * Dark from top to bottom at the client's request, without the "About us"
 * column and the second logo. Two columns remain.
 * ------------------------------------------------------------------------- */
.footer {
    border-top: 0;
}

.footer-top {
    background-color: var(--id-oiltools-dark);
    color: var(--white);
    padding-top: 2.5rem;
}

.footer-grid.is-two {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 767px) {
    .footer-grid.is-two { grid-template-columns: 1fr; }
}

.footer-top .footer-product_link,
.footer-top .footer-contant {
    color: var(--white);
}

.footer-top .footer-product_link:hover,
.footer-top .footer-contant:hover {
    color: var(--id-oiltools-red);
    text-decoration: none;
}

.footer-top .footer-product_link .w-embed,
.footer-top .footer-contant .w-embed {
    color: var(--id-oiltools-red);
}

.footer-bottom {
    border-top-color: #ffffff26;
}

/* LinkedIn: just the mark, in the house red. */
.footer-linkedin {
    background-color: var(--id-oiltools-red);
    transition: background-color .2s;
}

.footer-linkedin:hover {
    background-color: var(--hover);
}

/* ---------------------------------------------------------------------------
 * Navigation
 *
 * A menu item with a submenu and a link of its own: the name is the link, the
 * chevron is a separate button that opens the submenu.
 * ------------------------------------------------------------------------- */
.cms-nav-label {
    color: inherit;
    font-weight: inherit;
}

.cms-nav-label:hover {
    color: var(--id-oiltools-red);
    text-decoration: none;
}

.cms-nav-chevron {
    display: flex;
    align-items: center;
    padding: .25rem;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.cms-nav-chevron .icon_dropdown-nav {
    margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Search results
 * ------------------------------------------------------------------------- */
.zoekresultaten {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

.zoekresultaat {
    display: block;
}

.zoekresultaat:hover {
    text-decoration: none;
}

.zoekresultaat:hover .text-weight-bold {
    color: var(--id-oiltools-red);
}

.zoekresultaat-text {
    margin-bottom: 0;
}