/*
Theme Name: Tegeltjeshumor
Description: Block theme voor Tegeltjeshumor.nl. Werkt samen met de plugin "Tegeltjeshumor Core".
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Author: Tegeltjeshumor
Text Domain: tegeltjeshumor
*/

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 3px; }

/* Aankondigingsbalk */
.th-announcement { background: var(--wp--preset--color--blue); color: #fff; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 10px; margin: 0; }

/* Header */
.th-header { background: #fff; border-bottom: 1px solid #eeeae3; }
.th-header__inner { min-height: 82px; }
.th-logo { margin: 0; }
.th-logo a { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 23px; letter-spacing: -1.1px; color: var(--wp--preset--color--ink); text-decoration: none; }
.th-logo__icon { background: var(--wp--preset--color--blue); color: #fff; border: 3px double #d9e9f6; border-radius: 8px; width: 43px; height: 43px; display: grid; place-items: center; font-family: Georgia, serif; font-size: 28px; transform: rotate(-6deg); flex: none; }
.th-logo__accent { color: var(--wp--preset--color--accent); }
.th-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.th-header .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.th-header .wp-block-buttons .wp-block-button__link { font-size: 14px; }

/* Algemene elementen uit het design */
.is-style-th-eyebrow, .th-eyebrow-text { display: inline-flex !important; align-items: center; gap: 8px; color: #b6684d !important; font-size: 12px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 0; }
.is-style-th-eyebrow::before, .th-eyebrow-text::before { content: ''; background: var(--wp--preset--color--accent); width: 19px; height: 2px; }
.wp-block-heading em, .th-accent-em em { font-style: normal; color: var(--wp--preset--color--accent); }
.th-sub { font-size: var(--wp--preset--font-size--large); line-height: 1.75; color: #64727d; max-width: 455px; }
.wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { border: 1px solid #ccdae5 !important; color: var(--wp--preset--color--blue) !important; background: #fff !important; }
.wp-block-button__link { transition: transform .15s, background .15s; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* Hero */
.th-hero { position: relative; overflow: hidden; }
.th-hero::before { content: '✳'; position: absolute; left: -40px; top: 155px; font-size: 210px; color: #f1eadd; line-height: 1; pointer-events: none; }
.th-hero::after { content: '✳'; position: absolute; right: -15px; bottom: 20px; font-size: 150px; color: #ede6da; line-height: 1; pointer-events: none; }
.th-hero > * { position: relative; z-index: 1; }
.th-hero .wp-block-columns { gap: clamp(25px, 6vw, 70px); }
.th-hero h1 { margin: 18px 0 22px; }
.th-social-proof { display: flex; align-items: center; gap: 13px; margin-top: 34px; font-size: 13px; color: #6b7a86; }
.th-avatars { display: inline-flex; padding-left: 7px; }
.th-avatars b { width: 28px; height: 28px; border-radius: 50%; margin-left: -7px; border: 2px solid var(--wp--preset--color--cream); background: #eebc9b; display: grid; place-items: center; font-size: 12px; color: var(--wp--preset--color--blue); }
.th-avatars b:nth-child(2) { background: #b8d3de; }
.th-avatars b:nth-child(3) { background: #d6bdc9; }

/* Vertrouwensbalk */
.th-trust { background: #fff; border-block: 1px solid #eee9df; }
.th-trust .wp-block-group { justify-content: center; }
.th-trust p { margin: 0; font-size: 13px; font-weight: 800; color: #516579; display: flex; gap: 9px; align-items: center; }
.th-trust p strong { color: var(--wp--preset--color--accent); font-size: 19px; font-weight: 400; }

/* Secties */
.th-section-head { gap: 16px; margin-bottom: 30px; }
.th-section-head h2 { margin: 13px 0 0; }
.th-section-head > p { max-width: 350px; color: var(--wp--preset--color--muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* CTA-banner */
.th-banner { background: #1d4d79; border-radius: 24px; color: #fff; position: relative; overflow: hidden; gap: 40px; }
.th-banner::after { content: '❖'; position: absolute; right: 15%; bottom: -105px; font-size: 300px; color: #ffffff0a; line-height: 1; pointer-events: none; }
.th-banner h2 { color: #fff; font-size: clamp(30px, 4vw, 42px); margin: 0 0 12px; max-width: 540px; }
.th-banner p { color: #d3e5f0; line-height: 1.6; margin: 0; }
.th-banner .wp-block-buttons { position: relative; z-index: 1; flex: none; }
.th-banner .wp-block-button__link { white-space: nowrap; }

/* Content-blokken */
.wp-block-group.is-style-th-card { background: #fff; border: 1px solid #ede9e3; border-radius: var(--wp--custom--radius--panel); padding: clamp(20px, 4vw, 40px); }
.wp-block-image.is-style-th-tile img { transform: rotate(-2deg); box-shadow: 0 24px 50px #1c477326, 0 3px 2px #2b497322; border-radius: 0; }
.th-card { background: #fff; border: 1px solid #ede9e3; border-radius: var(--wp--custom--radius--panel); }
.th-media-text { background: #fff; border: 1px solid #ede9e3; overflow: hidden; }
.th-media-text .wp-block-media-text__media img { border-radius: 0; }
.th-media-text .wp-block-media-text__content { padding: clamp(24px, 5vw, 56px); }
.th-tile-image img { transform: rotate(-2deg); box-shadow: 0 24px 50px #1c477326, 0 3px 2px #2b497322; border-radius: 0 !important; }
.wp-block-details summary { font-weight: 800; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 10px; }
.th-feature { background: #fff; border: 1px solid #ede9e3; border-radius: var(--wp--custom--radius--card); padding: 24px; height: 100%; }
.th-feature__icon { font-size: 26px; color: var(--wp--preset--color--accent); margin: 0; line-height: 1; }
.th-feature h3 { margin: 14px 0 8px; font-size: 22px; }
.th-feature p { color: var(--wp--preset--color--muted); font-size: 14px; margin: 0; }

/* Pagina-kop */
.th-page-head { padding-top: clamp(40px, 6vw, 70px); padding-bottom: 10px; }

/* Footer */
.th-footer { border-top: 1px solid #e6e3de; background: #fff; color: #8b9499; font-size: 12px; }
.th-footer p { margin: 0; }
.th-footer a { color: #627686; text-decoration: none; }
.th-footer a:hover { color: var(--wp--preset--color--accent); }
.th-footer .th-footer__brand strong { color: var(--wp--preset--color--ink); }
.th-footer__links { gap: 8px 20px !important; }

/* Advertentie onder het menu krijgt wat lucht. */
.th-ad-band { padding-top: 18px; padding-bottom: 0; }

/* Bloglijst */
.th-post-card { background: #fff; border: 1px solid #ede9e3; border-radius: var(--wp--custom--radius--card); padding: 20px; height: 100%; }
.th-post-card .wp-block-post-featured-image img { border-radius: 10px; }

@media (max-width: 781px) {
	.th-section-head { display: block !important; }
	.th-section-head > p { margin-top: 12px; }
	.th-banner { display: block !important; }
	.th-banner .wp-block-buttons { margin-top: 23px; }
}
@media (max-width: 650px) {
	.th-header__inner { min-height: 69px; }
	.th-logo a { font-size: 19px; }
	.th-logo__icon { width: 35px; height: 35px; font-size: 22px; }
	.th-header .wp-block-buttons .wp-block-button__link { font-size: 11px; padding: 10px; }
	.th-trust .wp-block-group { gap: 14px !important; justify-content: space-around; }
	.th-trust p { font-size: 11px; }
	.th-footer__inner { display: block !important; line-height: 2; }
}