/* ============================================================================
   wf-merk-sales.css — dunne aanpassingslaag op de huisstijl.

   De huisstijl zelf staat in WebfixCMS en wordt bij elke build 1:1 gekopieerd:
     assets/css/wf-2026-system.css   (logo's, woordmerken, knoppen, tokens)
     assets/css/flows.css            (Flows-headers en modal-headers)
   Die twee bestanden worden NOOIT hier of elders overschreven. Wil je een
   merkcomponent anders, pas dat aan in /Admin/Stijlgids en draai de build.

   In dit bestand staat alleen wat de saleswebsite echt anders nodig heeft dan
   een CMS-scherm. Elke regel heeft een reden erbij. Blijft die reden weg, dan
   hoort de regel hier niet.
   ========================================================================== */

/* ---------------------------------------------------------------- merkbalk --
   Reden: de merkbalk bestaat in het CMS alleen binnen de factuur- en
   e-mailsjablonen, met vaste pixelmaten voor afdruk. Op een responsieve
   webpagina moet hij kunnen afbreken naar één kolom. De woordmerken zelf
   (.lg-flows, .wf-flows-wm, .wf-ai-mark) komen ongewijzigd uit de Stijlgids. */

.wf-merkbalk {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
   gap: 18px 34px;
   padding-bottom: 26px;
   margin-bottom: 30px;
   border-bottom: 1px solid rgba(1, 16, 61, .08);
}
.wf-merkbalk--donker {
   border-bottom-color: rgba(255, 255, 255, .12);
}
.wf-merkbalk-item {
   display: flex;
   align-items: center;
   gap: 12px;
}
.wf-merkbalk-wm {
   font-size: 21px;
}
.wf-merkbalk-div {
   flex: none;
   width: 1px;
   height: 15px;
   background: rgba(1, 16, 61, .22);
}
.wf-merkbalk--donker .wf-merkbalk-div {
   background: rgba(255, 255, 255, .32);
}
.wf-merkbalk-slogan {
   font-size: 13px;
   color: #8a93a3;
}
.wf-merkbalk--donker .wf-merkbalk-slogan {
   color: rgba(255, 255, 255, .70);
}
@media (max-width: 640px) {
   .wf-merkbalk {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
   }
   .wf-merkbalk-wm {
      font-size: 19px;
   }
}

/* ------------------------------------------------------- bedrijfsgegevens --
   Reden: de vier kolommen adres/contact/algemeen/bank komen van de factuur,
   waar ze met inline stijlen en vaste breedtes staan. Hier als raster dat
   inklapt. De roze koptekst is --wf-title uit de Stijlgids. */

.wf-fgegevens {
   display: grid;
   gap: 24px 30px;
   grid-template-columns: repeat(2, 1fr);
   padding: 30px 0;
}
@media (min-width: 900px) {
   .wf-fgegevens {
      grid-template-columns: repeat(4, 1fr);
   }
}
.wf-fgegevens-kop {
   margin-bottom: 8px;
   font-family: 'Quicksand', sans-serif;
   font-weight: 700;
   font-size: 10.5px;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--wf-title, #a12359);
}
.wf-fgegevens-tekst {
   font-size: 13px;
   line-height: 1.75;
   color: #5F6368;
}
.wf-fgegevens-tekst a {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
}
.wf-fgegevens-tekst a:hover {
   color: var(--wf-blue, #32bcee);
}
.wf-fgegevens--donker .wf-fgegevens-kop {
   color: #f4a9c6;
}
.wf-fgegevens--donker .wf-fgegevens-tekst {
   color: rgba(245, 245, 250, .72);
}
.wf-nowrap {
   white-space: nowrap;
}

/* --------------------------------------------------------- reviewscore ----
   Reden: bestaat niet in het CMS; is een verkoopelement. Staat hier omdat het
   de merkkleuren gebruikt en bij de footer hoort. */

.wf-fscore {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-decoration: none;
}
.wf-fscore-cijfer {
   font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
   color: #fff;
}
.wf-fscore-tekst {
   font-size: 13px;
   color: rgba(245, 245, 250, .60);
}
.wf-fscore:hover .wf-fscore-tekst {
   color: rgba(245, 245, 250, .90);
}
.wf-fscore--licht .wf-fscore-cijfer {
   color: var(--wf-title, #a12359);
}
.wf-fscore--licht .wf-fscore-tekst {
   color: #6b7280;
}
.wf-fscore--licht:hover .wf-fscore-tekst {
   color: #202124;
}

/* ------------------------------------------------------ Flows-header breed --
   Reden: .wf-flows-header uit flows.css is gemaakt voor een CMS-kolom van
   circa 900px. Op een verkooppagina van 1200px wordt de tekstregel dan te
   lang om comfortabel te lezen, en mag de header wat royaler ademen. */

.wf-sectie .wf-flows-header {
   padding: 38px 42px;
}
.wf-sectie .wf-flows-header-sub {
   max-width: 640px;
}
@media (max-width: 640px) {
   .wf-sectie .wf-flows-header {
      padding: 26px 22px;
      border-radius: 20px;
   }
   .wf-sectie .wf-flows-header-logo {
      width: 54px;
      height: 54px;
      border-radius: 16px;
   }
   .wf-sectie .wf-flows-header-logo img {
      width: 32px;
      height: 32px;
   }
}

/* --------------------------------------------------- modal-header als kaart --
   Reden: in het CMS zit .wf-flows-modalhead altijd bovenop een modal met
   afgeronde bovenhoeken. Op de saleswebsite gebruiken we hem als kop van een
   kaart in de pagina, dus met een bijbehorend wit onderdeel eronder. */

.wf-merkkaart {
   border: 1px solid var(--wfs-line, #e6e9f2);
   border-radius: 18px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 4px 24px rgba(1, 16, 61, .06);
}
.wf-merkkaart .wf-flows-modalhead {
   border-radius: 0;
}
.wf-merkkaart-body {
   padding: 30px 28px;
}
@media (max-width: 640px) {
   .wf-merkkaart-body {
      padding: 24px 20px;
   }
}

/* ------------------------------------------------------- Flows-lockup groot --
   Reden: de lockup (.lg-uni) staat in de Stijlgids op 56px voor een
   showcasekaart. In een sectiekop op de saleswebsite is dat te dominant. */

.wf-lockup {
   justify-content: center;
   margin-bottom: 18px;
}
.wf-lockup .lg-uni-dia {
   width: 44px;
   height: 44px;
}
.wf-lockup .lg-uni-fl {
   font-size: 38px;
}
@media (max-width: 640px) {
   .wf-lockup .lg-uni-dia {
      width: 34px;
      height: 34px;
   }
   .wf-lockup .lg-uni-fl {
      font-size: 30px;
   }
}

/* ------------------------------------------------------ AI-woordmerk in kop --
   Reden: het SVG-woordmerk is height:1em; in een sectielabel moet het optisch
   met de rest van de regel uitlijnen. */

.wf-ai-kop {
   display: inline-flex;
   align-items: center;
   gap: 10px;
}
.wf-ai-kop .wf-ai-svg {
   height: 1.05em;
   position: relative;
   top: .06em;
}

/* -------------------------------------------------------- platte tekstknop --
   Reden: in de grijze footer staat een chatknop tussen gewone links; die moet
   zich als link gedragen, niet als knop. */

.wf-tekstknop-plat {
   padding: 0;
   border: 0;
   background: none;
   color: inherit;
   font: inherit;
   cursor: pointer;
   text-align: left;
}
.wf-tekstknop-plat:hover {
   color: var(--wf-blue, #32bcee);
}
.wf-flegal {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 16px;
   justify-content: flex-start;
}
@media (min-width: 768px) {
   .wf-flegal {
      justify-content: flex-end;
   }
}

/* -------------------------------------------------- contactregel in de footer --
   Reden: e-mail en chat staan in de donkere footer onder het logo, als één
   consistente regel. Bestaat niet in het CMS. */

.wf-fcontact {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
   padding: 0;
   border: 0;
   background: none;
   color: rgba(245, 245, 250, .82);
   font: inherit;
   font-size: 15px;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   transition: color .2s;
}
.wf-fcontact:hover {
   color: #fff;
}
.wf-fcontact i {
   color: var(--wf-pink, #da176c);
   font-size: 15px;
}

/* De merkbalk wat ruimer centreren; space-evenly zette de twee merken te ver
   uit elkaar op een breed scherm. */
.wf-merkbalk {
   justify-content: center;
   gap: 18px 72px;
}

/* ------------------------------------------------------------- merkkop-kaart --
   Reden: in het CMS staat de tekstrij van .wf-flows-modalhead in inline stijlen
   (de Stijlgids is een demo). Hier als vaste klassen, zodat de opbouw op elke
   pagina gelijk is. Kleuren en achtergronden komen ongewijzigd uit flows.css. */

.wf-merkkop-tekst {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 10px;
}
.wf-merkkop-wm {
   font-size: 23px;
}
.wf-merkkop-div {
   flex: none;
   width: 1px;
   height: 14px;
   background: rgba(255, 255, 255, .5);
}
/* Het AI-woordmerk is een SVG met height:1em; hier op de maat van het
   Flows-woordmerk gezet en wit, want de header is donker. */
.wf-merkkop-ai {
   display: inline-flex;
   align-items: center;
   font-size: 17px;
   color: #fff;
}
@media (max-width: 560px) {
   .wf-merkkop-wm {
      font-size: 19px;
   }
   .wf-flows-modalhead-tag {
      font-size: 12px;
   }
}

/* ------------------------------------------------------- diamant op prijskaart --
   Reden: de prijskaarten gebruikten losse template-iconen die niet uit onze
   huisstijl kwamen. Nu de diamant, via mask zodat hij de merkgradient krijgt op
   een witte kaart en wit wordt op de uitgelichte kaart. */

.wf-prijs-diamant {
   display: block;
   width: 42px;
   height: 42px;
   background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
   -webkit-mask: url('../img/logo/webfix-diamond.png') center/contain no-repeat;
           mask: url('../img/logo/webfix-diamond.png') center/contain no-repeat;
}
.wf-prijs-diamant--licht {
   background-image: none;
   background-color: #fff;
}

/* De lockup is .lg-uni (inline-flex) en zou naast de volgende regel doorlopen;
   op een eigen regel gecentreerd staat hij rustiger boven de sectietitel. */
.wf-lockup {
   display: flex;
   width: 100%;
}