/*
Theme Name: BRICKS Advocaten
Theme URI: https://bricksadvocaten.nl
Author: Kenzo
Description: Licht maatwerkthema voor BRICKS Advocaten. Bouwt de vertrouwde look na (donkere menubalk, rood logovlak, schermvullende achtergrondfoto per pagina) op een moderne, responsieve basis zonder externe afhankelijkheden.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: bricks
*/

/* ---------- Fonts (lokaal, geen Google) ---------- */
@font-face { font-family: "Patua One"; src: url("assets/fonts/patua-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--b-bar: #333333;
	--b-bar-dark: #111111;
	--b-red: #8b0000;
	--b-link: #b80d00;
	--b-text: #333333;
	--b-muted: #808080;
	--b-page: #eeeeee;
	--b-band: rgba(255, 255, 255, 0.82);
	--b-width: 960px;
	--b-gutter: 20px;
	--b-head: "Patua One", Georgia, "Times New Roman", serif;
	--b-body: "Open Sans", Helvetica, Arial, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--b-page);
	color: var(--b-text);
	font: 400 14px/1.65 var(--b-body);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.has-bg { background: var(--b-page) var(--b-bg) center / cover no-repeat fixed; }
img { max-width: 100%; height: auto; }
a { color: var(--b-link); text-decoration: none; }
a:hover, a:focus { color: var(--b-red); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--b-head); font-weight: 400; color: var(--b-text); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }
p { margin: 0 0 1em; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: #fff; color: var(--b-text); padding: 8px 12px; }

.wrap { width: 100%; max-width: calc(var(--b-width) + 2 * var(--b-gutter)); margin: 0 auto; padding: 0 var(--b-gutter); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 50; margin-top: 35px; background: var(--b-bar); min-height: 62px; }
.site-header .wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 62px; }
.site-logo { flex: 0 0 auto; height: 62px; line-height: 0; position: relative; z-index: 2; }
.site-logo a { display: block; margin-top: -25px; }
.site-logo img { display: block; width: 300px; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.site-logo a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nav-area { display: flex; align-items: center; gap: 10px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.main-nav li { position: relative; }
.main-nav a { display: block; color: #fff; text-decoration: none; font: 400 12.5px/30px var(--b-body); padding: 16px 9px; white-space: nowrap; }
.main-nav > ul > li > a:hover, .main-nav > ul > li:focus-within > a, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { color: #fff; background: var(--b-bar-dark); }
.main-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--b-bar-dark); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { font-size: 13px; line-height: 1.5; padding: 8px 16px; white-space: normal; }
.main-nav .sub-menu a:hover, .main-nav .sub-menu a:focus { background: #000; }

.lang-switch { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lang-switch li { line-height: 0; }
.lang-switch a { display: inline-block; padding: 4px 2px; opacity: .85; }
.lang-switch a:hover, .lang-switch a:focus, .lang-switch .current-lang a { opacity: 1; }
.lang-switch img { width: 18px !important; height: 12px !important; display: block; }

.menu-toggle { display: none; background: none; border: 0; color: #fff; padding: 16px 4px; cursor: pointer; font: 600 13px var(--b-body); align-items: center; gap: 8px; }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { display: block; width: 22px; height: 2px; background: #fff; position: relative; content: ""; }
.menu-toggle .bars::before { position: absolute; top: -7px; }
.menu-toggle .bars::after { position: absolute; top: 7px; }

/* ---------- Content ---------- */
.site-main { flex: 1 0 auto; padding: 38px 0 60px; }
.band { background: var(--b-band); padding: 40px 0; }
body.no-band .band { background: none; }
.entry { max-width: var(--b-width); margin: 0 auto; }
.entry::after { content: ""; display: table; clear: both; }
.entry-title { margin-bottom: .4em; }
.entry-meta { color: var(--b-muted); font-size: 12.5px; margin: -.2em 0 1.4em; }
.single .entry, .single-column .entry, .single-publicatie .entry { max-width: 760px; }

/* Legacy-opmaak uit de oude site neutraliseren */
.entry .container, .entry .columns, .entry [class*="columns"] { width: auto !important; max-width: none; float: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0; }
.entry h1:empty, .entry p:empty { display: none; }
.entry iframe { max-width: 100%; }
.entry table { border-collapse: collapse; max-width: 100%; }
.entry td, .entry th { padding: 4px 8px; vertical-align: top; }
.entry ul, .entry ol { padding-left: 1.4em; }
.alignleft { float: left; margin: 4px 20px 12px 0; }
.alignright { float: right; margin: 4px 0 12px 20px; }
.aligncenter { display: block; margin: 0 auto 12px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--b-muted); }

/* Kolom-shortcodes ([one_half] e.d.) */
.b-cols { display: flex; flex-wrap: wrap; gap: 0 40px; }
.b-col { min-width: 0; display: flow-root; }
.b-cols + .b-cols { margin-top: 10px; }
.b-col--1-2 { flex: 0 0 calc(50% - 20px); }
.b-col--1-3 { flex: 0 0 calc(33.333% - 27px); }
.b-col--2-3 { flex: 0 0 calc(66.666% - 13px); }
.b-col--1-4 { flex: 0 0 calc(25% - 30px); }
.b-col--3-4 { flex: 0 0 calc(75% - 10px); }
.b-col--1-5 { flex: 0 0 calc(20% - 32px); }
.b-col--2-5 { flex: 0 0 calc(40% - 24px); }
.b-col--3-5 { flex: 0 0 calc(60% - 16px); }
.b-col--4-5 { flex: 0 0 calc(80% - 8px); }
.b-col--1-6 { flex: 0 0 calc(16.666% - 33px); }
.b-col--5-6 { flex: 0 0 calc(83.333% - 7px); }

/* Uitklapblokken ("Lees meer") */
.b-more { margin: 4px 0 14px; }
.b-more > summary { cursor: pointer; color: var(--b-link); font-weight: 600; list-style: none; }
.b-more > summary::-webkit-details-marker { display: none; }
.b-more > summary::after { content: " +"; }
.b-more[open] > summary::after { content: " –"; }
.b-more-body { margin-top: 10px; padding-left: 14px; border-left: 2px solid #ddd; }
.b-map { width: 100%; max-width: 420px; aspect-ratio: 7 / 5; height: auto; background: #ddd; }

/* Lijsten (columns/publicaties archief) */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 14px 0; border-bottom: 1px dotted #999; }
.post-list h2 { font-size: 18px; margin: 0 0 4px; }
.post-list h2 a { color: var(--b-text); text-decoration: none; }
.post-list h2 a:hover { color: var(--b-link); }
.pagination { margin-top: 24px; display: flex; gap: 8px; }
.pagination .page-numbers { padding: 4px 10px; background: #fff; text-decoration: none; }
.pagination .current { background: var(--b-bar); color: #fff; }

/* Formulier (Contact Form 7) */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; max-width: 460px; padding: 8px 10px; border: 1px solid #bbb; background: #fff; font: inherit; color: inherit; }
.wpcf7 textarea { height: 140px; }
.wpcf7 input[type="submit"] { background: var(--b-red); color: #fff; border: 0; padding: 9px 22px; font: 600 13px var(--b-body); cursor: pointer; }
.wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus { background: var(--b-bar); }

/* ---------- Footer ---------- */
.site-footer { background: var(--b-bar); color: #fff; font-size: 12px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 12px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.site-footer a { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.footer-links a { text-decoration: none; opacity: .85; }
.footer-links a:hover, .footer-links a:focus { opacity: 1; text-decoration: underline; }
.social { display: flex; gap: 6px; }
.social a { display: inline-flex; width: 20px; height: 20px; border-radius: 2px; align-items: center; justify-content: center; opacity: 1; }
.social a:hover, .social a:focus { text-decoration: none; filter: brightness(1.15); }
.social .fb { background: #3b5998; }
.social .li { background: #0a66c2; }
.social svg { width: 12px; height: 12px; fill: #fff; }

/* ---------- Responsief ---------- */
@media (max-width: 1000px) {
	.site-header { margin-top: 0; }
	.site-header .wrap { align-items: center; flex-wrap: wrap; }
	.site-logo { margin: 0; height: auto; }
	.site-logo a { margin: 0; padding: 8px 0; }
	.site-logo img { width: 180px; box-shadow: none; }
	.menu-toggle { display: inline-flex; }
	.nav-area { flex-wrap: wrap; justify-content: flex-end; }
	.main-nav { display: none; flex-basis: 100%; order: 3; }
	.site-header.is-open .main-nav { display: block; }
	.site-header.is-open .wrap { padding-bottom: 10px; }
	.main-nav > ul { display: block; }
	.main-nav a { padding: 10px 4px; line-height: 1.4; border-top: 1px solid rgba(255,255,255,.08); white-space: normal; }
	.main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; padding: 0 0 0 14px; }
	.nav-area { flex: 1 1 auto; }
	body.has-bg { background-attachment: scroll; }
}
@media (max-width: 700px) {
	body { font-size: 15px; }
	.site-main { padding-top: 20px; }
	.band { padding: 26px 0; }
	.b-col { flex-basis: 100% !important; }
	.alignleft, .alignright { float: none; margin: 0 0 12px; }
	.entry p[style*="padding-left"] { padding-left: 0 !important; }
	.entry [style*="text-align: justify"] { text-align: left !important; }
	h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .main-nav .sub-menu { transition: none; } }
@media print {
	.site-header, .site-footer { display: none; }
	body.has-bg { background: #fff; }
	.band { background: none; }
}