/*
Theme Name: SalderingsGids
Theme URI: https://salderingsgids.nl
Author: NextGen Training B.V.
Author URI: https://nextgen-training.nl
Description: Blok-thema voor SalderingsGids, de site die uitlegt wat het einde van de salderingsregeling per 1 januari 2027 voor een huishouden betekent. Diep blauw met de zon als accent, hoog contrast en grote letters, gemaakt voor iemand die met een brief van zijn energieleverancier in de hand op zijn telefoon zit te lezen.
Version: 0.1.5
Update URI: https://nextgen-training.nl/wp-json/nextgen-updates/v1/pakket/salderingsgids
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salderingsgids
Tags: block-theme, one-column, full-site-editing, accessibility-ready
*/

/* De letters zijn bewust groot. De aanleiding om deze site te bezoeken is een
   brief over geld, en die brieven komen bij iedereen binnen: bij een installateur
   van 30 en bij een echtpaar van 78 dat in 2013 panelen heeft laten leggen. */

:root {
	/* De marge links en rechts. Meegroeiend, maar met een bodem van 1rem zodat
	   tekst op een telefoon nooit tegen het glas plakt, en een plafond zodat hij
	   op een breed scherm niet doorschiet. */
	--sg-marge: clamp(1rem, 3vw, 1.75rem);
}

body {
	hyphens: none;
	-webkit-font-smoothing: antialiased;
}

/* De zijmarge zetten wij zelf en niet WordPress.
   Reden: met de zijmarge van het blokthema kreeg de inhoud op een scherm van
   rond de 750px maar 8px lucht, omdat de tekstbreedte dan bijna gelijk is aan
   het venster en de marge daar niets meer bij deed. Nu is de marge er altijd,
   ook precies op die breedte. */
.wp-site-blocks > * {
	padding-inline: var(--sg-marge);
}

/* Een blok van volle breedte trekt de marge er weer af, en zet hem binnenin
   terug. Zo loopt de achtergrond door tot de rand terwijl de tekst erin op
   dezelfde lijn staat als de rest van de pagina. */
.wp-site-blocks > * > .alignfull {
	margin-inline: calc(var(--sg-marge) * -1);
	width: calc(100% + var(--sg-marge) * 2);
	max-width: none;
	padding-inline: var(--sg-marge);
}

a {
	text-underline-offset: 0.2em;
}

:where(a):hover,
:where(a):focus-visible {
	text-decoration-thickness: 2px;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where(input):focus-visible {
	outline: 3px solid var(--wp--preset--color--zee);
	outline-offset: 2px;
}

/* De link waarmee een toetsenbordgebruiker het menu overslaat. */
.sg-overslaan {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--nacht);
	color: #fff;
	border-radius: 0 0 0.4rem 0;
	text-decoration: none;
}

.sg-overslaan:focus {
	left: 0;
	top: 0;
}

/* --------------------------------------------------------------------------
   De kop van de site
   -------------------------------------------------------------------------- */

.sg-kop {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

/* De naam met een zonnetje ervoor. Een beeldmerk als achtergrondafbeelding en
   niet als plaatje in de HTML: het is versiering, en dan hoort een schermlezer
   het niet twee keer voor te lezen. */
.sg-naam a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--wp--preset--color--nacht);
	letter-spacing: -0.015em;
}

.sg-naam a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.7rem;
	height: 1.7rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="7" fill="%23F5A524"/><g stroke="%2312559E" stroke-width="2.6" stroke-linecap="round"><path d="M16 2v3.5"/><path d="M16 26.5V30"/><path d="M2 16h3.5"/><path d="M26.5 16H30"/><path d="M6.1 6.1l2.5 2.5"/><path d="M23.4 23.4l2.5 2.5"/><path d="M25.9 6.1l-2.5 2.5"/><path d="M8.6 23.4l-2.5 2.5"/></g></svg>');
	background-repeat: no-repeat;
	background-size: contain;
}

.sg-naam a:hover {
	color: var(--wp--preset--color--zee);
}

/* De navigatie. Klein, rustig, en de huidige pagina krijgt een streepje. */
.sg-kop .wp-block-navigation {
	font-weight: 600;
}

.sg-kop .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	color: var(--wp--preset--color--gedempt);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.sg-kop .wp-block-navigation-item__content:hover,
.sg-kop .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--zee);
	border-bottom-color: var(--wp--preset--color--zon);
}

.sg-kop .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nacht);
	border-bottom-color: var(--wp--preset--color--zee);
}

/* Het uitklapmenu op een telefoon is donker, net als de hero.
   De kleur komt uit het navigatieblok zelf (overlayBackgroundColor en
   overlayTextColor in parts/header.html) en niet uit een regel hier. Een regel
   hier verloor het namelijk van WordPress, dat met vijf klassen een witte
   achtergrond zet. Het gevolg was wit op wit: het menu ging open en er was
   niets te lezen. Die fout zie je alleen als je het menu echt opent, dus dat is
   nu ook wat de rooktest doet. */
.sg-kop .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.sg-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--papier);
	font-size: var(--wp--preset--font-size--groot);
	border-bottom: 0;
}

.sg-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.sg-kop .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--zon);
}

/* De sluitknop staat op dezelfde donkere achtergrond en moet dus mee. */
.sg-kop .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   De hero
   --------------------------------------------------------------------------
   Een donkere band boven aan de voorpagina. Energieleveranciers doen dit
   allemaal, en met reden: het scheidt "waar ben ik" van "wat moet ik doen".
   -------------------------------------------------------------------------- */

.sg-hero {
	position: relative;
	background: var(--wp--preset--color--nacht);
	background-image: linear-gradient(160deg, #12559e 0%, #0f2540 62%, #081a2e 100%);
	color: var(--wp--preset--color--papier);
	overflow: hidden;
}

/* Een vage zon rechtsboven. Puur versiering, dus hij mag wegvallen op smal. */
.sg-hero::before {
	content: "";
	position: absolute;
	top: -8rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 165, 36, 0.35) 0%, rgba(245, 165, 36, 0) 68%);
	pointer-events: none;
}

@media (max-width: 46rem) {
	.sg-hero::before {
		top: -10rem;
		right: -10rem;
		width: 18rem;
		height: 18rem;
	}
}

.sg-hero :is(h1, h2, h3) {
	color: var(--wp--preset--color--papier);
}

.sg-hero p {
	color: rgba(255, 255, 255, 0.88);
}

.sg-hero a:not(.sg-deur):not(.sg-knop) {
	color: var(--wp--preset--color--zon);
}

/* --------------------------------------------------------------------------
   Blokken in de lopende tekst
   -------------------------------------------------------------------------- */

.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.4rem;
}

.wp-block-post-title {
	margin-bottom: 0.5rem;
}

/* Een zachte scheidingslijn tussen de brokken van een pagina. */
.sg-scheiding {
	border-top: 1px solid var(--wp--preset--color--rand);
}

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

.sg-voet {
	background: var(--wp--preset--color--nacht-diep);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--wp--preset--font-size--klein);
}

.sg-voet :is(h2, h3, strong) {
	color: var(--wp--preset--color--papier);
}

.sg-voet a {
	color: var(--wp--preset--color--zon);
}

.sg-voet a:hover {
	color: #fff;
}

.sg-voet .sg-bijgewerkt {
	color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------
   Iemand die met zijn leverancier belt, print de uitkomst. Dan hoeven het menu,
   de voet en de aanbiedingen er niet op.
   -------------------------------------------------------------------------- */

@media print {
	.sg-kop,
	.sg-voet,
	.sg-aanbod,
	.sg-formulier .sg-knoprij {
		display: none !important;
	}

	.sg-uitkomst {
		border: 1px solid #000;
		box-shadow: none;
	}

	.sg-uitkomst > h2:first-child {
		background: none;
		color: #000;
		border-bottom: 2px solid #000;
	}

	.sg-schuif {
		overflow: visible;
	}
}