/* Siliconenzaak — site-wide polish on top of theme.json */

/* ---------- utilities ---------- */
.gform_required_legend { display: none; }

.u-accent {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.siliconenzaak-dots { display: flex; gap: 8px; justify-content: center; align-items: center; }
.siliconenzaak-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--tint-teal); display: block; }
.siliconenzaak-dots span:first-child { background: var(--wp--preset--color--secondary); width: 10px; height: 10px; }

/* ---------- page spacing ---------- */
/* Default gap above/below main content, only when the first/last block
   doesn't already bring its own full-bleed background + padding
   (otherwise this stacks a white bar outside the coloured block). */
.siliconenzaak-main {
	padding-top: 80px;
	padding-bottom: 80px;
}
.siliconenzaak-main:has(> .entry-content > .alignfull:first-child) {
	padding-top: 0;
}
.siliconenzaak-main:has(> .entry-content > .alignfull:last-child) {
	padding-bottom: 0;
}
/* When there IS a page title above a full-bleed tint-blue first block,
   keep a bit of breathing room but tint it blue too instead of leaving a
   white gap between the menu and the title. */
.siliconenzaak-main:has(> .wp-block-post-title):has(> .entry-content > .has-tint-blue-background-color:first-child) {
	background-color: var(--wp--preset--color--tint-blue);
	padding-top: var(--wp--preset--spacing--50);
}
@media (max-width: 782px) {
	.siliconenzaak-main {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}
@media (max-width: 600px) {
	.siliconenzaak-main {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* ---------- page title spacing ---------- */
.siliconenzaak-main > .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ---------- adjoining full-bleed sections ---------- */
/* Default block-gap margin between two consecutive full-bleed color
   blocks (in content OR the footer template part) leaves a thin white
   seam between them; close it everywhere. */
.alignfull + .alignfull {
	margin-block-start: 0 !important;
}

/* ---------- content column width/alignment ---------- */
/* Default (unaligned) text in the body should sit flush with the wide
   container's left edge (same as header/menu), stopping at ~2/3 of that
   width instead of stretching edge to edge. Explicit alignwide/alignfull
   blocks are untouched and can still go wider/full-bleed. */
.entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
	max-width: min(100%, calc(var(--wp--style--global--wide-size) * 0.66)) !important;
}

/* Some pages wrap their body copy in an extra plain (backgroundless) wide
   group instead of putting paragraphs straight in .entry-content — that
   wrapper already sits flush at the wide inset, so its own children just
   need to stop centering and cap at 2/3 of ITS width. */
.entry-content.is-layout-constrained > .alignwide.is-layout-constrained:not(.has-background) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 66% !important;
}

/* Same idea, one level deeper: a plain (unaligned, backgroundless) group
   directly in the content already gets flush-left/66% treatment from the
   rule above; its own children shouldn't re-center/re-narrow inside it. */
.entry-content.is-layout-constrained > .is-layout-constrained:not(.alignwide):not(.alignfull):not(.has-background) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 100% !important;
}

/* On small screens, body copy should use the full available width instead
   of still being capped at 66% of the (much narrower) mobile column. */
@media (max-width: 781px) {
	.entry-content.is-layout-constrained > .alignwide.is-layout-constrained:not(.has-background) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 100% !important;
	}
}

/* ---------- general polish ---------- */
a, .wp-block-button__link, .wp-block-navigation-item__label {
	transition: color .15s ease, background-color .15s ease, opacity .15s ease, transform .15s ease;
}

.wp-block-button__link {
	box-shadow: 0 1px 2px rgba(15, 42, 51, 0.08);
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(15, 42, 51, 0.14);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base) !important;
}

.sz-card {
	box-shadow: 0 1px 2px rgba(15, 42, 51, 0.04), 0 10px 30px rgba(15, 42, 51, 0.06);
}

.wp-block-details {
	border: 1px solid var(--wp--preset--color--tint-teal);
	border-radius: 10px;
	padding: 0.9rem 1.2rem;
	background: var(--wp--preset--color--base);
}
.wp-block-details + .wp-block-details { margin-top: 0.75rem; }
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	font-size: 1.05rem;
	cursor: pointer;
	padding: 0.4rem 0;
}

/* ---------- navigation ---------- */
.siliconenzaak-header > .wp-block-group.alignwide { justify-content: flex-start; }
.siliconenzaak-header .siliconenzaak-nav-wrap {
	flex: 1 1 auto;
	min-width: 0;
}
.siliconenzaak-header .siliconenzaak-nav-wrap .wp-block-navigation {
	width: 100%;
}
.siliconenzaak-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--secondary);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.siliconenzaak-header .wp-block-navigation-item .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--roboto);
}
.siliconenzaak-header .wp-block-navigation-item__label {
	position: relative;
}
.siliconenzaak-header .wp-block-navigation-item:hover > a > .wp-block-navigation-item__label {
	opacity: 0.75;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: none;
}
/* CTA nav item ("Aanmelden kan nog steeds!") — lives inside the nav block
   itself so it collapses into the mobile overlay along with everything
   else, instead of sitting next to the hamburger as a separate element. */
.siliconenzaak-header .wp-block-navigation-item.siliconenzaak-cta-link {
	margin-left: 0.5rem;
}
.siliconenzaak-header .wp-block-navigation-item.siliconenzaak-cta-link > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	font-weight: 500;
}
.siliconenzaak-header .wp-block-navigation-item.siliconenzaak-cta-link:hover > .wp-block-navigation-item__content {
	opacity: 0.9;
}
.siliconenzaak-header .wp-block-navigation-item.siliconenzaak-cta-link:hover > a > .wp-block-navigation-item__label {
	opacity: 1;
}

/* ---------- mobile menu ---------- */
.wp-block-navigation__responsive-container-open {
	border-radius: 8px;
	padding: 0.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 0.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 1rem 0.25rem;
	font-size: 1.15rem;
	font-family: var(--wp--preset--font-family--eb-garamond);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.siliconenzaak-cta-link {
	border-bottom: none;
	margin: 1.25rem 0.25rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.siliconenzaak-cta-link > .wp-block-navigation-item__content {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 1rem;
	padding: 0.9rem 1.4rem;
}
.wp-block-navigation__responsive-container-close {
	border-radius: 8px;
	padding: 0.5rem !important;
}
/* The desktop submenu dropdown (floating card + shadow) doesn't belong
   inside the mobile overlay — there it should just expand inline. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding-left: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1rem;
	padding: 0.75rem 0.25rem;
}
/* Right-justified fits the desktop bar, but a fullscreen mobile menu reads
   better centered. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center !important;
	align-items: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	text-align: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	justify-content: center !important;
	text-align: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	position: absolute;
	right: 0.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	position: relative;
}

/* ---------- footer ---------- */
.siliconenzaak-footer-logos {
	align-items: center;
	flex-wrap: wrap;
}
.siliconenzaak-footer-logos img {
	height: 90px;
	width: auto;
	filter: grayscale(0.85) opacity(0.85);
	mix-blend-mode: multiply;
}
.sz-form-card {
	background: var(--wp--preset--color--base);
	border-radius: 14px;
}

/* ---------- nieuws overzicht ---------- */
.siliconenzaak-nieuws-item {
	border-bottom: 1px solid var(--wp--preset--color--tint-teal);
}
.siliconenzaak-nieuws-item .wp-block-post-date {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--wp--preset--font-family--roboto);
}
.siliconenzaak-nieuws-item .wp-block-post-title {
	margin: 0;
}
.siliconenzaak-nieuws-item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary) !important;
}
.siliconenzaak-read-more {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(15, 42, 51, 0.08);
}
.siliconenzaak-read-more:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base) !important;
}

/* ---------- share buttons ---------- */
.siliconenzaak-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1rem;
}
.siliconenzaak-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border-radius: 8px;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none !important;
	transition: opacity 0.15s ease;
}
.siliconenzaak-share-btn:hover { opacity: 0.85; }
.siliconenzaak-share-btn--facebook { background: #1a2540; }
.siliconenzaak-share-btn--twitter { background: #3b95d4; }
.siliconenzaak-share-btn--linkedin { background: #1c6ea4; }
.siliconenzaak-share-btn--whatsapp { background: #4dbd5c; }

/* ---------- check card ---------- */
.sz-check-card {
	background: var(--wp--preset--color--tint-blue);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
}
.sz-check-card .siliconenzaak-check-list { margin: 0; }

/* ---------- table of contents ---------- */
.sz-toc {
	position: sticky;
	top: 100px;
}
.sz-toc h6 {
	margin: 0 0 0.75rem;
}
.sz-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.sz-toc a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	font-size: 0.95rem;
}
.sz-toc a:hover {
	text-decoration: underline;
}
@media (max-width: 781px) {
	.sz-toc {
		position: static;
		margin-bottom: 2rem;
	}
}

/* ---------- checkmark list ---------- */
.siliconenzaak-check-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.siliconenzaak-check-list li {
	position: relative;
	padding-left: 1.75rem;
}
.siliconenzaak-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.siliconenzaak-footer-bar a.wp-element-button {
	border-color: var(--wp--preset--color--base) !important;
}

/* ---------- Gravity Forms ---------- */
.gform_wrapper.gravity-theme {
	--gf-color-primary: var(--wp--preset--color--secondary);
	--gf-color-primary-dark: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--roboto);
}

.gform_wrapper.gravity-theme .gfield_label {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	font-size: 0.9rem;
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	border: 1px solid var(--wp--preset--color--tint-teal) !important;
	border-radius: 8px !important;
	padding: 0.7rem 0.9rem !important;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--roboto);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gform_wrapper.gravity-theme input[type="text"]:focus,
.gform_wrapper.gravity-theme input[type="email"]:focus,
.gform_wrapper.gravity-theme input[type="tel"]:focus,
.gform_wrapper.gravity-theme input[type="number"]:focus,
.gform_wrapper.gravity-theme input[type="url"]:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px rgba(224, 91, 106, 0.15) !important;
	outline: none;
}

.gform_wrapper.gravity-theme input[type="checkbox"],
.gform_wrapper.gravity-theme input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	width: 18px;
	height: 18px;
}

.gform_wrapper.gravity-theme .gfield_consent_label,
.gform_wrapper.gravity-theme .gchoice label {
	font-size: 0.9rem;
	color: var(--wp--preset--color--body-text);
}

.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
	margin-top: 1.25rem;
}

.gform_wrapper.gravity-theme .gform_button {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.9rem 2rem !important;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 500;
	font-size: 1rem;
	box-shadow: 0 1px 2px rgba(15, 42, 51, 0.08);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	cursor: pointer;
}
.gform_wrapper.gravity-theme .gform_button:hover {
	background: var(--wp--preset--color--secondary) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(15, 42, 51, 0.14);
}

.gform_wrapper.gravity-theme .validation_error {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	border-radius: 8px;
}

.gform_confirmation_wrapper,
.gform_wrapper.gravity-theme + .gform_confirmation_wrapper {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.2rem;
	color: var(--wp--preset--color--secondary);
}