@charset "UTF-8";
/* MA-ED Projecten: base styles. The widget "Projectsectie" and the Elementor template override them; colours
   inherit from the theme unless set. Colours of the products block (design Jof 27-10-2026), all in the widget under
   Stijl → Kleuren:
   --maed-accent  open and hovered product (default: the global colour "Primair", else #d7127d)
   --maed-licht   Leerdoelen/Succescriteria on hover and open (#ffe5f3, global "Magenta Light")
   --maed-blok    background of the whole products block (none since 0.5.0; feedback Jof 27-10-2026)
   --maed-open    background of an open product (#fff)
   --maed-rand    outline of Leerdoelen/Succescriteria (#dcdcdc, light grey)
   --maed-kader   the deadline line (#ffffbb, global "Accent2") */
.maed-project { display: block; }
/* Like the Heading widget of Elementor (feedback Jof 27-10-2026): line height 1, no space above the heading, 20px below (the default
   gap of a container; "Ruimte eronder" in the widget overrides it). The rest follows the theme. */
/* Two classes, so it wins over the global H2–H6 typography of the theme/kit (which gave a 50px line height). */
.maed-sectie .maed-sectie__kop { margin-top: 0; margin-bottom: 20px; line-height: 1; }
.maed-sectie > :first-child { margin-top: 0; }
/* Subheadings inside a section or product (Instructie, Inleveren: h4; a leerlijn inside Leerdoelen: h5): 20px above,
   10px below (adjustable in the widget). */
.maed-sectie :is(h3, h4, h5, h6):not(.maed-sectie__kop) { margin-top: 20px; margin-bottom: 10px; line-height: 1; }
/* Docent sections: only a small label next to the heading (no line on the left since 0.5.0; feedback Jof 27-10-2026).
   The widget can hide the label ("Label alleen voor docenten": Verbergen). */
.maed-label { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; padding: 1px 7px; border-radius: 1em; background: var(--maed-accent, var(--e-global-color-primary, #d7127d)); color: #fff; }
.maed-label-verbergen .maed-label { display: none; }
.maed-concept { padding: .75em 1em; border: 1px solid #e0a800; background: #fff8e1; color: #5c4400; border-radius: 4px; }
.maed-hint { padding: .75em 1em; border: 1px dashed #999; color: #555; font-size: .9em; }
.maed-kader { background-color: var(--maed-kader, #ffffbb); padding: 2px 4px; }
.maed-project table { border-collapse: collapse; width: 100%; }
.maed-project th, .maed-project td { border: 1px solid rgba(0, 0, 0, .15); padding: .4em .6em; text-align: left; vertical-align: top; }

/* The products block: products as an accordion (closed by default), no background or padding of its own, so it lines
   up with the other sections (0.5.0). Closed products touch; an open product has 10px below (none above, feedback Jof 29-10-2026). Inside a
   product, "Leerdoelen" and "Succescriteria" are a second, lighter accordion with a light grey outline. */
.maed-sectie--producten { background-color: var(--maed-blok, transparent); }
.maed-product { margin: 0; }
.maed-product[open] { margin: 0 0 10px; }
.maed-product[open]:last-child { margin-bottom: 0; }
.maed-product[open] { background-color: var(--maed-open, #fff); }
.maed-product summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 14px; font-weight: 600; transition: background-color .15s, color .15s; }
.maed-product summary::-webkit-details-marker { display: none; }
.maed-product summary::after { content: ""; flex: none; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .2s; margin-right: .2em; }
.maed-product details[open] > summary::after, .maed-product[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.maed-icoon-plus .maed-product summary::after { content: "+"; border: 0; width: auto; height: auto; transform: none; font-size: 1.4em; line-height: 1; font-weight: 400; }
.maed-icoon-plus .maed-product details[open] > summary::after, .maed-icoon-plus .maed-product[open] > summary::after { content: "\2212"; transform: none; }
.maed-icoon-geen .maed-product summary::after { display: none; }

.maed-product > summary:hover, .maed-product[open] > summary { background-color: var(--maed-accent, var(--e-global-color-primary, #d7127d)); color: #fff; }
.maed-product > .binnen { padding: 14px 14px 20px; }
.maed-product .binnen > :first-child { margin-top: 0; }
.maed-product .binnen > :last-child { margin-bottom: 0; }

.maed-product details { margin: 0; border: 1px solid var(--maed-rand, #dcdcdc); }
.maed-product details + details { margin-top: -1px; }
.maed-product .binnen > details:first-of-type { margin-top: 20px; }
.maed-product details > summary:hover, .maed-product details[open] > summary { background-color: var(--maed-licht, #ffe5f3); color: #4d4d4d; }
.maed-product details > .binnen { padding: 14px 14px 10px; }

/* Sortable table (projectstandaard v7, "Datapunten en taken"): click a heading to sort; filter per docent above it.
   Wide tables scroll sideways on a phone. */
.maed-tabel-schuif { overflow-x: auto; }
.maed-sorteerbaar th { padding: 0; }
.maed-sorteerbaar th button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .35em; width: 100%; padding: .4em .6em; cursor: pointer; font-weight: 600; }
.maed-sorteerbaar th button:focus-visible { outline: 2px solid var(--maed-accent, var(--e-global-color-primary, #d7127d)); outline-offset: -2px; }
.maed-sorteerbaar th button::after { opacity: .35; font-weight: 400; content: "↕"; }
.maed-sorteerbaar th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.maed-sorteerbaar th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.maed-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .9em; }
.maed-filter button { cursor: pointer; border: 1px solid var(--maed-rand, #dcdcdc); background: transparent; color: inherit; border-radius: 1em; padding: 2px 10px; font: inherit; }
.maed-filter button[aria-pressed="true"] { background: var(--maed-accent, var(--e-global-color-primary, #d7127d)); border-color: transparent; color: #fff; }