:root{
    --oerzoek-blue: #004173;
    --oerzoek-blue-hover: #005b9f;

    /* Status palette (harmonisch bij oerzoek-blue) */
    --oerzoek-info: #2f7fbf;
    --oerzoek-success: #1e8f5a;
    --oerzoek-warning: #e6a100;
    --oerzoek-danger: #c0392b;
}

/* -------------------------------------------------
   Base / Typography
------------------------------------------------- */

a{
    color: var(--oerzoek-blue);
    text-decoration: none;
}
a:hover{
    color: var(--oerzoek-blue-hover);
    text-decoration: underline;
}

/* Inline code styling (Bootstrap is ok, maar iets netter) */
code{
    padding: .05rem .25rem;
    border-radius: .3rem;
    background: rgba(0,0,0,.04);
}

/* -------------------------------------------------
   Navbar (Header)
------------------------------------------------- */

.oerzoek-nav{
    background-color: var(--oerzoek-blue);
}
.oerzoek-nav .navbar-brand,
.oerzoek-nav .nav-link{
    color: #fff !important;
}
.oerzoek-nav .nav-link:hover{
    color: #cfe7ff !important;
}
.oerzoek-nav .btn{
    border-color: rgba(255,255,255,.35);
}
.oerzoek-nav .btn:hover{
    border-color: rgba(255,255,255,.65);
}

/* -------------------------------------------------
   Brand mark
------------------------------------------------- */

.brand-mark{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;                 /* contrast op blauwe header */
    color: var(--oerzoek-blue);
    font-weight: 800;
    letter-spacing: .02em;
}

/* -------------------------------------------------
   Hero / Search box (homepage)
------------------------------------------------- */

.hero{
    padding: 4.25rem 0 3.25rem;
}

.searchbox{
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* -------------------------------------------------
   Buttons (Bootstrap overrides for branding)
------------------------------------------------- */

/* Primary */
.btn-primary{
    background-color: var(--oerzoek-blue);
    border-color: var(--oerzoek-blue);
}
.btn-primary:hover,
.btn-primary:focus{
    background-color: var(--oerzoek-blue-hover);
    border-color: var(--oerzoek-blue-hover);
}
.btn-primary:active{
    background-color: #00365f;
    border-color: #00365f;
}

/* Outline primary */
.btn-outline-primary{
    color: var(--oerzoek-blue);
    border-color: var(--oerzoek-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
    background-color: var(--oerzoek-blue);
    border-color: var(--oerzoek-blue);
    color: #fff;
}

/* Optional: link button look */
.btn-link{
    color: var(--oerzoek-blue);
}
.btn-link:hover{
    color: var(--oerzoek-blue-hover);
}

/* -------------------------------------------------
   Highlights / Mark
------------------------------------------------- */

mark{
    padding: 0 .15em;
    border-radius: .2rem;
    background: #fff3cd;   /* zacht geel */
}

/* -------------------------------------------------
   “kbd” styling (jouw bestaande)
------------------------------------------------- */

.kbd{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .85rem;
    padding: .1rem .35rem;
    border: 1px solid rgba(0,0,0,.15);
    border-bottom-width: 2px;
    border-radius: .4rem;
    background: rgba(0,0,0,.03);
}

/* -------------------------------------------------
   Status alerts (Bootstrap-compatible)
------------------------------------------------- */

/* Info */
.alert-info{
    background-color: #e3f1fb;
    border-color: var(--oerzoek-info);
    color: #1b4f72;
}

/* Success */
.alert-success{
    background-color: #e6f4ee;
    border-color: var(--oerzoek-success);
    color: #145a32;
}

/* Warning */
.alert-warning{
    background-color: #fff3cd;
    border-color: var(--oerzoek-warning);
    color: #7a4f00;
}

/* Danger */
.alert-danger{
    background-color: #fdecea;
    border-color: var(--oerzoek-danger);
    color: #7b241c;
}

/* -------------------------------------------------
   Badges (optioneel, handig in admin)
------------------------------------------------- */

.badge.text-bg-warning{
    background-color: var(--oerzoek-warning) !important;
    color: #1a1a1a !important;
}
.badge.text-bg-secondary{
    background-color: #6c757d !important;
}
.badge.text-bg-success{
    background-color: var(--oerzoek-success) !important;
}
.badge.text-bg-danger{
    background-color: var(--oerzoek-danger) !important;
}

/* -------------------------------------------------
   Cards / borders subtle improvements
------------------------------------------------- */

.border{
    border-color: rgba(0,0,0,.12) !important;
}
.bg-light{
    background-color: #f6f7f9 !important;
}

/* -------------------------------------------------
   Optional: Tables in admin
------------------------------------------------- */

.table > :not(caption) > * > *{
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* Header buttons (high contrast) */
.oerzoek-nav .btn-outline-secondary{
    color: #ffffff;
    border-color: #ffffff;
    background: transparent;
}

.oerzoek-nav .btn-outline-secondary:hover,
.oerzoek-nav .btn-outline-secondary:focus{
    background-color: #ffffff;
    color: var(--oerzoek-blue);
    border-color: #ffffff;
}

/* Primary button in header extra duidelijk */
.oerzoek-nav .btn-primary{
    background-color: #ffffff;
    color: var(--oerzoek-blue);
    border-color: #ffffff;
    font-weight: 600;
}

.oerzoek-nav .btn-primary:hover{
    background-color: #e6f0f8;
    color: var(--oerzoek-blue);
    border-color: #e6f0f8;
}

/* -------------------------------------------------
   Header / Footer consistent branding
------------------------------------------------- */

:root{
  --oerzoek-blue: #004173;
  --oerzoek-blue-hover: #005b9f;
}

/* Header */
.oerzoek-nav{
  background-color: var(--oerzoek-blue);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

.brand-wordmark{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 2.05rem;
  line-height: 1;
  color: #fff;
}

/* Header buttons with high contrast */
.btn-nav-outline{
  color: #fff;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  border-radius: .6rem;
  padding: .45rem .75rem;
}

.btn-nav-outline:hover,
.btn-nav-outline:focus{
  background: #fff;
  color: var(--oerzoek-blue);
  border-color: #fff;
}

.btn-nav-solid{
  color: var(--oerzoek-blue);
  background: #fff;
  border: 1px solid #fff;
  border-radius: .6rem;
  padding: .45rem .85rem;
  font-weight: 600;
}

.btn-nav-solid:hover,
.btn-nav-solid:focus{
  background: #e6f0f8;
  border-color: #e6f0f8;
  color: var(--oerzoek-blue);
}

/* Footer */
.oerzoek-footer{
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.08);
}

.footer-links a{
  color: #495057;
  text-decoration: none;
}

.footer-links a:hover{
  color: var(--oerzoek-blue);
  text-decoration: underline;
}

.footer-links .dot{
  color: rgba(0,0,0,.25);
  padding: 0 .4rem;
}

/* Make homepage spacing match the new header */
.hero{
  padding-top: 4.25rem;
}

/* Optional: consistent primary buttons (site-wide) */
.btn-primary{
  background-color: var(--oerzoek-blue);
  border-color: var(--oerzoek-blue);
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--oerzoek-blue-hover);
  border-color: var(--oerzoek-blue-hover);
}

/* Top text links in header */
.top-links .top-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .95rem;
}
.top-links .top-link:hover{
  color: #fff;
  text-decoration: underline;
}

/* Active indicator */
.is-active{
  position: relative;
}

.top-links .top-link.is-active{
  color: #fff;
  font-weight: 600;
}

/* Active state for header buttons (subtiel) */
.btn-nav-outline.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.95);
}
.btn-nav-solid.is-active{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.22);
}

.page-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}