/*
Theme Name: YouTube Tools
Template: legal-base
Author: Onlino
Description: Child-thema voor youtubeconverter.nl (youtube-tools, nl). Retro-web / brutalist design, tool-first.
Version: 2.0.0
*/

/* === Palet: warm papier, bijna-zwarte inkt, felle teal + amber als vlakken.
   Bewust GEEN YouTube-rood, bewust GEEN donkere achtergrond, bewust geen
   gradients/blur-schaduwen/afgeronde hoeken. === */
:root{
  --paper:      #F2EFE6;
  --paper-2:    #E8E4D8;
  --ink:        #16130F;
  --ink-2:      #4A443B;
  --rule:       #16130F;
  --spot:       #0FBFAE;
  --spot-2:     #FF9F1C;
  --warn:       #B4341C;

  --accent:        #0FBFAE;
  --accent-rgb:    15,191,174;
  --accent-2:      #FF9F1C;
  --accent-2-rgb:  255,159,28;
  --accent-3:      #16130F;
  --accent-3-rgb:  22,19,15;
  --accent-light:  #5FE0D3;
  --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;
}

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

/* ── Header / footer: dikke kaders, geen "SaaS"-schaduwen ───────────────── */
.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{
  background:var(--spot); border:2px solid var(--ink); color:var(--ink); border-radius:0;
  box-shadow:3px 3px 0 var(--ink); font-weight:700;
}
.avg-header__cta .btn-dark:hover{ background:var(--ink); color:var(--paper); 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; }
.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__trademark-note{ font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-2); max-width:820px; margin:24px 0 0; padding-top:20px; border-top:2px solid var(--ink); }

.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); }

.page-hero,.page-body{ background:var(--paper); }
.page-hero h1{ color:var(--ink); }
.page-hero__sub,.prose{ color:var(--ink-2); }
.prose h2,.prose h3,.prose strong{ color:var(--ink); }
.prose a{ color:var(--spot); text-underline-offset:3px; }

/* ══════════════════════════════════════════════════════════════════════
   RETRO-WEB / BRUTALIST SYSTEEM (homepage + tool-pagina's)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Statusbalk: zwarte regel bovenaan met het merkrecht-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: display-caps links, mono-notitie rechts ───────── */
.rw-masthead{ border-bottom:3px solid var(--ink); padding:34px 0 26px; }
.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; }

/* ── Werkbalk: 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; }
.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); }

/* ── De tool: twee ongelijke kolommen, harde kaders ──────────────────────── */
.rw-tool{ padding:32px 0 44px; }
.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; }

.yt-field{ margin-bottom:16px; }
.yt-field label{ display:block; font-family:var(--mono); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; color:var(--ink); }
.yt-field input[type="text"],
.yt-field input[type="url"],
.yt-field input[type="number"],
.yt-field select{ width:100%; padding:11px 12px; border:2px solid var(--ink); border-radius:0; font-size:14px; font-family:var(--mono); background:var(--paper); color:var(--ink); box-sizing:border-box; }
.yt-field input::placeholder{ color:#9A9384; }
.yt-field input:focus,.yt-field select:focus{ outline:none; background:#fff; box-shadow:3px 3px 0 var(--spot); }
.yt-field__hint{ margin:6px 0 0; font-size:12px; color:var(--ink-2); }
.yt-field-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:480px){ .yt-field-row{ grid-template-columns:1fr; } }

.rw-sub{ font-family:var(--mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin:24px 0 10px; padding-top:14px; border-top:2px solid var(--ink); }
.rw-sub:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* Vierkante checkboxen, papieren formulier-look (geen toggle-pillen) */
.yt-checks{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-bottom:6px; }
.yt-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.yt-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:19px; height:19px; flex-shrink:0;
  border:2px solid var(--ink); border-radius:0; background:#fff; position:relative; cursor:pointer;
}
.yt-check input[type="checkbox"]:checked{ background:var(--spot); }
.yt-check input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:3px; top:-1px; width:6px; height:11px;
  border:solid var(--ink); border-width:0 3px 3px 0; transform:rotate(40deg);
}
.yt-check small{ display:block; font-weight:400; font-size:11px; color:var(--ink-2); font-family:var(--mono); }

.yt-range{ margin-bottom:18px; }
.yt-range label{ display:block; font-family:var(--mono); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; color:var(--ink); }
.yt-range input[type="range"]{ width:100%; height:6px; background:#fff; border:2px solid var(--ink); appearance:none; -webkit-appearance:none; }
.yt-range input[type="range"]::-webkit-slider-thumb{ appearance:none; -webkit-appearance:none; width:18px; height:18px; background:var(--spot-2); border:2px solid var(--ink); cursor:pointer; }
.yt-range input[type="range"]::-moz-range-thumb{ width:18px; height:18px; background:var(--spot-2); border:2px solid var(--ink); cursor:pointer; }
.yt-range__value{ font-family:var(--mono); font-weight:800; color:var(--spot); }

.yt-preview__label{ font-family:var(--mono); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin:0 0 10px; }
.yt-preview__frame{ aspect-ratio:16/9; background:var(--ink); border:2px solid var(--ink); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#9A9384; font-family:var(--mono); font-size:12px; text-align:center; padding:16px; }
.yt-preview__frame iframe{ width:100%; height:100%; border:0; display:block; }
.yt-preview__frame--shorts{ aspect-ratio:9/16; max-width:220px; margin:0 auto; }

.yt-code-box{ background:var(--ink); color:var(--spot-2); border:2px solid var(--ink); padding:14px 16px; font-family:var(--mono); font-size:12px; line-height:1.7; overflow-x:auto; white-space:pre-wrap; word-break:break-all; margin-top:14px; max-height:240px; overflow-y:auto; }

.yt-copy-btn{ display:inline-block; margin-top:12px; padding:11px 20px; border-radius:0; border:2px solid var(--ink); background:var(--spot-2); color:var(--ink); font-family:var(--mono); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; box-shadow:4px 4px 0 var(--ink); }
.yt-copy-btn:hover{ background:var(--spot); }
.yt-copy-btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.yt-copy-btn[data-copied="true"]{ background:var(--ink); color:var(--spot-2); }

.yt-result-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px; }
@media (max-width:520px){ .yt-result-grid{ grid-template-columns:1fr; } }
.yt-result-box{ background:var(--spot-2); border:2px solid var(--ink); padding:16px 18px; }
.yt-result-box__label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); display:block; margin-bottom:4px; }
.yt-result-box__amount{ font-family:var(--mono); font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-1px; display:block; }

.yt-disclaimer{ background:#fff; border:2px solid var(--ink); border-left:8px solid var(--spot); padding:14px 18px; margin:0 0 24px; font-size:13.5px; line-height:1.6; color:var(--ink-2); font-family:var(--mono); }
.yt-disclaimer strong{ color:var(--ink); }

.yt-error{ color:var(--warn); font-family:var(--mono); font-size:12px; margin-top:6px; }

/* ── Sectiescheiding: 3px lijn met zwart labelblokje ─────────────────────── */
.rw-rule{ border-top:3px solid var(--ink); margin:0; }
.rw-rule__inner{ max-width:1180px; 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; } }

/* ── Toollijst: volle-breedte rijen, geen tegel-grid ─────────────────────── */
.rw-list{ border-bottom:3px solid var(--ink); }
.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); }

/* ── Toelichtende tekst: smalle kolom links ──────────────────────────────── */
.rw-note{ padding:34px 0 10px; }
.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; }
.rw-note__body code{ font-family:var(--mono); font-size:13px; background:var(--paper-2); border:1px solid var(--ink); padding:1px 5px; }

/* ── Journal: tekstlijst met datum, geen kaarten of vignetten ────────────── */
.rw-log{ padding:26px 0 46px; }
.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; }

/* ── Formaten-gids / thumbnails: zelfde harde kaders ──────────────────────── */
.yt-size-card{ background:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:24px; margin-bottom:26px; }
.yt-size-card h3{ margin-top:0; color:var(--ink); text-transform:uppercase; letter-spacing:-.01em; }
.yt-size-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.yt-size-table th,.yt-size-table td{ padding:9px 10px; text-align:left; border-bottom:1px solid var(--ink); font-size:13.5px; color:var(--ink-2); }
.yt-size-table td{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.yt-size-table th{ font-family:var(--mono); color:var(--ink); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-bottom-width:2px; }

.thumb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:16px; }
.thumb-card{ background:#fff; border:2px solid var(--ink); overflow:hidden; text-align:left; border-radius:0; }
.thumb-card img{ width:100%; display:block; background:var(--paper-2); aspect-ratio:16/9; object-fit:cover; border-bottom:2px solid var(--ink); }
.thumb-card__body{ padding:10px 12px; }
.thumb-card__name{ font-weight:700; font-size:12.5px; display:block; color:var(--ink); margin:0 0 4px; }
.thumb-card__dim{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin:0 0 8px; }
.thumb-card__url{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink); word-break:break-all; background:var(--paper-2); padding:6px 8px; border:1px solid var(--ink); }

/* ── Bestaande lichte parent-secties (kennisbank/blog-archief/faq/term) blijven
   consistent met het papier/inkt-systeem in plaats van het gradient-thema. ── */
.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); border-radius:0; box-shadow:none;
}
.kb-card__title,.basis-card__title,.latest-card__title,.term-related__card h3{ color:var(--ink); }

/* ── Tool-pagina algemeen ─────────────────────────────────────────────────── */
.rw-below{ padding:40px 0 60px; }
.rw-below .prose{ max-width:760px; }
.rw-below .prose h2{ font-family:var(--mono); font-size:15px; text-transform:uppercase; letter-spacing:.03em; }

/* ── 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); }