/* =====================================================================
   Borgica Benelux – servicecentrum in de merkstijl (zwart + goud)
   Laden NA css/main.css:  <link rel="stylesheet" href="css/borgica-donker.css">
   Verandert alleen het uiterlijk; inhoud en opbouw van de pagina's blijven gelijk.
   ===================================================================== */

:root {
  --bb-goud: #B99769;
  --bb-goud-licht: #d4b98c;
  --bb-tekst: #d8d8da;
  --bb-tekst-zacht: #a3a3a8;
  --bb-wit: #ffffff;
  --bb-lijn: rgba(255, 255, 255, .08);
  --bb-lijn-goud: rgba(185, 151, 105, .22);
  --bb-vlak: rgba(255, 255, 255, .03);
  --bb-diep: #070707;
}

/* ---------- basis ---------- */
html { background: var(--bb-diep); }
body {
  background: #030303;
  background: linear-gradient(180deg, #020202 0%, #0a090b 60%, #0f0c10 100%) fixed;
  color: var(--bb-tekst);
}
::selection { background: var(--bb-goud); color: #fff; }

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-primary, .uk-article-title {
  color: var(--bb-wit);
  font-family: "Poppins", "Heebo", sans-serif;
}
.uk-heading-primary { color: var(--bb-goud); font-weight: 300; }
.uk-heading-primary.bb-kop-wit { color: var(--bb-wit); }
.uk-article-title { font-weight: 300; }
.uk-article h3 { color: var(--bb-goud-licht); font-weight: 400; margin-top: 1.6em; }
.uk-article h4 { font-weight: 500; margin-top: 1.4em; }
b, strong { color: var(--bb-wit); }

a { color: var(--bb-goud-licht); }
a:hover { color: var(--bb-wit); }
hr, .uk-hr { border-top-color: var(--bb-lijn-goud); }
.uk-text-primary { color: var(--bb-goud) !important; }
.uk-text-lead { color: var(--bb-wit); font-weight: 300; }
.uk-text-muted { color: var(--bb-tekst-zacht) !important; }
.uk-article, .uk-article p, .article-content { color: var(--bb-tekst); line-height: 1.75; }
ul li::marker { color: var(--bb-goud); }

/* ---------- vlakken die nu wit/grijs zijn ---------- */
.uk-background-muted, .uk-section-muted, .uk-section-default { background: transparent !important; }

/* ---------- achtergrondlijnen (zelfde als website en app; laag wordt geplaatst door js/borgica-thema.js) ---------- */
.bb-lijnen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bb-lijnen > div { position: absolute; top: -20%; right: -20%; bottom: -20%; left: -20%; transform: rotate(-18deg); }
.bb-lijnen span {
  position: absolute; left: -40%; width: 60%; height: 1px;
  background: linear-gradient(90deg, rgba(185, 151, 105, 0), rgba(185, 151, 105, .45), rgba(185, 151, 105, 0));
  animation: bbLijn 16s linear infinite;
}
.bb-lijnen span:nth-child(1) { top: 32%; animation-duration: 19s; animation-delay: -3s; }
.bb-lijnen span:nth-child(2) { top: 55%; animation-duration: 23s; animation-delay: -11s; opacity: .7; }
.bb-lijnen span:nth-child(3) { top: 74%; animation-duration: 27s; animation-delay: -17s; opacity: .5; }
@keyframes bbLijn { from { transform: translateX(0); } to { transform: translateX(230%); } }
@media print { .bb-lijnen { display: none; } }
@media (prefers-reduced-motion: reduce) { .bb-lijnen span { animation: none; } }
body > nav, body > section, body > footer, body > .uk-container { position: relative; z-index: 1; }

/* ---------- bovenbalk ---------- */
nav.uk-background-muted { border-bottom: 1px solid var(--bb-lijn); }
.uk-navbar-item.uk-logo { padding-top: 16px; padding-bottom: 12px; }
.uk-navbar-container:not(.uk-navbar-transparent) { background: transparent; }
.uk-navbar-left > span { color: var(--bb-tekst-zacht); letter-spacing: .06em; }
.uk-navbar-left > span b { color: var(--bb-goud); font-weight: 600; }
.uk-navbar-nav > li > a { color: var(--bb-tekst); }
.uk-navbar-nav > li > a.uk-button-default {
  color: var(--bb-wit);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  text-transform: none;
  min-height: 44px;
  margin-left: 10px;
  transition: background .25s ease, border-color .25s ease;
}
.uk-navbar-nav > li > a.uk-button-default:hover { background: var(--bb-goud); border-color: var(--bb-goud); position: relative; z-index: 1; }
/* knoppen rechtsboven als één geheel: eerste linksonder rond, tweede rechtsboven rond */
.uk-navbar-nav > li + li > a.uk-button-default { margin-left: -1px; }
.uk-navbar-nav > li:first-child > a.uk-button-default { border-radius: 0 0 0 25px; }
.uk-navbar-nav > li:last-child > a.uk-button-default { border-radius: 0 25px 0 0; }
.uk-navbar-nav > li:only-child > a.uk-button-default { border-radius: 0 25px 0 25px; }
.uk-navbar-toggle { color: var(--bb-wit); }

/* ---------- vaste zoekbalk + kruimelpad ---------- */
div[uk-sticky], div[uk-sticky].uk-sticky-fixed {
  position: relative;
  z-index: 980;
  background: rgba(6, 6, 7, .92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.border-bottom { border-bottom-color: var(--bb-lijn) !important; }
.uk-breadcrumb > * > * { color: var(--bb-tekst-zacht); }
.uk-breadcrumb > * > a { color: var(--bb-goud-licht); }
.uk-breadcrumb > :last-child > * { color: var(--bb-wit); }
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { color: var(--bb-goud); }

.uk-search-default .uk-search-input,
.uk-search-default .uk-search-input:focus,
.uk-search-input {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--bb-lijn-goud);
  border-radius: 0 20px;
  color: var(--bb-wit);
}
.uk-search-default .uk-search-input:focus, .uk-search-input:focus { border-color: var(--bb-goud); background: rgba(255, 255, 255, .08); color: var(--bb-wit); }
.uk-search-input::placeholder { color: #8a8a8f; }
.uk-search-icon, .uk-search-icon-flip { color: var(--bb-goud); }

/* zoekresultaten (awesomplete) */
.awesomplete > ul {
  z-index: 1000 !important;
  background: #111112 !important;
  border: 1px solid var(--bb-lijn-goud) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55) !important;
}
.awesomplete > ul > li { color: var(--bb-tekst) !important; }
.awesomplete > ul > li:hover, .awesomplete > ul > li[aria-selected="true"] { background: rgba(185, 151, 105, .16) !important; color: #fff !important; }
.awesomplete mark { background: transparent !important; color: var(--bb-goud) !important; }

/* ---------- categorietegels (overzichtspagina) ---------- */
.card-box {
  background: var(--bb-vlak);
  border: 1px solid var(--bb-lijn-goud);
  color: var(--bb-tekst) !important;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.card-box [data-uk-icon], .card-box .uk-icon { color: var(--bb-goud); }
.card-box p { color: var(--bb-wit); font-family: "Poppins", "Heebo", sans-serif; font-weight: 300; }
.card-box:hover p { color: var(--bb-wit); font-weight: 600; }
.card-box:hover {
  background: rgba(185, 151, 105, .08);
  border-color: var(--bb-goud);
  transform: translateY(-3px);
  text-decoration: none;
}
.uk-grid-collapse > * > .card-box { margin: -1px 0 0 -1px; }
.uk-grid-divider > :not(.uk-first-column)::before { border-left-color: var(--bb-lijn); }

/* ---------- artikeloverzicht per categorie ---------- */
.uk-article + .uk-article { border-top: 1px solid var(--bb-lijn); padding-top: 30px; }
.uk-article h2 a, .uk-article .uk-h3 a { color: var(--bb-wit); }
.uk-article h2 a:hover, .uk-article .uk-h3 a:hover { color: var(--bb-goud); text-decoration: none; }
.icon-category { color: var(--bb-goud) !important; }

/* ---------- knoppen (rechthoekig, zonder afronding) ---------- */
.button-link { color: var(--bb-goud) !important; border-bottom: 1px solid currentColor; }
.button-link:hover { color: var(--bb-wit) !important; text-decoration: none; }
.uk-button { text-transform: none; }
.uk-button-primary {
  background: var(--bb-goud);
  color: #fff;
  border-radius: 0;
  border: 1px solid var(--bb-goud);
}
.uk-button-primary:hover, .uk-button-primary:focus { background: #c9a87a; color: #fff; }
.uk-button-danger {
  background: #fff;
  color: #111 !important;
  border-radius: 0;
  border: 0 !important;
  font-weight: 600;
}
.uk-button-danger:hover { background: var(--bb-goud); color: #fff !important; }
.uk-button-default {
  background: transparent;
  color: var(--bb-wit);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
}
.uk-button-default:hover { border-color: var(--bb-goud); color: var(--bb-goud); }
.uk-icon-button { background: rgba(255, 255, 255, .06); color: var(--bb-goud); border-radius: 0; }
.uk-icon-button:hover { background: var(--bb-goud); color: #fff; }

/* ---------- formulieren (o.a. contact.php en het klantportaal) ---------- */
.uk-form-label { color: var(--bb-tekst-zacht); font-size: .85rem; letter-spacing: .02em; }
.uk-input, .uk-select, .uk-textarea,
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--bb-lijn-goud);
  border-radius: 0;
  color: var(--bb-wit);
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--bb-goud); background: rgba(255, 255, 255, .07); }
.uk-input::placeholder, .uk-textarea::placeholder { color: #8a8a8f; }
.uk-select option { background: #111112; color: var(--bb-wit); }
.uk-checkbox, .uk-radio { background-color: transparent; border: 1px solid var(--bb-goud); }
.uk-checkbox:checked, .uk-radio:checked, .uk-checkbox:checked:focus, .uk-radio:checked:focus { background-color: var(--bb-goud); border-color: var(--bb-goud); }
.uk-form-danger, .uk-form-danger:focus { border-color: #e57373 !important; }

/* ---------- zijmenu onderwerpen ---------- */
.divider-left::before { border-left-color: var(--bb-lijn-goud) !important; }
.uk-nav-default > li > a { color: var(--bb-tekst-zacht); transition: color .2s ease, padding-left .2s ease; }
.uk-nav-default > li > a:hover { color: var(--bb-wit); padding-left: 4px; }
.uk-nav-default .uk-nav-header, .uk-nav-header {
  color: var(--bb-goud);
  letter-spacing: .08em;
  font-family: "Poppins", "Heebo", sans-serif;
}
.uk-dropdown { background: #111112; border: 1px solid var(--bb-lijn-goud); }
.uk-dropdown-nav > li > a, .uk-nav-sub a { color: var(--bb-tekst-zacht); }
.uk-dropdown-nav > li > a:hover, .uk-nav-sub a:hover { color: var(--bb-wit); }

/* ---------- mobiel menu (offcanvas) ---------- */
.uk-offcanvas-bar { background: var(--bb-diep); border-left: 1px solid var(--bb-lijn-goud); }
.uk-offcanvas-bar .uk-nav-primary > li > a { color: var(--bb-wit); }
.uk-offcanvas-bar .uk-nav-primary > li > a:hover,
.uk-offcanvas-bar .uk-nav-primary > li > a:focus { color: var(--bb-goud); }
.uk-offcanvas-bar .uk-nav-primary .uk-nav-header { color: var(--bb-goud); letter-spacing: .08em; }
.uk-offcanvas-bar .uk-offcanvas-close { color: var(--bb-wit); }

/* ---------- voet ---------- */
footer.uk-section { border-top: 1px solid var(--bb-lijn); }

/* ---------- pop-up (add.html) ---------- */
.banner { background: #111112 !important; color: var(--bb-tekst) !important; border: 1px solid var(--bb-lijn-goud); }

/* ---------- PremiumRecht-strook onderaan pagina's ---------- */
.bb-ps .bb-ps-zin { color: var(--bb-tekst); }

/* ---------- uitklaplijsten (uk-accordion: o.a. schijnzelfstandigheid, faq, clientportal) ---------- */
.uk-accordion-title { color: var(--bb-wit); }
.uk-accordion-title:hover,
.uk-accordion-title:focus { color: var(--bb-goud); }
.uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20fill%3D%22%23B99769%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E%3Crect%20fill%3D%22%23B99769%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%2F%3E%3C%2Fsvg%3E");
}
.uk-open > .uk-accordion-title::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20fill%3D%22%23B99769%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%2F%3E%3C%2Fsvg%3E");
}
.uk-accordion-content,
.uk-accordion-content p,
.uk-accordion-content li { color: var(--bb-tekst); }