/*
Theme Name: Gefällt mir Button
Template: legal-base
Author: Onlino
Description: Child-thema voor gefalltmirbutton.org (facebook-tools, de). Retro-web / brutalist design, tool-first.
Version: 4.0.0
*/

/* === Palet: warm papier, zwarte inkt, fel violet als vlak-accent.
   Bewust GEEN Facebook-blauw (#1877F2). Geen gradients, geen blur-shadows,
   geen afgeronde hoeken. === */
:root{
  --paper:    #F2EFE6;
  --paper-2:  #E8E4D8;
  --ink:      #16130F;
  --ink-2:    #4A443B;
  --rule:     #16130F;
  --spot:     #7C3AED;
  --spot-2:   #CDE24C;
  --warn:     #B4341C;

  --accent:        #7C3AED;
  --accent-rgb:    124,58,237;
  --accent-2:      #7C3AED;
  --accent-2-rgb:  124,58,237;
  --accent-3:      #16130F;
  --accent-3-rgb:  22,19,15;
  --accent-light:  #CDE24C;
  --accent-bg:     #F2EFE6;
  --accent-bg-2:   #E8E4D8;
  --accent-bg-3:   #16130F;
  --accent-bg-soft:#F2EFE6;
  --accent-bg-alt: #E8E4D8;

  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ border-radius:0 !important; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
}

/* ── Header / footer: dikke kaders, geen SaaS-look ───────────────────────── */
.avg-header{ background:var(--paper); border-bottom:3px solid var(--ink); box-shadow:none; }
.avg-nav a{ color:var(--ink); font-weight:600; font-size:14px; }
.avg-nav a:hover{ color:var(--spot); text-decoration:underline; text-underline-offset:3px; }
.avg-header__cta .btn-dark,
.btn-dark{
  background:var(--spot); border:2px solid var(--ink); color:#fff;
  box-shadow:3px 3px 0 var(--ink); font-weight:700; transition:transform .1s, box-shadow .1s;
}
.avg-header__cta .btn-dark:hover,
.btn-dark:hover{ background:var(--ink); box-shadow:1px 1px 0 var(--ink); transform:translate(2px,2px); }
.avg-burger span{ background:var(--ink); }
.avg-mobile-menu{ background:var(--paper); border-bottom:3px solid var(--ink); }
.avg-mobile-menu nav a{ color:var(--ink); border-bottom:1px solid var(--ink); }

.avg-footer{ background:var(--paper-2); border-top:3px solid var(--ink); color:var(--ink-2); }
.avg-footer__logo{ color:var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.avg-footer__tagline,.avg-footer__links a{ color:var(--ink-2); }
.avg-footer__heading{ color:var(--ink); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.avg-footer__links a:hover{ color:var(--spot); }
.avg-footer__bottom{ color:var(--ink-2); border-top:2px solid var(--ink); }
.avg-footer__disclaimer{
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-2);
  border-top:2px solid var(--ink); padding-top:18px; margin-top:18px; max-width:820px;
}

.avg-breadcrumbs{ background:transparent; font-family:var(--mono); font-size:12px; }
.avg-breadcrumbs ol li,.avg-breadcrumbs a{ color:var(--ink-2); }
.avg-breadcrumbs a:hover{ color:var(--spot); }

/* ── Statusbalk: volle breedte, mono, uppercase, met trademark-disclaimer ── */
.rw-status{
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
.rw-status__row{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; padding:9px 0; }
.rw-status__row span::before{ content:"/ "; opacity:.5; }
.rw-status a{ color:var(--spot-2); text-decoration:none; }
.rw-status a:hover{ text-decoration:underline; }

/* ── Titel: asymmetrisch, groot links / mono-uitleg rechts ──────────────── */
.rw-masthead{ border-bottom:3px solid var(--ink); padding:34px 0 26px; background:var(--paper); }
.rw-masthead__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px; align-items:end; }
@media (max-width:860px){ .rw-masthead__grid{ grid-template-columns:1fr; gap:20px; } }
.rw-masthead h1{
  margin:0; font-size:clamp(34px,5.6vw,62px); line-height:.97; letter-spacing:-.03em;
  font-weight:800; color:var(--ink); text-transform:uppercase;
}
.rw-masthead h1 em{ font-style:normal; color:var(--spot); }
.rw-masthead__note{
  margin:0; font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--ink-2);
  border-left:3px solid var(--spot); padding-left:14px;
}
.rw-masthead__note a{ color:var(--spot); font-weight:700; }

/* ── Toolbar: tekstlinks, geen app-tabs ──────────────────────────────────── */
.rw-toolbar{
  display:flex; gap:0; flex-wrap:wrap; border-bottom:3px solid var(--ink);
  font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--paper);
}
.rw-toolbar a{
  padding:11px 18px 11px 0; margin-right:18px; color:var(--ink-2); text-decoration:none; font-weight:700;
  border-bottom:4px solid transparent; margin-bottom:-3px;
}
.rw-toolbar a:hover{ color:var(--ink); }
.rw-toolbar a.is-active{ color:var(--ink); border-bottom-color:var(--spot); }

/* ── Het tool-blok: harde kaders, offset-schaduw, geen blur ──────────────── */
.rw-tool{ padding:32px 0 44px; background:var(--paper); }
.rw-tool__grid{ display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); gap:22px; align-items:start; }
@media (max-width:900px){ .rw-tool__grid{ grid-template-columns:1fr; } }

.rw-box{ background:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.rw-box__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--ink); color:var(--paper); padding:8px 14px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
}
.rw-box__body{ padding:20px 18px; }

/* ── Sectiescheiding: 3px lijn met zwart labelblokje ──────────────────────── */
.rw-rule{ border-top:3px solid var(--ink); }
.rw-rule__inner{ max-width:1320px; margin:0 auto; padding:0 24px; }
.rw-rule__label{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; background:var(--ink); color:var(--paper); padding:6px 14px;
}
@media (max-width:640px){ .rw-rule__inner{ padding:0 16px; } }

/* ── Toolrijen: volle breedte, geen tegel-grid ───────────────────────────── */
.rw-list{ border-bottom:3px solid var(--ink); background:var(--paper); }
.rw-list__row{
  display:grid; grid-template-columns:minmax(0,32fr) minmax(0,52fr) auto; gap:22px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid #C9C2B2; text-decoration:none; color:inherit;
}
.rw-list__row:hover{ background:var(--spot-2); }
.rw-list__row:last-child{ border-bottom:none; }
@media (max-width:760px){ .rw-list__row{ grid-template-columns:1fr; gap:6px; padding:16px 0; } }
.rw-list__name{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0; text-transform:uppercase; }
.rw-list__desc{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }
.rw-list__go{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--spot); white-space:nowrap; }
.rw-list__row:hover .rw-list__go{ color:var(--ink); }

/* ── Uitleg-tekst: smalle kolom, links uitgelijnd ────────────────────────── */
.rw-note{ padding:34px 0 10px; background:var(--paper); }
.rw-note__grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:40px; }
@media (max-width:860px){ .rw-note__grid{ grid-template-columns:1fr; gap:14px; } }
.rw-note h2{ margin:0; font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.15; color:var(--ink); }
.rw-note__body p{ margin:0 0 14px; font-size:15px; line-height:1.72; color:var(--ink-2); max-width:64ch; }
.rw-note__body p:last-child{ margin-bottom:0; }
.rw-note__body a{ color:var(--spot); font-weight:600; text-underline-offset:3px; }

/* ── Journal: tekstlijst met datum, geen kaarten/afbeeldingen ────────────── */
.rw-log{ padding:26px 0 46px; background:var(--paper); }
.rw-log__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px; }
.rw-log__head h2{ margin:0; font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); }
.rw-log__head a{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--spot); text-decoration:none; }
.rw-log__head a:hover{ text-decoration:underline; }
.rw-log__item{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:baseline;
  padding:13px 0; border-top:1px solid #C9C2B2; text-decoration:none; color:inherit;
}
.rw-log__item:hover .rw-log__title{ color:var(--spot); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px){ .rw-log__item{ grid-template-columns:1fr; gap:3px; } }
.rw-log__date{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); text-transform:uppercase; }
.rw-log__title{ font-size:16.5px; font-weight:700; line-height:1.35; color:var(--ink); margin:0; }

/* ────────────────────────────────────────────────────────────────────────
   Schriftgenerator (in .rw-box)
   ──────────────────────────────────────────────────────────────────────── */
.sg-tool{ background:transparent; border:none; box-shadow:none; padding:0; }
.sg-tool__input-wrap{ margin-bottom:8px; }
.sg-tool textarea{
  width:100%; min-height:100px; resize:vertical; padding:14px 14px;
  font-size:15px; font-family:var(--mono); color:var(--ink);
  background:var(--paper); border:2px solid var(--ink);
}
.sg-tool textarea:focus{ outline:none; background:#fff; box-shadow:3px 3px 0 var(--spot); }
.sg-tool__counter{ text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-bottom:16px; text-transform:uppercase; }
.sg-results{ display:flex; flex-direction:column; gap:0; border-top:2px solid var(--ink); }
.sg-result{
  display:flex; align-items:center; gap:14px; padding:12px 4px;
  background:transparent; border:none; border-bottom:1px dashed #B9B2A2;
}
.sg-result:hover{ background:var(--paper-2); }
.sg-result__label{ flex-shrink:0; width:150px; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.sg-result__text{ flex:1; min-width:0; font-size:16px; color:var(--ink); word-break:break-word; overflow-wrap:anywhere; }
.sg-result__copy{
  flex-shrink:0; padding:7px 13px; font-family:var(--mono); font-size:11.5px; font-weight:700; text-transform:uppercase;
  color:var(--ink); background:var(--spot-2); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;
}
.sg-result__copy:hover{ background:var(--spot); color:#fff; }
.sg-result__copy:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.sg-result__copy.is-copied{ background:var(--ink); color:var(--spot-2); }
.sg-empty{ padding:40px 4px; text-align:center; color:var(--ink-2); font-family:var(--mono); font-size:13px; }
.tool-disclaimer{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:16px; padding-top:14px;
  border-top:2px solid var(--ink);
}

/* ── Tool-hero (kop op de losse toolpagina's) ────────────────────────────── */
.tool-hero{ padding:0; border:none; background:transparent; }

/* ────────────────────────────────────────────────────────────────────────
   Emoji-Bibliothek
   ──────────────────────────────────────────────────────────────────────── */
.emoji-search{ display:flex; gap:10px; margin-bottom:24px; }
.emoji-search input{
  flex:1; padding:12px 14px; font-family:var(--mono); font-size:13.5px;
  border:2px solid var(--ink); background:#fff; color:var(--ink);
}
.emoji-search input:focus{ outline:none; box-shadow:3px 3px 0 var(--spot); }
.emoji-cats{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:28px; border-bottom:3px solid var(--ink); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.emoji-cats button{
  padding:10px 16px 10px 0; margin-right:16px; background:transparent; border:none; color:var(--ink-2);
  font-weight:700; border-bottom:4px solid transparent; margin-bottom:-3px;
}
.emoji-cats button.is-active,.emoji-cats button:hover{ color:var(--ink); border-bottom-color:var(--spot); background:transparent; }
.emoji-section{ margin-bottom:32px; }
.emoji-section__title{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:12px; padding-top:12px; border-top:2px solid var(--ink); }
.emoji-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:2px; }
.emoji-btn{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:24px;
  background:#fff; border:1px solid var(--ink);
}
.emoji-btn:hover{ background:var(--spot-2); }
.emoji-btn.is-copied{ background:var(--spot); }
.emoji-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--spot-2); padding:11px 20px; border:2px solid var(--ink);
  font-family:var(--mono); font-size:12.5px; font-weight:700; text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:999;
}
.emoji-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ────────────────────────────────────────────────────────────────────────
   Facebook-Formate
   ──────────────────────────────────────────────────────────────────────── */
.format-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:3px solid var(--ink); border-left:3px solid var(--ink); }
.format-card{ background:#fff; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); box-shadow:none; padding:22px; }
.format-card__icon{ display:none; }
.format-card__title{ font-family:var(--mono); font-size:15px; font-weight:800; text-transform:uppercase; color:var(--ink); margin-bottom:2px; }
.format-card__sub{ font-size:12.5px; color:var(--ink-2); margin-bottom:14px; }
.format-card__rows{ display:flex; flex-direction:column; gap:0; }
.format-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px dashed #B9B2A2; }
.format-row__label{ color:var(--ink-2); font-size:12.5px; }
.format-row__value{ font-family:var(--mono); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; font-size:12.5px; }
.format-row__copy{
  flex-shrink:0; padding:4px 9px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase;
  background:var(--spot-2); border:1px solid var(--ink); color:var(--ink);
}
.format-row__copy:hover{ background:var(--spot); color:#fff; }
@media (max-width:980px){ .format-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .format-grid{ grid-template-columns:1fr; } }

/* ────────────────────────────────────────────────────────────────────────
   Geburtstagswünsche
   ──────────────────────────────────────────────────────────────────────── */
.wish-cats{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:28px; border-bottom:3px solid var(--ink); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.wish-cats button{
  padding:10px 16px 10px 0; margin-right:16px; background:transparent; border:none; color:var(--ink-2);
  font-weight:700; border-bottom:4px solid transparent; margin-bottom:-3px;
}
.wish-cats button.is-active,.wish-cats button:hover{ color:var(--ink); border-bottom-color:var(--spot); background:transparent; }
.wish-section{ margin-bottom:30px; }
.wish-section__title{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:12px; padding-top:12px; border-top:2px solid var(--ink); }
.wish-grid{ display:flex; flex-direction:column; gap:0; }
.wish-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 4px; background:transparent; border:none; border-bottom:1px dashed #B9B2A2;
}
.wish-card:hover{ background:var(--paper-2); }
.wish-card__text{ font-size:14.5px; line-height:1.6; color:var(--ink); }
.wish-card__copy{
  flex-shrink:0; padding:7px 13px; font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase;
  color:var(--ink); background:var(--spot-2); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
}
.wish-card__copy:hover{ background:var(--spot); color:#fff; }
.wish-card__copy.is-copied{ background:var(--ink); color:var(--spot-2); }

/* ────────────────────────────────────────────────────────────────────────
   Archief/blog/kennisbank van de parent: consistent meetrekken
   ──────────────────────────────────────────────────────────────────────── */
.kb-hero,.kb-body,.kb-cta,.basis-section,.faq-section,.latest-section,.seo-section,.home-cta,
.archive-hero,.archive-body,.term-hero,.term-body,.term-faq,.term-related,.post-hero{
  background:var(--paper);
}
.ph-title,.kb-section h2,.basis-head h2,.faq-head h2,.latest-head h2,.seo-head h2,.term-hero h1,
.archive-hero h1,.archive-featured__title,.archive-card__title,.post-hero h1,.home-cta h2{ color:var(--ink); }
.ph-lead,.kb-section p,.basis-head p,.faq-head p,.latest-head p,.seo-head p,.archive-hero p,
.archive-featured__excerpt,.archive-card__excerpt,.post-content,.post-meta,.term-definition p{ color:var(--ink-2); }
.kb-card,.basis-card,.latest-card,.archive-card,.archive-featured,.faq-item,.term-faq__item,.term-related__card{
  background:#fff; border:2px solid var(--ink); box-shadow:none;
}
.kb-card__title,.basis-card__title,.latest-card__title,.term-related__card h3{ color:var(--ink); }

/* Modifier-classes voor padding + brede container */
.section--tight{ padding-top:32px; padding-bottom:32px; }
.section--roomy{ padding-top:80px; padding-bottom:80px; }
.container--wide{ max-width:1320px; margin:0 auto; padding:0 24px; }

/* ── Fix: netwerkwidget in footer moet leesbaar zijn op ons lichte papier-footer ── */
.avg-network{ border-top-color: rgba(22,19,15,.15); border-bottom-color: rgba(22,19,15,.15); }
.avg-network__label{ color: var(--ink); }
.avg-network__hint{ color: var(--ink-2); }
.avg-network__icon{ background: rgba(22,19,15,.08); color: var(--ink-2); }
.avg-network[open] .avg-network__icon{ background: var(--spot); color: #fff; }
.avg-network__grid a{ color: var(--ink-2); }
.avg-network__grid a:hover{ color: var(--spot); }