/* Raamdecoland - gedeelde onderdelen (onderdelen.php): knoppen, hulpblok, veelgestelde vragen, SEO-tekst en
   kruimelpad. Alleen variabelen uit tokens.css. De productkaart staat in productkaart.css. */

/* Knoppen. Groen gevuld is alleen voor "In winkelwagen" (productpagina); de rest is donker of omlijnd. */
.rdl-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--rdl-tik); padding: 10px 20px; border: 1.5px solid transparent; border-radius: var(--rdl-radius); font-family: var(--rdl-font-tekst); font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.rdl-knop--donker, .rdl-knop--donker:visited { background: var(--rdl-tekst); color: var(--rdl-wit); }
.rdl-knop--donker:hover, .rdl-knop--donker:focus { background: #2c3a30; color: var(--rdl-wit); }
/* Staalknop overal: wit, 2px magenta rand (#FE008C, alleen rand), tekst #C4006A. Geen roze vlak bij hover. */
.rdl-knop--staal, .rdl-knop--staal:visited { border: 2px solid var(--rdl-magenta); background: var(--rdl-wit); color: var(--rdl-magenta-ink); }
.rdl-knop--staal:hover, .rdl-knop--staal:focus { background: var(--rdl-wit); color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Secundair: wit met 2px ink rand (bijv. contact "Vanuit het buitenland") */
.rdl-knop--secundair, .rdl-knop--secundair:visited { border: 2px solid var(--rdl-ink); background: var(--rdl-wit); color: var(--rdl-ink); }
.rdl-knop--secundair:hover, .rdl-knop--secundair:focus { background: var(--rdl-tint); color: var(--rdl-ink); }

/* Vinkbolletje: lime rondje met ink vinkje (gekozen staal, ingevulde stap, stappenbalk, melding). Decoratief: de
   toestand staat ook in tekst of aria. */
.rdl-vinkbol { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; vertical-align: middle; }

/* Korte magenta streep onder de H2 op sfeerpagina's (home, hoofdcategorie, per ruimte en de ruimtepagina's).
   Niet op soort-, product-, winkelwagen-, afreken-, kleurstalen- en contactpagina. Decoratief (::after). */
body.home .rdlh h2:not(.rdl-sr):not(.screen-reader-text)::after,
.rdl-lp--hoofd h2:not(.rdl-sr):not(.screen-reader-text)::after,
.rdl-ruimte h2:not(.rdl-sr):not(.screen-reader-text)::after,
.rdl-ruimte-blok h2:not(.rdl-sr):not(.screen-reader-text)::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 10px; border-radius: var(--rdl-radius-pil); background: var(--rdl-magenta); }
.rdl-knop--groen, .rdl-knop--groen:visited { background: var(--rdl-lime); color: var(--rdl-tekst); }

/* Hulpblok */
.rdl-hulpblok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; box-sizing: border-box; margin: 0; padding: var(--space-4, 16px); list-style: none; border-radius: var(--rdl-radius); background: var(--rdl-vlak); font-family: var(--rdl-font-tekst); color: var(--rdl-tekst); }
.rdl-hulpblok__icoon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--rdl-radius); background: var(--rdl-wit); color: var(--rdl-tekst); }
.rdl-hulpblok .rdl-hulpblok__kop { margin: 0 0 4px; font-family: var(--rdl-font-kop); font-size: 17px; font-weight: 600; line-height: 1.3; }
.rdl-hulpblok .rdl-hulpblok__sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--rdl-tekst-grijs); }
.rdl-hulpblok__acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.rdl-hulpblok__bel { display: inline-flex; align-items: center; min-height: var(--rdl-tik); font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
.rdl-hulpblok__bel:hover { color: var(--rdl-magenta-hover); }
@media (max-width: 479px) {
  .rdl-hulpblok__acties .rdl-knop { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .rdl-hulpblok { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--rdl-kaart-pad, 24px); }
  .rdl-hulpblok__acties { grid-column: auto; }
}

/* Veelgestelde vragen: lichte lime-tint */
.rdl-faq { box-sizing: border-box; padding: var(--space-6, 24px) var(--rdl-marge); border-radius: var(--rdl-radius); background: var(--rdl-lime-vlak); font-family: var(--rdl-font-tekst); color: var(--rdl-tekst); }
.rdl-faq .rdl-faq__kop { margin: 0 0 8px; font-family: var(--rdl-font-kop); font-size: 22px; font-weight: 700; line-height: 1.25; }
.rdl-faq__lijst { max-width: 820px; }
.rdl-faq__vraag { border-bottom: 1px solid var(--rdl-rand); }
.rdl-faq__vraag:last-child { border-bottom: 0; }
.rdl-faq__vraag summary { position: relative; display: block; min-height: var(--rdl-tik); padding: 14px 40px 14px 0; font-size: 16px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.rdl-faq__vraag summary::-webkit-details-marker { display: none; }
.rdl-faq__vraag summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; line-height: 1; }
.rdl-faq__vraag[open] summary::after { content: "\2212"; }
.rdl-faq__antwoord { max-width: 68ch; padding: 0 0 16px; font-size: 16px; line-height: 1.6; }
.rdl-faq__antwoord p { margin: 0 0 10px; }
.rdl-faq__antwoord > *:last-child { margin-bottom: 0; }
.rdl-faq__antwoord ul { margin: 0 0 10px; padding-left: 22px; list-style: disc; }
.rdl-faq__antwoord a { color: var(--rdl-magenta-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
  .rdl-faq { padding: var(--rdl-blok, 32px); }
  .rdl-faq .rdl-faq__kop { font-size: 26px; }
}

/* Details-blokken op gewone pagina's (core/details, klasse rdl-faq-blok uit onderdelen.php): zelfde vorm als .rdl-faq.
   Opeenvolgende blokken vormen samen één lime-tint vlak met lijnen ertussen; de eerste en de laatste krijgen de
   ronde hoeken en de extra ruimte boven en onder. */
.wp-block-details.rdl-faq-blok { box-sizing: border-box; max-width: none; margin: var(--space-6, 24px) 0 0; padding: 0 var(--rdl-marge); border: 0; border-radius: var(--rdl-radius) var(--rdl-radius) 0 0; background: var(--rdl-lime-vlak); font-family: var(--rdl-font-tekst); color: var(--rdl-tekst); }
.wp-block-details.rdl-faq-blok + .wp-block-details.rdl-faq-blok { margin-top: 0; border-radius: 0; }
.wp-block-details.rdl-faq-blok:not(:has(+ .wp-block-details.rdl-faq-blok)) { margin-bottom: var(--space-6, 24px); border-bottom-left-radius: var(--rdl-radius); border-bottom-right-radius: var(--rdl-radius); padding-bottom: 8px; }
.wp-block-details.rdl-faq-blok:not(.rdl-faq-blok + .rdl-faq-blok) { padding-top: 8px; }
.wp-block-details.rdl-faq-blok + .wp-block-details.rdl-faq-blok > summary { border-top: 1px solid var(--rdl-rand); }
.wp-block-details.rdl-faq-blok > summary { position: relative; display: block; min-height: var(--rdl-tik); padding: 14px 40px 14px 0; font-size: 16px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.wp-block-details.rdl-faq-blok > summary::-webkit-details-marker { display: none; }
.wp-block-details.rdl-faq-blok > summary::marker { content: ""; }
.wp-block-details.rdl-faq-blok > summary::after { content: "+"; position: absolute; right: 8px; top: 13px; font-family: var(--rdl-font-tekst); font-size: 24px; font-weight: 400; line-height: 1; }
.wp-block-details.rdl-faq-blok[open] > summary::after { content: "\2212"; }
.wp-block-details.rdl-faq-blok > :not(summary) { max-width: 68ch; margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.wp-block-details.rdl-faq-blok[open] > :last-child:not(summary) { margin-bottom: 0; padding-bottom: 16px; }
.wp-block-details.rdl-faq-blok ul, .wp-block-details.rdl-faq-blok ol { padding-left: 22px; }
.wp-block-details.rdl-faq-blok a { color: var(--rdl-magenta-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
  .wp-block-details.rdl-faq-blok { padding-left: var(--rdl-blok, 32px); padding-right: var(--rdl-blok, 32px); }
  .wp-block-details.rdl-faq-blok:not(.rdl-faq-blok + .rdl-faq-blok) { padding-top: 16px; }
  .wp-block-details.rdl-faq-blok:not(:has(+ .wp-block-details.rdl-faq-blok)) { padding-bottom: 16px; }
}

/* SEO-tekst: mobiel ingeklapt na ongeveer 4 regels (klasse is-ingeklapt zet onderdelen.js, alleen als het nodig is) */
.rdl-seotekst__tekst { position: relative; }
.rdl-seotekst__tekst a { color: var(--rdl-magenta-ink); }
.rdl-seotekst__meer { display: inline-flex; align-items: center; min-height: var(--rdl-tik); margin: 4px 0 0; padding: 0; border: 0; background: none; font-family: var(--rdl-font-tekst); font-size: 15px; font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rdl-seotekst__meer[hidden] { display: none; }
@media (max-width: 767px) {
  .rdl-seotekst.is-ingeklapt .rdl-seotekst__tekst { max-height: calc(4 * 1.65em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .rdl-seotekst.is-ingeklapt .rdl-seotekst__tekst > *:first-child { margin-top: 0; }
}

/* Vergelijkingstabel in een SEO-tekst (bijv. Duo rolgordijnen: "Welke uitvoering past bij jou?"). Past op 360px;
   is hij toch breder, dan scrolt alleen de tabel. Eerste kolom = de eigenschap. */
.rdl-tabel { max-width: 100%; margin: var(--space-4) 0; overflow-x: auto; }
.rdl-tabel table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.rdl-tabel th, .rdl-tabel td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rdl-rand); text-align: left; vertical-align: top; }
.rdl-tabel thead th { font-family: var(--rdl-font-kop); font-weight: 600; background: var(--rdl-vlak); }
.rdl-tabel tbody th { font-weight: 600; color: var(--rdl-tekst-grijs); }
@media (min-width: 768px) {
  .rdl-tabel table { font-size: 15px; }
}

/* Kruimelpad */
.rdl-kruimel { font-family: var(--rdl-font-tekst); font-size: 13px; line-height: 1.4; color: var(--rdl-tekst-grijs); }
.rdl-kruimel ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.rdl-kruimel li { display: inline-flex; align-items: center; margin: 0 !important; padding: 0 !important; }
.rdl-kruimel li + li::before { content: "/"; margin: 0 6px; color: var(--rdl-invoerrand); }
.rdl-kruimel a { color: var(--rdl-tekst-grijs); text-decoration: underline; text-underline-offset: 2px; }
.rdl-kruimel a:hover { color: var(--rdl-tekst); }
.rdl-kruimel [aria-current="page"] { color: var(--rdl-tekst); }

/* Compacte Instagram-DM-knop (rdl_ct_instagram_knop_html( array( 'compact' => true ) ) in contact.php): omlijnd, wit, ink;
   Kadence-icoon in currentColor. Productpagina (kaart Meten & monteren) en meetpaneel. Geen vlak, geen magenta. */
a.rdl-dm-compact { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; padding: 8px 14px; border: 2px solid var(--rdl-ink); border-radius: var(--rdl-radius, 12px); background: #fff; color: var(--rdl-ink); font-family: var(--rdl-font-tekst); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
a.rdl-dm-compact:hover { background: var(--rdl-tint); color: var(--rdl-ink); text-decoration: none; }
a.rdl-dm-compact:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; }
a.rdl-dm-compact .kadence-svg-iconset { display: inline-flex; flex: none; }
a.rdl-dm-compact svg { width: 18px; height: 18px; fill: currentColor; }