html:root {
  --orange: #a63d16;
  --muted: #536069;
}

/* Woningen: blijvend leesbare heldere kop, ook na een dagelijkse bronupdate. */
.homes-hero,
.listing-hero {
  background: linear-gradient(135deg, #dff1f3 0%, #f4faf9 62%, #ffede3 100%) !important;
  color: #082f4d !important;
}

.homes-hero h1,
.listing-hero h1 {
  color: #063457 !important;
  text-shadow: none !important;
}

.homes-hero > p:not(.eyebrow),
.listing-hero > p:not(.eyebrow) {
  color: #345767 !important;
}

.homes-hero .eyebrow,
.listing-hero .eyebrow {
  color: #0b628a !important;
}

.homes-hero .back-link,
.listing-hero .back-link,
.homes-hero .topic-menu summary,
.listing-hero .topic-menu summary {
  border: 2px solid #063457 !important;
  background: #063457 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(6, 52, 87, .18);
}

.homes-hero .back-link:hover,
.homes-hero .topic-menu summary:hover,
.listing-hero .back-link:hover,
.listing-hero .topic-menu summary:hover {
  background: #0b628a !important;
}

.xpers-shell-header,
.xpers-shell-footer {
  --xpers-ink: #172c35;
  --xpers-paper: #fffdf8;
  --xpers-orange: #c64014;
  --xpers-orange-dark: #96300f;
  --xpers-line: #dfe4df;
  box-sizing: border-box;
  color: var(--xpers-ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.xpers-shell-header *,
.xpers-shell-footer * { box-sizing: border-box; }

.xpers-shell-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.5vw, 2rem);
  min-height: 82px;
  padding: 1rem clamp(1rem, 5vw, 5rem);
  border-bottom: 1px solid var(--xpers-line);
  background: rgba(255, 253, 248, .98);
}

.xpers-shell-brand { display: inline-flex; margin-right: auto; }
.xpers-shell-brand img { display: block; width: 153px; height: 48px; }
.xpers-shell-navigation { display: none; position: absolute; top: calc(100% + .5rem); right: clamp(1rem, 5vw, 5rem); min-width: 230px; flex-direction: column; gap: .85rem; padding: 1.15rem; border: 1px solid var(--xpers-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(23, 44, 53, .12); }
.xpers-shell-navigation[data-open] { display: flex; }
.xpers-shell-navigation a,
.xpers-shell-footer a,
.xpers-shell-footer button { color: inherit; font-weight: 650; text-decoration: none; }
.xpers-shell-footer button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.xpers-shell-navigation a:hover,
.xpers-shell-navigation a:focus-visible { color: var(--xpers-orange-dark); text-decoration: underline; }

.xpers-shell-member {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .72rem 1.1rem;
  border-radius: 999px;
  background: var(--xpers-orange);
  color: #fff !important;
  font-weight: 750;
  text-decoration: none;
}

.xpers-shell-menu { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid var(--xpers-line); border-radius: 10px; background: #fff; color: inherit; font: inherit; font-weight: 750; cursor: pointer; }
.xpers-shell-menu span[aria-hidden] { font-size: 1.35rem; line-height: 1; }

.xpers-shell-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  padding: 3rem clamp(1.25rem, 8vw, 8rem);
  background: #11262d;
  color: #fff;
}
.xpers-shell-footer > div p { max-width: 560px; color: #bdc9cc; }
.xpers-shell-footer-brand { font-family: Georgia, serif; font-size: 2rem; font-weight: 800; }
.xpers-shell-footer-brand span { color: var(--xpers-orange); }
.xpers-shell-footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; align-content: start; }
.xpers-shell-copyright { grid-column: 1 / -1; margin: 1rem 0 0; color: #91a4a9; font-size: .9rem; }

@media (max-width: 980px) {
  .xpers-shell-navigation { top: 100%; left: 0; right: 0; border-inline: 0; border-radius: 0; }
  .xpers-shell-member { margin-left: auto; }
}

@media (max-width: 580px) {
  .xpers-shell-header { gap: .45rem; }
  .xpers-shell-brand img { width: 112px; height: auto; }
  .xpers-shell-member { padding: .55rem .8rem; font-size: .92rem; }
  .xpers-shell-footer { grid-template-columns: 1fr; }
  .xpers-shell-footer nav { flex-direction: column; }
  .xpers-shell-copyright { grid-column: 1; }
}

/* Krachtiger en compacter aanbod op de premium-pagina van Charlie's. */
.charlie .offer-section {
  padding: clamp(30px, 3.6vw, 44px);
  border-top: 5px solid var(--brand);
  background:
    radial-gradient(circle at 92% 0, rgba(238, 84, 45, .18), transparent 30%),
    #131313;
}

.charlie .offer-section .section-head {
  margin-bottom: 18px;
}

.charlie .offer-section .section-head h2 {
  margin-bottom: 0;
}

.charlie .menu-cards {
  gap: 12px;
}

.charlie .menu-cards article {
  min-height: 0;
  padding: 18px 20px;
  border: 0;
  border-left: 6px solid var(--brand);
  border-radius: 10px;
  background: linear-gradient(145deg, #fffdf8, #f4eadc);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.charlie .menu-cards h3 {
  margin: 0 0 7px;
  color: #171717;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 850;
  line-height: 1.15;
}

.charlie .menu-cards p {
  color: #403932;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.48;
}

.charlie .offer-footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.charlie .offer-footer p {
  color: #ded5ce;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .charlie .offer-section {
    padding: 26px 16px;
  }

  .charlie .menu-cards article {
    padding: 16px 17px;
  }
}

/* Gouden Gids: mobiel eerst zoeken en kiezen, daarna pas het partneraanbod. */
@media (max-width: 650px) {
  .guide-main {
    display: flex;
    flex-direction: column;
  }

  .guide-tools {
    order: 1;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .category-grid::before {
    content: "Kies een categorie";
    grid-column: 1 / -1;
    margin: 5px 0 4px;
    color: var(--guide-ink);
    font: 700 24px/1.1 Newsreader, serif;
  }

  .category-button {
    min-width: 0;
    min-height: 58px;
    padding: 7px;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 5px;
    font-size: 10.5px;
  }

  .category-button i {
    width: 25px;
    height: 25px;
    font-size: 13px;
  }

  .business-grid {
    order: 2;
  }

  .load-more {
    order: 3;
  }

  .partner-strip {
    order: 4;
    margin: 24px 0 0;
    padding: 14px;
  }

  .partner-strip h2 {
    font-size: 24px;
    line-height: 1.05;
  }

  .partner-strip > div:first-child > p:last-child {
    display: none;
  }

  .partner-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .price-pill {
    min-width: 0;
    padding: 10px;
  }

  .price-pill strong {
    font-size: 20px;
  }

  .partner-cta {
    order: 5;
  }

  .source-note {
    order: 6;
  }
}

/* Centrale leesbaarheids- en koppencontrole voor dagelijks ververste aanbodpagina's. */
.home-body h2 {
  margin: 0;
  color: var(--homes-ink);
  font-family: Newsreader, serif;
  font-size: 1.62rem;
  line-height: 1.12;
}

.home-body h2 a,
.job-body h2 a {
  color: inherit;
  text-decoration: none;
}

.home-body h2 a:hover,
.job-body h2 a:hover {
  text-decoration: underline;
}

.job-body h2 {
  margin: 0;
  color: var(--job-ink);
  font-family: Newsreader, serif;
  font-size: 1.55rem;
  line-height: 1.08;
}

.partner-callout > a,
.listing-contact .website-button,
.employer-contact .website-button,
.demo-note strong,
.demo-badge {
  color: #082f4d !important;
}

.listing-facts dt,
.detail-facts dt {
  color: #4f6671 !important;
}

.listing-contact .listing-sources strong {
  color: #fff !important;
}

.listing-contact .listing-sources a,
.employer-contact .eyebrow,
.partner-callout .eyebrow {
  color: #bcecf2 !important;
}

.employer-mark {
  background: #0b3d59 !important;
  color: #fff !important;
}

.price-pill.featured,
.price-pill.featured small,
.price-pill.featured strong,
.price-pill.featured span,
.price-pill.featured del {
  color: #082f4d !important;
  opacity: 1;
}

.source-note {
  color: #48616b !important;
}

.website-button {
  color: #082f4d !important;
}