/* =========================================================================
   27 Moments portaal — stijlen voor de module website
   Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken.

   Twee delen:
   1. De pagina "Jullie website": een compacte schakelbalk (bekijken /
      bewerken) boven een levende voorvertoning van de eigen trouwsite in
      een kader. De voorvertoning laadt pas wanneer ze in beeld komt of na
      een klik, en schaalt mee van 320 tot 1440 pixels.
   2. De full-page editor. De balk bovenaan is BEWUST neutraal: gebroken wit
      als drager, tekst in #2c2c2b, donkergroen alleen als accent op de
      actieve knop. De site eronder heeft zijn eigen kleurenpalet en een
      volledig groene balk vloekt daarmee.

   Deze stijlen stonden vroeger als <style>-blok in js/modules/website.js.
   Ze staan nu hier; index.html laadt dit bestand al.
   ========================================================================= */

/* =========================================================================
   1. Pagina "Jullie website"
   ========================================================================= */

.ws-kaart {
  padding-bottom: 14px;
}

/* Kop: titel + adres links, de schakelbalk rechts. Onder 700px zakt de
   schakelbalk netjes onder de titel in plaats van te knijpen. */
.ws-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}

.ws-kop__tekst {
  min-width: 0;
}

.ws-kop__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.ws-adres {
  font-size: 13px;
  color: #5f5b55;
  word-break: break-word;
}

.ws-adres strong {
  font-weight: 400;
  color: var(--m27-tekst);
}

/* ------------------------- het schakelaartje --------------------------- */
/* Twee bescheiden segmenten in één pil: Bekijken ↔ Bewerken. De actieve
   stand krijgt het donkergroen, de rest blijft rustig. */

.ws-modus {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #f1eee8;
  border: 1px solid #e3ded5;
  border-radius: var(--m27-radius-pill);
}

.ws-modus__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: transparent;
  font-family: var(--m27-font-tekst);
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #4b4741;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--m27-dur-1) var(--m27-ease), color var(--m27-dur-1) var(--m27-ease);
}

.ws-modus__knop svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ws-modus__knop[aria-pressed="true"] {
  background: var(--m27-donkergroen);
  color: var(--m27-wit);
}

/* Lila valt weg tegen wit — op lichte dragers is paars de focuskleur. */
.ws-modus__knop:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

.ws-nieuwtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 4px;
  color: var(--m27-paars);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.ws-nieuwtab svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ws-nieuwtab:hover {
  text-decoration: underline;
}

.ws-nieuwtab:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------------------- het kader met de site -------------------------- */

.ws-podium {
  border: 1px solid #e3ded5;
  border-radius: 18px;
  background: var(--m27-creme);
  overflow: hidden;
}

.ws-podium__chroom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 12px;
  background: #f5f2ec;
  border-bottom: 1px solid #e7e2d9;
}

.ws-podium__stippen {
  display: flex;
  gap: 5px;
  flex: none;
}

.ws-podium__stippen i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9d3c9;
}

.ws-podium__adres {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: #5f5b55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Telefoon- of breedbeeldformaat van de voorvertoning. */
.ws-toestel {
  display: flex;
  gap: 2px;
  flex: none;
  padding: 2px;
  background: #eae5dc;
  border-radius: var(--m27-radius-pill);
}

.ws-toestel__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  border: 0;
  border-radius: var(--m27-radius-pill);
  background: transparent;
  color: #4b4741;
  cursor: pointer;
}

.ws-toestel__knop svg {
  width: 16px;
  height: 16px;
}

.ws-toestel__knop[aria-pressed="true"] {
  background: var(--m27-wit);
  color: var(--m27-donkergroen);
  box-shadow: 0 1px 3px rgba(44, 44, 43, 0.16);
}

.ws-toestel__knop:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

/* Het venster is een vast kader; het iframe wordt door JS op een logische
   breedte gezet (390 of 1180) en met transform passend geschaald. Vandaar
   transform-origin links-boven: met "center" schuift alles scheef. */
.ws-podium__venster {
  position: relative;
  height: clamp(320px, 56vh, 560px);
  /* Rustig vlak achter het kader: in telefoonstand staat de site smaller
     dan het venster en mag ze zichtbaar op iets liggen. */
  background: #eae5dc;
  overflow: hidden;
}

.ws-podium__raam {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(44, 44, 43, 0.1);
  transform-origin: top left;
  opacity: 0;
  transition: opacity var(--m27-dur-2) var(--m27-ease);
  /* Standaard vangt de voorvertoning geen aanraking op: anders blijft een
     duim erin hangen en scrollt de pagina eronder niet meer. */
  pointer-events: none;
}

.ws-podium.is-klaar .ws-podium__raam {
  opacity: 1;
}

.ws-podium.is-verkennen .ws-podium__raam {
  pointer-events: auto;
}

/* Lagen: wachten, laden, mislukt. Ze dekken het venster volledig af. */
.ws-laag {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  text-align: center;
  background: var(--m27-creme);
}

.ws-laag[hidden] {
  display: none;
}

.ws-laag__titel {
  font-family: var(--m27-font-titel);
  letter-spacing: var(--m27-ls-titel);
  font-size: 17px;
  color: var(--m27-donkergroen);
}

.ws-laag__tekst {
  max-width: 34ch;
  font-size: 13px;
  color: #5f5b55;
}

/* .m27-btn staat op inline-block; met een icoon erin willen we flex. */
.ws-laag .m27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
}

.ws-laag .m27-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ws-laag .m27-btn:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

.ws-stippen {
  display: flex;
  gap: 7px;
}

.ws-stippen i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--m27-lila);
  animation: ws-stip 1s var(--m27-ease) infinite;
}

.ws-stippen i:nth-child(2) { animation-delay: 0.15s; }
.ws-stippen i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ws-stip {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* Zwevend pilletje: zet het scrollen/klikken in de voorvertoning aan. */
.ws-verken {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1.5px solid rgba(44, 44, 43, 0.12);
  border-radius: var(--m27-radius-pill);
  background: var(--m27-wit);
  color: var(--m27-tekst);
  font-family: var(--m27-font-tekst);
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(44, 44, 43, 0.2);
  cursor: pointer;
}

.ws-verken svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ws-verken[aria-pressed="true"] {
  background: var(--m27-donkergroen);
  border-color: var(--m27-donkergroen);
  color: var(--m27-wit);
}

.ws-verken[hidden] {
  display: none;
}

.ws-verken:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

.ws-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: #5f5b55;
}

/* De portaalbrede .uitleg (#7c776f) haalt op het lichtgroene vlak maar
   3,6:1. Hier zetten we hem donkerder: zelfde warme grijs, 7,4:1. */
#ws-herstel-uitleg {
  color: #4b4741;
}

/* Aanraakbediening: raakvlakken van 44px, ook op tablet. */
@media (max-width: 768px) {
  .ws-modus__knop {
    min-height: 44px;
  }

  .ws-podium__chroom {
    min-height: 52px;
  }

  .ws-toestel__knop {
    width: 46px;
    height: 40px;
  }

  .ws-verken {
    min-height: 44px;
  }
}

/* Telefoon: het schakelaartje pakt de volle breedte, de rest valt weg. */
@media (max-width: 560px) {
  .ws-kop__acties {
    width: 100%;
  }

  .ws-modus {
    flex: 1 1 auto;
  }

  .ws-modus__knop {
    flex: 1 1 0;
    padding: 8px 10px;
    letter-spacing: 0.04em;
  }

  .ws-podium__stippen {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-modus__knop,
  .ws-podium__raam {
    transition: none;
  }

  .ws-stippen i {
    animation: none;
    opacity: 0.7;
  }
}

/* =========================================================================
   2. De full-page editor
   De editor volgt dezelfde app-schil-afspraken als de rest van het portaal:
   veilige zones op de iPhone, bewegingstokens, en op telefoon geen zwevende
   pop-ups maar bladen onderaan het scherm.
   ========================================================================= */

.ws-kleur {
  width: 52px;
  height: 34px;
  padding: 2px;
  border: 1.5px solid #dad5cd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.ws-kleur:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

.ws-schakel {
  position: relative;
  width: 46px;
  height: 27px;
  flex: none;
}

.ws-schakel input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Uit-stand: #8a857e haalt 3,6:1 tegen het witte paneel — het oude
   #dad5cd bleef met 1,5:1 onzichtbaar voor wie minder goed ziet. */
.ws-schakel span {
  position: absolute;
  inset: 0;
  background: #8a857e;
  border-radius: var(--m27-radius-pill);
  transition: background 0.2s;
  pointer-events: none;
}

.ws-schakel span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.ws-schakel input:checked + span {
  background: var(--m27-donkergroen);
}

.ws-schakel input:checked + span::after {
  transform: translateX(19px);
}

.ws-schakel input:focus-visible + span {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

/* Gebroken wit als drager: de editor mag nooit met de kleuren van de
   trouwsite vloeken. Ook de randen naast de notch krijgen die kleur. */
.ws-editor {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--m27-wit);
  animation: ws-editor-in var(--m27-dur-2) var(--m27-ease);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@keyframes ws-editor-in { from { opacity: 0; } }

/* Balk: één rij die nooit breekt. De onderdelen krimpen in deze volgorde
   weg: sitenaam → woord "Editor" → knoplabels. De rand en de schaduw maken
   de balk los van de site eronder, ook boven een donkere sitestijl. */
.ws-editor__balk {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 16px;
  background: var(--m27-wit);
  color: var(--m27-tekst);
  border-bottom: 1px solid rgba(44, 44, 43, 0.12);
  box-shadow: 0 2px 14px rgba(44, 44, 43, 0.12);
}

.ws-editor__merk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--m27-font-titel);
  letter-spacing: var(--m27-ls-titel);
  font-size: 18px;
  color: var(--m27-tekst);
}

.ws-editor__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(194, 177, 215, 0.3);
}

.ws-editor__badge img {
  width: 20px;
  height: 20px;
  display: block;
}

.ws-editor__site {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #5f5b55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-editor__acties {
  position: relative;
  flex: none;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ws-editor__acties .m27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.ws-editor__acties .m27-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Neutrale balkknoppen. Groen komt er alleen bij: als lichtgroen vlak met
   een groene rand op de knop waarvan het paneel openstaat, en als vulling
   op Sluiten. Alle combinaties halen ruim 5:1 contrast. */
.ws-balkknop {
  background: #fff;
  border-color: #ddd8d0;
  color: var(--m27-tekst);
}

.ws-balkknop:hover {
  border-color: #bdb6ab;
}

.ws-balkknop[aria-expanded="true"] {
  background: var(--m27-lichtgroen);
  border-color: var(--m27-donkergroen);
  color: var(--m27-tekst);
}

.ws-balkknop--groen {
  background: var(--m27-donkergroen);
  border-color: var(--m27-donkergroen);
  color: var(--m27-wit);
}

.ws-balkknop--groen:hover {
  background: #4d5945;
  border-color: #4d5945;
}

.ws-editor__acties .m27-btn:focus-visible {
  outline: 3px solid var(--m27-paars);
  outline-offset: 2px;
}

.ws-editor__raam {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
  display: block;
}

/* Waas achter een open paneel: tikken ernaast sluit (zie pointerdown). */
.ws-editor__waas {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(44, 44, 43, 0.34);
  animation: ws-fade var(--m27-dur-2) var(--m27-ease);
}

.ws-editor__waas[hidden] { display: none; }

@keyframes ws-fade { from { opacity: 0; } }
@keyframes ws-omhoog { from { transform: translateY(100%); } }

.ws-paneel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  background: #fff;
  color: var(--m27-tekst);
  border: 1px solid rgba(44, 44, 43, 0.1);
  border-radius: var(--m27-radius-kaart);
  box-shadow: 0 24px 70px rgba(44, 44, 43, 0.24);
  padding: 18px 22px 14px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ws-paneel[hidden] { display: none; }
.ws-paneel h3 { font-size: 17px; margin-bottom: 2px; }
.ws-paneel .uitleg { font-size: 13.5px; color: #5f5b55; margin-bottom: 6px; }

.ws-paneel__greep {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #ded9d0;
  margin: 2px auto 12px;
}

/* Twee klassen diep, want de panelen staan binnen .ws-editor__acties en die
   regel zet knoppen op inline-flex. */
.ws-paneel .ws-paneel__klaar {
  display: none;
  width: 100%;
  margin-top: 14px;
}

/* De waas hoort bij de telefoonvorm (een blad dekt het scherm af); op
   desktop is het paneel een gewone uitklap en zou dimmen te zwaar zijn. */
@media (min-width: 769px) {
  .ws-editor__waas { display: none; }
}

/* --- telefoon: de panelen worden bladen onderaan, zoals elders --- */
@media (max-width: 768px) {
  .ws-editor__balk { padding: 8px 12px; gap: 10px; }
  .ws-editor__site { display: none; }
  .ws-editor__merk { font-size: 0; gap: 0; }
  .ws-editor__acties { gap: 6px; }

  /* 44px hoog: comfortabel met de duim, ook op een kleine iPhone. */
  .ws-editor__acties .m27-btn { min-height: 44px; padding: 9px 14px; }

  /* Kleuren en Secties houden hun woord (dat is de wegwijzer), Sluiten
     wordt het universele kruisje — zo blijft de balk leesbaar én smal. */
  #ws-knop-kleuren svg,
  #ws-knop-secties svg { display: none; }

  #ws-knop-sluiten span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #ws-knop-sluiten svg { width: 18px; height: 18px; }

  .ws-paneel {
    position: fixed;
    z-index: 4;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: min(72vh, 560px);
    border: 0;
    border-radius: 22px 22px 0 0;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px rgba(44, 44, 43, 0.24);
    animation: ws-omhoog var(--m27-dur-3) var(--m27-ease);
  }

  .ws-paneel__greep { display: block; }
  .ws-paneel .ws-paneel__klaar { display: flex; }
  .ws-paneel .rij { padding: 14px 0; min-height: 56px; }
  .ws-kleur { width: 60px; height: 44px; }
}

/* Nog smaller: krappere knoppen, zodat er niets uit de balk valt. */
@media (max-width: 400px) {
  .ws-editor__balk { padding: 8px 10px; gap: 8px; }
  .ws-editor__acties { gap: 5px; }
  .ws-editor__acties .m27-btn { padding: 9px 11px; letter-spacing: 0.04em; }
}

/* Telefoon in landschap: elke pixel hoogte telt voor de site zelf. */
@media (max-height: 480px) and (orientation: landscape) {
  .ws-editor__balk { min-height: 0; padding: 5px 12px; }
  .ws-editor__acties .m27-btn { min-height: 0; padding: 7px 12px; }
  .ws-paneel { max-height: calc(100vh - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-schakel span,
  .ws-schakel span::after { transition: none; }

  .ws-editor,
  .ws-editor__waas,
  .ws-paneel { animation: none; }
}