/* De Bruiloft DJ: one accent for headings, highlights, icons and CTAs. */
html[data-sv-face="bdj"] .bdj-page {
  --bdj-accent: #c94060;
  --bdj-accent-hover: #b52d42;
}

/* The day overview had a white background under white headings and cards. */
html[data-sv-face="bdj"] .bdj-page section:has(.bdj-expertise-card) {
  background: #0c0c0c !important;
}
html[data-sv-face="bdj"] .bdj-page section:has(.bdj-expertise-card) > div > div:first-child > p,
html[data-sv-face="bdj"] .bdj-page section:has(.bdj-expertise-card) h2 > span:nth-child(2) {
  color: #fff !important;
}
html[data-sv-face="bdj"] .bdj-page section:has(.bdj-expertise-card) .bdj-expertise-focus {
  color: #fff !important;
}

/* React currently sets these accent colors inline. Match only those literals. */
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(194, 0, 0)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(155, 35, 53)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(182, 22, 46)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(225, 29, 72)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(244, 63, 94)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(255, 82, 82)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(255, 83, 83)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(255, 51, 51)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(255, 66, 66)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(175, 45, 65)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(179, 47, 67)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(107, 15, 26)"],
html[data-sv-face="bdj"] .bdj-page :is(h1,h2,h3,h4,p,span,strong,a,svg)[style*="color: rgb(232, 107, 136)"],
html[data-sv-face="bdj"] .bdj-page .bdj-journey-section [class*="text-[#e11d48]"] {
  color: var(--bdj-accent) !important;
}

html[data-sv-face="bdj"] .bdj-page .bdj-btn,
html[data-sv-face="bdj"] .bdj-page .bdj-btn-primary-hero {
  background: var(--bdj-accent) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-sv-face="bdj"] .bdj-page .bdj-btn:hover,
  html[data-sv-face="bdj"] .bdj-page .bdj-btn-primary-hero:hover {
    background: var(--bdj-accent-hover) !important;
  }
}
html[data-sv-face="bdj"] .bdj-page .bdj-btn-outline {
  color: var(--bdj-accent) !important;
  border-color: var(--bdj-accent) !important;
}

/* Give the show photos the card width instead of losing it to wide gutters. */
html[data-sv-face="bdj"] .bdj-page #pakketten > div {
  max-width: 1200px !important;
}
@media (min-width: 1800px) {
  html[data-sv-face="bdj"] .bdj-page #pakketten > div {
    max-width: min(2000px, 90vw) !important;
  }
}
html[data-sv-face="bdj"] .bdj-page #pakketten > div > div:has(> .bdj-pkg) {
  gap: 1rem !important;
  margin-top: 0 !important;
}
html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg {
  padding: 1.75rem 1.25rem !important;
  gap: 1rem !important;
}
@media (max-width: 1799px) {
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg {
    padding: 28px 20px !important;
  }
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg :is(p, li) {
    font-size: 18px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg .bdj-btn {
    font-size: 16px !important;
    letter-spacing: 0.1em !important;
    padding: 16px 18px !important;
  }
}
@media (max-width: 1400px) {
  html[data-sv-face="bdj"] .bdj-page .bdj-nav-links,
  html[data-sv-face="bdj"] .bdj-page .bdj-nav-phone {
    display: none !important;
  }
  html[data-sv-face="bdj"] .bdj-page .bdj-hamburger {
    display: flex !important;
  }
  html[data-sv-face="bdj"] .bdj-page #pakketten > div > div:has(> .bdj-pkg) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg:last-child {
    grid-column: 1 / -1;
    width: calc((100% - 1rem) / 2);
    justify-self: center;
  }
}
@media (max-width: 1100px) {
  html[data-sv-face="bdj"] .bdj-page #pakketten > div > div:has(> .bdj-pkg) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg,
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg:last-child {
    grid-column: auto;
    width: 100%;
    max-width: 650px;
    justify-self: center;
  }
}
@media (max-width: 700px) {
  html[data-sv-face="bdj"] .bdj-page #pakketten .bdj-pkg {
    padding: 20px !important;
  }
}