/*
Theme Name: Gemischter Chor
Theme URI: https://gemischterchor-entlebuch.ch
Description: GeneratePress-Child-Theme für den Gemischten Chor Entlebuch. Header, Footer und Inhalte bestehen aus Core-Blöcken.
Author: Galli Web
Author URI: https://galliweb.ch
Template: generatepress
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.1
Text Domain: gemischter-chor
*/

/* =============================================================================
   Tokens
   ========================================================================== */

:root {
	--chor-blue: #18419a;
	--chor-red: #a81212;
	--chor-red-hover: #cf8282;
	--chor-yellow: #e3ea02;
	--chor-light: #eae8ee;
	--chor-heading: #272727;
	--chor-muted: #999999;
	--chor-dropdown: #e8e8e8;
	--chor-hex-blue: rgba(41, 139, 208, 0.68);
	--chor-hex-green: #07ca38;
	--chor-font-body: Lato, sans-serif;
	--chor-font-headline: Raleway, sans-serif;
	--chor-font-brand: Montserrat, sans-serif;
	--chor-font-footer: "Source Sans Pro", sans-serif;
}

/* =============================================================================
   Base typography (former Pro "Renew" stack, root size 14px)
   ========================================================================== */

body {
	font-family: var(--chor-font-body);
	font-size: 14px;
	line-height: 1.8;
	color: var(--chor-muted);
	background: #fff;
}

p,
.entry-content li {
	color: #000;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--chor-font-body);
	font-weight: 700;
	color: var(--chor-heading);
	letter-spacing: -0.035em;
}

h1 { font-size: 56px; line-height: 1.1; }
h2 { font-size: 40px; line-height: 1.2; }
h3 { font-size: 32px; line-height: 1.3; }
h4 { font-size: 24px; line-height: 1.4; }
h5 { font-size: 21px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; }

a {
	color: var(--chor-red);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--chor-red-hover);
}

/* Page headline: every page starts with one h1 in Raleway. */
.entry-content > h1:not(.is-style-chor-plain),
.entry-content > .wp-block-group > h1:not(.is-style-chor-plain) {
	font-family: var(--chor-font-headline);
	font-size: 30.8px;
	line-height: 1.4;
	letter-spacing: 0;
	color: #000;
	margin: 0;
}

.is-style-chor-plain {
	font-family: var(--chor-font-body);
}

.is-style-chor-subheadline {
	font-family: var(--chor-font-headline);
	font-size: 19.6px;
	line-height: 1.4;
	margin-top: 0.15em;
}

.is-style-chor-justify {
	text-align: justify;
}

@media (max-width: 768px) {
	.is-style-chor-justify {
		text-align: left;
	}
}

/* =============================================================================
   Content (container width, sidebar width and paddings: GeneratePress settings)
   ========================================================================== */

.inside-article > .entry-content {
	margin-top: 0;
}

.entry-content > * + * {
	margin-top: 0;
}

.entry-content p {
	margin-bottom: 1.5em;
}

/* Spacer blocks define the whole gap themselves (no extra flow margins around them). */
.entry-content .wp-block-spacer,
.entry-content .wp-block-spacer + * {
	margin-block-start: 0;
}

/* =============================================================================
   Header (GP block element "Site Header")
   ========================================================================== */

.chor-header {
	background-color: var(--chor-blue);
	border-bottom: 5px solid var(--chor-red);
}

/* Width: the inner group carries GP's "grid-container" class (= GP container width). */
.chor-header__inner {
	min-height: 155px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}

.chor-header__brand {
	flex-shrink: 0;
	text-align: center;
}

.chor-header .wp-block-site-title {
	font-family: var(--chor-font-brand);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
}

.chor-header .wp-block-site-tagline {
	font-family: var(--chor-font-brand);
	font-size: 19.2px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

.chor-header .wp-block-site-title a,
.chor-header .wp-block-site-title a:hover,
.chor-header .wp-block-site-tagline {
	color: var(--chor-yellow);
	text-decoration: none;
}

/* Desktop navigation (left and right of the brand), sits 16px below the centre line like before.
   Needs to beat core's "body .is-layout-flex > * { margin: 0 }". */
.chor-header .chor-header__inner > .chor-nav--desktop {
	margin-top: 32px;
}

.chor-nav--desktop .wp-block-navigation__container {
	gap: 0;
	flex-wrap: nowrap;
}

.chor-nav--desktop > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	font-family: var(--chor-font-headline);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--chor-yellow);
}

/* Items with a dropdown: indicator right after the label; a small hover bridge keeps the
   dropdown open while the pointer moves down to it. */
.chor-nav--desktop > .wp-block-navigation__container > .has-child {
	padding-bottom: 12px;
	margin-bottom: -12px;
}

.chor-nav--desktop > .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	padding-right: 4px;
}

.chor-nav--desktop .wp-block-navigation-item__content:hover,
.chor-nav--desktop .wp-block-navigation-item__content:focus {
	color: var(--chor-yellow);
}

/* Menu icons: each item gets a class chor-i-<icon> (see icon map below). */
.chor-nav [class*="chor-i-"] > .wp-block-navigation-item__content::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--chor-i) center / contain no-repeat;
	mask: var(--chor-i) center / contain no-repeat;
}

.chor-nav [class*="chor-i-"]:hover > .wp-block-navigation-item__content::before,
.chor-nav [class*="chor-i-"].current-menu-item > .wp-block-navigation-item__content::before,
.chor-nav [class*="chor-i-"].current-menu-ancestor > .wp-block-navigation-item__content::before {
	-webkit-mask-image: var(--chor-i-alt, var(--chor-i));
	mask-image: var(--chor-i-alt, var(--chor-i));
}

.chor-i-music { --chor-i: url(assets/icons/music.svg); }
.chor-i-users { --chor-i: url(assets/icons/users.svg); }
.chor-i-star { --chor-i: url(assets/icons/star-regular.svg); --chor-i-alt: url(assets/icons/star.svg); }
.chor-i-address-book { --chor-i: url(assets/icons/address-book-regular.svg); --chor-i-alt: url(assets/icons/address-book.svg); }
.chor-i-calendar { --chor-i: url(assets/icons/calendar-regular.svg); --chor-i-alt: url(assets/icons/calendar-check-regular.svg); }
.chor-i-file { --chor-i: url(assets/icons/file-pdf-regular.svg); }
.chor-i-archive { --chor-i: url(assets/icons/file-regular.svg); --chor-i-alt: url(assets/icons/file-zipper-regular.svg); }
.chor-i-image { --chor-i: url(assets/icons/image.svg); }
.chor-i-heart { --chor-i: url(assets/icons/heart-regular.svg); --chor-i-alt: url(assets/icons/heart.svg); }

/* Submenu indicator: angles-down (left menu) and angle-down (right menu) like before */
.chor-nav--desktop .wp-block-navigation__submenu-icon {
	width: 12px;
	height: 12px;
	margin: 0 16px 0 0;
	padding: 0;
	color: var(--chor-yellow);
	background-color: currentColor;
	-webkit-mask: url(assets/icons/angle-down.svg) center / contain no-repeat;
	mask: url(assets/icons/angle-down.svg) center / contain no-repeat;
}

.chor-nav--left .wp-block-navigation__submenu-icon {
	-webkit-mask-image: url(assets/icons/angles-down.svg);
	mask-image: url(assets/icons/angles-down.svg);
}

.chor-nav--desktop .wp-block-navigation__submenu-icon svg {
	display: none;
}

/* Dropdown */
.chor-nav--desktop .wp-block-navigation__submenu-container {
	top: 100%;
	min-width: 216px !important;
	padding: 0;
	border: 0 !important;
	background-color: var(--chor-dropdown) !important;
}

.chor-nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px !important;
	font-family: var(--chor-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #000;
}

.chor-nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	width: 18px;
	height: 18px;
}

/* Mobile navigation: core overlay, button styled like the former white box */
.chor-nav--mobile .wp-block-navigation__responsive-container-open {
	width: 36px;
	height: 36px;
	justify-content: center;
	align-items: center;
	background: #fff;
	border: 1px solid #000;
	color: #000;
}

.chor-nav--mobile .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.chor-nav--mobile .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(assets/icons/angles-down.svg) center / contain no-repeat;
	mask: url(assets/icons/angles-down.svg) center / contain no-repeat;
}

/* Overlay colours come from the block (overlay background/text colour); only spacing and type here. */
.chor-nav--mobile .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 28px;
}

.chor-nav--mobile .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--chor-font-headline);
	font-size: 18px;
	font-weight: 700;
}

.chor-nav--mobile .is-menu-open [class*="chor-i-"] > .wp-block-navigation-item__content::before {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 10px;
}

/* Tablet (783–1199px): brand left, both menus right, like the former tablet header */
@media (min-width: 783px) and (max-width: 1199px) {
	.chor-header__inner {
		padding: 0 28px;
		justify-content: flex-start;
	}

	/* Title wraps onto two lines like the former tablet header, the menus keep one line */
	.chor-header .chor-header__brand {
		flex: 0 0 auto;
		max-width: 250px;
	}

	.chor-nav--desktop,
	.chor-nav--desktop .wp-block-navigation__container {
		flex-shrink: 0;
		flex-wrap: nowrap;
	}

	.chor-header__brand {
		order: -1;
		text-align: left;
		margin-right: auto;
	}

	.chor-header .wp-block-site-title {
		font-size: 20.8px;
	}

	.chor-header .wp-block-site-tagline {
		font-size: 16.8px;
	}

	.chor-header .chor-header__inner > .chor-nav--desktop {
		margin-top: 0;
	}

	.chor-nav--desktop > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0 10px;
		font-family: var(--chor-font-body);
		font-weight: 400;
	}
}

/* Mobile (≤782px): brand left, menu button right */
@media (max-width: 782px) {
	/* Same side padding as GP's mobile content padding */
	.chor-header__inner {
		padding: 0 24px;
	}

	.chor-header__brand {
		flex-shrink: 1;
		text-align: left;
	}

	.chor-header .wp-block-site-title {
		font-size: 20.8px;
	}

	.chor-header .wp-block-site-tagline {
		font-size: 16.8px;
	}
}

/* =============================================================================
   Footer (GP block element "Site Footer")
   ========================================================================== */

.chor-footer {
	background-color: var(--chor-blue);
	min-height: 140px;
	display: flex;
	align-items: flex-end;
}

/* Width: the inner group carries GP's "grid-container" class (= GP container width). */
.chor-footer__inner {
	width: 100%;
	padding: 0 28px 28px;
}

@media (max-width: 782px) {
	.chor-footer__inner {
		padding: 0 24px 28px;
	}
}

.chor-footer p {
	font-family: var(--chor-font-footer);
	font-size: 14px;
	line-height: 1.3;
	color: #fff;
	margin: 0;
}

.chor-footer a,
.chor-footer a:hover {
	color: var(--chor-light);
	text-decoration: underline;
}

/* =============================================================================
   Sidebar
   ========================================================================== */

/* 35px sidebar offset + 50px top margin of the first widget heading ("Nächste Termine") */
.is-right-sidebar .inside-right-sidebar {
	padding-top: 85px;
}

/* Widget padding and spacing: GeneratePress settings (widget padding 0, separator 42px) */
.is-right-sidebar .widget {
	font-size: 14px;
}

.is-right-sidebar .widget p {
	margin-bottom: 1.8em;
}

.is-right-sidebar h2 {
	margin-top: 50px;
	margin-bottom: 8px;
}

.is-right-sidebar h4 {
	font-size: 23.8px;
	margin-bottom: 15.5px;
}

.is-right-sidebar figcaption {
	margin-top: 0.5em;
	font-size: 14px;
	text-align: left;
}

/* "Nächste Termine" (MEC minimal list): stack date/title and the details button for the narrow sidebar */
.is-right-sidebar .mec-event-list-minimal .mec-event-article {
	padding: 16px 0;
}

.is-right-sidebar .mec-event-list-minimal .mec-event-article > [class*="col-"] {
	float: none;
	width: 100%;
	padding: 0;
}

.is-right-sidebar .mec-event-list-minimal .mec-event-date {
	margin-right: 14px;
}

.is-right-sidebar .mec-event-list-minimal .mec-event-title {
	margin-bottom: 6px;
	padding-top: 2px;
	font-family: var(--chor-font-body);
	font-size: 15px;
	line-height: 1.3;
	text-transform: none;
	hyphens: auto;
}

.is-right-sidebar .mec-event-list-minimal .mec-event-title a {
	color: #000;
}

.is-right-sidebar .mec-event-list-minimal .mec-event-detail {
	font-family: var(--chor-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #555;
}

.is-right-sidebar .mec-event-list-minimal .btn-wrapper {
	clear: both;
	padding-top: 12px;
	text-align: left;
}

.is-right-sidebar .mec-event-list-minimal .btn-wrapper .mec-detail-button {
	display: block;
	margin: 0;
	padding: 8px;
	letter-spacing: 1px;
}

/* =============================================================================
   Content blocks
   ========================================================================== */

/* Hexagon icon (former Cornerstone feature box graphic, without the square frame) */
.wp-block-icon.is-style-chor-hexagon,
.wp-block-icon.is-style-chor-hexagon-green {
	--chor-hex: var(--chor-hex-blue);
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	margin: 0;
}

.wp-block-icon.is-style-chor-hexagon-green {
	--chor-hex: var(--chor-hex-green);
}

.wp-block-icon.is-style-chor-hexagon svg,
.wp-block-icon.is-style-chor-hexagon-green svg {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 58px;
	height: 58px;
	padding: 15px 14px;
	fill: #fff;
	background-color: var(--chor-hex);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Image galleries: framed thumbnails like the former theme */
.entry-content .wp-block-gallery .wp-block-image img {
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid #e5e5e5;
	background: #fff;
}

/* Accordion (Berichte-Archiv), full content width */
.entry-content .wp-block-accordion > .wp-block-accordion-item {
	margin-block-start: 4px;
}

.entry-content .wp-block-accordion > .wp-block-accordion-item:first-child {
	margin-block-start: 0;
}

.entry-content .wp-block-accordion-heading__toggle {
	padding: 20px 20px 20px 10px;
	font-family: var(--chor-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: #000;
	background-color: #e8e8e8;
}

.entry-content .wp-block-accordion-panel {
	padding: 10px 20px 10px 30px;
	border: 1px solid #e8e8e8;
	border-top: 0;
	background: #fff;
}

.entry-content .wp-block-accordion-panel p {
	margin-bottom: 1em;
}

/* Lists flush with the paragraphs, bullets hang in the panel padding */
.entry-content .wp-block-accordion-panel ul {
	margin-left: 0;
}

/* MEC single event: use the full GP container width like before (MEC sets its own 1196px width) */
.single-mec-events .site-content > .mec-container {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* MEC event details (single page and expanded list entries): site fonts and readable contrast.
   MEC ships Raleway Light 14px in #8d8d8d on light grey, which is hard to read.
   "body" prefix: MEC prints its font settings inline after this stylesheet with the same specificity. */
body .mec-wrap .mec-single-title {
	font-family: var(--chor-font-headline);
	font-size: 30.8px;
	font-weight: 700;
	color: #000;
}

body .mec-wrap .mec-single-event-description,
body .mec-wrap .mec-single-event-description p,
body .mec-wrap .mec-events-content p {
	font-family: var(--chor-font-body);
	font-size: 16.8px;
	line-height: 1.6;
	color: #000;
}

body .mec-wrap .mec-event-meta h3,
body .mec-wrap .mec-event-meta dt,
body .mec-wrap .mec-frontbox-title {
	font-family: var(--chor-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #000;
}

body .mec-wrap .mec-event-meta dd,
body .mec-wrap .mec-event-meta dd h6,
body .mec-wrap .mec-event-meta dd span,
body .mec-wrap .mec-event-meta dd abbr,
body .mec-wrap .mec-event-meta dd a {
	font-family: var(--chor-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: #222;
}

body .mec-wrap .mec-event-meta dd a:hover {
	color: var(--chor-red);
}

body .mec-wrap .mec-event-meta .mec-events-event-categories a {
	color: var(--chor-red);
}

body .mec-wrap .mec-events-button {
	font-family: var(--chor-font-body);
	font-size: 14px;
	font-weight: 400;
}

/* Organizer icon beside the name instead of wrapping under it */
body .mec-wrap .mec-event-meta dd.mec-organizer,
body .mec-wrap .mec-single-event-additional-organizers dd {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* MEC list view tweaks (taken over from the Pro child theme) */
.mec-toggle-item-col .mec-event-month {
	font-size: 15px !important;
	color: #000 !important;
}

.mec-month-divider span::before {
	display: none !important;
}

.mec-event-content p,
.mec-wrap p {
	color: #000 !important;
	font-weight: 400 !important;
}

h3.mec-toggle-title {
	font-weight: 400 !important;
	color: #000 !important;
	margin-top: 0 !important;
}

span.mec-start-time {
	font-size: 14px;
	color: #000 !important;
}

.mec-month-divider span {
	font-weight: 600 !important;
	text-align: left !important;
	font-size: 17px !important;
}