/*------------------------------------------------------------------
[Pixalab eigen stijlen]
Dit bestand laadt NA style.css (het gekochte Oule template) en bevat
alle Pixalab specifieke aanpassingen. Reden: style.css is een
leveranciersbestand van 5000+ regels. Door eigen aanpassingen hier te
bundelen blijft duidelijk wat van ons is en wat van het template,
en gaat er niets verloren bij een template update.

INHOUD
  1. Merkvariabelen
  2. Pagina kop (page-title) basis en varianten
  3. Opsommingslijsten (centrale stijl voor de hele site)
  4. Genummerde stappenlijst
  5. Herstel van verkeerde afbeeldingspaden
  6. CTA tekst leesbaar maken
  7. Dienstenpagina layout (uitlijning tekstkolom en secties)
  8. CTA blok (vaste, niet omvallende opbouw)
  9. Footer onderregel
 10. Uitgelicht blok (foto naast tekst)
 11. Ritme tussen de secties
-------------------------------------------------------------------*/


/* ==========================================================
   1. MERKVARIABELEN
   ========================================================== */
:root {
    --pxl-paars: #48146E;
    --pxl-donkerblauw: #283a5e;
    --pxl-tekst: #4f5d75;
    --pxl-kop-hoogte: 300px;
}


/* ==========================================================
   2. PAGINA KOP (page-title)
   ==========================================================
   In style.css bestond geen basisregel voor .page-title zelf: hoogte,
   positie en uitlijning stonden alleen in de losse varianten
   (.page-title-contact, .page-title-about, enzovoort). Ontbrak zo'n
   variant, dan klapte de hele kop in en verdween de foto. Dat is wat
   er op de pagina Over ons gebeurde. Deze basisregel maakt de kop
   zelfdragend: een ontbrekende of nog niet geladen variant levert nu
   een nette merkkleur kop op in plaats van een kapotte pagina.
   ========================================================== */
.page-title {
    position: relative;
    width: 100%;
    min-height: var(--pxl-kop-hoogte);
    text-align: center;
    background-color: #fdeae3;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Herstel van de kopfoto op Over ons, Cookiebeleid, Privacyverklaring
   en Algemene voorwaarden. */
.page-title-about {
    background-image: url("../images/homepage/homepage-img1.png");
}

/* De variant voor de website test verwees naar een afbeelding die niet
   bestaat (assets/images/website_test/page-website-test-header.jpg).
   Tot die foto er is tonen we een merkverloop in plaats van een lege
   kop met een 404 in de netwerklog. */
.page-title-website-test {
    background-image: linear-gradient(120deg, #fdeae3 0%, #f6e4f0 100%);
}

/* SEO gebruikte tot nu toe dezelfde class als Online marketing
   (page-title-marketing), en dus dezelfde kopfoto en dezelfde drie
   bodyfoto's uit assets/images/online_marketing/. Wie beide pagina's
   bekijkt dacht daardoor dat er iets mis was gegaan. Eigen SEO-foto's
   staan in productie via Iris; tot die er zijn toont deze eigen class
   een merkverloop in plaats van de geleende Online marketing foto. */
.page-title-seo {
    background-image: linear-gradient(120deg, #f6e4f0 0%, #fdeae3 100%);
}

/* De twee foto's in de SEO-tekst zijn letterlijk dezelfde bestanden als
   op Online marketing (assets/images/online_marketing/page-marketing-
   img1.jpg en img2.jpg) omdat er nooit eigen SEO-fotografie is gemaakt.
   Wie beide pagina's naast elkaar bekijkt ziet dus exact dezelfde foto.
   Iris levert eigen SEO-beelden; tot die er zijn krijgen deze twee
   foto's op de SEO-pagina een eigen duotone in de merkkleuren, zodat ze
   niet meer identiek ogen aan Online marketing. Zodra de eigen foto's
   in assets/images/seo/ staan: src in seo.php aanpassen en deze twee
   regels verwijderen. */
.seo-tijdelijk-beeld {
    filter: grayscale(1) contrast(1.05);
}

.seo-tijdelijk-holder {
    position: relative;
    overflow: hidden;
}

.seo-tijdelijk-holder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(72, 20, 110, 0.55), rgba(40, 58, 94, 0.45));
    mix-blend-mode: multiply;
    pointer-events: none;
}

.page-title h1 {
    font-size: 40px;
    font-size: 2.5rem;
    color: var(--pxl-donkerblauw);
    margin-bottom: 0.3em;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .page-title h1 {
        font-size: 35px;
        font-size: 2.1875rem;
    }
}

@media (max-width: 767px) {
    .page-title h1 {
        font-size: 30px;
        font-size: 1.875rem;
    }
}


/* ==========================================================
   3. OPSOMMINGSLIJSTEN
   ==========================================================
   Voor deze aanpassing had de site drie verschillende lijststijlen door
   elkaar: een FontAwesome pijltje, een gedraaid blokje en op een aantal
   pagina's helemaal geen stijl (dan toonde de browser zijn eigen zwarte
   bolletjes). Hieronder staat één stijl voor alle inhoudelijke lijsten:
   een klein, subtiel bolletje in merkkleur. Geen vinkje meer: dat oogde
   te zwaar en de cirkel eromheen was te groot.

   Wil je later een andere grootte, pas dan alleen de width/height van
   het bolletje hieronder aan. De rest volgt vanzelf.

   Bewust NIET geraakt: de adresgegevens op Contact (.contact-details),
   het menu, de breadcrumb en de sliders. Die hebben een eigen opmaak.
   ========================================================== */
.pxl-lijst,
.service-single-section .service-content ul:not(.process-list):not(.slick-dots),
.service-single-section .project-content ul:not(.process-list):not(.slick-dots),
.project-single-section .service-content ul:not(.process-list):not(.slick-dots),
.project-single-section .project-content ul:not(.process-list):not(.slick-dots),
.about-text-section .about-text ul,
.about-pg-section .col ul:not(.slick-dots),
.related-services ul,
.list-style-one {
    list-style: none;
    padding-left: 0;
    margin: 28px 0;
}

.pxl-lijst > li,
.service-single-section .service-content ul:not(.process-list):not(.slick-dots) > li,
.service-single-section .project-content ul:not(.process-list):not(.slick-dots) > li,
.project-single-section .service-content ul:not(.process-list):not(.slick-dots) > li,
.project-single-section .project-content ul:not(.process-list):not(.slick-dots) > li,
.about-text-section .about-text ul > li,
.about-pg-section .col ul:not(.slick-dots) > li,
.related-services ul > li,
.list-style-one > li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    line-height: 1.7;
    color: var(--pxl-tekst);
}

.pxl-lijst > li:last-child,
.service-single-section .service-content ul:not(.process-list):not(.slick-dots) > li:last-child,
.about-pg-section .col ul:not(.slick-dots) > li:last-child,
.related-services ul > li:last-child,
.list-style-one > li:last-child {
    margin-bottom: 0;
}

/* Het bolletje zelf: klein en subtiel, verticaal gecentreerd op de
   tekst. Vervangt het pijltje en het blokje uit het template. */
.pxl-lijst > li::before,
.service-single-section .service-content ul:not(.process-list):not(.slick-dots) > li::before,
.service-single-section .project-content ul:not(.process-list):not(.slick-dots) > li::before,
.project-single-section .service-content ul:not(.process-list):not(.slick-dots) > li::before,
.project-single-section .project-content ul:not(.process-list):not(.slick-dots) > li::before,
.about-text-section .about-text ul > li::before,
.about-pg-section .col ul:not(.slick-dots) > li::before,
.related-services ul > li::before,
.list-style-one > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background-color: var(--pxl-paars);
    background-image: none;
    /* Neutraliseert het pijlteken en het blokje uit style.css. */
    font-family: inherit;
    font-size: 0;
    transform: none;
    transition: transform 0.2s ease;
}

/* Kleine attentie bij muisbeweging over een lijstitem. */
.pxl-lijst > li:hover::before,
.service-single-section .service-content ul:not(.process-list):not(.slick-dots) > li:hover::before,
.about-pg-section .col ul:not(.slick-dots) > li:hover::before,
.related-services ul > li:hover::before,
.list-style-one > li:hover::before {
    transform: scale(1.4);
}

@media (max-width: 767px) {
    .pxl-lijst > li,
    .service-single-section .service-content ul:not(.process-list):not(.slick-dots) > li,
    .about-pg-section .col ul:not(.slick-dots) > li,
    .related-services ul > li,
    .list-style-one > li {
        padding-left: 20px;
    }
}


/* ==========================================================
   4. GENUMMERDE STAPPENLIJST
   ==========================================================
   Een werkwijze in stappen leest beter met cijfers dan met bolletjes.
   Zet class="process-list" op de ul en de nummering gaat vanzelf,
   zonder dat de cijfers in de tekst zelf hoeven te staan.

   BELANGRIJK — waarom hier !important staat:
   Het gekochte template (style.css) heeft op deze exacte plek
   (.service-single-section .service-content > ul li) een eigen,
   specifiekere regel die zonder !important gewoon wint: die zet er een
   FontAwesome pijltje overheen in dezelfde paarse kleur als de
   cirkelachtergrond, en verkleint de padding-left van 46px naar 30px.
   Resultaat was een cijfer dat onzichtbaar werd (paars-op-paars) en een
   cirkel die over de tekst heen viel — precies het "enorme bolletje"
   dat fout leek maar in werkelijkheid een verborgen pijltje was.
   ========================================================== */
.process-list {
    list-style: none;
    padding-left: 0;
    margin: 30px 0;
    counter-reset: pxl-stap;
}

.process-list > li {
    position: relative;
    padding-left: 40px !important;
    margin-top: 0 !important;
    margin-bottom: 16px;
    line-height: 1.7;
    color: var(--pxl-tekst);
    counter-increment: pxl-stap;
}

.process-list > li:last-child {
    margin-bottom: 0;
}

.process-list > li::before {
    content: counter(pxl-stap) !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--pxl-paars);
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600;
    font-family: inherit !important;
    transform: none;
}

@media (max-width: 767px) {
    .process-list > li {
        padding-left: 36px !important;
    }

    .process-list > li::before {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 11px !important;
    }
}


/* ==========================================================
   5. HERSTEL VAN VERKEERDE AFBEELDINGSPADEN
   ==========================================================
   De versie van style.css die op de server staat verwijst voor de
   hero op de homepage naar images/slider/homepage-img1.png. Die map
   bevat alleen de vormen van de slider, niet deze foto: de server
   geeft er een 404 op en de hero blijft leeg. De foto staat in
   images/homepage/. Deze regel herstelt dat en blijft ook kloppen
   nadat de bijgewerkte style.css is geplaatst.
   ========================================================== */
.hero-static-image .hero-image {
    background-image: url("../images/homepage/homepage-img1.png");
}


/* ==========================================================
   6. CTA TEKST LEESBAAR MAKEN
   ==========================================================
   Op vier pagina's (websitebouw, app-bouw, online-marketing,
   social-media) stond een extra paragraaf onder de CTA-kop met
   inline style="color:#fff": witte tekst op de lichte, bijna
   witte achtergrond van .cta-text (rgba(232,145,105,0.1)).
   Onleesbaar. Deze regel geeft de paragraaf de gewone, leesbare
   tekstkleur. De inline witte kleur is uit de pagina's gehaald.
   ========================================================== */
.cta-section .cta-text p {
    color: var(--pxl-tekst);
    margin-bottom: 20px;
}


/* ==========================================================
   7. DIENSTENPAGINA LAYOUT
   ==========================================================
   De vijf dienstenpagina's (websitebouw, app bouw, online
   marketing, social media, SEO) zetten hun tekst in een kolom
   van 8 van de 12 (.col-md-8). In het gekochte template hoorde
   daarnaast een zijbalk te staan. Die is er nooit gekomen,
   dus bleef een derde van de pagina leeg. De secties eronder
   (Meer diensten en het CTA blok) staan wel over de volle
   breedte. Daardoor verspringt de linkermarge halverwege de
   pagina zichtbaar naar links.

   Eerdere oplossing gaf deze drie secties een eigen, smallere
   "leesbreedte" van 830px. Dat loste de lege ruimte rechts op,
   maar maakte de body smaller dan de standaard .container die
   overal elders op de site wordt gebruikt (header, footer,
   navigatie: 750/970/1170px). Daardoor liep de linkerrand van
   de body niet meer gelijk met de footer eronder.

   De footer is leidend: deze gebruikt gewoon de standaard
   .container, dus de body moet daar even breed aan zijn.
   Hieronder wordt de tekstkolom daarom gecentreerd binnen de
   normale, onaangepaste .container breedte en vult ze die
   volledig, zonder eigen max-width. Zo is de body precies zo
   breed als de footer, en is er nog steeds geen lege kolom
   rechts.
   ========================================================== */
.service-single-section .row > .col-md-8 {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* De tekstkolom vult de standaard .container volledig, anders
   zou hij nog eens tot twee derde krimpen. */
@media (min-width: 992px) {
    .service-single-section .row > .col-md-8 {
        width: 100%;
    }
}


/* ==========================================================
   8. CTA BLOK
   ==========================================================
   Het CTA blok onderaan elke dienstenpagina bevat drie losse
   elementen: een kop, een zin en een knop. In style.css staan
   die naast elkaar via flexbox met space-between, waarbij
   alleen de kop mag krimpen (flex: 1). Zodra de zin wat langer
   is duwt die de kop samen tot een kolom van nog geen honderd
   pixels. Op websitebouw brak de kop daardoor af tot een woord
   per regel: Klaar / voor / een / website / die / werkt?

   Hieronder staat een opbouw die niet kan omvallen: kop, zin
   en knop onder elkaar, links uitgelijnd, met dezelfde ruimte
   op elke pagina. Zo is het blok op alle vijf de pagina's
   identiek van vorm en hoogte, ongeacht de lengte van de tekst.
   ========================================================== */
.cta-section .cta-text {
    display: block;
    padding: 55px 50px;
    border-radius: 4px;
    text-align: left;
}

.cta-section .cta-text h2 {
    font-size: 30px;
    line-height: 1.35em;
    margin: 0 0 12px;
    color: var(--pxl-donkerblauw);
}

.cta-section .cta-text p {
    max-width: 560px;
    margin: 0 0 28px;
}

.cta-section .cta-text .theme-btn-s4 {
    display: inline-block;
    position: static;
    transform: none;
    -webkit-transform: none;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .cta-section .cta-text {
        padding: 40px 25px;
        text-align: left;
    }

    .cta-section .cta-text h2 {
        font-size: 24px;
    }

    .cta-section .cta-text .theme-btn-s4 {
        white-space: normal;
    }
}


/* ==========================================================
   9. FOOTER ONDERREGEL
   ==========================================================
   De copyrightregel en de juridische links staan als twee losse
   paragrafen in de footer. Het template geeft de copyrightregel
   een float, waardoor de zin zonder enige ruimte tegen de eerste
   link aan plakte: All rights reserved.Privacyverklaring.
   ========================================================== */
.site-footer .lower-footer .copyright {
    padding-right: 16px;
}

.site-footer .lower-footer .legal-links {
    margin: 0;
}

@media (max-width: 767px) {
    .site-footer .lower-footer .copyright {
        padding-right: 0;
    }

    .site-footer .lower-footer .legal-links {
        margin-top: 8px;
    }
}


/* ==========================================================
   10. UITGELICHT BLOK (foto naast tekst)
   ==========================================================
   Het blok .img-with-text zet de foto op float: left met een
   breedte van 50 procent, maar sluit die zwevende kolom nooit
   af. Daardoor liep niet alleen de bijbehorende tekst om de
   foto heen, maar ook alles wat erna kwam: alinea's braken
   midden in een zin uit de kolom en de kop Onze werkwijze
   belandde op sommige pagina's naast de foto in plaats van
   eronder.

   Hieronder wordt het blok een echt tweekoloms geheel dat
   zichzelf afsluit. Alles wat erna komt begint weer netjes
   op volle breedte.
   ========================================================== */
.service-single-section .img-with-text,
.project-single-section .img-with-text {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 10px 0 35px;
}

.service-single-section .img-with-text .img-holder,
.project-single-section .img-with-text .img-holder {
    width: 50%;
    flex: 0 0 50%;
    float: none;
    margin-right: 0;
    padding-top: 0;
}

/* De foto's in dit blok hebben per pagina een andere verhouding.
   Daardoor was het blok op websitebouw fors hoger dan elders en
   zweefde de tekst met veel lucht eronder. Een vaste verhouding
   maakt het blok op alle vijf de pagina's even hoog. */
.service-single-section .img-with-text .img-holder img,
.project-single-section .img-with-text .img-holder img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.service-single-section .img-with-text .img-text,
.project-single-section .img-with-text .img-text {
    flex: 1;
    padding-top: 0;
}

.service-single-section .img-with-text .img-text h3,
.project-single-section .img-with-text .img-text h3 {
    margin-top: 0;
}

@media (max-width: 767px) {
    .service-single-section .img-with-text,
    .project-single-section .img-with-text {
        display: block;
    }

    .service-single-section .img-with-text .img-holder,
    .project-single-section .img-with-text .img-holder {
        width: 100%;
        margin: 0 0 25px;
    }
}


/* ==========================================================
   11. RITME TUSSEN DE SECTIES
   ==========================================================
   De tekstsectie sluit af met de onderpadding van
   .section-padding en direct daarna begint Meer diensten met
   nog eens een eigen blok ruimte. Bij elkaar gaf dat een gat
   waar de pagina uit elkaar lijkt te vallen. Hieronder loopt
   de tekst door in Meer diensten en houdt het CTA blok zijn
   eigen, iets ruimere aanloop.
   ========================================================== */
.service-single-section.section-padding {
    padding-bottom: 40px;
}

.related-services.section-padding {
    padding-bottom: 45px;
}

.related-services h3 {
    margin-top: 0;
}