/*
Theme Name: WattMinder
Theme URI: https://wattminder.nl
Author: WattMinder
Description: Vormgeving van WattMinder. Gebruik altijd samen met de plugin WattMinder Core (functies, live data en pagina's).
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wattminder
*/

/* ---------- Basis ---------- */
:root {
	--wm-inkt: #0B1F33;
	--wm-inkt-2: #12304D;
	--wm-inkt-rand: #1F4366;
	--wm-lime: #3BE38A;
	--wm-groen: #0E8C4E;
	--wm-achtergrond: #F4F7F9;
	--wm-wit: #FFFFFF;
	--wm-zacht: #4A5B6C;
	--wm-op-donker: #C5D2DE;
	--wm-rand: #DCE3E9;
	--wm-geel: #F5C451;
	--wm-radius: 16px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
:where(.wp-site-blocks) > main { margin-block-start: 0; }
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }

/* Teksten op donkere achtergrond */
.has-inkt-background-color,
.has-inkt-2-background-color { color: var(--wm-wit); }
.has-inkt-background-color a:where(:not(.wp-element-button)),
.has-inkt-2-background-color a:where(:not(.wp-element-button)) { color: var(--wm-lime); }

/* ---------- Header ---------- */
.wm-header { position: relative; z-index: 50; border-bottom: 1px solid #1C3A57; }
.wm-header .wp-block-navigation a { color: var(--wm-wit); text-decoration: none; }
.wm-header .wp-block-navigation a:hover,
.wm-header .wp-block-navigation .current-menu-item > a,
.wm-header .wp-block-navigation a[aria-current="page"] { color: var(--wm-lime); }
.wm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wm-inkt); color: var(--wm-wit); padding: 32px 24px; }
.wm-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 20px; padding: 8px 0; }
.wm-header .wp-block-navigation__responsive-container-open,
.wm-header .wp-block-navigation__responsive-container-close { color: var(--wm-wit); }
.wm-header .wm-logo img { display: block; height: 40px; width: auto; }
.wm-header .wp-block-button__link { padding: 12px 18px; font-size: 15px; border-radius: 10px; }

/* ---------- Footer ---------- */
.wm-footer { border-top: 1px solid #1C3A57; }
.wm-footer p { margin: 0; }
.wm-footer a { color: var(--wm-op-donker) !important; text-decoration: none; font-weight: 500; }
.wm-footer a:hover { color: var(--wm-lime) !important; }
.wm-footer .wm-footer-kop { color: var(--wm-wit); font-weight: 800; }
.wm-footer .wm-logo img { height: 32px; width: auto; display: block; }

/* ---------- Blokstijlen (te kiezen in de editor) ---------- */
.is-style-wm-kaart {
	background: var(--wm-wit);
	border: 1px solid var(--wm-rand);
	border-radius: var(--wm-radius);
	padding: 24px;
	color: var(--wm-inkt);
}
.is-style-wm-kaart > * { margin-block: 0; }
.is-style-wm-kaart > * + * { margin-block-start: 12px; }
.is-style-wm-kaart .wp-block-buttons { margin-top: auto; padding-top: 4px; }
.is-style-wm-kaart.is-layout-flex,
.is-style-wm-kaart.is-layout-flow { display: flex; flex-direction: column; }
.wm-tegel a.wm-tegel-link { position: absolute; inset: 0; z-index: 1; }
.is-style-wm-kaart { transition: border-color .15s ease, box-shadow .15s ease; position: relative; }
.is-style-wm-kaart:has(.wm-klikbaar):hover { border-color: #B8C5D1; box-shadow: 0 6px 24px rgba(11,31,51,.06); }
.wm-klikbaar a::after { content: ""; position: absolute; inset: 0; }

.wp-block-group.is-style-wm-donker {
	background: var(--wm-inkt);
	color: var(--wm-wit);
	border-radius: 20px;
	padding: 32px;
}
.wp-block-group.is-style-wm-donker p { color: var(--wm-op-donker); }
.wp-block-group.is-style-wm-donker :is(h1, h2, h3) { color: var(--wm-wit); }

.is-style-wm-zacht-groen { background: #EAF9F1; border-radius: 12px; padding: 16px; }

p.is-style-wm-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wm-groen);
	margin-bottom: 0;
}
.has-inkt-background-color p.is-style-wm-label,
.is-style-wm-donker p.is-style-wm-label { color: var(--wm-lime); }

p.is-style-wm-klein-groen { font-size: 13px; font-weight: 700; color: var(--wm-groen); margin: 0; }

.wp-block-button.is-style-wm-omlijnd .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1px solid #3A5876;
	padding: 14px 21px;
}
.wp-block-button.is-style-wm-omlijnd .wp-block-button__link:hover { border-color: var(--wm-lime); color: var(--wm-lime); }
.wp-block-button.is-style-wm-donker .wp-block-button__link { background: var(--wm-inkt); color: var(--wm-wit); }
.wp-block-button.is-style-wm-donker .wp-block-button__link:hover { background: var(--wm-inkt-2); }
.is-style-wm-kaart .wp-block-button__link { width: 100%; padding: 13px 18px; font-size: 15px; border-radius: 10px; }

/* ---------- Gedeelde onderdelen ---------- */
.wm-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--wm-inkt);
	background: var(--wm-geel);
	padding: 6px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.wm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wm-bijgewerkt { font-size: 13px; color: var(--wm-zacht); margin: 0; }
.has-inkt-background-color .wm-bijgewerkt { color: var(--wm-op-donker); }

.wm-kruimelpad { font-size: 14px; color: var(--wm-zacht); margin: 0; }
.wm-kruimelpad a { font-weight: 600; }

/* ---------- Prijskaart (hero) ---------- */
.wm-prijskaart {
	background: var(--wm-inkt-2);
	border: 1px solid var(--wm-inkt-rand);
	border-radius: 20px;
	padding: 28px;
	color: var(--wm-wit);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.wm-prijskaart__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wm-prijskaart__label { font-size: 14px; font-weight: 600; color: var(--wm-op-donker); }
.wm-prijskaart__prijs { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.wm-prijskaart__prijs small { font-size: 18px; font-weight: 600; color: var(--wm-op-donker); letter-spacing: 0; }
.wm-staven { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.wm-staven span { flex: 1 1 0; min-width: 0; border-radius: 4px 4px 0 0; background: #3A5876; }
.wm-staven span.is-goedkoop { background: var(--wm-lime); }
.wm-staven span.is-nu { outline: 2px solid var(--wm-wit); outline-offset: 1px; }
.wm-as { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #8FA6BC; }
.wm-minikaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wm-minikaart { background: var(--wm-inkt); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.wm-minikaart__label, .wm-minikaart__sub { font-size: 13px; color: var(--wm-op-donker); }
.wm-minikaart__waarde { font-size: 18px; font-weight: 800; }
.wm-minikaart__waarde.is-groen { color: var(--wm-lime); }
.wm-minikaart a { font-size: 13px; font-weight: 700; color: var(--wm-lime); }

/* ---------- Stroomprijspagina ---------- */
.wm-sp { display: flex; flex-direction: column; gap: 28px; }
.wm-sp__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.wm-sp__datum { font-size: 17px; color: var(--wm-zacht); margin: 0; }
.wm-tabs { display: flex; gap: 6px; background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 12px; padding: 5px; }
.wm-tabs a { font-size: 15px; font-weight: 700; padding: 11px 18px; border-radius: 9px; color: var(--wm-inkt); text-decoration: none; }
.wm-tabs a.is-actief { background: var(--wm-inkt); color: var(--wm-wit); }
.wm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.wm-stat { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.wm-stat.is-donker { background: var(--wm-inkt); border-color: var(--wm-inkt); color: var(--wm-wit); }
.wm-stat__label { font-size: 14px; color: var(--wm-zacht); }
.wm-stat.is-donker .wm-stat__label, .wm-stat.is-donker .wm-stat__sub { color: var(--wm-op-donker); }
.wm-stat__waarde { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.wm-stat__waarde.is-groen { color: var(--wm-groen); }
.wm-stat__sub { font-size: 13px; color: var(--wm-zacht); }
.wm-paneel { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.wm-paneel h2, .wm-paneel h3 { margin: 0; font-size: 22px; }
.wm-paneel__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.wm-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; color: var(--wm-zacht); }
.wm-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.wm-grafiek { display: flex; align-items: flex-end; gap: 6px; height: 260px; border-bottom: 1px solid var(--wm-rand); }
.wm-grafiek span { flex: 1 1 0; min-width: 0; border-radius: 6px 6px 0 0; background: #8FA6BC; position: relative; }
.wm-grafiek span.is-goedkoop { background: #22B36B; }
.wm-grafiek span.is-duur { background: var(--wm-inkt); }
.wm-grafiek span.is-nu::after { content: ""; position: absolute; left: 50%; top: -10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--wm-groen); }
.wm-grafiek .wm-grafiek__min { background: transparent; border-top: 2px dashed #E05A47; border-radius: 0; height: 0 !important; }
.wm-grafiek-as { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--wm-zacht); }
.wm-rij { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.wm-rij > * { flex: 1 1 420px; min-width: 0; }
.wm-momenten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.wm-moment { background: #EAF9F1; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.wm-moment.is-oranje { background: #FFF4E5; }
.wm-moment__titel { font-size: 14px; font-weight: 700; }
.wm-moment__tijd { font-size: 18px; font-weight: 800; color: #0B6E3D; }
.wm-moment.is-oranje .wm-moment__tijd { color: #8A4B00; }
.wm-moment__sub { font-size: 13px; color: var(--wm-zacht); }
.wm-opbouw { margin: 0; }
.wm-opbouw div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 10px 0; border-bottom: 1px solid #E8EDF1; }
.wm-opbouw div:last-child { border-bottom: 0; font-weight: 800; font-size: 16px; }
.wm-opbouw dt { color: var(--wm-zacht); }
.wm-opbouw div:last-child dt { color: var(--wm-inkt); }
.wm-opbouw dd { margin: 0; font-weight: 700; }
.wm-uurtabel summary { font-size: 17px; font-weight: 700; cursor: pointer; }
.wm-uurtabel .wm-tabelwrap { margin-top: 16px; }
.wm-leeg { background: var(--wm-wit); border: 1px dashed #B8C5D1; border-radius: 16px; padding: 24px; color: var(--wm-zacht); }

/* ---------- Tabellen ---------- */
.wm-tabelkaart { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 16px; padding-top: 8px; overflow: hidden; }
.wm-tabelkaart__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px 8px; }
.wm-tabelkaart__titel { font-size: 17px; font-weight: 800; margin: 0; }
.wm-tabelwrap { overflow-x: auto; }
.wm-tabel { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.wm-tabel th { text-align: left; font-size: 13px; font-weight: 700; color: var(--wm-zacht); padding: 12px 24px; }
.wm-tabel td { padding: 14px 24px; border-top: 1px solid #E8EDF1; }
.wm-tabel td:first-child { font-weight: 700; }
.wm-tabel td.is-zacht { color: var(--wm-zacht); }
.wm-tabel tr.is-goedkoop td { background: #F2FBF6; }
.wm-tabelkaart__voet { padding: 12px 24px 16px; border-top: 1px solid #E8EDF1; }

/* ---------- Formulieren ---------- */
.wm-form { display: flex; flex-wrap: wrap; gap: 10px; }
.wm-form label { width: 100%; font-size: 14px; font-weight: 700; }
.wm-form input[type="text"], .wm-form input[type="email"], .wm-form input[type="search"], .wm-reken input, .wm-reken select {
	flex: 1 1 220px;
	min-width: 0;
	font-family: inherit;
	font-size: 16px;
	padding: 14px 16px;
	border: 1px solid #B8C5D1;
	border-radius: 12px;
	background: var(--wm-wit);
	color: var(--wm-inkt);
}
.wm-form input:focus, .wm-reken input:focus, .wm-reken select:focus { outline: 2px solid var(--wm-groen); outline-offset: 1px; border-color: var(--wm-groen); }
.wm-form button, .wm-knop {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	background: var(--wm-inkt);
	color: var(--wm-wit);
	cursor: pointer;
}
.wm-form button:hover { background: var(--wm-inkt-2); }
.wm-form.is-donker input[type="email"] { background: var(--wm-inkt-2); border-color: #3A5876; color: var(--wm-wit); }
.wm-form.is-donker input::placeholder { color: #8FA6BC; }
.wm-form.is-donker button { background: var(--wm-lime); color: var(--wm-inkt); }
.wm-form.is-donker button:hover { background: #2FD27A; }
.wm-form .wm-toestemming { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 500; line-height: 1.5; }
.wm-form .wm-toestemming input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--wm-lime); }
.wm-form .wm-hp { position: absolute; left: -9999px; }
.wm-melding { width: 100%; font-size: 14px; font-weight: 700; padding: 12px 14px; border-radius: 10px; background: #EAF9F1; color: #0B6E3D; }
.wm-melding.is-fout { background: #FDECEA; color: #8A1C11; }

/* Rekenhulp */
.wm-reken {
	background: var(--wm-achtergrond);
	border: 1px solid var(--wm-rand);
	border-radius: 16px;
	padding: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.wm-reken__veld { display: flex; flex-direction: column; gap: 6px; }
.wm-reken__veld label { font-size: 14px; font-weight: 700; }
.wm-reken input, .wm-reken select { padding: 12px 14px; border-radius: 10px; flex: none; }
.wm-reken__uitkomst { grid-column: 1 / -1; background: var(--wm-inkt); color: var(--wm-wit); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.wm-reken__uitkomst span { font-size: 13px; color: var(--wm-op-donker); }
.wm-reken__uitkomst strong { font-size: 28px; font-weight: 800; color: var(--wm-lime); line-height: 1.2; }
.wm-reken__toelichting { grid-column: 1 / -1; font-size: 13px; color: var(--wm-zacht); margin: 0; }

/* ---------- Auto's ---------- */
.wm-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.wm-auto { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 16px; overflow: hidden; color: var(--wm-inkt); text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease; }
a.wm-auto:hover { border-color: #B8C5D1; box-shadow: 0 6px 24px rgba(11,31,51,.06); color: var(--wm-inkt); }
.wm-auto__foto { height: 160px; background: #E8EDF1; display: flex; align-items: center; justify-content: center; color: var(--wm-zacht); font-size: 14px; font-weight: 600; }
.wm-auto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-auto__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.wm-auto__naam { font-size: 18px; font-weight: 800; }
.wm-specs { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wm-specs div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.wm-specs dt { color: var(--wm-zacht); }
.wm-specs dd { margin: 0; font-weight: 700; text-align: right; }
.wm-specs.is-groot { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 16px; padding: 20px 24px; gap: 0; }
.wm-specs.is-groot div { padding: 12px 0; border-bottom: 1px solid #E8EDF1; font-size: 16px; }
.wm-specs.is-groot div:last-child { border-bottom: 0; }

/* ---------- Berichten ---------- */
.wm-postkaart .wp-block-post-title { font-size: 19px; line-height: 1.3; margin: 0; }
.wm-postkaart .wp-block-post-terms { font-size: 13px; font-weight: 700; margin: 0; }
.wm-postkaart .wp-block-post-terms a { color: var(--wm-groen); text-decoration: none; }
.wm-postkaart .wp-block-post-featured-image { margin: -24px -24px 8px; }
.wm-postkaart .wp-block-post-featured-image img { border-radius: 16px 16px 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.wm-artikel .wp-block-post-content :is(p, li) a:where(:not(.wp-element-button)) { text-decoration: underline; text-underline-offset: 3px; }
.wm-postkaart a, .wm-sectiekop a, .wm-tabel a { text-decoration: none; }
.wm-artikel .wp-block-post-content > p, .wm-artikel .wp-block-post-content li { font-size: 18px; line-height: 1.7; }

/* Tabellen in tekst */
.wp-block-table.is-style-wm-tabel table { background: var(--wm-wit); border: 1px solid var(--wm-rand); border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.wp-block-table.is-style-wm-tabel th, .wp-block-table.is-style-wm-tabel td { border: 0; border-top: 1px solid #E8EDF1; padding: 12px 16px; text-align: left; }
.wp-block-table.is-style-wm-tabel thead th { border-top: 0; font-size: 13px; color: var(--wm-zacht); }

/* Details (FAQ) */
.wp-block-details summary { font-size: 17px; font-weight: 700; cursor: pointer; }
.wp-block-details > p { color: var(--wm-zacht); margin-top: 12px; }

/* Toegankelijkheid */
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--wm-groen); outline-offset: 2px; }
.has-inkt-background-color :where(a, button, input):focus-visible { outline-color: var(--wm-lime); }

@media (max-width: 781px) {
	.wm-prijskaart { padding: 20px; }
	.wm-prijskaart__prijs { font-size: 36px; }
	.wm-grafiek { height: 180px; gap: 3px; }
	.wm-paneel { padding: 20px; }
	.wm-tabs a { padding: 10px 12px; font-size: 14px; }
}

/* Klikbare kaarten en randen */
.wm-klikbaar a { color: inherit !important; text-decoration: none; }
.wm-klikbaar a:hover { color: var(--wm-groen) !important; }
.wm-rand-boven-onder { border-top: 1px solid var(--wm-rand); border-bottom: 1px solid var(--wm-rand); }
.wm-tegel .wp-block-image { margin: 0; }
.wm-sectiekop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.wm-sectiekop > * { margin: 0; }
.wm-disclaimer { font-size: 13px; color: var(--wm-zacht); }
.is-style-wm-kaart .wp-block-buttons, .is-style-wm-kaart .wp-block-button { width: 100%; }
.is-style-wm-kaart .wp-block-button__link { text-align: center; }
.wm-uurtabel { display: block; }
.wm-uurtabel .wm-tabelwrap { margin-top: 16px; }
@media (max-width: 600px) {
	.wm-header > .wp-block-group { flex-wrap: nowrap; }
	.wm-header .wm-logo img { height: 30px; }
	.wm-header .wp-block-button__link { padding: 10px 14px; font-size: 14px; }
}

/* Teaser rekenhulp op de homepage */
.wm-teaser { gap: 24px; align-items: center !important; }
.wm-teaser__tekst { flex: 1 1 520px; max-width: 720px; display: flex; flex-direction: column; gap: 10px; }
.wm-teaser .wp-block-buttons { align-self: center; }
.wm-teaser__tekst > * { margin: 0; }