/* PunchClub Nederland — mobiele leesbaarheid en consistente categorieën */
:root {
  --pc-mobile-ink: #101417;
  --pc-mobile-copy: #34383b;
  --pc-mobile-cream: #f5f1e8;
  --pc-mobile-white: #ffffff;
  --pc-mobile-gold: #6d5935;
  --pc-mobile-gold-bright: #d7bd7f;
}

/* Teksten en knoppen die op enkele pagina's nog te weinig contrast hadden. */
.age-gate-card > .eyebrow,
.age-card > .eyebrow,
.page-hero > .eyebrow,
.section-head > .eyebrow,
.card-copy > .eyebrow,
.about-story .eyebrow,
.info-cards .eyebrow,
.step-number,
.feature-number {
  color: var(--pc-mobile-gold) !important;
}

.cookie-panel .eyebrow,
.cookie-panel h2,
.cookie-panel p,
.cookie-panel a {
  color: var(--pc-mobile-white) !important;
}

.closing h2,
.cta-band h2,
.cta-band strong,
.gold-panel h2 {
  color: var(--pc-mobile-ink) !important;
}

.button,
.pill.mango,
.pill.coral,
.cookie-actions button:not(.cookie-necessary),
button[type='submit'] {
  color: var(--pc-mobile-ink) !important;
}

.about-story strong,
.about-story b,
.info-cards strong,
.info-cards b,
.story-grid strong,
.story-grid b,
.card strong,
.card b {
  color: inherit !important;
  font-weight: 800 !important;
}

.mobile-nav div {
  background: var(--pc-mobile-ink) !important;
  border: 1px solid rgba(215,189,127,.45) !important;
}

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

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    color: var(--pc-mobile-ink);
    font-size: 16px !important;
    line-height: 1.6 !important;
    -webkit-text-size-adjust: 100%;
  }

  p,
  li,
  address,
  label,
  input,
  textarea,
  select,
  button {
    font-size: max(1rem, 16px);
  }

  h1 {
    font-size: clamp(2.5rem, 12vw, 4.2rem) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(2rem, 9vw, 3.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }

  h3 {
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  strong,
  b {
    font-weight: 800 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  .topbar {
    min-height: 76px;
    padding: 8px 16px !important;
  }

  .topbar .brand img {
    width: 52px !important;
    height: 52px !important;
  }

  .mobile-nav div {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 12px) !important;
    width: min(300px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.32) !important;
  }

  .mobile-nav div a {
    display: block !important;
    min-height: 46px;
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.45;
  }

  .mobile-nav div a:last-child {
    border-bottom: 0;
  }

  .grid,
  .pc-category-grid,
  .pc-tip-grid,
  .about-story,
  .info-cards,
  .story-grid,
  .service-grid,
  .tap-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid {
    gap: 18px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .grid .card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  .grid .card img {
    display: block;
    width: 100% !important;
    height: clamp(230px, 72vw, 330px) !important;
    min-height: 0 !important;
    padding: 18px !important;
    object-fit: contain !important;
  }

  .grid .card-copy {
    min-width: 0;
    padding: 24px !important;
  }

  .grid .card p,
  .about-story p,
  .info-cards p,
  .story-grid p {
    color: var(--pc-mobile-copy) !important;
    opacity: 1 !important;
  }

  .grid .arrow {
    margin-top: 22px !important;
    color: var(--pc-mobile-gold) !important;
  }

  .pc-category-nav {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pc-category-nav a {
    width: 100%;
    white-space: normal !important;
  }

  .about-story article,
  .info-cards article,
  .story-grid article,
  .service-grid article {
    min-width: 0;
    padding: 24px !important;
  }

  .pc-global-footer {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}