/*
Theme Name: ABT
Theme URI: https://alliantievanbiertapperijen.nl/
Description: Website van de Alliantie van Biertapperijen, in de stijl van ABBT en de ABT Bierkaart. Werkt samen met de plugin ABT Bierkaart en met Bold Page Builder (pagina's, kleurschema's en de knop Weergave → ABT-startpagina's).
Author: Alliantie van Biertapperijen
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: abt
*/

:root {
	--bruin: var(--wp--preset--color--bruin, #6e1a11);
	--goud: var(--wp--preset--color--goud, #d5a139);
	--tekst: var(--wp--preset--color--tekst, #101c3b);
	--rood: var(--wp--preset--color--rood, #a6361c);
	--papier: var(--wp--preset--color--papier, #f7f4ef);
	--kop: var(--wp--preset--font-family--kop, 'Josefin Sans', sans-serif);
	--breed: 1200px;
	--rand: clamp(16px, 4vw, 32px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
	margin: 0;
	background: var(--papier) url(assets/img/papier.jpg) center top / cover fixed;
	color: var(--tekst);
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--bruin); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--goud); outline-offset: 2px; }
.screen-reader-text { 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; width: auto; height: auto; clip: auto; z-index: 1000; background: #fff; padding: 10px 14px; border-radius: 8px; }

/* ---------- Kop ---------- */
.site-kop { background: var(--bruin); border-bottom: 4px solid var(--goud); position: sticky; top: 0; z-index: 100; }
.admin-bar .site-kop { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-kop { top: 0; position: relative; } }
.site-kop__binnen { max-width: var(--breed); margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 16px; }
.site-merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.site-merk img { height: 46px; width: auto; background: #fff; border-radius: 8px; padding: 3px 6px; }
.site-merk span { display: flex; flex-direction: column; min-width: 0; }
.site-merk small { font: 700 10.5px/1.2 var(--kop); letter-spacing: .12em; text-transform: uppercase; color: var(--goud); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-open { flex: none; }
.site-merk b { font: 700 21px/1.1 var(--kop); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoofdmenu { margin-left: auto; }
.hoofdmenu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.hoofdmenu ul { flex-wrap: nowrap; }
.hoofdmenu a { display: block; color: #fff; text-decoration: none; font: 700 13.5px/1 var(--kop); letter-spacing: .06em; text-transform: uppercase; padding: 11px 10px; border-radius: 8px; white-space: nowrap; }
.hoofdmenu a:hover { background: rgba(255, 255, 255, .1); }
.hoofdmenu .current-menu-item > a, .hoofdmenu .current_page_item > a { background: var(--goud); color: var(--bruin); }
.hoofdmenu .menu-knop > a { background: var(--goud); color: var(--bruin); }
.menu-open { display: none; margin-left: auto; background: none; border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 8px; padding: 9px 12px; font: 700 13px/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1180px) {
	.menu-open { display: block; }
	.hoofdmenu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bruin); border-bottom: 4px solid var(--goud); padding: 6px var(--rand) 14px; }
	.hoofdmenu.open { display: block; }
	.hoofdmenu ul { flex-direction: column; flex-wrap: wrap; }
	.hoofdmenu a { padding: 14px 10px; font-size: 15px; }
}
@media (max-width: 420px) { .site-merk img { height: 38px; } .site-merk b { font-size: 17px; } }

/* ---------- Inhoud ---------- */
.site-inhoud { max-width: var(--breed); margin: 0 auto; padding: 36px var(--rand) 56px; }
.pagina-kop { max-width: 780px; margin: 0 auto 18px; }
.pagina-kop .kicker { font: 700 13px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--rood); margin: 0 0 8px; }
.pagina-kop h1 { margin: 0; }
.entry-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--breed); }
.entry-content > .alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry-content > .abt-cafes, .entry-content > .abt-bvdm, .entry-content > .abt-cijfers { max-width: 1100px; }
.entry-content > .sectie-kop { margin-top: 2.6em; margin-bottom: 4px; }
.entry-content > .sectie-kop + h2, .entry-content > .sectie-kop + h3, .sectie-kop + .wp-block-heading { margin-top: 0; }
.wp-block-column > .sectie-kop:first-child { margin-top: 0; }
.wp-block-group.is-style-kaart > .sectie-kop:first-child { margin-top: 0; }
.wp-block-group.is-style-kaart { margin-top: 2.4em; }
.entry-content > .wp-block-columns { margin-top: 2.6em; }
.entry-content p, .entry-content li { font-size: var(--wp--preset--font-size--normaal); }
.entry-content h2 { margin-top: 1.6em; }
.entry-content .wp-block-shortcode { max-width: var(--breed); }
.home .site-inhoud { padding-top: 0; }
.home .entry-content > .abt-held:first-child { margin-top: 0; }

/* Blokken in ABT-stijl */
.wp-block-group.is-style-kaart, .wp-block-column.is-style-kaart { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(60, 20, 8, .06), 0 6px 18px rgba(60, 20, 8, .08); padding: 22px; }
.abt-held { background: var(--bruin); color: #fff; border-bottom: 4px solid var(--goud); padding: clamp(36px, 7vw, 80px) var(--rand); margin-bottom: 36px; position: relative; overflow: hidden; }
.abt-held::after { content: ''; position: absolute; right: -120px; top: -80px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none; }
.abt-held > * { position: relative; z-index: 1; }
.abt-held h1, .abt-held h2 { color: #fff; }
.abt-held .kicker { font: 700 13px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--goud); margin: 0 0 10px; }
.abt-held p { color: rgba(255, 255, 255, .9); font-size: var(--wp--preset--font-size--groot); }
.abt-held .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border: 2px solid rgba(255, 255, 255, .6); background: transparent; }
.sectie-kop { font: 700 13px/1.2 var(--kop) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--rood) !important; margin-bottom: 6px !important; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--bruin); color: var(--bruin); background: transparent; }
.wp-block-quote { border-left: 4px solid var(--goud); padding-left: 16px; }

/* Nieuws */
.nieuws-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.nieuws-item { background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(60, 20, 8, .08); overflow: hidden; display: flex; flex-direction: column; }
.nieuws-item img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.nieuws-item div { padding: 16px 18px 18px; }
.nieuws-item h2 { font-size: 22px; margin: 0 0 6px; }
.nieuws-item h2 a { text-decoration: none; }
.nieuws-item time { font-size: 13px; color: color-mix(in srgb, var(--tekst) 60%, #fff); }
.paginering { margin-top: 24px; text-align: center; }
.paginering .page-numbers { display: inline-block; padding: 8px 12px; border-radius: 8px; background: #fff; margin: 2px; text-decoration: none; }
.paginering .current { background: var(--bruin); color: #fff; }

/* ---------- Voet ---------- */
.site-voet { background: var(--bruin); color: rgba(255, 255, 255, .85); border-top: 4px solid var(--goud); }
.site-voet__binnen { max-width: var(--breed); margin: 0 auto; padding: 36px var(--rand) 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .site-voet__binnen { grid-template-columns: 1fr; } }
.site-voet h2 { color: var(--goud); font: 700 13px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.site-voet a { color: #fff; }
.site-voet ul { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin: 0 0 6px; }
.site-voet img { height: 54px; width: auto; background: #fff; border-radius: 8px; padding: 4px 7px; margin-bottom: 10px; }
.site-voet__onder { border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; padding: 14px var(--rand) 18px; font-size: 14px; }
.site-voet__onder b { color: #fff; }

/* ---------- Pagina's gemaakt met Bold Page Builder ---------- */
.abt-bold .site-inhoud { max-width: none; padding: 0; }
.abt-bold-inhoud { --bb-kop: var(--kop); }
.abt-bold-inhoud .bt_bb_headline .bt_bb_headline_content, .abt-bold-inhoud .bt_bb_headline h1, .abt-bold-inhoud .bt_bb_headline h2, .abt-bold-inhoud .bt_bb_headline h3, .abt-bold-inhoud .bt_bb_headline h4 { font-family: var(--kop); font-weight: 700; line-height: 1.12; color: var(--bruin); }
.abt-bold-inhoud .bt_bb_headline .bt_bb_headline_superheadline { display: block; font: 700 13px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--rood); margin-bottom: 8px; }
.abt-bold-inhoud .bt_bb_headline h1 { font-size: var(--wp--preset--font-size--reus, 3.2rem); }
.abt-bold-inhoud .bt_bb_headline h2 { font-size: var(--wp--preset--font-size--kop, 2.1rem); }
.abt-bold-inhoud .bt_bb_headline h3 { font-size: 1.5rem; }
.abt-bold-inhoud .bt_bb_headline { margin-bottom: 12px; }
.abt-bold-inhoud .bt_bb_text { font-size: var(--wp--preset--font-size--normaal, 1.0625rem); line-height: 1.6; }
.abt-bold-inhoud .bt_bb_text p, .abt-bold-inhoud .bt_bb_text ul, .abt-bold-inhoud .bt_bb_text ol { margin: 0 0 1em; }
.abt-bold-inhoud .bt_bb_column_content > * + .bt_bb_headline { margin-top: 1.4em; }
.abt-bold-inhoud .bt_bb_shortcode { margin: 6px 0 18px; }
/* Knoppen in ABT-stijl */
.abt-bold-inhoud .bt_bb_button { margin: 4px 8px 4px 0; }
.abt-bold-inhoud .bt_bb_button a { font: 700 15px/1 var(--kop) !important; letter-spacing: .06em; text-transform: uppercase; border-radius: 10px !important; padding: 15px 22px !important; }
.abt-bold-inhoud .bt_bb_button.bt_bb_style_filled a { background: var(--goud) !important; color: var(--bruin) !important; box-shadow: none !important; }
.abt-bold-inhoud .bt_bb_button.bt_bb_style_outline a { background: transparent !important; color: var(--bruin) !important; box-shadow: inset 0 0 0 2px var(--bruin) !important; }
.abt-bold-inhoud .bt_bb_button a:hover { filter: brightness(1.06); }
/* Openingsblok (bruin) */
.abt-bold-inhoud .abt-bb-held { border-bottom: 4px solid var(--goud); position: relative; overflow: hidden; }
.abt-bold-inhoud .abt-bb-held::after { content: ''; position: absolute; right: -120px; top: -80px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none; }
.abt-bold-inhoud .abt-bb-held .bt_bb_headline h1, .abt-bold-inhoud .abt-bb-held .bt_bb_headline_content { color: #fff !important; }
.abt-bold-inhoud .abt-bb-held .bt_bb_headline_superheadline { color: var(--goud) !important; }
.abt-bold-inhoud .abt-bb-held .bt_bb_text { color: rgba(255, 255, 255, .9); font-size: var(--wp--preset--font-size--groot, 1.25rem); }
.abt-bold-inhoud .abt-bb-held .bt_bb_button.bt_bb_style_outline a { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65) !important; }
/* Wit kaartje */
.abt-bold-inhoud .abt-bb-kaart .bt_bb_column_content { border-radius: 14px; box-shadow: 0 1px 2px rgba(60, 20, 8, .06), 0 6px 18px rgba(60, 20, 8, .08); }
@media (max-width: 991px) { .abt-bold-inhoud .bt_bb_row > .bt_bb_column + .bt_bb_column { margin-top: 28px; } }
@media (max-width: 580px) { .abt-bold-inhoud .bt_bb_headline h1 { font-size: 2.3rem; } .abt-bold-inhoud .bt_bb_headline h2 { font-size: 1.75rem; } }