/* =============================================================================
   rp-base.css  -  ResalePartners: centrale stijl-laag (single source of truth)
   -----------------------------------------------------------------------------
   ONZE eigen stijl-afspraken en overrides, los van de gegenereerde Divi-CSS
   (core.css / s-*.css / c-*.css). Dit bestand laadt direct NA core.css.

   Wil je iets aanpassen aan een TERUGKEREND element (eyebrow, knop, kleur,
   navigatie, mobiel menu, KPI's)? Doe het HIER, op 1 plek - niet verspreid
   over de genummerde Divi-modules.

   Waarom !important: de Divi-CSS is per-module genummerd (.et_pb_text_10,
   _11, _14 ...) en NIET veilig te herordenen (gelijke specificiteit, volgorde
   bepaalt de cascade). We laten die CSS met rust en overstemmen hier gericht.
   ============================================================================= */

:root{
  /* --- Merkkleuren (BRANDBOOK) --- */
  --rp-green:#a4cb65;     /* gevulde CTA op wit, accenten */
  --rp-purple:#5b38a6;    /* footer, secundaire CTA */
  --rp-ink:#24383f;       /* koppen/tekst op lichte achtergrond */
  --rp-on-dark:#f1f1f1;   /* tekst op donkere/gekleurde vlakken */

  /* --- Typografie --- */
  --rp-font-head:'Poppins',Helvetica,Arial,Lucida,sans-serif;
  --rp-font-body:'Open Sans',Helvetica,Arial,sans-serif;

  /* --- Maten --- */
  --rp-eyebrow-size:16px; /* dunne label boven een kop */
  --rp-radius:10px;       /* knoppen */
}

/* ---------------------------------------------------------------------------
   EYEBROW - de dunne (gewicht 200) label boven een kop.
   Canoniek: 16px. Op diverse pagina's gaf de et-cache 36px (een h1-regel die
   op een h2-element belandde); we trekken alle eyebrows hier gelijk.
   - .rp-eyebrow         -> gebruik dit op NIEUWE pagina's
   - .rp-grid-eyebrow    -> "Ontdek onze krachtigste integraties" (integratie-grid)
   - .rp-post-eyebrow    -> "Van bestelling tot boekhouding" (blog/nieuws-header)
   --------------------------------------------------------------------------- */
.rp-eyebrow,
.rp-grid-eyebrow,
.rp-post-eyebrow{
  font-size:var(--rp-eyebrow-size)!important;
  line-height:1.4em!important;
}

/* ---------------------------------------------------------------------------
   KOP-RITME - subtiele, consistente ademruimte onder H1/H2 in contentmodules.
   Divi zet heading-margins op 0; dit geeft een rustiger ritme (bewust 0.6em).
   --------------------------------------------------------------------------- */
.et_pb_text h1,
.et_pb_text h2{ margin-bottom:.6em!important; }

/* ---------------------------------------------------------------------------
   DESKTOP-NAVIGATIE (>=1400px) - stabiel houden tussen talen.
   Het langste taalmenu (DE) liet de Trial-knop naar een 2e regel springen en
   botste tegen het logo. We houden het menu op EEN regel en geven wat ruimte.
   De dropdown-submenu's blijven verticaal (nowrap mag die niet raken).
   --------------------------------------------------------------------------- */
@media (min-width:1400px){
  #main-header .container{ max-width:1240px; }
  #et-top-navigation #top-menu{ white-space:nowrap; }
  #et-top-navigation #top-menu>li{ padding-right:16px; }
  #et-top-navigation #top-menu .sub-menu{ white-space:normal; }
  #et-top-navigation #top-menu .sub-menu li{ display:block; white-space:normal; }
}

/* ---------------------------------------------------------------------------
   KPI NUMBER-COUNTERS (homepage) - cijfer (.percent) kreeg height:0 + krappe
   line-height, waardoor het getal bovenop de titel viel. Eigen ruimte geven +
   altijd tonen (counters staan standaard op opacity:0 tot Divi's scroll-JS ze
   activeert; op de statische export onbetrouwbaar, cijfers staan hard in HTML).
   --------------------------------------------------------------------------- */
.et_pb_number_counter .percent{ height:auto!important; margin-bottom:14px!important; }
.et_pb_number_counter .percent p{ line-height:1.05!important; }
.et_pb_number_counter{ opacity:1!important; }

/* ---------------------------------------------------------------------------
   TAALSWITCHER - vlaggen iets ruimer van de hamburger (makkelijker aantikken).
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  #rp-langswitch{ margin-right:20px!important; }
}

/* ---------------------------------------------------------------------------
   MOBIEL HAMBURGERMENU - nette fullscreen-overlay i.p.v. smalle dropdown.
   Grote, goed aantikbare items; header blijft bovenaan zichtbaar (hamburger
   sluit het weer). Sub-items (bv. onder Oplossingen) subtieler + ingesprongen.
   --------------------------------------------------------------------------- */
@media (max-width:1399px){
  #et_mobile_nav_menu .et_mobile_menu,
  .et_mobile_menu{
    position:fixed!important;
    top:80px!important; left:0!important; right:0!important;
    width:100vw!important; max-width:100vw!important;
    height:calc(100vh - 80px)!important;
    height:calc(100dvh - 80px)!important;
    max-height:none!important;
    margin:0!important; padding:8px 0 56px!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch;
    background:#fff!important; border:0!important;
    box-shadow:0 14px 30px rgba(0,0,0,.08)!important;
    z-index:9990!important;
  }
  .et_mobile_menu li{ border:0!important; }
  .et_mobile_menu li a{
    display:block!important;
    font-size:18px!important; line-height:1.35!important; font-weight:600!important;
    padding:17px 28px!important;
    border-bottom:1px solid #eef0f2!important;
  }
  .et_mobile_menu .sub-menu li a,
  .et_mobile_menu ul ul li a{
    font-size:16px!important; font-weight:400!important;
    padding-left:46px!important; color:#5a5a5a!important;
  }
}

/* ---------------------------------------------------------------------------
   HOME-LINK (LOGO) klikbaar houden. #et-top-navigation (position:relative voor
   de switcher) overlapt op mobiel de hele headerbreedte en ving de tik op het
   logo op. We tillen alleen de smalle logo-link erbovenuit; hamburger vrij.
   --------------------------------------------------------------------------- */
.logo_container a{ position:relative; z-index:30; }

/* RP: integratie-hero op mobiel. Op desktop = tekst links + categorie-icoon rechts in een
   paarse kaart (clean). Op mobiel verdween het icoon en stond de tekst links met een leeg
   rechtervlak. Hier: gecentreerde kaart met het categorie-icoon bovenaan (licht, voor
   contrast op paars). Alleen <=767px en alleen de integratie-hero (.rp-intg-hero). */
@media (max-width:767px){
  /* hele hero iets minder hoog */
  .rp-intg-hero.et_pb_section{ padding-top:14px!important; }
  .rp-intg-hero .et_pb_row{
    display:flex!important; flex-direction:column!important; align-items:flex-start!important;
    padding:16px 26px 20px!important;            /* kaartje korter */
  }
  .rp-intg-hero .et_pb_row > .et_pb_column{
    width:100%!important; margin:0!important; float:none!important; text-align:left!important;
  }
  /* icoon-kolom (laatste) naar boven */
  .rp-intg-hero .et_pb_row > .et_pb_column:last-child{ order:-1!important; }
  /* alles links uitlijnen */
  .rp-intg-hero .et_pb_text,
  .rp-intg-hero .et_pb_text *{ text-align:left!important; }
  /* categorie-icoon: links, licht, met iets ruimte zodat de eyebrow er net onder valt */
  .rp-intg-hero .et_pb_icon_0{ display:block!important; text-align:left!important; }
  .rp-intg-hero .et_pb_icon_0 .et_pb_icon_wrap{ margin:0 0 30px!important; } /* gelijke ruimte icoon-eyebrow-titel */
  .rp-intg-hero .et_pb_icon_0 .et-pb-icon{ color:#F1F1F1!important; font-size:42px!important; line-height:1!important; }
}

/* RP: kennis-artikelen op mobiel - minder loze ruimte. De hele body zit in 1 Divi-sectie
   met padding:100px, wat veel ruimte gaf tussen de hero en 'Leestijd' en rond de koppen.
   Alleen <=767px, alleen kennis-artikelen (body.rp-kennis); de hero (section_0) blijft. */
@media (max-width:767px){
  body.rp-kennis .et_pb_section:not(.et_pb_section_0){
    padding-top:34px!important; padding-bottom:34px!important;
  }
}

/* RP: integratie-kop "Wat kan de <Naam> integratie?" (dun, 36px). De et-cache gaf 'm
   line-height 19.2px, waardoor bij lange namen de 2e regel over de 1e viel. Nette
   regelhoogte; marker-class rp-intg-heading staat op de et_pb_text-module (alle talen). */
.rp-intg-heading .et_pb_text_inner{ line-height:1.25em!important; }


/* RP: hero-leesbaarheid - tekst over de achtergrondfoto beter leesbaar.
   Alleen op foto-hero's met de .rp-hero marker (niet op solide/paarse hero's).
   1) extra donkere gradient-overlay (fadet naar rechts uit, foto blijft zichtbaar),
   2) subtiele text-shadow op de hero-koppen (niet op blurb-kaarten). */
.rp-hero{position:relative}
.rp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(36,56,63,.38) 0%,rgba(36,56,63,.32) 45%,rgba(36,56,63,.12) 75%,rgba(36,56,63,0) 100%)}
.rp-hero > .et_pb_row{position:relative;z-index:2}
.rp-hero .et_pb_text h1,.rp-hero .et_pb_text h2,.rp-hero .et_pb_text h3,.rp-hero .et_pb_text p{
  text-shadow:0 1px 2px rgba(0,0,0,.40),0 2px 16px rgba(0,0,0,.42)}

/* ===== over-resalepartners team/CTA mobiel (page-id-271) ===== */
/* Team: op mobiel + tablet allemaal in EEN stijl netjes onder elkaar,
   gelijke fotomaat, gecentreerd (de 5-koloms rijen liepen kris-kras uiteen). */
@media (max-width:980px){
  body.page-id-271 .et_pb_section_4 .et_pb_column_1_5{
    width:100%!important;max-width:320px;
    display:block!important;float:none!important;
    margin:0 auto!important;
  }
  body.page-id-271 .et_pb_section_4 .et_pb_team_member{
    text-align:center;margin-bottom:44px!important;
  }
  body.page-id-271 .et_pb_section_4 .et_pb_team_member_image{
    max-width:170px;margin:0 auto 16px!important;
  }
  body.page-id-271 .et_pb_section_4 .et_pb_team_member_image img{
    width:100%!important;height:auto!important;
  }
  /* Paarse CTA-kolom: tekst zat links tegen de rand geplakt (padding-left:0).
     Symmetrische binnenmarge zodat het blok netjes uitgelijnd oogt. */
  body.page-id-271 .et_pb_section_2 .et_pb_column_2_3{
    padding-left:26px!important;padding-right:26px!important;
    box-sizing:border-box;
  }
}