/*
Theme Name: TankTip
Description: Eigen blokthema voor TankTip.nl, in de stijl van de app: groen accent, Bricolage Grotesque en Figtree, rustig en minimalistisch. Kleuren, lettertypes en maten staan in theme.json; hier alleen wat theme.json niet kan (donker thema, kop, voet, enkele details).
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.1
Author: TankTip
Text Domain: tanktip
*/

/* ------------------------------------------------------------ donker thema: volgt het systeem, of de keuze in de voettekst/app (html[data-thema]) */
html[data-thema="licht"] { color-scheme: light; }
html[data-thema="donker"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-thema="licht"]) { color-scheme: dark; } }

@media (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]):root {
    --wp--preset--color--base: #0F1412;
    --wp--preset--color--contrast: #EEF1EC;
    --wp--preset--color--accent-1: #0E7A50;
    --wp--preset--color--accent-3: #0B6B45;
    --wp--preset--color--accent-4: #A3ABA5;
    --wp--preset--color--accent-5: #1A201D;
    --wp--preset--color--accent-6: #2A322E;
  }
  html:not([data-thema="licht"]) :where(.wp-site-blocks) a:where(:not(.wp-element-button)) { color: #6FD3A2; }
}
html[data-thema="donker"]:root {
    --wp--preset--color--base: #0F1412;
    --wp--preset--color--contrast: #EEF1EC;
    --wp--preset--color--accent-1: #0E7A50;
    --wp--preset--color--accent-3: #0B6B45;
    --wp--preset--color--accent-4: #A3ABA5;
    --wp--preset--color--accent-5: #1A201D;
    --wp--preset--color--accent-6: #2A322E;
  }
html[data-thema="donker"] :where(.wp-site-blocks) a:where(:not(.wp-element-button)) { color: #6FD3A2; }

/* ------------------------------------------------------------ kop (zelfde opbouw als de desktopkop van de app) */

.tt-site-kop {
  background: var(--wp--preset--color--accent-5);
  border-bottom: 1px solid var(--wp--preset--color--accent-6);
  padding-top: 12px;
  padding-bottom: 12px;
}
.tt-site-kop-binnen { gap: 12px 24px; align-items: center; }
.tt-site-logo {
  margin: 0;
  font-family: var(--wp--preset--font-family--bricolage);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tt-site-logo a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.tt-site-icoon { width: 34px; height: 34px; flex: none; }
.tt-site-logo .tt-groen { color: var(--wp--preset--color--accent-1); }
@media (prefers-color-scheme: dark) { html:not([data-thema="licht"]) .tt-site-logo .tt-groen { color: #6FD3A2; } }
html[data-thema="donker"] .tt-site-logo .tt-groen { color: #6FD3A2; }

/* weergavekeuze in de voettekst */
.tt-site-weergave { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--wp--preset--spacing--40); font-size: 14px; }
.tt-site-weergave span { margin-right: 6px; color: var(--wp--preset--color--accent-4); }
.tt-site-weergave button {
  min-height: 40px; padding: 0 14px; border-radius: 20px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--wp--preset--color--accent-6); background: transparent; color: var(--wp--preset--color--contrast);
}
.tt-site-weergave button[aria-pressed="true"] { background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); color: #FFFFFF; }
.tt-site-weergave button:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }

.tt-site-nav { font-weight: 600; font-size: 15px; gap: 4px 22px; }
.tt-site-nav a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; }
.tt-site-nav a:hover { color: var(--wp--preset--color--accent-1) !important; }
.tt-site-nav .current-menu-item > a, .tt-site-nav a[aria-current="page"] { color: var(--wp--preset--color--accent-1) !important; }
.tt-site-kop .wp-block-button__link { padding: 10px 18px; font-size: 15px; border-radius: 22px; }
/* hoofdlinks: alleen op desktop; "Plan je tankstop" pas vanaf 1024 px, anders loopt de kop vol */
@media (max-width: 781px) {
  .tt-nav-hoofd { display: none !important; }
  .tt-site-kop .wp-block-button__link { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 1023px) { .tt-nav-hoofd .tt-nav-breed { display: none !important; } }

/* ------------------------------------------------------------ menu (parts/header.html: <dialog>, assets/js/menu.js)
   Bovenaan de app-actie, daarna groepen met een klein kopje. Mobiel: schermvullend; desktop: paneel van rechts. */
.tt-menuknop, .tt-menu-sluit {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 22px; border: 1px solid var(--wp--preset--color--accent-6); background: transparent;
  color: var(--wp--preset--color--contrast); cursor: pointer;
}
.tt-menuknop:hover, .tt-menu-sluit:hover { border-color: var(--wp--preset--color--accent-1); }
.tt-menuknop:focus-visible, .tt-menu-sluit:focus-visible, .tt-menu a:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
/* eigen icoontjes: drie lijnen / kruis van 2 px, afgerond, in de tekstkleur (ook donker thema) */
.tt-menuknop::before, .tt-menu-sluit::before {
  content: ''; display: block; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--tt-icoon) center / 20px 20px no-repeat; mask: var(--tt-icoon) center / 20px 20px no-repeat;
}
.tt-menuknop { --tt-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tt-menu-sluit { --tt-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 4.5l11 11M15.5 4.5l-11 11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

html.tt-menu-open { overflow: hidden; }
.tt-menu {
  box-sizing: border-box; margin: 0; padding: 0; border: 0; max-width: none; max-height: none;
  width: 100%; height: 100dvh; inset: 0; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--figtree);
}
.tt-menu::backdrop { background: rgba(18, 22, 28, 0.4); }
.tt-menu[open] { display: flex; animation: tt-menu-in 0.22s ease-out both; }
.tt-menu-binnen {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; width: 100%; min-height: 100%; overflow-y: auto;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.tt-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.tt-menu-logo {
  display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--contrast) !important; text-decoration: none;
  font-family: var(--wp--preset--font-family--bricolage); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
}
.tt-menu-logo .tt-groen { color: var(--wp--preset--color--accent-1); }
.tt-menu-cta {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 18px; text-decoration: none;
  background: var(--wp--preset--color--accent-1); color: #FFFFFF !important;
  font-family: var(--wp--preset--font-family--bricolage); font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
}
.tt-menu-cta span { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 15px; letter-spacing: 0; color: #D3EDE0; }
.tt-menu-cta:hover { background: var(--wp--preset--color--accent-3); }
.tt-menu-acties { margin: -6px 0 0; font-size: 16px; font-weight: 600; }
.tt-menu-acties a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; color: var(--wp--preset--color--accent-1) !important; text-decoration: none; }
.tt-menu-nav { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; border-top: 1px solid var(--wp--preset--color--accent-6); }
.tt-menu-groep { padding-top: 16px; }
.tt-menu-groep + .tt-menu-groep { border-top: 1px solid var(--wp--preset--color--accent-6); }
.tt-menu-kop { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); }
.tt-menu-groep ul { list-style: none; margin: 0; padding: 0; }
.tt-menu-groep a {
  display: flex; align-items: center; min-height: 48px; text-decoration: none; /* tikdoel ≥ 48 px */
  color: var(--wp--preset--color--contrast) !important; font-size: 18px; font-weight: 600;
}
.tt-menu-groep a:hover { color: var(--wp--preset--color--accent-1) !important; }
.tt-menu a[aria-current="page"] { color: var(--wp--preset--color--accent-1) !important; }
.tt-menu-voet { margin: auto 0 0; padding-top: 12px; font-size: 14px; color: var(--wp--preset--color--accent-4); }
.tt-menu-voet a { color: var(--wp--preset--color--accent-4) !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-thema="licht"]) :is(.tt-menu-logo .tt-groen, .tt-menu-acties a, .tt-menu a[aria-current="page"], .tt-menu-groep a:hover) { color: #6FD3A2 !important; }
}
html[data-thema="donker"] :is(.tt-menu-logo .tt-groen, .tt-menu-acties a, .tt-menu a[aria-current="page"], .tt-menu-groep a:hover) { color: #6FD3A2 !important; }

/* mobiel: twee groepen naast elkaar waar het past (vanaf 480 px) */
@media (min-width: 480px) and (max-width: 781px) {
  .tt-menu-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .tt-menu-groep + .tt-menu-groep { border-top: 0; }
  .tt-menu-groep:last-child { grid-column: 1 / -1; border-top: 1px solid var(--wp--preset--color--accent-6); }
}
/* desktop: paneel van rechts, de pagina ernaast gedimd */
@media (min-width: 782px) {
  .tt-menu { inset: 0 0 0 auto; width: 400px; height: 100dvh; border-left: 1px solid var(--wp--preset--color--accent-6); }
  .tt-menu-binnen { padding: 18px 28px 24px; }
  .tt-menu-groep a { font-size: 17px; min-height: 42px; } /* muis: iets compacter */
}
@keyframes tt-menu-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 782px) { @keyframes tt-menu-in { from { transform: translateX(100%); } to { transform: none; } } }
@media (prefers-reduced-motion: reduce) { .tt-menu[open] { animation: none; } }

/* ------------------------------------------------------------ voet */

.tt-site-voet {
  background: var(--wp--preset--color--accent-5);
  border-top: 1px solid var(--wp--preset--color--accent-6);
  margin-top: 0;
}
.tt-site-voet h2 {
  font-size: 15px;
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 8px;
}
.tt-site-voet ul { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: 15px; }
.tt-site-voet a { text-decoration: none; }
.tt-site-voet .tt-site-klein { font-size: 13px; color: var(--wp--preset--color--accent-4); }
.tt-site-voetlinks { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; font-weight: 600;
  padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--accent-6); }

/* ------------------------------------------------------------ pagina met de app: geen marges van het thema */

.page-template-page-app .wp-site-blocks { padding: 0; }
.page-template-page-app main { margin: 0 !important; }

/* routeplanner uit: links en knoppen naar "Plan je tankstop" weg */
.tt-zonder-route .tt-alleen-route { display: none !important; }

/* ------------------------------------------------------------ voet onderaan, ook bij korte pagina's */

.wp-site-blocks { min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .tt-seo { flex: 1 0 auto; width: 100%; }

/* ------------------------------------------------------------ inhoud */

.tt-inhoud { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--70); }
.tt-kaartje {
  background: var(--wp--preset--color--accent-5);
  border: 1px solid var(--wp--preset--color--accent-6);
  border-radius: 18px;
}
.tt-zacht { color: var(--wp--preset--color--accent-4); }
/* Ruimte in de inhoud (23-10-2026): veel lucht tussen secties (vóór een kop), kop en tekst eronder dicht bij elkaar */
.tt-inhoud .wp-block-post-content > * + * { margin-block-start: 1.25em; }
.tt-inhoud .wp-block-post-content > h2 { margin-block-start: clamp(40px, 6vw, 56px); margin-block-end: 0; }
.tt-inhoud .wp-block-post-content > h3 { margin-block-start: clamp(28px, 4vw, 36px); margin-block-end: 0; }
.tt-inhoud .wp-block-post-content > :is(h2, h3) + * { margin-block-start: 0.5em; }
.wp-block-post-template.is-layout-flow > li + li { margin-top: var(--wp--preset--spacing--30); }
/* nieuws: datum en categorie op één regel (ook boven een los bericht, single.html) */
.tt-nieuws-meta .wp-block-post-terms a { text-decoration: none; font-weight: 600; }
/* ------------------------------------------------------------ nieuwsoverzicht (index.html, archive.html, parts/nieuws-lijst.html)
   Kop + onderwerpen; op de eerste pagina het nieuwste bericht breed (foto links, tekst rechts), daarna een raster van kaarten. */
.tt-nieuws-pagina { padding-top: var(--wp--preset--spacing--60); }
.tt-nieuws-kop { margin-bottom: var(--wp--preset--spacing--30); }
.tt-nieuws-kop h1 { margin: 0; }
.tt-nieuws-intro { margin: 6px 0 0; font-size: 18px; color: var(--wp--preset--color--accent-4); max-width: 46em; }
.tt-nieuws-terug { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.tt-nieuws-terug a { text-decoration: none; }
.tt-nieuws-terug a::before { content: "← "; }
.tt-onderwerpen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--wp--preset--spacing--40); }
.tt-onderwerp {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--accent-5);
  color: var(--wp--preset--color--contrast) !important; text-decoration: none !important;
}
.tt-onderwerp:hover { border-color: var(--wp--preset--color--accent-1); }
body.blog .tt-onderwerp-alles, body.category-brandstofprijzen .tt-onderwerp-brandstofprijzen,
body.category-over-de-grens .tt-onderwerp-over-de-grens, body.category-tips .tt-onderwerp-tips {
  background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); color: #FFFFFF !important;
}
.tt-nieuwsraster { gap: var(--wp--preset--spacing--40) !important; }
.tt-nieuwskaart {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--wp--preset--color--accent-5); border: 1px solid var(--wp--preset--color--accent-6);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tt-nieuwskaart:hover { border-color: var(--wp--preset--color--accent-1); box-shadow: 0 6px 22px rgba(11, 107, 69, 0.12); }
.tt-nieuwskaart-foto { margin: 0 !important; }
.tt-nieuwskaart-foto img { display: block; }
.tt-nieuwskaart-tekst { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.tt-nieuwskaart-tekst > * { margin: 0 !important; }
.tt-nieuws-meta { gap: 6px 12px; font-size: 13px; color: var(--wp--preset--color--accent-4); align-items: center; }
.tt-nieuws-onderwerp a {
  display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent); color: var(--wp--preset--color--accent-1) !important;
  text-decoration: none !important; position: relative; z-index: 2;
}
.tt-nieuwskaart-titel { font-size: 21px !important; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.tt-nieuwskaart-titel a { color: var(--wp--preset--color--contrast) !important; text-decoration: none !important; }
/* hele kaart klikbaar via de titellink */
.tt-nieuwskaart-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tt-nieuwskaart-titel a:focus-visible { outline: none; }
.tt-nieuwskaart:has(.tt-nieuwskaart-titel a:focus-visible) { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
.tt-nieuwskaart-samenvatting p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--accent-4);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tt-nieuwskaart-samenvatting .wp-block-post-excerpt__more-text { display: none; }
/* eerste pagina: het nieuwste bericht breed, foto links */
@media (min-width: 782px) {
  body:not(.paged) .tt-nieuwsraster > li:first-child { grid-column: 1 / -1; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart { flex-direction: row; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart-foto { flex: 0 0 58%; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart-foto img { height: 100%; aspect-ratio: auto !important; min-height: 340px; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart-tekst { justify-content: center; padding: 28px 32px; gap: 12px; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart-titel { font-size: clamp(26px, 2.6vw, 34px) !important; }
  body:not(.paged) .tt-nieuwsraster > li:first-child .tt-nieuwskaart-samenvatting p { font-size: 17px; -webkit-line-clamp: 5; }
}
/* desktop: raster van 6 smalle kolommen, een kaart beslaat er 2 (= 3 naast elkaar). Geen kaart alleen op de laatste rij:
   blijft er 1 over, dan worden de laatste 4 een 2×2; blijven er 2 over, dan delen die de rij (elk de helft). */
@media (min-width: 1024px) {
  .tt-nieuwsraster { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .tt-nieuwsraster > li { grid-column: span 2; }
  body:not(.paged) .tt-nieuwsraster:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+4),
  body:not(.paged) .tt-nieuwsraster:has(> li:last-child:nth-child(3n)) > li:nth-last-child(-n+2),
  body.paged .tt-nieuwsraster:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4),
  body.paged .tt-nieuwsraster:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2) { grid-column: span 3; }
  body:not(.paged) .tt-nieuwsraster > li:first-child { grid-column: 1 / -1 !important; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .tt-nieuwsraster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* tablet: uitgelicht over de hele breedte; oneven aantal eronder → het laatste ook over de hele breedte */
  body:not(.paged) .tt-nieuwsraster > li:first-child { grid-column: 1 / -1; }
  body:not(.paged) .tt-nieuwsraster > li:last-child:nth-child(even) { grid-column: 1 / -1; }
  body.paged .tt-nieuwsraster > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .tt-nieuwsraster { grid-template-columns: minmax(0, 1fr) !important; } }
.tt-nieuws-paginas { margin-top: var(--wp--preset--spacing--50); justify-content: center; gap: 12px; font-weight: 600; }

.wp-block-search__input { border-radius: 12px; border-color: var(--wp--preset--color--accent-6); min-height: 48px; padding: 0 14px; }
.wp-block-search__button { border-radius: 12px; }

/* ------------------------------------------------------------ voorpagina */

.tt-held-voorpagina {
  border-radius: 0 0 28px 28px;
  /* verloop zoals het logo; licht groen rechtsboven, zodat de witte tekst links goed leesbaar blijft */
  background:
    radial-gradient(ellipse 85% 160% at 100% 0%, rgba(31, 174, 116, 0.95), rgba(31, 174, 116, 0.35) 45%, transparent 80%),
    linear-gradient(135deg, #0B6B45 0%, #075238 50%, #043A25 100%) !important;
}
.tt-held-voorpagina, .tt-held-voorpagina h1 { color: #FFFFFF !important; } /* op groen altijd wit, ook in donkere modus */
.tt-held-voorpagina p { color: #D3EDE0; }
.tt-held-voorpagina .wp-block-button__link { background: #FFFFFF; color: #0B6B45; min-height: 58px; display: inline-flex; align-items: center; padding: 0 26px; }
.tt-held-voorpagina .is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.5); }
/* TankTip in het groene vlak (plugin: [tanktip_voorpagina], app/src/voorpagina.js) */
.tt-vp { margin-top: 28px; }
.tt-vp-zoek, .tt-vp-fout, .tt-vp-tip { max-width: 560px; }
.tt-vp.is-laden { min-height: 260px; }
.tt-vp.is-laden > .wp-block-buttons { display: none; }
.tt-held-voorpagina.is-met-tip .tt-vp-intro { display: none; } /* inleiding weg zodra er een tip is; staat er wel voor Google */
/* met tip: de kop blijft staan als titel boven het advies, iets kleiner dan zonder tip */
.tt-held-voorpagina.is-met-tip h1 { font-size: clamp(28px, 3.2vw, 38px) !important; margin-bottom: 0 !important; }
.tt-held-voorpagina.is-met-tip .tt-vp { margin-top: 18px; }
.tt-vp p { margin: 0; }
.tt-vp-laden { font-size: 17px; padding: 24px 0; }
/* tipblok (schets B, volgorde: tip · voordeel · actie): label 13 · tekst 17 · tip 24 · bedrag 56; Bricolage alleen voor kop en bedrag */
.tt-vp-kop { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #A9DCC4 !important; }
.tt-vp-link.is-klein { min-height: 0; padding: 0; font-size: 13px; letter-spacing: 0; text-transform: none; vertical-align: baseline; }
.tt-vp-voordeel { margin-top: 22px; }
.tt-vp-zin { font-size: 17px; color: #D3EDE0; }
.tt-vp-bedrag { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: #FFFFFF !important; margin-top: 2px !important; }
.tt-vp-eenheid { font-family: var(--wp--preset--font-family--figtree); font-weight: 400; font-size: 17px; letter-spacing: 0; color: #D3EDE0; }
.tt-vp-tip { margin-top: 10px !important; font-size: 24px; font-weight: 600; line-height: 1.3; color: #FFFFFF !important; }
.tt-vp-detail { display: block; font-size: 17px; font-weight: 400; line-height: 1.4; color: #D3EDE0; margin-top: 4px; }
.tt-vp-pin { vertical-align: -2px; margin-right: 6px; }
.tt-vp-sub { margin-top: 6px !important; }
.tt-vp-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tt-vp-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 58px; padding: 0 24px; border-radius: 16px; border: 0; cursor: pointer;
  background: #FFFFFF; color: #0B6B45 !important; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none;
}
.tt-vp-knop.is-rand { background: transparent; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600; }
.tt-vp-knop:hover { background: #F0F7F3; }
.tt-vp-knop.is-rand:hover { background: rgba(255, 255, 255, 0.1); }
.tt-vp-knop:focus-visible, .tt-vp-link:focus-visible, .tt-vp-zoekregel input:focus-visible { outline: 3px solid #A9DCC4; outline-offset: 2px; }
.tt-vp-zoek { margin-top: 18px; }
.tt-vp-label { display: block; font-size: 15px; color: #D3EDE0; margin-bottom: 6px; }
.tt-vp-zoekregel { display: flex; gap: 8px; }
.tt-vp-zoekregel input {
  flex: 1; min-width: 0; min-height: 52px; box-sizing: border-box; padding: 0 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font: inherit; font-size: 17px;
}
.tt-vp-zoekregel input::placeholder { color: rgba(255, 255, 255, 0.65); }
.tt-vp-zoekregel .tt-vp-knop { min-height: 52px; }
.tt-vp-fout { margin-top: 12px !important; color: #FFFFFF; background: rgba(0, 0, 0, 0.18); padding: 10px 14px; border-radius: 12px; }
.tt-vp-plek { margin-top: 14px !important; font-size: 15px; }
.tt-vp-link { background: none; border: 0; padding: 8px 0; color: #FFFFFF; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; }
@media (max-width: 600px) {
  .tt-vp-knoppen .tt-vp-knop { width: 100%; }
  .tt-vp-bedrag { font-size: 52px; }
  .tt-vp-tip { font-size: 22px; }
  .tt-vp-perliter { display: none; }
  .tt-vp-knoppen .tt-vp-knop:first-child { min-height: 64px; } /* "Breng me erheen" groot, voor in de auto */
}

/* "Euro 95 vandaag gemiddeld" rechts in het groene vlak (plugin: [tanktip_vandaag]) */
.tt-held-kolommen { gap: 32px 56px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.tt-vp-intro { max-width: 34em; }
/* Prijszuil (plugin: [tanktip_vandaag]): model tankstation-totem met groene LED's, staat op de onderrand van het groene vlak */
.tt-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tt-held-voorpagina { --tt-onder: var(--wp--preset--spacing--50); padding-bottom: var(--tt-onder) !important; overflow-x: clip; }
.tt-held-zuilkolom { align-self: flex-end !important; }
.tt-zuil-staat {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(300px, 100%); margin: 0 72px 0 auto; /* rechts ruimte voor de wolk */
}
/* onderkant op de rand van het vlak (WordPress zet de marge van het laatste blok in een kolom op 0, vandaar !important) */
.tt-held-zuilkolom .tt-zuil-staat { margin-bottom: calc(-1 * var(--tt-onder)) !important; }
.tt-zuil-staat > .tt-zuil, .tt-zuil-staat > .tt-zuil-voet { position: relative; z-index: 1; }
.tt-wolk { position: absolute; z-index: 0; fill: rgba(255, 255, 255, 0.13); pointer-events: none; }
.tt-wolk.is-links { width: 190px; left: -128px; top: 62px; }
.tt-wolk.is-rechts { width: 160px; right: -84px; top: 270px; }
/* Wolken glijden langzaam van links naar rechts achter de zuil langs en faden in en uit.
   Alleen rond de zuil (begin ± 220 px links ervan, eind voorbij de rechterkant), niet over de kop en knoppen.
   Zes wolken met eigen maat en hoogte, bijna gelijk tempo (53–58 s) en gelijk over de ronde gespreid (vertraging
   = k/6 van de ronde, negatief = bij openen al onderweg): elke ± 9 s komt er links van de zuil een nieuwe op. Met "minder beweging": alleen 1 en 2, stil. */
.tt-wolk.is-3, .tt-wolk.is-4, .tt-wolk.is-5, .tt-wolk.is-6 { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tt-wolk { left: -220px; right: auto; opacity: 0; will-change: transform, opacity; animation: tt-wolk-glijd linear infinite; }
  .tt-wolk.is-3, .tt-wolk.is-4, .tt-wolk.is-5, .tt-wolk.is-6 { display: block; }
  .tt-wolk.is-links { width: 190px; top: 62px; animation-duration: 56s; animation-delay: -0.0s; }
  .tt-wolk.is-4 { width: 140px; top: 400px; animation-duration: 55s; animation-delay: -9.2s; }
  .tt-wolk.is-5 { width: 100px; top: 10px; animation-duration: 57s; animation-delay: -19.0s; }
  .tt-wolk.is-rechts { width: 160px; top: 270px; animation-duration: 54s; animation-delay: -27.0s; }
  .tt-wolk.is-6 { width: 130px; top: 330px; animation-duration: 53s; animation-delay: -35.3s; }
  .tt-wolk.is-3 { width: 120px; top: 170px; animation-duration: 58s; animation-delay: -48.3s; }
}
@keyframes tt-wolk-glijd {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(560px); opacity: 0; }
}
.tt-zuil {
  width: 100%; padding: 10px 10px 30px; display: flex; flex-direction: column; gap: 7px; color: #FFFFFF;
  background: linear-gradient(90deg, #032619, #04301F 18%, #04301F 82%, #021C12);
  border-radius: 50% 50% 4px 4px / 26px 26px 4px 4px; box-shadow: 14px 18px 30px rgba(0, 0, 0, 0.28);
}
.tt-zuil-paneel { border: 3px solid #E9F3EE; border-radius: 4px; background: #063B27; padding: 10px 12px; }
.tt-zuil-paneel.is-logo { border-radius: 50% 50% 4px 4px / 18px 18px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 10px; }
.tt-zuil-icoon img { display: block; width: 48px; height: 48px; border-radius: 11px; }
.tt-zuil p, .tt-zuil-staat > p { margin: 0; } /* voor het geval wpautop toch iets toevoegt */
.tt-wolken { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tt-zuil-merk { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.tt-zuil-merk b { color: #6FD3A2; font-weight: 800; }
.tt-zuil-vandaag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #D3EDE0; }
.tt-zuil-paneel.is-tekst { text-align: center; font-weight: 800; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.tt-zuil-paneel.is-tekst small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: #D3EDE0; margin-top: 3px; }
.tt-zuil-paneel.is-prijs { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; }
.tt-zuil-paneel.is-midden { justify-content: center; }
.tt-zuil-soort { font-weight: 800; font-size: 15px; line-height: 1.1; }
.tt-zuil-soort small { display: block; font-weight: 600; font-size: 10px; color: #D3EDE0; letter-spacing: 0.04em; }
.tt-zuil-display { position: relative; display: inline-flex; align-items: flex-end; gap: 4px; padding: 6px 7px; border-radius: 3px; background: #0A0C0B; box-shadow: inset 0 0 0 1px #000; }
.tt-led { display: block; height: 32px; width: auto; filter: drop-shadow(0 0 2px rgba(61, 255, 143, 0.55)); }
.tt-led .aan { fill: #3DFF8F; }
.tt-led .uit { fill: #0D2A1B; }
.tt-zuil-eenheid { font-size: 11px; font-weight: 700; margin-left: 4px; }
.tt-zuil-goedkoper { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tt-zuil-paneel.is-landen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.tt-zuil-cel { display: flex; min-width: 0; }
.tt-zuil-land {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 3px;
  background: #E9F3EE; color: #04301F !important; text-decoration: none !important;
}
.tt-zuil-land:hover { background: #FFFFFF; }
.tt-zuil-land:focus-visible { outline: 3px solid #6FD3A2; outline-offset: 2px; }
.tt-zuil-land span { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tt-zuil-land strong { font-family: var(--wp--preset--font-family--bricolage); font-size: 18px; font-variant-numeric: tabular-nums; }
.tt-zuil-land sup { font-size: 0.55em; vertical-align: 0.8em; }
.tt-zuil-tijd { text-align: center; font-size: 11px; color: #D3EDE0; margin-top: 2px; }
.tt-zuil-staat.is-oud .tt-zuil-tijd { color: #FFE3A3; }
.tt-zuil-voet {
  width: 120%; height: 16px; margin-top: -2px; margin-bottom: -16px; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #0A4A32, #021C12); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
/* onder de voetplaat: ruimte op de pagina, zodat hij niet tegen de blokken eronder staat */
.tt-held-voorpagina + * { margin-top: 16px; }
@media (max-width: 781px) {
  .tt-held-voorpagina { --tt-onder: 28px; padding-top: 28px !important; }
  .tt-zuil-staat { margin-right: auto; }
  .tt-vp-intro { font-size: 17px !important; }
  .tt-vp { margin-top: 20px; }
}

/* overzicht onder het groene vlak (front-page.html, schets B): één paneel, drie kolommen met dunne lijnen ertussen,
   kleine grijze kopjes en gewone links. Alleen CSS, geen iconen of afbeeldingen. */
.tt-overzicht {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px;
  background: var(--wp--preset--color--accent-5); border: 1px solid var(--wp--preset--color--accent-6);
}
.tt-overzicht-kol { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; min-width: 0; }
.tt-overzicht-kol + .tt-overzicht-kol { border-left: 1px solid var(--wp--preset--color--accent-6); }
.tt-overzicht h2 { margin: 0; font-family: var(--wp--preset--font-family--figtree); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); }
.tt-overzicht ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tt-overzicht ul.is-een { grid-template-columns: 1fr; }
.tt-overzicht li a { display: block; padding: 5px 0; font-size: 16px; font-weight: 500; color: var(--wp--preset--color--contrast) !important; text-decoration: none !important; }
.tt-overzicht li a:hover, .tt-overzicht li a:focus-visible { color: var(--wp--preset--color--accent-1) !important; }
.tt-overzicht-meer { margin: auto 0 0 !important; padding-top: 4px; }
.tt-overzicht-meer a { font-weight: 700; text-decoration: none !important; }
@media (max-width: 781px) {
  .tt-overzicht { grid-template-columns: 1fr; }
  .tt-overzicht-kol + .tt-overzicht-kol { border-left: 0; border-top: 1px solid var(--wp--preset--color--accent-6); }
  .tt-overzicht-kol { padding: 22px 20px; }
}
.tt-voorpagina-uitleg h2 { margin-top: 1.4em; }
.tt-voorpagina-uitleg h2:first-child { margin-top: 0; }

/* tabellen in berichten en pagina's: passend op mobiel, anders scrollen binnen de tabel */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { font-size: 15px; }
.wp-block-table th { text-align: left; }
.wp-block-table figcaption { font-size: 13px; color: var(--wp--preset--color--accent-4); }
@media (max-width: 600px) {
  .wp-block-table table { font-size: 13px; }
  .wp-block-table th, .wp-block-table td { padding: 6px 5px; }
}

/* Literprijs zoals op de pomp (voorpagina, SEO-pagina's): derde cijfer klein en hoog; niet kleiner dan 10 px */
.tt-prijs { white-space: nowrap; }
.tt-prijs sup { font-size: max(10px, 0.7em); line-height: 0; vertical-align: baseline; position: relative; top: -0.45em; margin-left: 1px; }