/* Verisure NL - FAQ stijl (Alle, categorieen, vraagpagina's). Hub-accordion wordt niet geraakt. */
:root{--faq-red:#ED002F;--faq-red-soft:#FDECEF;--faq-ink:#262626;--faq-muted:#666;--faq-line:#E6E6E6;--faq-bg-hover:#F7F7F7;--faq-radius:12px}
.row:has(> .radix-layouts-sidebar .menu--faq-categories){align-items:flex-start;padding-top:32px;padding-bottom:64px}
@media (min-width:992px){.row:has(> .radix-layouts-sidebar .menu--faq-categories)>.radix-layouts-sidebar{flex:0 0 26%!important;max-width:26%!important;position:sticky;top:24px}.row:has(> .radix-layouts-sidebar .menu--faq-categories)>.radix-layouts-content{flex:0 0 74%!important;max-width:74%!important;padding-left:40px}}
nav.menu--faq-categories{font-family:"Fira Sans",Arial,sans-serif}
nav.menu--faq-categories::before{content:"Categorieën";display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faq-muted);margin:0 0 12px 14px}
nav.menu--faq-categories ul.menu{list-style:none!important;margin:0!important;padding:0!important}
nav.menu--faq-categories li.menu-item{margin:0 0 4px!important;padding:0!important;list-style:none!important}
nav.menu--faq-categories li.menu-item::before{display:none!important}
nav.menu--faq-categories li.menu-item a{display:block;padding:11px 14px;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:var(--faq-ink)!important;font-size:16px;line-height:1.3;text-decoration:none!important;transition:background-color .15s,color .15s}
nav.menu--faq-categories li.menu-item a:hover{background:var(--faq-bg-hover);color:var(--faq-red)!important}
nav.menu--faq-categories li.menu-item a.is-active{background:var(--faq-red-soft);border-left-color:var(--faq-red);color:var(--faq-red)!important;font-weight:500}
nav.menu--faq-categories li.menu-item a:focus-visible{outline:2px solid var(--faq-red);outline-offset:2px}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7){font-family:"Fira Sans",Arial,sans-serif}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list{margin:0 0 40px!important;padding:0!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list h3{font-size:22px!important;font-weight:500!important;color:var(--faq-ink)!important;margin:0 0 12px!important;padding:0!important;text-transform:none!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list ul{list-style:none!important;margin:0!important;padding:0!important;border:1px solid var(--faq-line)!important;border-radius:var(--faq-radius);overflow:hidden;background:#fff}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li{margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--faq-line)!important;list-style:none!important;background:none!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li:last-child{border-bottom:0!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li::before{display:none!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li :is(.views-field,.field-content){display:block;margin:0!important;padding:0!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a{position:relative;display:block;padding:18px 56px 18px 20px!important;color:var(--faq-ink)!important;font-size:17px!important;line-height:1.4;text-decoration:none!important;text-transform:none!important;transition:background-color .15s,color .15s}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--faq-red);border-top:2px solid var(--faq-red);transform:translateY(-50%) rotate(45deg);transition:right .15s}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a:hover{background:var(--faq-bg-hover);color:var(--faq-red)!important}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a:hover::after{right:18px}
:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a:focus-visible{outline:2px solid var(--faq-red);outline-offset:-2px}
@media (max-width:767px){.row:has(> .radix-layouts-sidebar .menu--faq-categories){padding-top:16px}nav.menu--faq-categories::before{display:none}nav.menu--faq-categories ul.menu{display:flex!important;gap:8px;overflow-x:auto;padding:4px 0 12px!important;margin-bottom:16px!important;scrollbar-width:none}nav.menu--faq-categories ul.menu::-webkit-scrollbar{display:none}nav.menu--faq-categories li.menu-item{flex:0 0 auto;margin:0!important}nav.menu--faq-categories li.menu-item a{border:1px solid var(--faq-line);border-radius:999px;padding:9px 16px;font-size:15px;white-space:nowrap;background:#fff}nav.menu--faq-categories li.menu-item a.is-active{background:var(--faq-red);border-color:var(--faq-red);color:#fff!important}:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list h3{font-size:19px!important}:is(.view-display-id-block_1,.view-display-id-block_2,.view-display-id-block_3,.view-display-id-block_4,.view-display-id-block_5,.view-display-id-block_6, .view-display-id-block_7) .item-list li a{font-size:16px!important;padding:16px 48px 16px 16px!important}}

/* Start of the FAQ Questions Style */

/* ==========================================================
   Verisure NL – FAQ stijl (Alle, categoriepagina's, vraagpagina's)
   Brand: Fira Sans, #ED002F, breakpoint 767px
   Scope: alleen pagina's met het menu "FAQ categories" en de
   FAQ-lijstblokken (block_1 t/m block_6). Hub-accordion wordt NIET geraakt.
   !important is nodig omdat de theme-stijlen voor lijsten sterker zijn.
   ========================================================== */

:root {
  --faq-red: #ED002F;
  --faq-red-soft: #FDECEF;
  --faq-ink: #262626;
  --faq-muted: #666666;
  --faq-line: #E6E6E6;
  --faq-bg-hover: #F7F7F7;
  --faq-radius: 12px;
}

/* ---------- Layout: smallere sidebar, bredere content ---------- */
.row:has(> .radix-layouts-sidebar .menu--faq-categories) {
  align-items: flex-start;
  padding-top: 32px;
  padding-bottom: 64px;
}
@media (min-width: 992px) {
  .row:has(> .radix-layouts-sidebar .menu--faq-categories) > .radix-layouts-sidebar {
    flex: 0 0 26% !important;
    max-width: 26% !important;
    position: sticky;
    top: 24px;
  }
  .row:has(> .radix-layouts-sidebar .menu--faq-categories) > .radix-layouts-content {
    flex: 0 0 74% !important;
    max-width: 74% !important;
    padding-left: 40px;
  }
}

/* ---------- Sidebar menu (categorieën) ---------- */
nav.menu--faq-categories { font-family: "Fira Sans", Arial, sans-serif; }
nav.menu--faq-categories::before {
  content: "Categorieën";
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faq-muted);
  margin: 0 0 12px 14px;
}
nav.menu--faq-categories ul.menu { list-style: none !important; margin: 0 !important; padding: 0 !important; }
nav.menu--faq-categories li.menu-item { margin: 0 0 4px !important; padding: 0 !important; list-style: none !important; }
nav.menu--faq-categories li.menu-item::before { display: none !important; }
nav.menu--faq-categories li.menu-item a {
  display: block;
  padding: 11px 14px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--faq-ink) !important;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
nav.menu--faq-categories li.menu-item a:hover { background: var(--faq-bg-hover); color: var(--faq-red) !important; }
nav.menu--faq-categories li.menu-item a.is-active {
  background: var(--faq-red-soft);
  border-left-color: var(--faq-red);
  color: var(--faq-red) !important;
  font-weight: 500;
}
nav.menu--faq-categories li.menu-item a:focus-visible { outline: 2px solid var(--faq-red); outline-offset: 2px; }

/* ---------- Vragenlijst (Alle + categorieën) ---------- */
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) {
  font-family: "Fira Sans", Arial, sans-serif;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list {
  margin: 0 0 40px !important;
  padding: 0 !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list h3 {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--faq-ink) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-transform: none !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--faq-line) !important;
  border-radius: var(--faq-radius);
  overflow: hidden;
  background: #fff;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--faq-line) !important;
  list-style: none !important;
  background: none !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li:last-child {
  border-bottom: 0 !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li::before {
  display: none !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li :is(.views-field, .field-content) {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a {
  position: relative;
  display: block;
  padding: 18px 56px 18px 20px !important;
  color: var(--faq-ink) !important;
  font-size: 17px !important;
  line-height: 1.4;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color .15s ease, color .15s ease;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faq-red);
  border-top: 2px solid var(--faq-red);
  transform: translateY(-50%) rotate(45deg);
  transition: right .15s ease;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a:hover {
  background: var(--faq-bg-hover);
  color: var(--faq-red) !important;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a:hover::after {
  right: 18px;
}
:is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
    .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a:focus-visible {
  outline: 2px solid var(--faq-red);
  outline-offset: -2px;
}

/* ---------- Mobiel: categorieën als horizontale chips ---------- */
@media (max-width: 767px) {
  .row:has(> .radix-layouts-sidebar .menu--faq-categories) { padding-top: 16px; }
  nav.menu--faq-categories::before { display: none; }
  nav.menu--faq-categories ul.menu {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px !important;
    margin-bottom: 16px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.menu--faq-categories ul.menu::-webkit-scrollbar { display: none; }
  nav.menu--faq-categories li.menu-item { flex: 0 0 auto; margin: 0 !important; }
  nav.menu--faq-categories li.menu-item a {
    border: 1px solid var(--faq-line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 15px;
    white-space: nowrap;
    background: #fff;
  }
  nav.menu--faq-categories li.menu-item a.is-active {
    background: var(--faq-red);
    border-color: var(--faq-red);
    color: #fff !important;
  }
  :is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
      .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list h3 {
    font-size: 19px !important;
  }
  :is(.view-display-id-block_1, .view-display-id-block_2, .view-display-id-block_3,
      .view-display-id-block_4, .view-display-id-block_5, .view-display-id-block_6, .view-display-id-block_7) .item-list li a {
    font-size: 16px !important;
    padding: 16px 48px 16px 16px !important;
  }
}

/* ==========================================================
   Vraagpagina's (content type FAQ) – body.page-node-type-faq
   ========================================================== */
body.page-node-type-faq .block-region-contentmain { display: flex; flex-direction: column; max-width: 760px; }
/* Categorie als pill boven de titel */
body.page-node-type-faq .block-entity-fieldnodefield-faq-category { order: -1; margin: 0 0 12px; }
body.page-node-type-faq .field--name-field-faq-category .field__label { display: none !important; }
body.page-node-type-faq .field--name-field-faq-category :is(a, .field__item) {
  display: inline-block; background: var(--faq-red-soft); color: var(--faq-red) !important;
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500;
  text-decoration: none !important; line-height: 1.2;
}
/* Titel (H1) */
body.page-node-type-faq .block-entity-fieldnodetitle h1 {
  font-family: "Fira Sans", Arial, sans-serif; font-size: 34px !important; font-weight: 500 !important;
  line-height: 1.25 !important; color: var(--faq-ink) !important; margin: 0 0 24px !important;
}
/* Antwoord in een kaart */
body.page-node-type-faq .block-entity-fieldnodebody .field {
  background: #fff; border: 1px solid var(--faq-line); border-radius: var(--faq-radius); padding: 28px 32px;
}
body.page-node-type-faq .block-entity-fieldnodebody :is(p, li) {
  font-size: 17px !important; line-height: 1.7 !important; color: #3A3A3A !important; margin: 0 0 14px;
}
body.page-node-type-faq .block-entity-fieldnodebody :is(p, li):last-child { margin-bottom: 0; }
body.page-node-type-faq .block-entity-fieldnodebody a { color: var(--faq-red) !important; text-decoration: underline; }
/* Actieve categorie in het menu op vraagpagina's (op basis van taxonomy term ID) */
body:has(.field--name-field-faq-category a[href$="/981"]) nav.menu--faq-categories a[href$="/verisure"],
body:has(.field--name-field-faq-category a[href$="/986"]) nav.menu--faq-categories a[href$="/aankoopproces"],
body:has(.field--name-field-faq-category a[href$="/991"]) nav.menu--faq-categories a[href$="/functies"],
body:has(.field--name-field-faq-category a[href$="/996"]) nav.menu--faq-categories a[href$="/alarmplaatsing"],
body:has(.field--name-field-faq-category a[href$="/1001"]) nav.menu--faq-categories a[href$="/account-ondersteuning"] {
  background: var(--faq-red-soft); border-left-color: var(--faq-red); color: var(--faq-red) !important; font-weight: 500;
}
@media (max-width: 767px) {
  body.page-node-type-faq .block-entity-fieldnodetitle h1 { font-size: 26px !important; }
  body.page-node-type-faq .block-entity-fieldnodebody .field { padding: 20px; }
}

/* ---------- Gerelateerde vragen (onder het antwoord, vraagpagina's) ---------- */
body.page-node-type-faq .block-views-blockfaq-list-block-7 { margin-top: 40px; }
body.page-node-type-faq .block-views-blockfaq-list-block-7 h2 {
  font-family: "Fira Sans", Arial, sans-serif; font-size: 22px !important; font-weight: 500 !important;
  color: var(--faq-ink) !important; margin: 0 0 12px !important; text-transform: none !important;
}