/*
Theme Name: OCKKG
Template: generatepress
Description: Child theme voor shop.ockkg.be (Oudercomité De Kleine Kunstenaar & De Griffel). Stijl "Speelse brug".
Version: 1.1.5
Text Domain: ockkg
*/

:root {
	--blue: #1449B6; --blue-ink: #0E3486; --teal: #0C7089; --teal-deep: #0A596D;
	--yellow: #F9C700; --red: #E0453B; --green: #3E9E4A;
	--bg: #F3F5F9; --surface: #FFFFFF; --ink: #1E2738; --muted: #5A6477; --line: #DDE2EC;
	--soft-blue: #E6EDFB; --soft-yellow: #FFF6D1; --soft-green: #E5F4E7; --soft-red: #FCE7E5;
	--display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
	--body: "Open Sans", "Segoe UI", system-ui, sans-serif;
	--radius: 20px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #111724; --surface: #1A2233; --ink: #E9EDF5; --muted: #A5AFC2; --line: #2C3649;
		--soft-blue: #1D2B4D; --soft-yellow: #3A3314; --soft-green: #1C3322; --soft-red: #3D1F1D;
		--blue: #3F72E0; --blue-ink: #9DB8F5;
	}
}

/* Base */
body { background: var(--bg); color: var(--ink); font: 16px/1.65 var(--body); }
h1, h2, h3, h4, .entry-title { font-family: var(--display); font-weight: 900; line-height: 1.15; text-wrap: balance; color: var(--ink); }
a { color: var(--blue-ink); }
a:hover, a:focus { color: var(--blue); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.grid-container { max-width: 1120px; }
.separate-containers .inside-article, .one-container .site-content, .inside-page-header,
.separate-containers .comments-area, .separate-containers .page-header { background: transparent; }
.site-content { padding-top: 32px; padding-bottom: 32px; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content .wp-block-group__inner-container { padding: 0; } /* padding lives on our own group classes */
.eyebrow { font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 4px solid var(--blue); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.inside-header { padding: 12px 20px; }
.ockkg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.ockkg-brand:hover { color: var(--ink); }
.ockkg-mark { display: grid; grid-template-columns: repeat(2, 14px); gap: 3px; flex: none; }
.ockkg-mark i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.ockkg-brand b { font: 900 17px/1.1 var(--display); display: block; }
.ockkg-brand small { font-size: 12px; color: var(--muted); display: block; }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 40px; padding: 0 12px; border-radius: 999px; margin: 0 2px; }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li a:focus-visible { background: var(--soft-blue); color: var(--ink); }
.main-navigation .main-nav ul li.current-menu-item > a { background: var(--yellow); color: #1E2738; }
.main-navigation .main-nav ul li.ockkg-shop-btn > a { background: var(--blue); color: #fff; }
.main-navigation .main-nav ul li.ockkg-shop-btn > a:hover { background: var(--blue-ink); color: #fff; }
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { background: var(--soft-blue); color: var(--ink); border-radius: 12px; }
@media (max-width: 768px) {
	.main-navigation .main-nav ul li a { border-radius: 12px; margin: 2px 0; }
	.main-navigation.toggled .main-nav > ul { background: var(--surface); padding: 8px 0 12px; }
}

/* Buttons */
.wp-block-button a.wp-block-button__link:not(.has-background), .button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit {
	font: 800 16px var(--display); padding: 12px 22px; border-radius: 14px; background: var(--blue); color: #fff; border: 2px solid transparent; text-decoration: none;
}
.wp-block-button a.wp-block-button__link:not(.has-background):hover, .button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--blue-ink); color: #fff; }
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background) { background: transparent; border-color: var(--teal); color: var(--ink); }
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):hover { background: var(--soft-blue); color: var(--ink); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order { background: var(--blue); color: #fff; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--blue-ink); }

/* Home: full-width sections without the page title */
.home .site-content { padding-top: 0; }
.home .inside-article { padding: 0; }
.ockkg-hero { padding-block: 48px 40px; }
.ockkg-hero h1 { font-size: clamp(34px, 5vw, 54px); margin-block: 10px 16px; }
.ockkg-hero h1 mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); color: inherit; padding-inline: 2px; }
.ockkg-hero p.lead { max-width: 52ch; color: var(--muted); font-size: 17px; }
.ockkg-photo { aspect-ratio: 4/3; border-radius: 28px; overflow: hidden; display: grid; place-items: center; color: #fff; text-align: center;
	background: radial-gradient(circle at 20% 30%, #F9C70055 0 18%, transparent 19%), radial-gradient(circle at 78% 70%, #E0453B44 0 16%, transparent 17%),
	radial-gradient(circle at 70% 22%, #3E9E4A44 0 12%, transparent 13%), linear-gradient(135deg, var(--blue), var(--teal)); }
.ockkg-photo img { width: 100%; height: 100%; object-fit: cover; }
.ockkg-photo p { font-weight: 700; font-size: 14px; opacity: .85; padding: 16px; max-width: 30ch; margin: 0; }

/* Tiles */
.ockkg-tiles { margin-block: 8px 40px; }
.ockkg-tiles > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ockkg-tile { border-radius: var(--radius); padding: 22px 20px 20px; color: #fff; min-height: 170px; position: relative; transition: transform .15s; margin: 0 !important; }
.ockkg-tile > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ockkg-tile > .wp-block-group__inner-container > * { margin: 0; }
.ockkg-tile:hover { transform: translateY(-3px); }
.ockkg-tile h3 { font-size: 22px; margin: 0; color: inherit; }
.ockkg-tile h3 a { color: inherit; text-decoration: none; }
.ockkg-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ockkg-tile p { margin: 0; font-size: 14.5px; opacity: .92; line-height: 1.5; }
.ockkg-tile p.go { margin-top: auto; font: 800 14px var(--display); opacity: 1; }
.ockkg-tile.red { background: var(--red); } .ockkg-tile.yellow { background: var(--yellow); color: #1E2738; }
.ockkg-tile.green { background: var(--green); } .ockkg-tile.teal { background: var(--teal); }
.ockkg-tile:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Sections */
.ockkg-block { padding-block: 40px; border-top: 1px solid var(--line); }
.ockkg-block h2 { font-size: 30px; margin-bottom: 20px; }
.ockkg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.ockkg-card > .wp-block-group__inner-container > * + * { margin-top: 14px; }

/* Agenda */
ul.ockkg-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ockkg-agenda li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 0; }
.ockkg-agenda li strong { font-family: var(--display); font-size: 17px; display: block; }
.ockkg-agenda li strong em { font-style: normal; background: var(--soft-blue); color: var(--blue-ink); border-radius: 8px; padding: 1px 8px; margin-right: 8px; }

/* Project progress */
.ockkg-bar { height: 16px; background: var(--soft-blue); border-radius: 999px; overflow: hidden; }
.ockkg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 999px; }
.ockkg-figs { display: flex; justify-content: space-between; gap: 12px; font: 800 15px var(--display); font-variant-numeric: tabular-nums; margin-top: 8px; }
ul.ockkg-spent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.ockkg-spent li { border-bottom: 1px dashed var(--line); padding-bottom: 6px; margin: 0; }

/* Help mee / team */
.ockkg-join { background: var(--soft-yellow); border-radius: 24px; padding: 32px; }
.ockkg-join h2 { margin-bottom: 8px; }
.ockkg-role { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.ockkg-role h3 { font-size: 17px; margin: 0 0 4px; }
.ockkg-role p { font-size: 14.5px; color: var(--muted); margin: 0; }
table.ockkg-team, .ockkg-team table { width: 100%; border: 0; font-size: 14.5px; margin-top: 10px; }
.ockkg-team td { border: 0; border-bottom: 1px dashed var(--line); padding: 6px 0; background: transparent; }
.ockkg-team td:first-child { color: var(--muted); }
.ockkg-team td:last-child { text-align: right; font-weight: 600; }

/* Newsletter form (selectors scoped to beat the plugin's own CSS) */
.ockkg-join form.tnp-subscription { max-width: 440px; margin: 20px 0 0; }
.ockkg-join form.tnp-subscription .tnp-field { margin-bottom: 10px; }
.ockkg-join form.tnp-subscription label { font-weight: 600; font-size: 14px; color: var(--ink); display: block; margin-bottom: 4px; }
.ockkg-join form.tnp-subscription input.tnp-name, .ockkg-join form.tnp-subscription input.tnp-email {
	font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.ockkg-join form.tnp-subscription .tnp-field-list label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
.ockkg-join form.tnp-subscription .tnp-field-privacy { display: flex; gap: 10px; align-items: flex-start; }
.ockkg-join form.tnp-subscription .tnp-field-privacy label { font-weight: 400; font-size: 13px; color: var(--muted); }
.ockkg-join form.tnp-subscription input[type="checkbox"] { accent-color: var(--blue); margin-top: 5px; flex: none; }
.ockkg-join form.tnp-subscription input.tnp-submit { background: var(--blue); color: #fff; border: 0; border-radius: 14px; font: 800 16px var(--display); padding: 12px 22px; width: auto; cursor: pointer; }
.ockkg-join form.tnp-subscription input.tnp-submit:hover { background: var(--blue-ink); }

/* FAQ + sponsors */
.wp-block-details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.wp-block-details summary { font: 800 16px var(--display); cursor: pointer; }
.wp-block-details p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.ockkg-sponsors > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ockkg-sponsors > .wp-block-group__inner-container > * { border: 2px dashed var(--line); border-radius: 14px; min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; margin: 0 !important; }

/* Footer */
.ockkg-footer { text-align: left; margin-top: 40px; background: var(--teal-deep); color: #fff; }
.ockkg-footer .grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px; }
.ockkg-footer .grid-container > div + div { border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 24px; }
.ockkg-footer h3 { font-size: 18px; margin: 0 0 6px; color: #fff; }
.ockkg-footer p { margin: 0; font-size: 14.5px; opacity: .92; }
.ockkg-footer a { color: #fff; }
.ockkg-footer .ockkg-schools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ockkg-footer .ockkg-schools b { font-family: var(--display); }

/* Webshop */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none; }
@media (max-width: 480px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; text-align: left; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font: 900 22px var(--display); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { font: 900 22px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product img { border-radius: 16px; }
.ockkg-deadline { display: inline-flex; gap: 8px; align-items: center; background: var(--soft-blue); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.ockkg-rules { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; margin-top: 28px; }
.ockkg-rules h2 { font-size: 20px; margin-bottom: 8px; }
.ockkg-delivery { border-radius: 16px; padding: 12px 14px; margin: 0 0 16px; font-size: 14.5px; }
.ockkg-delivery b { display: block; font-family: var(--display); font-size: 16px; }
.ockkg-delivery.kid { background: var(--soft-green); } .ockkg-delivery.pickup { background: var(--soft-red); } .ockkg-delivery.none { background: var(--soft-blue); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea,
.woocommerce .quantity .qty { font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.woocommerce form .form-row label { font-weight: 600; font-size: 14px; }
.woocommerce table.shop_table { border-radius: 16px; border-color: var(--line); background: var(--surface); }
.woocommerce-checkout #payment, .woocommerce-cart .cart-collaterals .cart_totals { background: var(--surface); border-radius: 22px; border: 1px solid var(--line); }
.woocommerce-checkout #payment div.payment_box { background: var(--soft-blue); color: var(--ink); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--soft-blue); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--blue); background: var(--surface); color: var(--ink); }
.woocommerce-store-notice, p.demo_store { background: var(--teal); }

@media (max-width: 860px) {
	.ockkg-tiles > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
	.ockkg-footer .grid-container, .ockkg-footer .ockkg-schools { grid-template-columns: 1fr; }
	.ockkg-footer .grid-container > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 20px; }
	.ockkg-join { padding: 22px; }
}
@media (max-width: 480px) {
	.ockkg-tiles > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.ockkg-sponsors > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ockkg-tile { transition: none; } .ockkg-tile:hover { transform: none; } }