/* PunchClub Nederland — sitebrede contrastcorrecties, WCAG AA gericht */
:root {
  --pc-contrast-ink: #101417;
  --pc-contrast-copy: #34383b;
  --pc-contrast-deep: #101417;
  --pc-contrast-cream: #f5f1e8;
  --pc-contrast-white: #ffffff;
  --pc-contrast-mint: #f5f1e8;
  --pc-contrast-coral: #c6a35e;
  --pc-contrast-red: #6d5935;
  --pc-contrast-gold: #6d5935;
  --pc-contrast-gold-bright: #c6a35e;
  --pc-contrast-focus: #101417;

  /* Ook de variabelen van oudere pagina's volgen voortaan de zwart-gouden stijl. */
  --pc-ink: #101417;
  --pc-deep: #101417;
  --pc-mint: #f5f1e8;
  --pc-coral: #c6a35e;
  --pc-mango: #c6a35e;
  --pc-cream: #f5f1e8;
}

html { color-scheme: light; }

body {
  color: var(--pc-contrast-ink) !important;
  background-color: var(--pc-contrast-cream) !important;
}

/* Eén merkstijl: zwarte navigatie, goud accent en gebroken wit als basis. */
.topbar,
.retail-topbar,
body > header.top,
.pc-global-header {
  background: rgba(16, 20, 23, .98) !important;
  color: var(--pc-contrast-white) !important;
  border-color: rgba(198, 163, 94, .38) !important;
}

.topbar nav a,
.topbar .desktop-nav a,
.topbar .brand,
.retail-topbar a,
body > header.top a,
.pc-global-header a {
  color: var(--pc-contrast-white) !important;
}

.topbar .header-actions .pill,
.topbar .pc-header-tasting,
.retail-topbar .pill,
body > header.top .pill {
  background: var(--pc-contrast-gold-bright) !important;
  color: var(--pc-contrast-ink) !important;
}

.mobile-nav div,
.mobile-menu,
.nav-menu {
  background: var(--pc-contrast-deep) !important;
  color: var(--pc-contrast-white) !important;
  border-color: rgba(198, 163, 94, .4) !important;
}

.mobile-nav div a,
.mobile-menu a,
.nav-menu a {
  color: var(--pc-contrast-white) !important;
}

/* Scherpe koppen en vetgedrukte tekst, zonder contour of waas. */
h1, h2, h3, h4, h5, h6,
strong, b,
.eyebrow, .kicker, .number, .fact,
.pill, .button, button {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

h1, h2, h3, h4, h5, h6,
strong, b {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
}

/* Lichte pagina's, tekstblokken, formulieren en kaarten. */
.section-head,
.intro,
.product-card,
.product-copy,
.card-copy,
.info-cards article,
.listing-grid article,
.about-story article,
.info-grid article,
.pc-service-grid article,
.pc-tip-card,
.pc-tip-copy,
.pc-origin,
.pc-serve-grid section,
.contact-layout,
.contact-form-card,
.public-form,
.tasting-form,
.retail-contact,
.retail-interest {
  color: var(--pc-contrast-ink) !important;
}

.product-card h2, .product-card h3, .product-card h4,
.product-card p, .product-card a,
.product-copy h2, .product-copy h3, .product-copy p, .product-copy a,
.card-copy h2, .card-copy h3, .card-copy p, .card-copy a,
.info-cards h2, .info-cards h3, .info-cards p,
.listing-grid h2, .listing-grid h3, .listing-grid p, .listing-grid b,
.pc-service-grid h2, .pc-service-grid h3, .pc-service-grid p,
.contact-form-card h2, .contact-form-card h3,
.pc-tip-copy h1, .pc-tip-copy h2, .pc-tip-copy h3,
.pc-tip-copy p, .pc-tip-copy strong, .pc-tip-copy b,
.pc-origin h2, .pc-origin p,
.pc-serve-grid h2, .pc-serve-grid p {
  color: var(--pc-contrast-ink) !important;
  text-shadow: none !important;
}

.product-card p,
.card-copy p,
.info-cards p,
.listing-grid p,
.about-story p,
.info-grid p,
.pc-service-grid p,
.contact-form-card p,
.pc-tip-copy p {
  color: var(--pc-contrast-copy) !important;
}

/* Goud als decoratie was op wit te licht; deze donkere variant blijft goud. */
.section-head .eyebrow,
.intro .eyebrow,
.intro .fact,
.card-copy .eyebrow,
.product-copy .number,
.product-card .number,
.info-cards article > b,
.retail-support-grid article > b,
.about-story article > b,
.info-grid article > b,
.listing-grid small,
.pc-tip-card small,
.pc-serve-grid small,
.pc-tip-copy .eyebrow.dark {
  color: var(--pc-contrast-gold) !important;
}

/* Rode labels op crème of mint krijgen voldoende contrast. */
body[data-page='wie-zijn-wij'] .page-hero > .eyebrow,
.info-hero > .eyebrow,
.contact-layout > div:first-child > .eyebrow,
.pictures-cta .eyebrow,
.cookie-panel .eyebrow,
.age-gate-card > .eyebrow {
  color: var(--pc-contrast-red) !important;
}

/* Over ons: alle onderste blokken krijgen expliciet leesbare koppen. */
body[data-page='wie-zijn-wij'] .about-story article,
.info-hero .about-story article {
  color: var(--pc-contrast-ink) !important;
}

body[data-page='wie-zijn-wij'] .about-story article h2,
body[data-page='wie-zijn-wij'] .about-story article h3,
body[data-page='wie-zijn-wij'] .about-story article strong,
.info-hero .about-story article h2,
.info-hero .about-story article h3,
.info-hero .about-story article strong {
  color: var(--pc-contrast-ink) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
}

.info-grid article:not(:nth-child(2)) h2,
.info-grid article:not(:nth-child(2)) p {
  color: var(--pc-contrast-ink) !important;
}

.info-grid article:nth-child(2) h2,
.info-grid article:nth-child(2) p {
  color: var(--pc-contrast-white) !important;
}

.info-grid article:nth-child(2) > b {
  color: var(--pc-contrast-gold-bright) !important;
}

/* Goudkleurige vlakken: donkere tekst in plaats van wit of grijsgroen. */
.newsletter-section,
.newsletter-section h2,
.newsletter-section h3,
.newsletter-section p,
.newsletter-section label,
.newsletter-section a,
.newsletter-section em,
.showcase-card.horeca-highlight,
.showcase-card.horeca-highlight h3,
.showcase-card.horeca-highlight p,
.showcase-card.horeca-highlight a,
.info-cta,
.info-cta h2,
.info-cta h3,
.info-cta p,
.info-cta a,
.horeca-solutions article,
.horeca-solutions article h3,
.horeca-solutions article p,
.horeca-solutions article span {
  color: var(--pc-contrast-ink) !important;
}

.retail-home,
.retail-home h2,
.retail-home h3,
.retail-home p,
.retail-home a,
.retail-home .eyebrow {
  color: var(--pc-contrast-ink) !important;
}

/* Alle gevulde CTA's hebben een donkere tekstkleur. */
.pill.mango,
a.pill.mango,
button.pill.mango,
.public-form button,
.tasting-form button,
.newsletter-form button,
.age-actions button:first-child,
.cookie-actions button:not(.cookie-necessary),
.pc-back-button {
  background: var(--pc-contrast-gold-bright) !important;
  color: var(--pc-contrast-ink) !important;
  border-color: var(--pc-contrast-gold-bright) !important;
  text-shadow: none !important;
}

.pc-cocktail-tips-sticker,
.pcb-latest-blog-sticker,
.hero .pc-cocktail-tips-sticker,
.hero .pcb-latest-blog-sticker {
  background: var(--pc-contrast-gold-bright) !important;
  color: var(--pc-contrast-ink) !important;
  border-color: var(--pc-contrast-white) !important;
}

.pc-cocktail-tips-sticker::before,
.pcb-latest-blog-sticker::before {
  background: var(--pc-contrast-deep) !important;
  color: var(--pc-contrast-white) !important;
}

.retail-contact a,
.pc-direct-contact a,
.contact-layout > div:first-child > a {
  color: var(--pc-contrast-ink) !important;
  font-weight: 800 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Formulieren en invoerteksten. */
.public-form label,
.newsletter-form label,
.tasting-form label,
.contact-form-card label {
  color: var(--pc-contrast-ink) !important;
  font-weight: 800 !important;
}

.public-form input,
.public-form textarea,
.public-form select,
.newsletter-form input,
.tasting-form input,
.tasting-form textarea,
.tasting-form select,
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select {
  color: var(--pc-contrast-ink) !important;
  background: var(--pc-contrast-white) !important;
  border-color: #69837d !important;
  opacity: 1 !important;
}

input::placeholder,
textarea::placeholder {
  color: #526d67 !important;
  opacity: 1 !important;
}

/* Tekst over foto's: wit met een stevige donkere ondergrond. */
body[data-page='home'] .hero .hero-shade {
  background: linear-gradient(90deg, rgba(10, 12, 14, .90) 0%, rgba(10, 12, 14, .66) 52%, rgba(10, 12, 14, .22) 100%) !important;
}

body[data-page='home'] .hero .hero-copy,
body[data-page='home'] .hero .hero-copy h1,
body[data-page='home'] .hero .hero-copy p,
body[data-page='home'] .hero .hero-copy .eyebrow,
.sub-hero > div,
.sub-hero > div h1,
.sub-hero > div p,
.sub-hero > div .eyebrow,
.pictures-hero,
.pictures-hero h1,
.pictures-hero p,
.pictures-hero .eyebrow,
.showcase-overlay,
.showcase-overlay h2,
.showcase-overlay p,
.showcase-overlay .eyebrow,
.pictures-grid figcaption,
.pictures-grid figcaption h2,
.pictures-grid figcaption small {
  color: var(--pc-contrast-white) !important;
}

.sub-hero { position: relative; isolation: isolate; }
.sub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 12, 14, .88), rgba(10, 12, 14, .38));
}
.sub-hero > img { z-index: -1; }
.sub-hero > div { position: relative; z-index: 1; }

body[data-page='home'] .vibe.photo {
  position: relative;
  isolation: isolate;
}

body[data-page='home'] .vibe.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,14,.04) 35%, rgba(10,12,14,.92) 100%);
}

body[data-page='home'] .vibe.photo h3,
body[data-page='home'] .vibe.photo p {
  position: relative;
  z-index: 1;
  color: var(--pc-contrast-white) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

.showcase-overlay {
  background: linear-gradient(90deg, rgba(10,12,14,.90), rgba(10,12,14,.44)) !important;
}

.pictures-grid figcaption {
  background: linear-gradient(transparent, rgba(10,12,14,.96)) !important;
}

/* Blogoverzicht: de blogkop stond wit op een lichte achtergrond. */
body > section.hero {
  background-color: var(--pc-contrast-deep) !important;
  color: var(--pc-contrast-white) !important;
}

body > section.hero h1,
body > section.hero h2,
body > section.hero p,
body > section.hero a {
  color: var(--pc-contrast-white) !important;
}

/* Footer en donkere secties. */
footer,
.footer,
.pc-global-footer,
#pc-latest-blogs,
.story {
  background-color: var(--pc-contrast-deep) !important;
  color: var(--pc-contrast-white) !important;
}

footer h2, footer h3, footer h4, footer p, footer a,
.footer h2, .footer h3, .footer h4, .footer p, .footer a,
.pc-global-footer h2, .pc-global-footer h3, .pc-global-footer h4,
.pc-global-footer p, .pc-global-footer a,
.story h2, .story h3, .story p, .story .eyebrow,
#pc-latest-blogs > h2, #pc-latest-blogs > p, #pc-latest-blogs > a {
  color: var(--pc-contrast-white) !important;
}

#pc-latest-blogs article,
#pc-latest-blogs article h3,
#pc-latest-blogs article p,
#pc-latest-blogs article a {
  color: var(--pc-contrast-ink) !important;
}

/* Onderdelen die nog uit de groene/koraalkleurige versie kwamen. */
.pc-tips-hero,
.assortment-hero,
.page-hero,
.pictures-hero,
.horeca-hero,
.retail-hero {
  background-color: var(--pc-contrast-deep) !important;
}

.pc-tips-hero,
.pc-tips-hero h1,
.pc-tips-hero h2,
.pc-tips-hero p,
.pc-tips-hero .eyebrow,
.assortment-hero,
.assortment-hero h1,
.assortment-hero p,
.assortment-hero .eyebrow,
.page-hero,
.page-hero h1,
.page-hero h2,
.page-hero p,
.page-hero .eyebrow {
  color: var(--pc-contrast-white) !important;
}

.horeca-hero,
.horeca-hero h1,
.horeca-hero h2,
.horeca-hero p,
.horeca-hero a,
.horeca-hero .eyebrow,
.retail-hero,
.retail-hero h1,
.retail-hero h2,
.retail-hero p,
.retail-hero a,
.retail-hero .eyebrow {
  color: var(--pc-contrast-white) !important;
}

.horeca-intro,
.horeca-solutions,
.horeca-tap,
.horeca-support,
.retail-proof,
.retail-program,
.retail-interest,
.pictures-grid,
.pc-tips-overview,
.pc-tip-detail,
.contact-layout,
.info-hero {
  background-color: var(--pc-contrast-cream) !important;
  color: var(--pc-contrast-ink) !important;
}

.horeca-intro h1, .horeca-intro h2, .horeca-intro h3,
.horeca-solutions h1, .horeca-solutions h2, .horeca-solutions h3,
.horeca-tap h1, .horeca-tap h2, .horeca-tap h3,
.horeca-support h1, .horeca-support h2, .horeca-support h3,
.retail-proof h1, .retail-proof h2, .retail-proof h3,
.retail-program h1, .retail-program h2, .retail-program h3,
.retail-interest h1, .retail-interest h2, .retail-interest h3,
.contact-layout h1, .contact-layout h2, .contact-layout h3,
.info-hero > h1, .info-hero > h2,
.pc-tips-overview h1, .pc-tips-overview h2, .pc-tips-overview h3 {
  color: var(--pc-contrast-ink) !important;
}

.horeca-intro p,
.horeca-solutions p,
.horeca-tap p,
.horeca-support p,
.retail-proof p,
.retail-program p,
.retail-interest p,
.contact-layout p,
.info-hero > p.lead,
.pc-tips-overview p {
  color: var(--pc-contrast-copy) !important;
}

.horeca-intro a,
.horeca-tap a,
.horeca-support a,
.retail-proof a,
.retail-program a,
.retail-interest a,
.contact-layout a {
  color: var(--pc-contrast-gold) !important;
}

.pc-guide-note,
.pc-origin,
.pc-direct-contact,
.pictures-cta,
.category-nav,
.pc-category-nav,
.assortment-category-nav {
  background: var(--pc-contrast-cream) !important;
  color: var(--pc-contrast-ink) !important;
  border-color: rgba(198, 163, 94, .48) !important;
}

.pc-guide-note,
.pc-guide-note h2,
.pc-guide-note h3,
.pc-guide-note p,
.pc-guide-note strong,
.pc-origin,
.pc-origin h2,
.pc-origin p,
.pc-direct-contact,
.pc-direct-contact h2,
.pc-direct-contact p,
.pictures-cta,
.pictures-cta h2,
.pictures-cta p {
  color: var(--pc-contrast-ink) !important;
}

.pc-tip-card,
.pc-serve-grid section,
.product-card,
.card,
.info-cards article,
.retail-support-grid article,
.listing-grid article,
.about-story article,
.info-grid article:not(:nth-child(2)) {
  background-color: var(--pc-contrast-white) !important;
  border-color: rgba(198, 163, 94, .45) !important;
}

.pc-tip-card em,
.pc-tip-card strong,
.pc-tip-card h2,
.pc-tip-card h3,
.pc-tip-card p,
.product-card a,
.card-copy .arrow,
.product-copy a,
.listing-grid small,
.public-form a,
.newsletter-form a,
.pc-backbar a {
  color: var(--pc-contrast-gold) !important;
}

.pc-tip-card strong,
.pc-tip-card h2,
.pc-tip-card h3,
.pc-tip-card p {
  color: var(--pc-contrast-ink) !important;
}

.pc-backbar {
  background: var(--pc-contrast-white) !important;
  border-color: rgba(198, 163, 94, .45) !important;
}

#pc-date .pc-date-link {
  background: var(--pc-contrast-deep) !important;
  color: var(--pc-contrast-white) !important;
  border: 1px solid rgba(198, 163, 94, .55) !important;
}

#pc-date h2,
#pc-date .pc-date-copy,
#pc-date .pc-date-kicker {
  color: var(--pc-contrast-white) !important;
}

#pc-date .pc-date-action {
  background: var(--pc-contrast-gold-bright) !important;
  color: var(--pc-contrast-ink) !important;
}

.pc-benefits li::before {
  background: var(--pc-contrast-gold-bright) !important;
  color: var(--pc-contrast-ink) !important;
}

.public-form input:focus,
.public-form textarea:focus,
.public-form select:focus,
.newsletter-form input:focus,
.tasting-form input:focus,
.tasting-form textarea:focus,
.contact-form-card input:focus,
.contact-form-card textarea:focus {
  border-color: var(--pc-contrast-gold) !important;
  box-shadow: 0 0 0 3px rgba(198, 163, 94, .25) !important;
}

/* Leeftijdsvenster en mobiel menu. */
.age-gate-card {
  color: var(--pc-contrast-ink) !important;
}

.age-gate-card h2,
.age-gate-card p,
.age-gate-card small,
.age-gate-card .age-no {
  color: var(--pc-contrast-ink) !important;
}

.mobile-nav summary,
.menu-toggle,
.hamburger,
button[aria-label*='menu' i] {
  color: var(--pc-contrast-gold-bright) !important;
}

.topbar a:focus-visible,
.retail-topbar a:focus-visible,
body > header.top a:focus-visible,
.mobile-nav summary:focus-visible {
  outline-color: var(--pc-contrast-gold-bright) !important;
}

.pc-tips-hero .eyebrow,
.assortment-hero .eyebrow,
.page-hero .eyebrow,
.pictures-hero .eyebrow,
.horeca-hero .eyebrow,
.retail-hero .eyebrow,
.showcase-overlay .eyebrow,
.story .eyebrow,
#pc-latest-blogs > .eyebrow,
body > section.hero > p:first-child,
#pc-date .pc-date-kicker {
  color: var(--pc-contrast-gold-bright) !important;
}

/* Zichtbare toetsenbordfocus op lichte en gekleurde onderdelen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pc-contrast-focus) !important;
  outline-offset: 3px !important;
}

footer a:focus-visible,
.pc-global-footer a:focus-visible,
.story a:focus-visible,
.sub-hero a:focus-visible,
.pictures-hero a:focus-visible,
body > section.hero a:focus-visible {
  outline-color: var(--pc-contrast-white) !important;
}

@media (max-width: 760px) {
  body[data-page='home'] .hero .hero-shade {
    background: linear-gradient(180deg, rgba(10,12,14,.40), rgba(10,12,14,.92)) !important;
  }

  .sub-hero::after {
    background: linear-gradient(180deg, rgba(10,12,14,.32), rgba(10,12,14,.92));
  }
}