/* helpers */
html.no-js .js, html.js .no-js {
  display: none !important;
}

html:not([lang=no]) .only-no,
html:not([lang=en]) .only-en {
  display: none !important;
}

.skiplinks a {
  background: var(--component-background-color);
  border-radius: var(--radius-std);
  box-shadow: 0 12px 17px 2px hsla(0, 0%, 0%, 0.14), 0 5px 22px 4px hsla(0, 0%, 0%, 0.12), 0 7px 8px -4px hsla(0, 0%, 0%, 0.2);
  outline-offset: 0;
  padding-inline: 20px;
  padding-block: 15px;
  position: absolute;
  inset-inline: -999px auto;
  inset-block: 2em auto;
  z-index: 10;
}

.skiplinks a:focus-visible {
  inset-inline: 2em auto;
}

/* Disclosure, an invisible checkbox that allows controling visibility without javascript */
/* TODO: implement https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ */
/*
why not use details/summary everywhere?
	- because NVDA can't handle links inside summary (used for treeview)
	- summary (trigger) needs to be direct preceding sibling of content, this is too restrictive
	- while summary can be inline in collapsed mode, the whole details is block mode when expanded
	- it's not possible to overrule details display with css (for example for printing)
	- collapsed details can be inline, but expanded is always block; contents can not be inline, but can be absolutely positioned

Code structure:
<input type="checkbox|radio" class="dcl-status" id="(status-id)" hidden/>
<element class="dcl-content">(Content display is controlled by CSS)</element>
somewhere else: <label for="(status-id)" class="button dcl-trigger">...</label> (add button class also, as triggers will end up as buttons after js transform)
if you want a separate close trigger, then you can use 2 radio buttons instead of 1 checkbox, but this will require custom css
optional, if you want separate close button(s):
<form id="(form-id)"></form>
<button type="reset" form="(form-id)">, and also add form="(form-id)" to the status element
Note: when we can use :has() (firefox 119), then we can be more flexible with the placement of the status element (checkbox/radio)

each dcl-status MUST have another parent, there can't be multiple as siblings
if dcl-content immediately follows dcl-status, or dcl-trigger is in between status and content, then default css code works
if dcl-content is located elsewhere, custom css code must be made
why trigger between status and content? so that the trigger also can be styled after status

Note:
- headers are not allowed inside labels or buttons
- don't use padding on a [hidden=until-found], element, as this will show up (and block clicks on an absolutely positioned element)

*/
.dcl-status {
  display: block; /* can't be hidden, if it needs to act as tabstop */
  position: fixed; /* prevent scrolling if element is outside view */
  opacity: 0; /* hide the checkbox */
}

@supports not (content-visibility: hidden) {
  .dcl-content[hidden] {
    display: none;
  }
}
.dcl-status[type=checkbox]:not(:checked) ~ .dcl-content,
.dcl-status[value="1"]:not(:checked) ~ .dcl-content[data-value="1"],
.dcl-status[value="2"]:not(:checked) ~ .dcl-content[data-value="2"],
.dcl-status[value="3"]:not(:checked) ~ .dcl-content[data-value="3"] {
  /* 	content-visibility: hidden; */
  display: none;
}

.dcl-content.has-backdrop { /* replace .has-backdrop with :has(.dcl-backdrop) when enough support */
  z-index: 1;
  inset: 0;
  backdrop-filter: blur(4px);
  background: rgba(136, 136, 136, 0.5333333333); /* makes light background slightly darker, and dark slightly lighter */
}

.dcl-content.dcl-open.has-backdrop {
  position: fixed; /* only do absolute positioning when actively opening element; this allows hidden=until-found without covering content */
}

[hidden=until-found] {
  margin: 0;
}

.dcl-backdrop {
  position: fixed;
  inset: 0;
  padding: 0;
  opacity: 0.4;
  background: var(--gray-100);
  border: none;
  border-radius: 0;
}

.abstract {
  font-size: larger;
}

/* can be applied to section and hb-box (and more?) */
.warning {
  --component-color: var(--yellow-65);
  background: var(--yellow-93);
}

.green {
  --component-color: var(--green-65);
  background: var(--green-97);
}

.purple {
  --component-color: var(--purple-45);
  background: var(--purple-93);
}

.green, .purple, .warning {
  --component-background-color: var(--gray-100);
  border-color: var(--component-color);
}

.subtitle {
  color: var(--component-color);
  text-transform: uppercase;
  font-weight: var(--bold);
  margin-block-end: 0.5rem;
}

.icon, .lar {
  fill: none;
  color: inherit; /* overrule forced colors, for example :where(section.green :is(.subtitle,.icon)) */
  stroke: currentColor;
  stroke-width: 2px;
  aspect-ratio: 1; /* the svg's dont have viewbox parameter, so both dimensions need to be set */
  width: var(--icon-size);
  min-width: var(--icon-size); /* is this the best way to prevent squashing when besides lots of text? */
  vertical-align: middle; /* required to align with user-adjusted font size */
}

.pre-lar { /* element before link-arrow */
  padding-inline-end: var(--icon-size); /* place arrow over padding, to prevent wrapping before arrow */
}

.lar {
  width: var(--icon-solo-size);
  margin-inline-start: calc(-1 * var(--icon-size));
  /* 	vertical-align: unset; */ /* this shifted arrows on linked boxes too high, and increased line height */
  stroke-width: var(--icon-solo-stroke);
}

a.cta .pre-lar {
  padding-inline-end: calc(var(--icon-size));
}

a.cta .lar {
  margin-inline-start: calc(-1 * var(--icon-size));
}

.imgslider {
  overflow: auto;
  flex-wrap: nowrap; /* overrule hb-line */
  align-items: flex-start;
}

.imgslider hb-box.link {
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  flex-grow: 0;
}

.imgslider datetime {
  display: block;
}

.imgslider img {
  inline-size: 100%;
  max-inline-size: none; /* overrule img */
  aspect-ratio: 4/3;
  object-fit: cover;
}

.imgslider hb-box.link a {
  font-size: 1.5em;
  font-weight: unset;
}

.imgslider hb-box.link .lar {
  position: unset;
}

.agenda {
  flex-flow: column;
}

.agenda > * {
  flex: unset; /* don't make equal height, overrule hb-line > * */
}

.agenda hb-box {
  align-items: flex-start;
  gap: 18px;
  border-radius: 15px;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.agenda .date {
  background: var(--button-color);
  color: var(--gray-100);
  border-radius: 10px;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
  padding: 0.95em;
  padding-block: 0.5em;
  gap: 0 10px;
}

.agenda .date > * {
  display: block;
}

.agenda .m {
  font-size: 75%;
}

.agenda .m abbr {
  text-decoration: none;
}

.agenda .n {
  font-size: 150%;
  grid-area: 2;
  min-width: 1.35em; /* don't shrink on single digits */
  text-align: center;
}

.agenda .desc {
  flex: 1;
  /*min-height: 4em;*/ /* equal to standard date box */
  /*display: flex;*/ /* required for vertical center */
  /*align-items: center;*/ /* vertical center if not too much content */
}

.agenda .link a { /* specificity to overrule hb-box.link a */
  font-size: unset;
}

.agenda .pre-lar {
  padding: 0;
}

.agenda .lar {
  display: none;
}

.agenda a .lar {
  display: none; /* stop adding this .lar from script */
}

.agenda .desc div {
  display: none;
  margin: 0;
}

.agenda .spec {
  flex: 0 0 25%;
  min-width: 11em; /* enough to fit "<icon> 00:00 - 01.01. 00:00" */
}

.agenda .spec > * {
  display: block;
  margin-inline-start: calc(var(--icon-size) + 8px);
  text-indent: calc(-1 * var(--icon-size) - 8px);
}

.agenda .spec svg {
  margin-inline-end: 8px;
}

.agenda .time {
  padding-block-start: 8px;
}

@container (width <= 500px) {
  .agenda hb-box {
    flex-direction: column;
  }
  .agenda .date {
    position: absolute;
  }
  .agenda :is(.desc, .spec) {
    margin-inline-start: 5em;
    min-width: unset;
  }
}
@container (width > 800px) {
  .agenda hb-box {
    padding: 36px;
    gap: 40px;
  }
  .agenda .m {
    font-size: 90%;
  }
  .agenda .n {
    font-size: 2em;
  }
  .agenda .link a { /* specificity to overrule hb-box.link a */
    font-size: 1.375rem;
  }
  .agenda .lar {
    position: static; /* overrule hb-box .lar */
    margin: 0; /* overrulr .lar */
    display: block;
    color: var(--gray-100);
    background: var(--button-color);
    box-sizing: content-box;
    width: 16px;
    padding: 16px;
    border-radius: 8px;
    margin-block: 16px;
  }
}
@container (width > 1000px) {
  .agenda .date {
    display: grid;
  }
  .agenda .date .d {
    grid-area: 2;
    align-self: center;
  }
  .agenda .date .m ~ .m {
    grid-area: 1/3;
  }
  .agenda .desc div {
    display: block;
  }
}

/*# sourceMappingURL=5-helpers.css.map */