/* ===========================================
   Customer Specific CSS Classes

   Classes die via customCSSClass in Umbraco
   BlockGrid settings worden gebruikt.

   BELANGRIJK: Gebruik GEEN Tailwind utility
   classes in customCSSClass — die worden niet
   opgepikt door de TailwindCSS build.
   Maak hier gewone CSS classes aan.
   =========================================== */

/* ----------- Navbar altijd wit ----------- */
header.navbar {
  background-color: #ffffff !important;
}

/* ----------- Menu Logo ----------- */
nav a.w-36 {
  width: 12rem !important; /* 192px, was 9rem/144px */
}

/* ----------- Hero Small (subpages) ----------- */
/* Pattern grid overlay — subtle dot pattern matching design */
.pattern-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0) !important;
  background-size: 32px 32px !important;
  z-index: 1 !important;
  pointer-events: none;
}

/* Hero section — gradient background matching design */
[data-content-element-type-alias="heroComponentBlock"] > section,
section.hero-small {
  background: linear-gradient(to bottom right, #08162E, #0B1F3E, #050E1E) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
}
/* Subtle accent glow on right side */
[data-content-element-type-alias="heroComponentBlock"] > section::after,
section.hero-small::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(194, 120, 48, 0.05), transparent);
  z-index: 1;
}
/* Content container — above pattern and glow */
[data-content-element-type-alias="heroComponentBlock"] > section > div:not(.pattern-grid) {
  position: relative;
  z-index: 2;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  [data-content-element-type-alias="heroComponentBlock"] > section > div:not(.pattern-grid) {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
[data-content-element-type-alias="heroComponentBlock"] h1 {
  color: #ffffff !important;
}
[data-content-element-type-alias="heroComponentBlock"] p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.125rem;
  line-height: 1.75;
}

/* ----------- Section Dark ----------- */
/* Gebruik: customCSSClass = "section-dark"
   Voor secties met een donkere achtergrond (bijv. Onze Aanpak) */
.section-dark {
  background-color: #050E1E;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .section-dark {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}
.section-dark p,
.section-dark span.font-medium,
.section-dark .prose {
  color: rgba(255, 255, 255, 0.7);
}
.section-dark .label {
  background-color: rgba(194, 120, 48, 0.2);
  color: #EAB37A;
}
.section-dark .usp-check {
  color: #C27830;
}
.section-dark .prose ul {
  list-style: none;
  padding-left: 0;
}
.section-dark .prose ul li {
  padding-left: 2.25rem;
  position: relative;
}
.section-dark .prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: rgba(194, 120, 48, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23EAB37A' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
}

/* ----------- USP Items Flex Basis Fix ----------- */
/* basis-[320px] is not picked up by TailwindCSS build from .cshtml */
.gsap-usp-item {
  flex-basis: 320px;
  overflow: hidden; /* Shimmer animatie netjes binnen rounded corners houden */
}

/* ----------- USP Iconen: hover gedrag ----------- */
/* Hover: icoon container blijft donkerblauw (override Tailwind group-hover:bg-accent) */
.gsap-usp-item:hover .w-16.h-16,
.group:hover .w-16.h-16.bg-base-300 {
  background-color: var(--color-base-300) !important;
}
/* Hover: icoon blijft wit (zelfde als standaard) */
.group:hover .usp-icon {
  filter: brightness(0) invert(1) !important;
}

/* ----------- USP Items in section-dark ----------- */
/* Kaarten moeten semi-transparant donker zijn, niet wit */
.section-dark .gsap-usp-item {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.section-dark .gsap-usp-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(194, 120, 48, 0.3) !important;
}
.section-dark .gsap-usp-item h3 {
  color: #ffffff !important;
}
.section-dark .gsap-usp-item p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ----------- Logo Carousel — titel moet wrappen op mobiel ----------- */
[data-content-element-type-alias="logoCarouselComponentBlock"] .container.text-center {
  white-space: normal !important;
}

/* ----------- Logo Section ----------- */
/* Gebruik: customCSSClass = "logo-section"
   Subtiele achtergrond met borders voor logo carousel */
.logo-section {
  background-color: rgba(21, 56, 110, 0.05);
  border-top: 1px solid rgba(100, 101, 105, 0.1);
  border-bottom: 1px solid rgba(100, 101, 105, 0.1);
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .logo-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ----------- Contact Info Card ----------- */
/* Gebruik: customCSSClass = "contact-info-card"
   Donkere kaart met pattern-grid voor contactgegevens */
.contact-info-card {
  background: linear-gradient(to bottom right, #08162E, #0B1F3E, #050E1E) !important;
  color: #ffffff !important;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.contact-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 40px 40px;
  z-index: 0;
}
.contact-info-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  background: rgba(194, 120, 48, 0.1);
  border-bottom-left-radius: 100%;
  z-index: 0;
}
.contact-info-card > * {
  position: relative;
  z-index: 1;
}
/* Contact info waarden — primary-300 kleur (niet beschikbaar in Tailwind theme) */
.contact-info-card .ci-value {
  color: rgb(117, 159, 207);
}
.contact-info-card .ci-subtext {
  color: rgba(117, 159, 207, 0.6);
}
/* Action buttons */
.contact-info-card .ci-btn {
  background-color: rgba(194, 120, 48, 0.15);
  color: #ffffff;
  border-radius: 0.75rem;
  transition: background-color 0.3s;
}
.contact-info-card .ci-btn:hover {
  background-color: rgba(194, 120, 48, 0.25);
}
.contact-info-card .ci-btn svg {
  color: #C27830;
}

/* ----------- Contact Form Styling ----------- */
/* Override form wrapper: white bg ipv grey, matching design */
.umbraco-forms-page {
  background-color: #ffffff !important;
  border: 1px solid rgba(100, 101, 105, 0.1);
}
/* Input fields: subtiele achtergrond, rounded */
.umbraco-forms-page input[type="text"],
.umbraco-forms-page input[type="email"],
.umbraco-forms-page input[type="tel"],
.umbraco-forms-page input[type="url"],
.umbraco-forms-page input[type="number"],
.umbraco-forms-page select,
.umbraco-forms-page textarea {
  background-color: rgba(21, 56, 110, 0.03) !important;
  border: 1px solid rgba(100, 101, 105, 0.2) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  outline: none !important;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.umbraco-forms-page input:focus,
.umbraco-forms-page select:focus,
.umbraco-forms-page textarea:focus {
  border-color: #C27830 !important;
  box-shadow: 0 0 0 3px rgba(194, 120, 48, 0.1) !important;
}
/* Labels: heading font, dark primary */
.umbraco-forms-page label {
  font-family: var(--font-heading);
  color: #0D2347;
  font-weight: 600;
}
/* File upload — custom wrapper (label.button.primary + hidden input) */
.umbraco-forms-page .relative.flex.items-center {
  background-color: rgba(21, 56, 110, 0.03) !important;
  border: 1px solid rgba(100, 101, 105, 0.2) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
}
.umbraco-forms-page label.button.primary {
  background-color: #0D2347 !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1.25rem !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.umbraco-forms-page label.button.primary:hover {
  background-color: #15386E !important;
}
/* Submit button: accent style */
.umbraco-forms-page input[type="submit"] {
  background-color: #C27830 !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0.875rem 2rem !important;
  border-radius: 0.75rem !important;
  border: none !important;
  box-shadow: 0 10px 25px -5px rgba(194, 120, 48, 0.25);
  transition: background-color 0.3s, transform 0.2s;
}
.umbraco-forms-page input[type="submit"]:hover {
  background-color: #d99e65 !important;
  transform: translateY(-1px);
}

/* ----------- Hero Background — mobiel: compacter, desktop: beeldvullend ----------- */
@media (max-width: 767px) {
  .hero-background {
    min-height: 55vh !important;
    min-height: 55dvh !important;
  }
  .hero-background .container.relative {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  /* Scroll-indicator verbergen op mobiel */
  .hero-background > .gsap-hero-item.absolute.bottom-10 {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .hero-background {
    min-height: calc(100vh - 120px) !important;
    min-height: calc(100dvh - 120px) !important;
  }
}

/* ----------- Mobiel Menu — donker design matching website ----------- */
/* Panel achtergrond: donker gradient */
[role="dialog"] .fixed.inset-y-0.right-0 {
  background: linear-gradient(to bottom right, #08162E, #0B1F3E, #050E1E) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding-right: 2.75rem !important;
  padding-left: 1.25rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
[role="dialog"] .fixed.inset-y-0.right-0::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}
/* Compenseer -mx-3 negatieve marge zodat items niet buiten panel vallen */
[role="dialog"] .flow-root .-mx-3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Pattern grid overlay */
[role="dialog"] .fixed.inset-y-0.right-0::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
[role="dialog"] .fixed.inset-y-0.right-0 > * {
  position: relative;
  z-index: 1;
}
/* Logo wit maken */
[role="dialog"] a img {
  filter: brightness(0) invert(1);
}
/* Close button — duidelijke cirkel */
[role="dialog"] button.text-body {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s;
}
[role="dialog"] button.text-body:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
[role="dialog"] button.text-body svg {
  color: #ffffff !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}
/* Menu items styling */
[role="dialog"] .flow-root a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background-color 0.2s, color 0.2s;
}
[role="dialog"] .flow-root a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Actieve menu item — accent kleur */
[role="dialog"] a.text-primary-hover,
[role="dialog"] a.text-heading {
  color: #C27830 !important;
}
/* Chevron/dropdown — duidelijke indicator met achtergrond */
[role="dialog"] button.group.flex.size-11 {
  background-color: rgba(194, 120, 48, 0.15) !important;
  border-radius: 0.5rem !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  transition: background-color 0.2s;
}
[role="dialog"] button.group.flex.size-11:hover {
  background-color: rgba(194, 120, 48, 0.25) !important;
}
[role="dialog"] button.group.flex.size-11 svg {
  color: #C27830 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}
/* Dividers subtiel */
[role="dialog"] .divide-y > :not(:first-child) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Contact iconen accent kleur */
[role="dialog"] .flex.items-center.gap-2 svg {
  color: #C27830 !important;
}
/* Contact text */
[role="dialog"] .flex.items-center.gap-2 {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* CTA button — accent met glow */
[role="dialog"] .bg-accent {
  background-color: #C27830 !important;
  box-shadow: 0 8px 20px -4px rgba(194, 120, 48, 0.3);
}
/* Ring border subtiel */
[role="dialog"] .fixed.inset-y-0.right-0.sm\:ring-1 {
  --tw-ring-color: rgba(255, 255, 255, 0.05) !important;
}

/* ----------- Footer Social Icons — meer ruimte onder ----------- */
footer .flex.flex-wrap.gap-4 {
  padding-bottom: 1.5rem !important;
}

/* ----------- Footer Logo Left Align ----------- */
footer img {
  margin-left: 0;
  margin-right: auto;
}

/* ----------- Footer Text Color Override ----------- */
/* All footer text (except titles) should be rgb(117, 159, 207) */
footer .text-white\/60,
footer .text-white\/50 {
  color: rgb(117, 159, 207) !important;
}

/* ----------- Footer Social Icons ----------- */
/* Override baseline social button styling in footer */
footer .flex.flex-wrap.gap-4 a {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  transition: background-color 0.3s;
}
footer .flex.flex-wrap.gap-4 a:hover {
  background-color: #C27830 !important;
}
footer .flex.flex-wrap.gap-4 a svg {
  fill: rgb(117, 159, 207) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}
footer .flex.flex-wrap.gap-4 a:hover svg {
  fill: #ffffff !important;
}

/* ----------- Footer Styling ----------- */
footer .prose-white a {
  color: rgb(117, 159, 207) !important;
  text-decoration: none;
  transition: color 0.3s;
}
footer .prose-white a:hover {
  color: #C27830;
}
footer .prose-white,
footer .prose-white p {
  color: rgb(117, 159, 207) !important;
}

/* Footer contact column — accent icons via pseudo-elements */
footer .prose-white p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
footer .prose-white p::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Location pin icon for first paragraph */
footer .prose-white p:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C27830' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}
/* Phone icon for second paragraph */
footer .prose-white p:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C27830' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E");
}
/* Email icon for third paragraph */
footer .prose-white p:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C27830' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}

/* =============================================
   Globale Component Styling — NobaCheck Theme
   ============================================= */

/* --- Accordion: accent iconen --- */
[data-content-element-type-alias="accordionComponentBlock"] button svg,
[data-content-element-type-alias="accordionComponentBlock"] .size-6 {
  color: #C27830 !important;
}
[data-content-element-type-alias="accordionComponentBlock"] button:hover {
  background-color: rgba(194, 120, 48, 0.08) !important;
}

/* --- FAQ / Accordion: professionele stijl --- */
/* Accordion open/dicht state — eigen classes ipv Tailwind utilities */
.acc-closed {
  max-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.acc-open {
  max-height: 2000px !important;
  overflow: hidden !important;
  padding: 0 1.5rem 1.5rem 1.5rem !important;
}
/* Outer wrapper: witte achtergrond ipv grijs (bg-base-200) */
.AccordionComponentBlock .bg-base-200 {
  background-color: #ffffff !important;
}
/* SVG pijlen: accent kleur */
.AccordionComponentBlock .accordion-component-item svg {
  fill: #C27830 !important;
}
/* Items: witte kaarten met subtiele border */
.AccordionComponentBlock .accordion-component-item {
  background-color: #ffffff !important;
  border: 1px solid rgba(21, 56, 110, 0.1) !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s ease;
}
/* Hover: accent border, NIET donkere achtergrond */
.AccordionComponentBlock .accordion-component-item:hover {
  background-color: rgba(21, 56, 110, 0.02) !important;
  color: inherit !important;
  border-color: rgba(194, 120, 48, 0.3) !important;
  box-shadow: 0 4px 16px -4px rgba(194, 120, 48, 0.08);
}
/* Icoon wrapper: accent cirkel */
.AccordionComponentBlock .accordion-component-title > span {
  background-color: rgba(194, 120, 48, 0.1);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
}
/* Content tekst altijd leesbaar bij open */
.AccordionComponentBlock .accordion-component-item .prose,
.AccordionComponentBlock .accordion-component-item .prose p {
  color: #555555 !important;
}
/* Op donkere achtergrond (section-dark) */
.section-dark .AccordionComponentBlock .bg-base-200 {
  background-color: #050E1E !important;
}
.section-dark .AccordionComponentBlock .accordion-component-item {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.section-dark .AccordionComponentBlock .accordion-component-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.section-dark .AccordionComponentBlock .prose,
.section-dark .AccordionComponentBlock .prose p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Slider Controls (image slider, reviews, content slider): accent pijlen + dots --- */
.splide__arrow {
  background-color: rgba(21, 56, 110, 0.08) !important;
}
.splide__arrow:hover {
  background-color: rgba(194, 120, 48, 0.15) !important;
}
.splide__arrow svg {
  color: #15386E !important;
}
.splide__arrow:hover svg {
  color: #C27830 !important;
}
.splide__pagination__page {
  background-color: rgba(21, 56, 110, 0.2) !important;
}
.splide__pagination__page.is-active {
  background-color: #C27830 !important;
}

/* --- Reviews: sterren accent + witte kaarten --- */
[data-content-element-type-alias="reviewsComponentBlock"] .text-yellow-400,
[data-content-element-type-alias="reviewsComponentBlock"] svg[fill="currentColor"] {
  color: #C27830 !important;
}
[data-content-element-type-alias="reviewsComponentBlock"] .bg-base-200 {
  background-color: #ffffff !important;
  border: 1px solid rgba(21, 56, 110, 0.08);
  box-shadow: 0 4px 20px -4px rgba(21, 56, 110, 0.06);
}

/* --- Timeline: actieve tab accent --- */
[data-content-element-type-alias="timelineComponentBlock"] button.bg-primary,
[data-content-element-type-alias="timelineComponentBlock"] button[aria-selected="true"],
[data-content-element-type-alias="timelineComponentBlock"] .bg-primary {
  background-color: #C27830 !important;
}

/* --- Spotlight: USP checkmarks accent --- */
[data-content-element-type-alias="spotlightComponentBlock"] svg {
  color: #C27830 !important;
}

/* --- Quick Links: kaart hover accent border --- */
[data-content-element-type-alias="quickLinksComponentBlock"] a:hover {
  border-color: #C27830 !important;
  box-shadow: 0 8px 25px -5px rgba(194, 120, 48, 0.1) !important;
}
[data-content-element-type-alias="quickLinksComponentBlock"] a svg {
  color: #C27830 !important;
}

/* --- Basic Plans: checkmarks + accent CTA --- */
[data-content-element-type-alias="basicPlansComponentBlock"] svg {
  color: #C27830 !important;
}
[data-content-element-type-alias="basicPlansComponentBlock"] .bg-primary {
  background-color: #C27830 !important;
}
[data-content-element-type-alias="basicPlansComponentBlock"] .bg-primary:hover {
  background-color: #d99e65 !important;
}
/* Highlighted plan card */
[data-content-element-type-alias="basicPlansComponentBlock"] .ring-primary,
[data-content-element-type-alias="basicPlansComponentBlock"] [class*="ring-primary"] {
  --tw-ring-color: #C27830 !important;
}
[data-content-element-type-alias="basicPlansComponentBlock"] .bg-primary\/10 {
  background-color: rgba(194, 120, 48, 0.1) !important;
}
[data-content-element-type-alias="basicPlansComponentBlock"] .text-primary {
  color: #C27830 !important;
}

/* --- Article Feed: "Lees meer" button accent --- */
[data-content-element-type-alias="articleFeedComponentBlock"] a.button-primary-outline {
  border-color: #C27830 !important;
  color: #C27830 !important;
}
[data-content-element-type-alias="articleFeedComponentBlock"] a.button-primary-outline:hover {
  background-color: #C27830 !important;
  color: #ffffff !important;
}

/* --- Blocks Component: kaart accent hover --- */
[data-content-element-type-alias="blocksComponentBlock"] .bg-base-300 {
  background-color: #0D2347 !important;
}

/* --- Contact Buttons: secundaire button outline --- */
[data-content-element-type-alias="contactButtonsComponentBlock"] a:not(.bg-accent) {
  border: 1px solid rgba(21, 56, 110, 0.2);
  border-radius: 9999px;
  transition: border-color 0.3s, background-color 0.3s;
}
[data-content-element-type-alias="contactButtonsComponentBlock"] a:not(.bg-accent):hover {
  border-color: #C27830;
  background-color: rgba(194, 120, 48, 0.05);
}

/* --- Subtitle kleur: consistent accent subtitels --- */
h3.text-secondary,
.text-secondary {
  color: #C27830 !important;
}

/* =============================================
   Dienstpagina (Service detail) Styling
   ============================================= */

/* --- Hero sectie: donkere gradient matching website --- */
main.body > .flex.items-center.py-10.relative {
  background: linear-gradient(to bottom right, #08162E, #0B1F3E, #050E1E) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  main.body > .flex.items-center.py-10.relative {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
/* Pattern grid overlay */
main.body > .flex.items-center.py-10.relative::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
/* Accent glow rechts */
main.body > .flex.items-center.py-10.relative::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(194, 120, 48, 0.06), transparent);
  pointer-events: none;
  z-index: 0;
}
/* Container boven overlays */
main.body > .flex.items-center.py-10.relative > .container {
  position: relative;
  z-index: 1;
}
/* Titel wit */
main.body > .flex.items-center.py-10.relative h1 {
  color: #ffffff !important;
  font-size: 2.5rem;
  line-height: 1.15;
}
@media (min-width: 768px) {
  main.body > .flex.items-center.py-10.relative h1 {
    font-size: 3.25rem;
  }
}
/* Intro tekst subtiel wit */
main.body > .flex.items-center.py-10.relative p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-top: 1rem;
}
/* Afbeelding — accent border glow */
main.body > .flex.items-center.py-10.relative figure {
  box-shadow: 0 20px 60px -10px rgba(194, 120, 48, 0.15),
              0 0 0 1px rgba(194, 120, 48, 0.1);
}
/* Breadcrumbs — verbergen op dienstpagina */
main.body > .flex.items-center.py-10.relative nav[aria-label="Breadcrumbs"] {
  display: none !important;
}
/* CTA buttons in hero */
main.body > .flex.items-center.py-10.relative .button-accent {
  background-color: #C27830 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -4px rgba(194, 120, 48, 0.3);
}
main.body > .flex.items-center.py-10.relative .button-primary-outline {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
main.body > .flex.items-center.py-10.relative .button-primary-outline:hover {
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- Content blok: betere typografie en spacing --- */
/* :last-child zodat alleen de content BlockGrid padding krijgt, niet de header BlockGrid */
main.body > .umb-block-grid:last-child {
  padding-top: 4rem;
}
@media (min-width: 768px) {
  main.body > .umb-block-grid:last-child {
    padding-top: 5rem;
  }
}
/* Prose content — mooiere tekst */
main.body > .umb-block-grid .prose {
  max-width: 75ch;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #444444;
}
main.body > .umb-block-grid .prose h2,
main.body > .umb-block-grid .prose h3 {
  color: var(--color-primary);
  margin-top: 2rem;
}
/* Accent lijn boven label */
main.body > .umb-block-grid .label {
  background-color: rgba(194, 120, 48, 0.12);
  color: #C27830;
}

/* =============================================
   Diensten Overzicht Pagina
   ============================================= */

/* Kaarten: witte achtergrond met hover-effecten */
.grid-cols-1.container.grid > a {
  background-color: #ffffff !important;
  border: 1px solid rgba(21, 56, 110, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 2px 12px -4px rgba(21, 56, 110, 0.06);
}
.grid-cols-1.container.grid > a:hover {
  border-color: rgba(194, 120, 48, 0.3) !important;
  box-shadow: 0 8px 30px -8px rgba(194, 120, 48, 0.12) !important;
  transform: translateY(-2px);
}

/* Titel hover kleur */
.grid-cols-1.container.grid > a:hover h3 {
  color: #C27830;
  transition: color 0.3s;
}

/* Bekijken knop — accent outline stijl */
.grid-cols-1.container.grid > a .button.primary.inverted {
  background-color: transparent !important;
  color: #C27830 !important;
  border: 2px solid #C27830 !important;
  border-radius: 0.75rem;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  transition: all 0.3s;
  width: fit-content;
}
.grid-cols-1.container.grid > a:hover .button.primary.inverted {
  background-color: #C27830 !important;
  color: #ffffff !important;
}

/* Intro tekst — betere leesbaarheid */
.grid-cols-1.container.grid > a p {
  color: #555555;
  line-height: 1.7;
}

/* Afbeeldingen — lichte overlay */
.grid-cols-1.container.grid > a figure {
  position: relative;
}
.grid-cols-1.container.grid > a figure img {
  transition: transform 0.5s ease;
}
.grid-cols-1.container.grid > a:hover figure img {
  transform: scale(1.05);
}