/**
 * Main Stylesheet — Tabweb Theme (Da's Handig!)
 *
 * Globale styling, CSS variabelen, BEM componenten en
 * overrides voor het Tabweb thema.
 *
 * Methodologie: BEM (Block__Element--Modifier) met tw- prefix
 * Block-specifieke CSS zit in /blocks/ * /style.css
 *
 * @package Tabweb
 * @since   1.0.0
 */

/* Google Fonts — Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ==========================================================================
   Custom Properties
   ========================================================================== */

:root {
	--tw-transition: all 0.3s ease-in-out;
	--tw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--tw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--tw-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
	--tw-radius: 0.75rem;
	--tw-radius-sm: 0.375rem;
	--tw-radius-lg: 1.25rem;
	--tw-radius-full: 50%;
}

/* ==========================================================================
   Global Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	transition: var(--tw-transition);
}

/* ==========================================================================
   Site Header — .tw-header
   ========================================================================== */

.tw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	box-shadow: var(--tw-shadow-sm);
}

.tw-header--scrolled {
	box-shadow: var(--tw-shadow-md);
}

.tw-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
}

.tw-header__brand {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.5rem);
}

.tw-header__brand a {
	color: inherit;
	text-decoration: none;
}

.tw-header__site-name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* Admin bar offset */
.admin-bar .tw-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .tw-header {
		top: 46px;
	}
}

/* ==========================================================================
   Site Footer — .tw-footer
   ========================================================================== */

.tw-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding-top: var(--wp--preset--spacing--50, 3rem);
	padding-bottom: var(--wp--preset--spacing--30, 1.5rem);
}

.tw-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20, 1rem);
}

.tw-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1.5fr;
	gap: var(--wp--preset--spacing--40, 2rem);
}

@media (max-width: 781px) {
	.tw-footer__grid {
		grid-template-columns: 1fr;
	}
}

.tw-footer__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--10, 0.5rem);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.tw-footer__brand {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	margin-bottom: var(--wp--preset--spacing--10, 0.5rem);
}

.tw-footer__brand--text {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 800;
}

.tw-footer__brand img {
	max-height: 50px;
	width: auto;
}

.tw-footer__text {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

.tw-footer__text p {
	margin: 0;
}

/* Footer contact list */
.tw-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.tw-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
}

.tw-footer__contact-icon {
	flex-shrink: 0;
	font-size: 1rem;
}

.tw-footer__contact-item a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: var(--tw-transition);
}

.tw-footer__contact-item a:hover {
	color: var(--wp--preset--color--accent);
}

/* Footer social list */
.tw-social__list--footer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
}

.tw-social__list--footer .tw-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--tw-radius-full);
	background: rgba(255, 255, 255, 0.15);
	color: var(--wp--preset--color--white);
	font-size: 0;
	text-decoration: none;
	transition: var(--tw-transition);
}

.tw-social__list--footer .tw-social__link:hover {
	background: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.tw-social__list--footer .tw-social__link::before {
	font-size: 0.875rem;
}

.tw-social__list--footer .tw-social__link--instagram::before {
	content: "📷";
}

.tw-social__list--footer .tw-social__link--facebook::before {
	content: "📘";
}

.tw-social__list--footer .tw-social__link--linkedin::before {
	content: "💼";
}

.tw-social__list--footer .tw-social__link--twitter::before {
	content: "🐦";
}

.tw-social__list--footer .tw-social__link--youtube::before {
	content: "📺";
}

.tw-social__list--footer .tw-social__link--tiktok::before {
	content: "🎵";
}

.tw-social__list--footer .tw-social__link--pinterest::before {
	content: "📌";
}

.tw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.5rem);
	margin-top: var(--wp--preset--spacing--40, 2rem);
	padding-top: var(--wp--preset--spacing--20, 1rem);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tw-footer__copyright {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0;
}

/* ==========================================================================
   Navigation — .tw-nav
   ========================================================================== */

.tw-nav__collapse {
	display: flex;
	align-items: center;
}

.tw-nav {
	display: flex;
	align-items: center;
}

.tw-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
}

.tw-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.tw-nav__item--active > .tw-nav__link {
	color: var(--wp--preset--color--highlight);
}

.tw-nav__item--has-children:hover > .sub-menu,
.tw-nav__item--has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.tw-nav__link {
	display: inline-block;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	padding: 0.5rem 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: var(--tw-transition);
	white-space: nowrap;
}

.tw-nav__link:hover,
.tw-nav__link:focus-visible {
	color: var(--wp--preset--color--highlight);
}

.tw-nav__submenu-toggle {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0.25rem;
	margin-left: 0.125rem;
	display: inline-flex;
	align-items: center;
	transition: var(--tw-transition);
}

.tw-nav__submenu-toggle:hover {
	color: var(--wp--preset--color--highlight);
}

.tw-nav__submenu-toggle[aria-expanded="true"] .tw-nav__submenu-icon {
	transform: rotate(180deg);
}

.tw-nav__submenu-icon {
	transition: transform 0.2s ease;
	font-size: 0.75rem;
	line-height: 1;
}

/* Submenu (dropdown) */
.tw-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--wp--preset--color--white);
	border-radius: var(--tw-radius);
	box-shadow: var(--tw-shadow-lg);
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--10, 0.5rem) 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.25s ease;
	z-index: 10;
}

.tw-nav .sub-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Nested sub-menu (level 3) */
.tw-nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.tw-nav__item--sub {
	display: block;
}

.tw-nav__link--sub {
	display: block;
	padding: 0.5rem var(--wp--preset--spacing--20, 1rem);
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	transition: var(--tw-transition);
}

.tw-nav__link--sub:hover,
.tw-nav__link--sub:focus-visible {
	background: var(--wp--preset--color--soft-pink);
	color: var(--wp--preset--color--highlight);
}

/* --- Mobile nav toggle button (injected via JS) --- */

.tw-nav__toggle {
	display: none;
	background: none;
	border: none;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0.5rem;
	z-index: 110;
	transition: var(--tw-transition);
}

.tw-nav__toggle-icon {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: background 0.2s ease;
}

.tw-nav__toggle-icon::before,
.tw-nav__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s ease;
}

.tw-nav__toggle-icon::before {
	top: -7px;
}

.tw-nav__toggle-icon::after {
	top: 7px;
}

/* Open state — X icon */
.tw-nav__toggle[aria-expanded="true"] .tw-nav__toggle-icon {
	background: transparent;
}

.tw-nav__toggle[aria-expanded="true"] .tw-nav__toggle-icon::before {
	transform: rotate(45deg) translate(5px, 5px);
}

.tw-nav__toggle[aria-expanded="true"] .tw-nav__toggle-icon::after {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Mobile breakpoint (< 781px) --- */

@media (max-width: 781px) {
	.tw-nav__toggle {
		display: flex;
		align-items: center;
	}

	.tw-nav__collapse {
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tw-nav__collapse.is-open {
		max-height: 100vh;
	}

	.tw-nav {
		width: 100%;
	}

	.tw-nav .tw-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--wp--preset--spacing--20, 1rem) 0;
	}

	.tw-nav .tw-nav__item {
		display: block;
		border-bottom: 1px solid var(--wp--preset--color--light-gray);
	}

	.tw-nav .tw-nav__link {
		display: block;
		padding: 0.75rem 0;
		font-size: var(--wp--preset--font-size--medium, 1rem);
		color: var(--wp--preset--color--dark);
	}

	.tw-nav .sub-menu {
		position: static;
		min-width: 0;
		box-shadow: none;
		background: transparent;
		border-radius: 0;
		padding: 0 0 0 var(--wp--preset--spacing--20, 1rem);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		display: none;
	}

	.tw-nav .sub-menu.is-open {
		display: block;
	}

	.tw-nav .sub-menu .sub-menu {
		left: 0;
	}
}

/* Footer nav variant */
.tw-nav--footer .tw-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10, 0.5rem);
}

.tw-nav--footer .tw-nav__link {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding: 0.25rem 0;
}

.tw-nav--footer .tw-nav__link:hover,
.tw-nav--footer .tw-nav__link:focus-visible {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.tw-nav--footer .tw-nav__list {
		position: static;
		width: auto;
		height: auto;
		background: transparent;
		box-shadow: none;
		padding: 0;
		transform: none;
		overflow: visible;
	}
}

/* ==========================================================================
   Buttons — .tw-btn
   ========================================================================== */

.tw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: var(--tw-radius);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: var(--tw-transition);
	line-height: 1.4;
}

.tw-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--tw-shadow-md);
}

.tw-btn:active {
	transform: translateY(0);
}

.tw-btn--primary {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--highlight);
}

.tw-btn--primary:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.tw-btn--secondary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

.tw-btn--secondary:hover {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}

.tw-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--highlight);
	border-color: var(--wp--preset--color--highlight);
}

.tw-btn--outline:hover {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--white);
}

.tw-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border-color: transparent;
	padding-inline: 0.5rem;
}

.tw-btn--ghost:hover {
	color: var(--wp--preset--color--highlight);
	box-shadow: none;
}

.tw-btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.tw-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--large);
}

/* WP core button overrides */
.wp-element-button,
.wp-block-button__link {
	transition: var(--tw-transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--tw-shadow-md);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

.is-style-outline .wp-block-button__link {
	border-width: 2px;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--highlight);
	border-color: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Post Navigation — .tw-post-nav
   ========================================================================== */

.tw-post-nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 1rem);
}

.tw-post-nav a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-weight: 500;
	transition: var(--tw-transition);
}

.tw-post-nav a:hover {
	color: var(--wp--preset--color--highlight);
}

/* ==========================================================================
   Search Block Override
   ========================================================================== */

.wp-block-search .wp-block-search__input {
	border-radius: var(--tw-radius);
	border: 1px solid var(--wp--preset--color--light-gray);
	padding: 0.75rem 1rem;
	transition: var(--tw-transition);
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px rgba(15, 52, 96, 0.15);
	outline: none;
}

.wp-block-search .wp-block-search__button {
	border-radius: var(--tw-radius);
}

/* ==========================================================================
   Separator Override
   ========================================================================== */

.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--light-gray);
	opacity: 1;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.tw-sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.tw-sr-only:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	padding: 1rem;
	z-index: 1000;
	top: 5px;
	left: 5px;
	box-shadow: var(--tw-shadow-lg);
}

.tw-skip-link {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: var(--tw-radius);
	text-decoration: none;
}

.tw-skip-link:focus {
	top: var(--wp--preset--spacing--10, 0.5rem);
}

/* ==========================================================================
   Front Page — .tw-front-page
   ========================================================================== */

.tw-front-page__content {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* ==========================================================================
   Page Template — .tw-page
   ========================================================================== */

.tw-page__header {
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--20, 1rem);
	text-align: center;
}

.tw-page__header-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.tw-page__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	margin: 0;
	color: var(--wp--preset--color--white);
}

.tw-page__content {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--20, 1rem);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.tw-card,
	.tw-service-card,
	.tw-testimonial,
	.tw-btn,
	.tw-nav__link {
		transition: var(--tw-transition);
	}
}

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

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.tw-header,
	.tw-footer,
	.tw-nav,
	.tw-post-nav {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}