/* assets/css/pages/faq.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('faq') in page-faq.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ /* "section.blk." ervoor: anders verliest deze regel altijd van reve-pages.css's `section.blk` (element+class weegt zwaarder dan één class -- zelfde valkuil als eerder deze sessie). */ section.blk.faq-kop { padding-top: 40px; padding-bottom: 24px; } .faq-kop h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); margin: 0; } .faq-body-section { padding-top: 0; } .faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: start; } .faq-content { max-width: 680px; } .faq-toc { position: sticky; top: 24px; } .faq-toc b { display: block; font: 600 14px/1 var(--f-body); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--c-grey-line); } .faq-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .faq-toc a { color: #ababab; text-decoration: none; font: 400 16px/1.4 var(--f-body); } .faq-toc a:hover { color: var(--c-primary); } /* offset op het anker zelf -- anders scrollt de titel exact tot onder de sticky header (header.site, reve-pages.css) en komt hij er half achter te staan. */ .faq-category { padding-top: 48px; scroll-margin-top: 100px; } .faq-category:first-child { padding-top: 0; } .faq-category h2 { font-family: var(--f-head); font-weight: 400; font-size: 26px; margin: 0 0 8px; } .faq-item { border-bottom: 1px solid var(--c-grey-line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 15px/1.4 var(--f-body); color: var(--c-primary); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { flex-shrink: 0; transition: transform .2s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-answer { padding: 0 28px 22px 0; font: 400 15px/1.65 var(--f-body); color: #3a3a3a; } .faq-answer p { margin: 0; } .faq-answer a { color: var(--c-primary); text-decoration: underline; } @media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: 30px; } .faq-toc { position: static; } }