/*
Theme Name: Hubertusput
Description: Licht, toegankelijk thema voor Seniorenvereniging Sint Hubertusput Pius X Echt. Bootstrap 5 + blokken.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: hubertusput
*/

:root {
	--hp-blue: #2d40b8;
	--hp-blue-dark: #1c2a7a;
	--hp-yellow: #eeca38;
	--hp-light: #f4f6fc;
	--hp-text: #222;
	--bs-primary: var(--hp-blue);
	--bs-primary-rgb: 45, 64, 184;
	--bs-link-color: var(--hp-blue);
	--bs-link-hover-color: var(--hp-blue-dark);
	--bs-body-font-size: 1.125rem; /* groter lettertype voor senioren */
	--bs-body-color: var(--hp-text);
}

body { line-height: 1.7; }
h1, h2, h3, h4 { color: var(--hp-blue-dark); font-weight: 700; }

.btn-primary {
	--bs-btn-bg: var(--hp-blue);
	--bs-btn-border-color: var(--hp-blue);
	--bs-btn-hover-bg: var(--hp-blue-dark);
	--bs-btn-hover-border-color: var(--hp-blue-dark);
}

/* Header */
.site-header { border-bottom: 4px solid var(--hp-yellow); }
.site-header .navbar-brand img { max-height: 96px; width: auto; }
.site-header .brand-text { line-height: 1.2; color: var(--hp-blue-dark); }
.site-header .brand-text small { display: block; font-size: .8rem; color: #666; }
.site-header .nav-link { font-weight: 600; color: var(--hp-text); padding: .75rem .6rem; }
.site-header .nav-link:hover,
.site-header .current-menu-item > .nav-link { color: var(--hp-blue); }

/* Hero */
.hero {
	background: linear-gradient(90deg, rgba(28, 42, 122, .92), rgba(28, 42, 122, .5)), var(--hero-img, none) center / cover;
	color: #fff;
}
.hero h1 { color: #fff; }

.page-header { background: var(--hp-light); }
.section-alt { background: var(--hp-light); }

/* Kaarten */
.card { border: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, .07); }
.card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.card-placeholder { position: relative; background: var(--hp-light); overflow: hidden; }
.card-placeholder::after { content: ""; position: absolute; inset: 0; background: var(--logo) center / auto 70% no-repeat; opacity: .12; filter: grayscale(1); }

/* Blokken binnen de content */
.entry-content > * { margin-bottom: 1.25rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.entry-content .wp-block-columns { gap: 1.5rem; }
.entry-content .wp-block-group.has-background { padding: 1.5rem; border-radius: .5rem; }
.entry-content .wp-block-gallery { gap: .75rem; }
.entry-content .wp-block-table table { width: 100%; }
.entry-content .wp-block-table td,
.entry-content .wp-block-table th { padding: .6rem .75rem; border-bottom: 1px solid #ddd; }
.entry-content .wp-block-table th { background: var(--hp-yellow); text-align: left; }
.entry-content .wp-block-button__link { background: var(--hp-blue); border-radius: .375rem; }

/* Agenda: tabel-blok met extra CSS-klasse "agenda" */
.entry-content .agenda table { border-collapse: separate; border-spacing: 0 .5rem; }
.entry-content .agenda thead { display: none; }
.entry-content .agenda td { border: 0; background: #fff; vertical-align: middle; }
.entry-content .agenda td:first-child { width: 7.5rem; background: var(--hp-blue); color: #fff; font-weight: 700; text-align: center; border-radius: .5rem 0 0 .5rem; line-height: 1.3; }
.entry-content .agenda td:last-child { border-radius: 0 .5rem .5rem 0; font-weight: 600; }

/* Footer */
.site-footer { background: var(--hp-blue-dark); color: #e8ebf7; }
.site-footer a { color: #fff; }
.site-footer h2 { color: var(--hp-yellow); font-size: 1.15rem; }

/* Toegankelijkheid */
:focus-visible { outline: 3px solid var(--hp-yellow); outline-offset: 2px; }