/*
 * Hart voor Humor 1.2.2
 * Warme, lichte vormgeving met theaterrood als hoofdkleur en zwart als accent.
 * Deze laag wordt na de paginaspecifieke styles geladen zodat de bestaande
 * inhoud en functionaliteit intact blijven.
 */
:root {
  --bb-red: #b52227;
  --bb-red-deep: #8f171c;
  --bb-black: #171313;
  --bb-ink: #171313;
  --bb-muted: #685c59;
  --bb-panel: #ffffff;
  --bb-panel-soft: #fff8f3;
  --bb-panel-alt: #f6eae2;
  --bb-line: #e7d5d1;
  --bb-shadow: 0 18px 46px rgba(64, 30, 27, 0.1);
  --hvh-warm-white: #fffdfb;
  --hvh-warm-cream: #fff8f3;
  --hvh-warm-alt: #f6eae2;
  --hvh-warm-line: #e7d5d1;
  --hvh-ink: #171313;
  --hvh-muted: #685c59;
  --hvh-red: #b52227;
  --hvh-red-deep: #8f171c;
  --hvh-card-shadow: 0 18px 46px rgba(64, 30, 27, 0.1);
  --hvh-card-shadow-hover: 0 24px 58px rgba(64, 30, 27, 0.15);
}

html,
body {
  background: var(--hvh-warm-cream);
  color: var(--hvh-ink);
}

body {
  accent-color: var(--hvh-red);
}

.site-shell {
  background:
    radial-gradient(circle at 12% 14%, rgba(181, 34, 39, 0.055), transparent 30rem),
    linear-gradient(180deg, var(--hvh-warm-white) 0%, var(--hvh-warm-cream) 100%);
}

body:not(.home) main {
  background: linear-gradient(180deg, var(--hvh-warm-cream) 0%, var(--hvh-warm-white) 68%, var(--hvh-warm-alt) 100%);
}

::selection {
  background: rgba(181, 34, 39, 0.2);
  color: var(--hvh-ink);
}

a {
  text-decoration-color: rgba(181, 34, 39, 0.5);
}

/* Lichte vaste header; de homepage-hero behoudt bij de start zijn theaterbeeld. */
body:not(.home) .main-header__bar,
.home .main-header--compact .main-header__bar {
  border-color: rgba(181, 34, 39, 0.16);
  background: rgba(255, 253, 251, 0.94);
  box-shadow: 0 12px 34px rgba(64, 30, 27, 0.09);
  color: var(--hvh-ink);
  backdrop-filter: blur(18px);
}

body:not(.home) :is(.main-header__nav-link, .main-header__menu-label),
.home .main-header--compact :is(.main-header__nav-link, .main-header__menu-label) {
  color: var(--hvh-ink);
  text-shadow: none;
}

body:not(.home) .main-header__nav-link:is(:hover, :focus-visible, [aria-current="page"]),
.home .main-header--compact .main-header__nav-link:is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--hvh-red);
}

body:not(.home) .main-header__brand-home,
.home .main-header--compact .main-header__brand-home {
  border-color: var(--hvh-red);
  background: var(--hvh-red);
  color: #fff;
  box-shadow: 0 9px 22px rgba(143, 23, 28, 0.22);
}

.main-header__mobile-panel {
  border-color: rgba(181, 34, 39, 0.18);
  background: linear-gradient(180deg, #fffdfb 0%, #fff8f3 100%);
  box-shadow: -22px 0 60px rgba(23, 19, 19, 0.18);
  color: var(--hvh-ink);
}

.main-header__mobile-panel :is(a, button) {
  color: var(--hvh-ink);
}

.main-header__mobile-panel a:is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--hvh-red);
}

/* Homepage: de hero blijft filmisch, alle inhoud eronder wordt licht. */
.home
  :is(
    .bb-section--dates,
    .bb-section--comedians,
    .bb-section--bookings,
    .bb-section--video,
    .bb-section--moments,
    .bb-section--contact
  ) {
  color: var(--hvh-ink);
}

.home :is(.bb-section--dates, .bb-section--bookings, .bb-section--moments) {
  background:
    linear-gradient(90deg, rgba(181, 34, 39, 0.035), transparent 28%, transparent 72%, rgba(181, 34, 39, 0.035)),
    var(--hvh-warm-cream);
}

.home :is(.bb-section--comedians, .bb-section--video, .bb-section--contact) {
  background: var(--hvh-warm-white);
}

.home
  :is(
    .bb-section--dates,
    .bb-section--comedians,
    .bb-section--bookings,
    .bb-section--video,
    .bb-section--moments,
    .bb-section--contact
  )
  :is(h2, h3, h4, .bb-section__title) {
  color: var(--hvh-ink);
}

.home
  :is(
    .bb-section--dates,
    .bb-section--comedians,
    .bb-section--bookings,
    .bb-section--video,
    .bb-section--moments,
    .bb-section--contact
  )
  :is(p, .bb-section__intro, .bb-section__text, .bb-card__text) {
  color: var(--hvh-muted);
}

.home
  :is(
    .bb-section--dates,
    .bb-section--comedians,
    .bb-section--bookings,
    .bb-section--video,
    .bb-section--moments,
    .bb-section--contact
  )
  :is(.bb-section__eyebrow, .bb-kicker, .bb-card__eyebrow) {
  color: var(--hvh-red);
}

.home
  :is(
    .bb-date-card,
    .bb-comedian-card,
    .bb-media-choice,
    .bb-community-card,
    .bb-contact-photo-card,
    .bb-contact-followup,
    .bb-bookings-copy
  ) {
  border-color: var(--hvh-warm-line);
  background: #fff;
  box-shadow: var(--hvh-card-shadow);
}

.home
  :is(
    .bb-date-card,
    .bb-comedian-card,
    .bb-media-choice,
    .bb-community-card,
    .bb-contact-photo-card
  ):hover {
  border-color: rgba(181, 34, 39, 0.32);
  box-shadow: var(--hvh-card-shadow-hover);
}

.home :is(.bb-community-card__media, .bb-contact-photo-card__visual) {
  background: var(--hvh-warm-alt);
}

.home .bb-bookings-copy {
  padding: clamp(24px, 4vw, 44px);
  border-left: 4px solid var(--hvh-red);
  border-radius: clamp(22px, 3vw, 32px);
}

.home .bb-bookings-gallery__viewport {
  border: 1px solid rgba(181, 34, 39, 0.22);
  background: #fff;
  box-shadow: var(--hvh-card-shadow);
}

.home .bb-contact-followup {
  border-top: 4px solid var(--hvh-red);
}

.home :is(input, textarea, select) {
  border-color: #d9c7c3;
  background: #fff;
  color: var(--hvh-ink);
}

.home :is(input, textarea, select):focus {
  border-color: var(--hvh-red);
  box-shadow: 0 0 0 4px rgba(181, 34, 39, 0.12);
  outline: none;
}

/* Binnenpagina's: lichte kaarten en rustige rode lijnen. */
.page-shell {
  --page-accent: var(--hvh-red);
  --page-accent-deep: var(--hvh-red-deep);
  --page-surface-bg: #fff;
  --page-surface-border: var(--hvh-warm-line);
  --page-ink: var(--hvh-ink);
  --page-muted: var(--hvh-muted);
}

:is(
    .page-shell__surface,
    .page-shell__legal,
    .page-card,
    .page-rich-card,
    .columns-card,
    .columns-open-reading,
    .columns-newsletter,
    .about-rules-card,
    .about-team-card,
    .agenda-empty-state
  ) {
  border-color: var(--hvh-warm-line);
  background: #fff;
  box-shadow: var(--hvh-card-shadow);
  color: var(--hvh-ink);
}

:is(
    .bookings-offer-card__item,
    .bookings-flow-card__step,
    .bookings-flow-card__panel,
    .bookings-practical-card__detail,
    .support-card__highlight,
    .media-press-item
  ) {
  border-color: var(--hvh-warm-line);
  background: var(--hvh-warm-cream);
}

.page-shell :is(.page-shell__kicker, .page-card__eyebrow, .page-rich-card__eyebrow) {
  color: var(--hvh-red);
}

.page-shell :is(input, textarea, select) {
  border-color: #d9c7c3;
  background: var(--hvh-warm-white);
  color: var(--hvh-ink);
}

.page-shell :is(input, textarea, select):focus {
  border-color: var(--hvh-red);
  box-shadow: 0 0 0 4px rgba(181, 34, 39, 0.12);
  outline: none;
}

.site-footer {
  border-top-color: rgba(181, 34, 39, 0.7);
  background: #151112;
}

.site-footer a:is(:hover, :focus-visible) {
  color: #ff7277;
}

/* Tablet: ruim, rustig en zonder te kleine klikvlakken. */
@media (min-width: 681px) and (max-width: 1100px) {
  :root {
    --frame-gutter: 22px;
  }

  .home
    :is(
      .bb-section--dates,
      .bb-section--comedians,
      .bb-section--bookings,
      .bb-section--video,
      .bb-section--moments,
      .bb-section--contact
    ) {
    padding-block: clamp(52px, 7vw, 70px);
  }

  .home .bb-community-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .home .bb-bookings-gallery {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .home .bb-contact-followup {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .page-shell {
    gap: 24px;
    margin-top: 30px;
  }

  :is(.page-shell__surface, .page-shell__legal, .page-card, .page-rich-card) {
    padding: clamp(24px, 3.5vw, 32px);
  }
}

/* Mobiel: één duidelijke leeskolom, comfortabele marges en tikvlakken. */
@media (max-width: 680px) {
  :root {
    --frame-gutter: 16px;
  }

  body {
    font-size: 16px;
  }

  .home
    :is(
      .bb-section--dates,
      .bb-section--comedians,
      .bb-section--bookings,
      .bb-section--video,
      .bb-section--moments,
      .bb-section--contact
    ) {
    padding-block: 46px;
  }

  .home
    :is(
      .bb-section--dates,
      .bb-section--comedians,
      .bb-section--bookings,
      .bb-section--video,
      .bb-section--moments,
      .bb-section--contact
    )
    .bb-section__title {
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.04;
  }

  .home .bb-bookings-copy {
    padding: 22px;
    border-left-width: 3px;
    border-radius: 22px;
  }

  .home .bb-bookings-gallery__viewport {
    border-radius: 22px;
  }

  .home :is(.bb-community-card, .bb-contact-photo-card, .bb-media-choice, .bb-comedian-card) {
    border-radius: 20px;
  }

  .home .bb-contact-followup {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border-radius: 22px;
  }

  .page-shell {
    gap: 18px;
    margin-top: 22px;
  }

  :is(.page-shell__hero, .page-shell__surface, .page-shell__legal, .page-card, .page-rich-card) {
    border-radius: 22px;
  }

  :is(.page-shell__surface, .page-shell__legal, .page-card, .page-rich-card) {
    padding: 21px;
  }

  .page-shell :is(input, textarea, select),
  .home :is(input, textarea, select) {
    min-height: 48px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .home .bb-community-gallery__grid,
  .home .bb-contact-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  :root {
    --frame-gutter: 14px;
  }

  .home .bb-date-flyer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home .bb-bookings-copy,
  .home .bb-contact-followup {
    padding: 18px;
  }
}