/* Ray-Media: de demobalk en de schillen voor Publiek, Klantportaal en Studio-backoffice. */

/* --- vaste demobalk bovenaan elk scherm (.demo) --- */
.demo {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  min-height: var(--demo-h);
  padding: 4px var(--rand);
  background: #14171d;
  color: #f3f1ec;
  font-size: var(--t-13);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.demo__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.demo__badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--op-kleur);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.demo__noot {
  color: rgb(243 241 236 / 0.76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo__omgeving {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.demo__omgeving a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 4px;
  color: rgb(243 241 236 / 0.82);
  font-size: var(--t-12);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.demo__omgeving a:hover {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
}

.demo__omgeving a[aria-current="true"] {
  background: #f3f1ec;
  color: #14171d;
}

.demo__knoppen {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo__instknop {
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.08);
  color: #f3f1ec;
  font-size: var(--t-12);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.demo__instknop:hover {
  background: rgb(255 255 255 / 0.16);
}

.demo__menu {
  position: fixed;
  top: calc(var(--demo-h) + 6px);
  right: 12px;
  left: auto;
  margin: 0;
  width: min(21rem, calc(100vw - 24px));
  padding: 14px 16px;
  border: 0;
  border-radius: var(--hoek);
  background: var(--vlak);
  color: var(--inkt);
  box-shadow: var(--schaduw-pop);
}

.demo__menu h2 {
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--inkt-2);
  margin: 10px 0 6px;
}

.demo__menu h2:first-child {
  margin-top: 0;
}

.demo__menuitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: var(--t-13);
  cursor: pointer;
}

.demo__menuscheiding {
  border: 0;
  border-top: 1px solid var(--lijn);
  margin: 10px 0;
}

@media (max-width: 62rem) {
  .demo__noot {
    display: none;
  }
}

@media (max-width: 36rem) {
  .demo {
    padding-inline: 10px;
    gap: 6px;
  }
  .demo__label span {
    display: none;
  }
  .demo__omgeving a {
    padding: 3px 7px;
  }
  .demo__instknop span {
    display: none;
  }
}

/* --- publieke kop (.pkop) en voet (.pvoet) --- */
.pkop {
  position: sticky;
  top: var(--demo-h);
  z-index: 120;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.pkop__binnen,
.pvoet__binnen,
.kkop__binnen {
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.pkop__binnen {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  min-height: 64px;
}

.pkop__nav {
  margin-inline: auto;
}

.pkop__nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.pkop__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 11px;
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--inkt-2);
  text-decoration: none;
  white-space: nowrap;
}

.pkop__nav a:hover,
.pkop__nav a[aria-current="page"] {
  color: var(--inkt);
}

.pkop__nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--steun);
}

.pkop__acties {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pkop__mobknop {
  display: none;
}

@media (max-width: 64rem) {
  .pkop__nav {
    display: none;
  }
  .pkop__mobknop {
    display: inline-flex;
  }
}

@media (max-width: 34rem) {
  .pkop__acties .knop--stil {
    display: none;
  }
  .pkop__acties .knop--hoofd {
    padding-inline: 11px;
    font-size: var(--t-13);
  }
  .merk__sub {
    display: none;
  }
}

/* Mobiele navigatielade (dialog.mobmenu) */
dialog.mobmenu {
  width: min(22rem, 92vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--vlak);
  color: var(--inkt);
  box-shadow: var(--schaduw-pop);
}

dialog.mobmenu::backdrop {
  background: var(--scrim);
}

.mobmenu__binnen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 20px 24px;
  gap: 16px;
  overflow-y: auto;
}

.mobmenu__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
}

.mobmenu__lijst {
  list-style: none;
  display: grid;
  gap: 4px;
}

.mobmenu__lijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--hoek);
  font-size: var(--t-16);
  font-weight: 600;
  text-decoration: none;
}

.mobmenu__lijst a[aria-current="page"],
.mobmenu__lijst a:hover {
  background: var(--vlak-2);
  color: var(--steun);
}

.mobmenu__onder {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
  display: grid;
  gap: 8px;
}

/* Publieke voettekst (.pvoet) */
.pvoet {
  margin-top: var(--r-16);
  border-top: 1px solid var(--lijn);
  background: var(--vlak-2);
}

.pvoet__binnen {
  padding-block: var(--r-10) var(--r-12);
  display: grid;
  gap: var(--r-8);
}

.pvoet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--r-6);
}

.pvoet__kol {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.pvoet__kol h2 {
  font-family: var(--f-display);
  font-size: var(--t-15);
  font-weight: 650;
  color: var(--inkt);
}

.pvoet__kol ul {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--t-14);
}

.pvoet__kol a {
  color: var(--inkt-2);
  text-decoration: none;
}

.pvoet__kol a:hover {
  color: var(--inkt);
  text-decoration: underline;
}

.pvoet__onder {
  padding-top: var(--r-5);
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: var(--t-13);
  color: var(--inkt-2);
}

@media (max-width: 54rem) {
  .pvoet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 32rem) {
  .pvoet__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- klantportaal schil (.kkop) --- */
.kkop {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}

.kkop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  min-height: 60px;
  padding-block: 8px;
}

.kkop__links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- studio-backoffice schil (.studio-schil; zijbalk + werkvlak) --- */
.studio-schil {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: calc(100dvh - var(--demo-h));
}

.studio-zij {
  position: sticky;
  top: var(--demo-h);
  height: calc(100dvh - var(--demo-h));
  padding: 14px 12px;
  background: var(--vlak-2);
  border-right: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.studio-zij__merk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 6px;
}

.studio-zij__groep {
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--inkt-2);
  padding: 10px 10px 4px;
}

.studio-zij__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--hoek);
  color: var(--inkt-2);
  font-size: var(--t-14);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.studio-zij__link:hover {
  background: color-mix(in srgb, var(--inkt) 6%, transparent);
  color: var(--inkt);
}

.studio-zij__link[aria-current="page"] {
  background: var(--vlak);
  color: var(--inkt);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.studio-zij__link[aria-current="page"] .ic {
  color: var(--amber);
}

.studio-zij__tel {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--vlak-3);
  color: var(--inkt);
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
}

.studio-zij__onder {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
  display: grid;
  gap: 6px;
}

.studio-hoofd {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.studio-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 54px;
  padding: 8px var(--rand);
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}

.studio-balk__mobknop {
  display: none;
}

.studio-inhoud {
  flex: 1;
  max-width: 88rem;
  width: 100%;
  margin-inline: auto;
  padding: var(--r-6) var(--rand) var(--r-12);
  display: grid;
  align-content: start;
  gap: var(--r-5);
}

@media (max-width: 64rem) {
  .studio-schil {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-zij {
    display: none;
  }
  .studio-balk__mobknop {
    display: inline-flex;
  }
}