/*
 * SWO Spijkenisse – main stylesheet, enqueued via inc/enqueue.php.
 * style.css in the theme root is left as theme metadata only (WP requirement).
 */

/* ---------- Fonts & Variables ---------- */
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2-variations");
}

:root {
	--swo-color-primary: #E97C1A;
	--swo-color-primary-hover: #D86D0D;
	--swo-color-primary-dark: #B95700;

	--swo-color-text: #242424;
	--swo-color-heading: #111111;
	--swo-color-white: #FFFFFF;

	--swo-color-background: #FFFFFF;
	--swo-color-background-soft: #FBF6EF;
	--swo-color-background-warm: #F3EEE8;

	--swo-color-border: #767676;
	--swo-color-focus: #005FCC;

	--swo-color-activities: #2E7D32;
	--swo-color-living: #2F6F62;
	--swo-color-care: #8A3FA0;
	--swo-color-finance: #264E86;
	--swo-color-transport: #0067C5;
	--swo-color-caregiver: #562A78;
	--swo-color-social: #007C91;
	--swo-color-volunteer: #8A6500;
	--swo-color-rollator: #6A4FB3;
	--swo-color-jobs: #5C7A29;
	--swo-color-meals: #B95700;

	--swo-font-primary: "Atkinson Hyperlegible Next", Arial, Helvetica, sans-serif;
	--swo-content-width: 1280px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--swo-color-text); background: var(--swo-color-background); font-family: var(--swo-font-primary); font-size: 18px; line-height: 1.65; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--swo-color-heading); font-family: var(--swo-font-primary); font-weight: 700; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.1; }
h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.15; }
h3 { font-size: 28px; line-height: 1.25; }
h4 { font-size: 24px; line-height: 1.3; }
h5 { font-size: 21px; line-height: 1.35; }
h6 { font-size: 18px; line-height: 1.4; }
p, li { font-size: 18px; }
a { color: var(--swo-color-primary-dark); text-decoration: none; }
a:hover { color: var(--swo-color-heading); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 99999; top: -100px; left: 16px; min-height: 44px; padding: 10px 20px; color: var(--swo-color-white); background: var(--swo-color-primary-dark); border-radius: 0 0 6px 6px; font-family: var(--swo-font-primary); font-size: 18px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: top .2s ease; }
.skip-link:focus { top: 0; color: var(--swo-color-white); text-decoration: none; }

/* ---------- Layout ---------- */
.site-container { width: 100%; max-width: var(--swo-content-width); margin: 0 auto; padding: 0 24px; }
.site-content { width: 100%; }
.content-area { width: 100%; max-width: 820px; margin: 0 auto; padding: 48px 24px; }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 44px; min-height: 48px; padding: 10px 22px; color: var(--swo-color-heading); background: transparent; border: 2px solid transparent; border-radius: 6px; font-family: var(--swo-font-primary); font-size: 18px; line-height: 1.2; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease; }
.button:hover { text-decoration: none; transform: translateY(-2px); }
.button--primary { color: var(--swo-color-heading); background: var(--swo-color-primary); border-color: var(--swo-color-primary-dark); }
.button--primary:hover { color: var(--swo-color-heading); background: var(--swo-color-primary-hover); border-color: var(--swo-color-primary-dark); }
.button--primary:focus-visible { outline-color: var(--swo-color-heading); }
.button--secondary { color: var(--swo-color-white); background: var(--swo-color-primary-dark); border-color: var(--swo-color-primary-dark); }
.button--secondary:hover { color: var(--swo-color-white); background: var(--swo-color-heading); border-color: var(--swo-color-heading); }
.button--outline { color: var(--swo-color-primary-dark); background: transparent; border-color: var(--swo-color-primary-dark); }
.button--outline:hover { color: var(--swo-color-white); background: var(--swo-color-primary-dark); border-color: var(--swo-color-primary-dark); }
.button::after { display: block; flex: 0 0 16px; width: 16px; height: 16px; content: ""; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s ease; }
.button:hover::after { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 500px) {
	.site-container { padding-right: 20px; padding-left: 20px; }
	.content-area { padding-right: 20px; padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}