/*
Theme Name: Servetje Child
Theme URI: https://servetje.nl
Description: Child theme van Storefront voor Servetje.nl — bedrukte servetten.
Author: Servetje.nl
Template: storefront
Version: 0.1.0
Text Domain: servetje-child
*/

:root {
	--servetje-blue: #4A94B8;
	--servetje-blue-dark: #3A7A99;
	--servetje-orange: #F18500;
	--servetje-orange-dark: #D97600;
	--servetje-teal: #009F94;
	--servetje-ink: #1F2D33;
	/* Bewust breder dan Storefront's eigen .col-full-standaard (1064px) -
	   zie de override hieronder die .col-full hierop gelijktrekt, zodat
	   alles op de site (header, hero, secties, shop/product/winkelwagen)
	   weer exact dezelfde uitlijning heeft. */
	--servetje-max-width: 1280px;
	--servetje-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

body {
	font-family: var(--servetje-font);
	color: var(--servetje-ink);
	/* Subtiel servetje-patroon i.p.v. vlak wit als paginaondergrond — de
	   witte kaarten/panelen (header, bestelformulier, productcards etc.)
	   blijven zelf vlak wit voor leesbaarheid.
	   De halfdoorzichtige witte laag boven het patroon dempt het naar
	   ~50% — het SVG-bestand zelf bevat geen ingebakken lichtere variant
	   (dezelfde dekking/lijndiktes als de volle versie), dus dit lossen
	   we hier in CSS op i.p.v. in het bestand. */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
		url("assets/images/servetje-patroon.svg");
	background-repeat: repeat;
	/* Expliciet vastgezet op de eigen 200x200-tegelgrootte van het patroon —
	   het huidige SVG-bestand heeft geen width/height-attributen (alleen
	   een viewBox), waardoor de browser zonder deze regel zelf een (veel
	   grotere) afmeting moet gokken. */
	background-size: 200px 200px;
}

.servetje-container {
	max-width: var(--servetje-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Storefront's eigen containerbreedte (shop/product/winkelwagen/account)
   zit vast op 66.4989378333em (1064px) in het hoofdthema, niet in een
   variabele - hier gelijktrekken met --servetje-max-width zodat de hele
   site, ook buiten de custom pagina's, even breed blijft. */
.col-full {
	max-width: var(--servetje-max-width);
}

a {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}