/* ============================================================
   Dave's autopoetser en detailer — brand overrides v2 (2026-07-05)
   Richting: Vitesse-kleuren op klantverzoek — ZWART + GEEL.
   Alleen het kleurenpalet; geen clublogo's, clubnaam of club-uitingen
   (merkenrecht). Template-eigen gele sectietinten blijven van kracht.
   Typografie: Google Sans (koppen 700, body 400/500) — operatorkeuze 2026-07-05.
   Logo volgt van klant; interim tekstlogo.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap');

:root {
  --dg-ink: #131313;         /* zwart — donkere secties / knoppen */
  --dg-geel: #ffdd00;        /* accent (vlakken, separators, CTA) */
  --dg-geel-hover: #ffd400;
  --dg-goud-tekst: #b99a00;  /* geel-accent dat leesbaar blijft op licht */
}

/* Typografie */
body { font-family: 'Google Sans', sans-serif; }
.alt-font { font-family: 'Google Sans', sans-serif; font-weight: 700; letter-spacing: -.5px; }

/* Accenten: geel */
.text-base-color      { color: var(--dg-goud-tekst) !important; }
.bg-base-color        { background-color: var(--dg-geel) !important; }
.border-color-base-color { border-color: var(--dg-geel) !important; }
.bg-gradient-base-transparent { background: linear-gradient(to top, rgba(19,19,19,.88), rgba(19,19,19,0)) !important; }
.bg-dark-gray { background-color: var(--dg-ink) !important; }

/* Knoppen: zwart, hover = geel met zwarte tekst */
.btn-dark-gray { background-color: var(--dg-ink); border-color: var(--dg-ink); }
.btn-dark-gray:hover { background-color: var(--dg-geel-hover); border-color: var(--dg-geel-hover); color: var(--dg-ink); }

/* Hero-CTA: geel statement */
#home .btn-white { background-color: var(--dg-geel); border-color: var(--dg-geel); color: var(--dg-ink); }
#home .btn-white:hover { background-color: #fff; color: var(--dg-ink); }

/* Dienst-iconen */
.dg-service-icon { font-size: 44px; line-height: 70px; color: var(--dg-ink); position: relative; z-index: 1; margin-top: 35px; display: inline-block; }

/* Tekst-logo (interim tot klantlogo geleverd is) */
.dg-logo { font-family: 'Google Sans', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 1px; line-height: 1; color: inherit; text-transform: uppercase; }
.dg-logo small { display: block; font-family: 'Google Sans', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 2.5px; opacity: .75; margin-top: 3px; text-transform: uppercase; }
.navbar-brand .dg-logo { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.navbar-brand .dg-logo small { color: var(--dg-geel); opacity: 1; }
footer .dg-logo { color: #fff; }
footer .dg-logo small { color: var(--dg-geel); opacity: 1; }

/* Hero-leesbaarheid op fotografie */
#home .opacity-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.55)); }
#home .container { position: relative; z-index: 1; }

/* Footer: zwart met gele gloed */
footer.footer-light.cover-background { background-image: linear-gradient(160deg, #131313 0%, #2e2a00 170%) !important; }

/* Mobiele nav: witte balk -> donker tekstlogo, gele subregel donkerder */
@media (max-width: 991px) {
  .navbar-brand .dg-logo { color: var(--dg-ink); text-shadow: none; }
  .navbar-brand .dg-logo small { color: var(--dg-goud-tekst); }
}

/* Decoratief achtergrondwoord "Renkum" (about): Google Sans is breder dan de
   oude condensed font -> woord liep onder de foto door en werd afgekapt.
   Kleiner + achter de content, volledig leesbaar links. */
.fs-200.position-absolute.text-base-color { font-size: 120px !important; letter-spacing: -2px !important; z-index: 0; top: 60px !important; opacity: .55; }
@media (max-width: 991px) { .fs-200.position-absolute.text-base-color { font-size: 80px !important; } }

/* About: tweede (vierkante) foto had geen breedte-limiet (origineel leunde op
   natuurlijke 375px-beeldbreedte; onze foto is 1024px) en bedekte de eerste.
   Terug naar bedoelde hoek-overlap. */
.position-absolute.right-15px.bottom-minus-60px { width: 44%; }