/* Small fixes for the Mesmerize/Highlight theme. Loaded after the theme's own styles. */

/*
 * Start page sections. Full-width bands built from WordPress blocks with the theme's own means:
 * gridContainer width, Muli headings, Open Sans text, accent #0277bd / #FF9800, rounded buttons, the
 * theme's card shadow and Font Awesome icons. Classes are set on the blocks in the page editor.
 */
.home #page-content,
.home.mesmerize-content-padding #page > .page-content,
.mesmerize-front-page.mesmerize-content-padding .page-content { padding-top: 0; padding-bottom: 0; background: #fff; }
.home #page-content .content > *:not(.vts-section) { max-width: 1232px; margin-inline: auto; padding-inline: 15px; }
.vts-section { padding: 80px 0; margin: 0 !important; background: #fff; }
.vts-section .gridContainer { width: 100%; padding-inline: 20px; box-sizing: border-box; }

.vts-section--alt { background: #f5fafd; }
/* "VTS verbindet" artwork next to the welcome text: on white like the artwork itself, no photo shadow */
.vts-artwork { margin: 0; }
.vts-artwork img { display: block; width: 100%; height: auto; }
.vts-section p,
.vts-section li { color: #5c6574; font-size: 1.125rem; line-height: 1.75; }
/* Two event photos side by side, same height */
.vts-section .wp-block-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.vts-section .wp-block-gallery::before,
.vts-section .wp-block-gallery::after { display: none; } /* theme clearfix would take the first grid cell */
.vts-section .wp-block-gallery .wp-block-image { width: auto !important; margin: 0 !important; }
.vts-section .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vts-section h2 { color: #3C424F; margin: 0 0 1.25rem; text-wrap: balance; } /* if a heading must wrap, no single word left alone */
.vts-section h3 { color: #3C424F; margin: 0 0 .75rem; }
.vts-section .vts-lead { max-width: 46rem; margin: 0 auto 3rem; text-align: center; font-size: 1.1875rem; }
.vts-section .vts-center { text-align: center; }
.vts-section .wp-block-columns { gap: 2.5rem; margin-bottom: 0; }
.vts-photo img,
.vts-section .wp-block-gallery img { border-radius: 8px; box-shadow: 0 0 3px 0 rgba(189,189,189,.4), 0 2px 3px 0 rgba(189,189,189,.3), 0 10px 30px -12px rgba(0,0,0,.35); }

/* Buttons in the content look like the theme's "button big round" */
.vts-section .wp-block-button__link {
	font-family: "Open Sans", sans-serif;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.6rem;
	padding: .65rem 2rem;
	min-width: 10rem;
	border: 2px solid #0277bd;
	border-radius: 56px;
	background: #0277bd;
	color: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}
.vts-section .wp-block-button__link:hover { background: #01579b; border-color: #01579b; color: #fff; }
.vts-section .is-style-outline .wp-block-button__link { background: transparent; color: #0277bd; }
.vts-section .is-style-outline .wp-block-button__link:hover { background: #0277bd; color: #fff; }
.vts-section .wp-block-button__link:focus-visible { outline: 2px solid #3C424F; outline-offset: 3px; }

/* "Was wir machen": the theme's card with an icon in the accent colours */
.vts-card {
	height: 100%;
	padding: 2.25rem 2rem 1.75rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 3px 0 rgba(189,189,189,.4), 0 2px 3px 0 rgba(189,189,189,.3), 0 2px 3px rgba(0,0,0,.08);
	text-align: center;
	transition: transform .25s, box-shadow .25s;
}
.vts-card:hover { transform: translateY(-4px); box-shadow: 0 0 3px 0 rgba(189,189,189,.4), 0 14px 28px -10px rgba(0,0,0,.18); }
.vts-card::before {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	font-family: FontAwesome;
	font-size: 1.75rem;
	color: #fff;
	background: #0277bd;
}
.vts-card--kultur::before { content: "\f001"; background: #FF9800; }
.vts-card--wissen::before { content: "\f19d"; }
.vts-card--humanitaer::before { content: "\f004"; background: #ff3369; }
.vts-card p:last-child { margin-bottom: 0; }
.vts-card a { font-weight: 600; color: #0277bd; text-decoration: none; }
.vts-card a:hover { text-decoration: underline; }

/* "Unsere Clubs": smaller theme cards, four per row, an incomplete last row centred.
   More clubs can be added by duplicating a column. */
.vts-clubs .wp-block-columns { flex-wrap: wrap !important; justify-content: center; gap: 1.25rem; }
.vts-clubs .wp-block-columns::before,
.vts-clubs .wp-block-columns::after { display: none; } /* theme clearfix would take the first slot in the row */
/* the selector outranks the block library's column rules (extra left margin, full width on phones) */
.vts-clubs .wp-block-columns:not(.vts-x) > .wp-block-column { flex: 0 1 calc((100% - 3 * 1.25rem) / 4) !important; margin: 0 !important; }
.vts-club {
	height: 100%;
	padding: 1.75rem 1.25rem 1.5rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 3px 0 rgba(189,189,189,.4), 0 2px 3px 0 rgba(189,189,189,.3), 0 2px 3px rgba(0,0,0,.08);
	text-align: center;
}
.vts-club::before {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	font-family: FontAwesome;
	font-size: 1.35rem;
	color: #fff;
	background: #0277bd;
}
.vts-club--stammtisch::before { content: "\f0f4"; background: #FF9800; }
.vts-club--fussball::before { content: "\f1e3"; }
.vts-club--freizeit::before { content: "\f206"; background: #ff3369; }
.vts-club--health::before { content: "\f21e"; background: #FF9800; }
.vts-club--spiele::before { content: "\f12e"; background: #ff3369; }
.vts-club--musik::before { content: "\f025"; background: #FF9800; }
.vts-club--lesen::before { content: "\f02d"; }
.vts-club h3 { font-size: 1.25rem; line-height: 1.75rem; }
.vts-club p { margin: 0; font-size: 1rem; line-height: 1.6; }
.vts-clubs__note { margin: 2.5rem 0 0; }
@media (max-width: 781px) {
	.vts-clubs .wp-block-columns:not(.vts-x) > .wp-block-column { flex: 0 1 calc((100% - 1.25rem) / 2) !important; }
}

/* Call to action: a band in a deeper shade of the theme blue (white text needs it for contrast) */
.vts-section--cta { background: #0277bd; }
.page-content .vts-section--cta h2,
.page-content .vts-section--cta p { color: #fff; }
.vts-section--cta .vts-lead { margin-bottom: 2rem; }
.vts-section--cta .wp-block-button__link { background: #fff; border-color: #fff; color: #0277bd; }
.vts-section--cta .wp-block-button__link:hover { background: #e1f5fe; border-color: #e1f5fe; color: #01579b; }
.vts-section--cta .is-style-outline .wp-block-button__link { background: transparent; color: #fff; }
.vts-section--cta .is-style-outline .wp-block-button__link:hover { background: #fff; color: #0277bd; }
.vts-section--cta .wp-block-button__link:focus-visible { outline-color: #fff; }

@media (max-width: 781px) {
	.vts-section { padding: 56px 0; }
	.vts-section h2 { font-size: 2rem; line-height: 2.5rem; }
	.vts-section .wp-block-buttons { justify-content: center; }
}

/*
 * Contrast (WCAG AA 4.5:1) with darker shades of the theme's own colours:
 * blue #03a9f4 -> #0277bd (4.8:1 with white), body grey #8E9DAE -> #5c6574 (5.9:1),
 * dark text on the light-orange title band (6.6:1) and on the orange footer box (7.4:1).
 */
.button.color1,
button.color1 { background-color: #0277bd; border-color: #0277bd; }
.button.color1:hover,
button.color1:hover { background-color: #01579b; border-color: #01579b; }
.button.color1.outline { background: transparent; color: #0277bd; border-color: #0277bd; }
.button.color1.outline:hover { background: #0277bd; color: #fff; }
.page-content a:not(.button):not(.wp-block-button__link),
.tribe-events a.tribe-common-anchor-thin { color: #0277bd; }
.page-content,
.page-content p,
.page-content li,
.page-content td { color: #5c6574; }
.mesmerize-inner-page .inner-header-description .hero-title,
.mesmerize-inner-page .inner-header-description .header-subtitle { color: #7a4f16; } /* warm dark shade of the band orange: 4.6:1, softer than dark grey */
.footer .footer-bg-accent,
.footer .footer-bg-accent p,
.footer .footer-bg-accent a,
.footer .footer-bg-accent .social-icon,
.footer .footer-bg-accent i { color: #222; }

/* Forminator forms: labels, descriptions and typed text dark enough to read; placeholders as hints */
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form .forminator-description,
.forminator-ui.forminator-custom-form .forminator-radio-label,
.forminator-ui.forminator-custom-form .forminator-checkbox-label { color: #3C424F !important; }
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form select { color: #3C424F !important; }
.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder { color: #66707f !important; opacity: 1; }

/* Footer contact boxes: links (e-mail, Impressum, Satzung) readable on the dark footer */
.footer-contact-boxes a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.footer-contact-boxes a:hover { color: #FF9800; }

/* Tables in pages and posts stay inside the screen on phones: equal columns, long words may break, images shrink */
:is(.page-content .content, .post-content-inner) table { max-width: 100%; table-layout: fixed; }
:is(.page-content .content, .post-content-inner) :is(td, th) { overflow-wrap: anywhere; }
:is(.page-content .content, .post-content-inner) :is(td, th) img { max-width: 100%; height: auto; }
:is(.page-content .content, .post-content-inner) figure.wp-block-table { overflow-x: auto; }

/* Arabic paragraphs in content read right to left */
.entry-content [dir="rtl"], .tribe-events-single-event-description [dir="rtl"] { text-align: right; }

/* Start page hero: keep title and buttons above the wave at the bottom edge, so they stay visible and clickable */
.header-homepage .header-description { position: relative; z-index: 3; }

/* Page titles on phones: the theme's large title broke long words mid-word ("Veranstaltunge / n"). */
@media (max-width: 767px) {
	.inner-header-description .hero-title {
		font-size: clamp(1.75rem, 8.5vw, 2.75rem);
		line-height: 1.15;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: auto;
	}
}