/******************************/
/* MARK: GEDEELDE TOEGANKELIJKHEID */
/****************************/

/* Laad accessibility.css na de pagina-stylesheets en lightDark.css.
   De bestaande paginaclasses bepalen waar iedere regel geldt.
   Selector-specificiteit en pagina-afhankelijke uitzonderingen blijven behouden. */

.landing-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.story-page :is(a, button, input, select, summary, iframe, [tabindex]):focus-visible,
.story-page .violin-toggle:focus-visible + .violin-toggle-label,
.sources-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.privacy-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0.1875rem solid #fff;
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.375rem #231204;
}

.landing-page .gallery-image-link:focus-visible {
  outline-offset: -0.25rem;
  position: relative;
  z-index: 1;
}

.landing-page .gallery:focus-within {
  border-color: var(--secondary-font-color);
}

.landing-page #mainContent,
.sources-page #mainContent,
.privacy-page #mainContent {
  scroll-margin-top: 10rem;
}

.landing-page :is(a, button, summary, [tabindex="0"]),
.story-page :is(a, button, input, select, summary, iframe, [tabindex]),
.sources-page :is(a, button, summary, [tabindex="0"]),
.privacy-page :is(a, button, summary, [tabindex="0"]) {
  scroll-margin-block: 10rem 3rem;
}

.landing-page .skip-link:focus,
.story-page .garden-skip:focus,
.sources-page .skip-link:focus,
.privacy-page .skip-link:focus {
  z-index: 11000;
}

.landing-page .theme-toggle[hidden],
.landing-page .country-scroll-widget[hidden],
.story-page [hidden],
.sources-page .theme-toggle[hidden],
.sources-page .country-scroll-widget[hidden],
.sources-page [hidden],
.privacy-page .theme-toggle[hidden],
.privacy-page .country-scroll-widget[hidden],
.privacy-page [hidden] {
  display: none !important;
}

.landing-page .poster-transcript {
  padding: 1rem;
  text-align: left;
  color: var(--landing-body-text);
  border-top: 0.0625rem solid currentColor;
  line-height: 1.6;
}

.landing-page .poster-transcript summary {
  cursor: pointer;
  padding: 0.5rem 0;
}

.landing-page .poster-transcript ul {
  padding-left: 1.4rem;
  margin-block: 0.75rem 0;
}

.landing-page .poster-transcript li {
  margin-block: 0.25rem;
}

.landing-page .poster-transcript p {
  margin-block: 0.75rem;
}

html:has(body.landing-page) {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

html:has(body.landing-page)::-webkit-scrollbar {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
}

.landing-page .country-scroll-widget {
  z-index: 900;
}

.landing-page .country-scroll-track {
  z-index: 899;
}

.landing-page .scroll-music-note {
  z-index: 901;
}

.story-page .reveal-pending:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

.story-page .ticket-handle {
  order: 2;
}

.story-page .ticket-paper {
  order: 1;
}

.story-page .ticket-handle:focus-visible {
  outline-offset: -0.3125rem;
}

.story-page .concert-ticket-nav {
  max-height: calc(100dvh - 3rem);
}

.story-page .ticket-paper {
  overflow-y: auto;
}

.story-page .artist-dialog .dialog-close {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.story-page .style-detail + .style-detail {
  margin-top: 1rem;
}

.story-page button:disabled {
  cursor: default;
}

.story-page .story-interaction-help {
  max-width: 70ch;
  margin: 0 auto 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.story-page .story-read-link {
  display: block;
  width: fit-content;
  margin: 1rem auto 1.5rem;
  padding: 0.6rem;
  text-decoration: underline;
}

.story-page .story-nojs-artists {
  line-height: 1.6;
}

.story-page .violin-stage {
  aspect-ratio: auto;
}

.story-page .violin-topics {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.8rem;
}

.story-page .violin-topic {
  position: static;
  width: auto;
  min-height: 3rem;
}

.story-page .violin-topic span {
  font-size: 0.75rem;
}

.story-page .violin-topic strong {
  font-size: 0.95rem;
}

.story-page .violin-topic::after {
  display: none;
}

.story-page .violin-is-open .violin-topics {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sources-page .page-container {
  width: min(72rem, calc(100% - 2rem));
}

.sources-page .sources-read {
  margin-block: 1rem;
}

.sources-page .sources-read a, .sources-page .sources-nojs {
  color: var(--theme-heading-color, #f4c468);
}

.sources-page :is(.tab-btn, .filter-btn, .card-btn),
.privacy-page :is(button, input) {
  min-height: 2.75rem;
}

.sources-page :is(.card-body, .research-list > *) {
  overflow-wrap: anywhere;
  min-width: 0;
}

.sources-page .source-card:focus-within {
  outline: 0.125rem solid var(--amber-900);
  outline-offset: 0.125rem;
}

.sources-page button:disabled, .sources-page input:disabled {
  opacity: .65;
  cursor: default;
}

html:has(body.sources-page),
html:has(body.privacy-page) {
  scrollbar-width: auto;
}

html:has(body.sources-page)::-webkit-scrollbar,
html:has(body.privacy-page)::-webkit-scrollbar {
  display: block;
  width: .8rem;
}

.privacy-page #privacyQuestionForm :is(input, textarea) {
  max-width: 100%;
  min-width: 0;
}

.privacy-page #privacyQuestionForm textarea {
  resize: vertical;
  min-height: 8rem;
}

.privacy-page .postcard-error-summary, .privacy-page .postcard-error {
  overflow-wrap: anywhere;
}

.privacy-page .has-error {
  border: .125rem dashed #a02116;
}

.privacy-page .postcard-confirmation {
  max-height: 85dvh;
  overflow-y: auto;
}





/******************************/
/* MARK: GROTERE SCHERMEN */
/****************************/

@media (min-width: 40rem) {
  .story-page .violin-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}





/******************************/
/* MARK: GROTERE SCHERMEN */
/****************************/

@media (min-width: 53.126rem) {
  .landing-page > nav > ul,
  .story-page > nav:first-of-type > ul,
  .sources-page > nav > ul,
  .privacy-page > nav > ul {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, max-content));
    gap: 0.25rem 0.5rem;
  }
}





/******************************/
/* MARK: GROTERE SCHERMEN */
/****************************/

@media (min-width: 62rem) {
  .story-page .violin-stage {
    aspect-ratio: 760 / 700;
  }

  .story-page .violin-topics {
    position: static;
    display: block;
    padding: 0;
  }

  .story-page .violin-topic {
    position: absolute;
    width: 34%;
  }

  .story-page .violin-topic::after {
    display: block;
  }
}





/******************************/
/* MARK: GROTERE SCHERMEN */
/****************************/

@media (min-width: 75rem) {
  .landing-page > nav > ul,
  .story-page > nav:first-of-type > ul,
  .sources-page > nav > ul,
  .privacy-page > nav > ul {
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 0.625rem;
  }
}





/******************************/
/* MARK: VERMINDERDE BEWEGING */
/****************************/

@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after,
  .story-page *, .story-page *::before, .story-page *::after,
  .sources-page *, .sources-page *::before, .sources-page *::after,
  .privacy-page *, .privacy-page *::before, .privacy-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .landing-page .scroll-music-note,
  .sources-page .scroll-music-note,
  .privacy-page .scroll-music-note {
    display: none;
  }

  html:has(body.story-page) {
    scroll-behavior: auto;
  }

  .story-page .reveal-pending {
    opacity: 1;
    transform: none;
  }

  html:has(body.sources-page),
  html:has(body.privacy-page) {
    scroll-behavior: auto !important;
  }
}





/******************************/
/* MARK: SYSTEEMKLEUREN */
/****************************/

@media (forced-colors: active) {
  .landing-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  .story-page :is(a, button, input, select, summary, iframe, [tabindex]):focus-visible,
  .story-page .violin-toggle:focus-visible + .violin-toggle-label,
  .sources-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
  .privacy-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }

  .privacy-page .has-error {
    border-color: CanvasText;
  }
}