/* De deelknop (themes/modules/delen.php, shared/js/delen.js). Kleuren en hoeken uit het thema waar het die
   heeft (de --fr-tokens van de dorpen), anders uit Bootstrap; zo past het op elk portalthema. */
.cms-delen { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
[data-delen][hidden], .cms-delen [hidden] { display: none !important; }
.cms-delen-knop { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.75rem; border: 1px solid var(--fr-rand, rgba(0, 0, 0, 0.18)); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.cms-delen-knop:hover, .cms-delen-knop[aria-expanded="true"] { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.cms-delen-knop:focus-visible, .cms-delen-menu :is(a, button):focus-visible { outline: 2px solid var(--fr-blauw, var(--bs-primary, #1d4e79)); outline-offset: 2px; }
.cms-delen-menu { margin: 0; padding: 0; list-style: none; }
.cms-delen--knop .cms-delen-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 12rem; padding: 0.3rem; border: 1px solid var(--fr-rand, rgba(0, 0, 0, 0.18)); border-radius: var(--fr-hoek-klein, 10px); background: var(--fr-kaart, var(--bs-body-bg, #fff)); color: var(--fr-tekst, var(--bs-body-color, #1c2430)); }
.cms-delen--knop .cms-delen-menu.is-rechts { left: auto; right: 0; }
.cms-delen .cms-delen-menu :is(a, button) { display: flex; align-items: center; gap: 0.55rem; justify-content: flex-start; width: 100%; min-height: 40px; padding: 0.35rem 0.6rem; border: 0; border-radius: var(--fr-hoek-klein, 8px); background: none; color: inherit; font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none; cursor: pointer; }
.cms-delen .cms-delen-menu :is(a, button):hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cms-delen-menu .bi { width: 1.1rem; text-align: center; font-size: 1rem; }
.cms-delen--lijst { display: flex; align-items: stretch; width: 100%; }
.cms-delen--lijst .cms-delen-menu { display: grid; gap: 0.1rem; width: 100%; }
.cms-delen.cms-delen--lijst .cms-delen-menu :is(a, button) { padding-inline: 0.2rem; color: var(--fr-link, var(--fr-blauw, var(--bs-link-color, #1d4e79))); font-weight: 600; }
.cms-delen-status:empty { display: none; }
.cms-delen-status { margin: 0.35rem 0 0; font-size: 0.85rem; }
.cms-delen-uitleg { margin: 0 0 0.35rem; font-size: 0.88rem; color: var(--fr-stil, inherit); }
/* Het zichtbare kopieerveld als er geen klembord is. */
.cms-delen-veld { display: block; width: 100%; max-width: 32rem; margin: 0.4rem 0 0; padding: 0.45rem 0.6rem; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 0.85rem; }
@media print { .cms-delen { display: none !important; } }