/*
Theme Name: MAM
Description: Block theme for mam-live.de, modelled on the old Wix site: dark, Poppins ExtraLight, centered section titles, outline buttons. Concert blocks and the slider come from the mam-core plugin.
Version: 0.5.0
Requires at least: 7.0
Requires PHP: 8.5
Text Domain: mam
*/

/* Everything else lives in theme.json. Only what theme.json cannot express goes here. */

.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Header: logo left, flat menu and icons right; on phones (landscape too) and small tablets logo and icons centred, burger right.
   WordPress only switches to the burger below 600px, so it is forced up to 1023px here. */
.mam-header__right { gap: 1.5rem; }
.mam-header .wp-block-navigation__submenu-container { background: var(--wp--preset--color--base); border: 0; padding: .5rem 0; }
@media (max-width: 1023px) {
	.mam-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.mam-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mam-header > .wp-block-group { position: relative; justify-content: center; flex-direction: column; gap: .5rem; }
	.mam-header .wp-block-site-logo img { width: 110px !important; }
	.mam-header__right { position: static; }
	.mam-header__right .wp-block-navigation { position: absolute; right: 0; top: .5rem; }
	.mam-header .wp-block-navigation__responsive-container-open svg { width: 34px; height: 34px; }
	.mam-header__social.has-small-icon-size { font-size: 20px; }
}

/* Buttons: outline by default (theme.json), "Weiß" filled. */
.wp-block-button.is-style-weiss .wp-block-button__link { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.wp-block-button.is-style-weiss .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--contrast); }

/* Section titles on the home page are centred, with Wix-like air between sections. */
.mam-jubilaeum img { width: 757px; max-width: 100%; }
.mam-section { padding-block: var(--wp--preset--spacing--60) 0; }
.mam-section > h2 { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }
.mam-section > .wp-block-buttons { justify-content: center; margin-top: var(--wp--preset--spacing--50); }

/* Band and crew cards: square photo, name 28px, role ExtraLight 20px. Phones: name on the photo. */
.mam-cards { gap: 3.5rem 3.75rem; }
.mam-cards--2 { grid-template-columns: repeat(2, 1fr) !important; }
.mam-cards--3 { grid-template-columns: repeat(3, 1fr) !important; gap: 3.5rem 5rem; }
@media (max-width: 781px) { .mam-cards--3 { grid-template-columns: repeat(2, 1fr) !important; gap: 2.5rem 1.5rem; } }
@media (max-width: 600px) { .mam-cards--2, .mam-cards--3 { grid-template-columns: 1fr !important; gap: 2.5rem; } }
.mam-card .wp-block-image { margin: 0; }
.mam-card .wp-block-image img { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; }
.mam-card h3 { margin: 1.75rem 0 0; font-size: var(--wp--preset--font-size--x-large); }
.mam-card h3 a { text-decoration: none; }
.mam-card p { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--large); }
@media (max-width: 600px) {
	.mam-card { position: relative; }
	.mam-card h3, .mam-card p { position: absolute; left: 0; right: 0; text-align: center; text-shadow: 0 1px 6px rgb(0 0 0 / .6); pointer-events: none; }
	.mam-card h3 { bottom: 3.25rem; }
	.mam-card p { bottom: 1.25rem; }
}

/* Concert lists: rows with alternating background. */
.wp-block-query .wp-block-post-template > li:nth-child(odd) { background: #222224; }
.wp-block-query .wp-block-post-template > li { margin: 0; }
.wp-block-query .wp-block-post-template { gap: 0; }
.wp-block-mam-konzert-details + * { margin-top: var(--wp--preset--spacing--40); }

/* Videos: big teaser, then the mam/videos block (its own CSS in mam-core). */

/* Booking section and page heroes: full-bleed photo, centred white text. */
.mam-hero .wp-block-cover__inner-container { max-width: 780px; }
.mam-hero p { text-shadow: 0 1px 4px rgb(0 0 0 / .5); }

/* Kontakt panel. */
.mam-kontakt { text-align: center; }
.mam-kontakt .wp-block-social-links { justify-content: center; }
@media (max-width: 781px) {
	/* As on the old site: photo first, then the contact lines with air around them. */
	.mam-kontakt .wp-block-columns { gap: 0; }
	.mam-kontakt .wp-block-column:last-child { order: -1; }
	.mam-kontakt .wp-block-column:first-child { padding: 2.5rem 1rem 2.75rem; }
	.mam-kontakt p { line-height: 2.4; color: var(--wp--preset--color--muted); }
	.mam-kontakt .wp-block-social-links.has-small-icon-size { font-size: 20px; margin-top: 1.5rem; }
}

/* Member pages: photo as background, text left. */
.mam-mitglied .wp-block-cover__inner-container { max-width: 940px; }

/* Marketing rows: title and file type left, text and button right. */
.mam-download h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.mam-download h3 + p { margin-top: .25rem; font-weight: 400; }

/* Setlist: three columns, two on phones. */
.mam-setlist { columns: 3; column-gap: 2rem; }
.mam-setlist li { break-inside: avoid; }
@media (max-width: 599px) { .mam-setlist { columns: 2; } }

/* Footer. */
.mam-footer__titel { margin: 0; }
.mam-footer p { margin: 0; line-height: 1.9; font-weight: 300; }
.mam-footer .wp-block-columns { margin-bottom: 0; }
/* Newsletter signup in the footer, as on the old site: field and full-width button. */
.mam-footer .fluentform .ff-el-group { margin-bottom: .75rem; }
.mam-footer .fluentform .ff-el-form-control { background: transparent; color: inherit; border-color: #ffffff; }
.mam-footer .fluentform .ff-el-form-control::placeholder { color: #b5b5b5; }
.mam-footer .fluentform .ff-btn-submit { width: 100%; }
.mam-footer .mam-nl-hinweis p { font-size: .8rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
.mam-footer .ff-message-success { border: 0; padding: 0; background: transparent; color: inherit; box-shadow: none; }
@media (max-width: 781px) {
	.mam-footer { text-align: center; }
	.mam-footer .wp-block-group { justify-content: center; }
}

.mam-editor-placeholder {
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--muted);
	color: var(--wp--preset--color--muted);
	font-size: .9em;
}

/* Placeholders for content that is still being built. */
.mam-todo { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 1rem; }

/* Fluent Forms: square white fields like the old site; submit button white. */
.fluentform .ff-el-form-control { border-radius: 0; border: 1px solid #e3e3e3; min-height: 42px; font-family: inherit; }
.fluentform .ff-el-input--label label { font-weight: 200; font-size: var(--wp--preset--font-size--medium); }
.fluentform .ff-btn-submit { border-radius: 0 !important; font-family: inherit; font-weight: 400; }

/* Fluent Forms address field: Straße on its own row, then PLZ | Ort. */
.mam-adresse > .ff-el-input--content { display: grid; grid-template-columns: 1fr 2fr; column-gap: 1rem; }
.mam-adresse > .ff-el-input--content > .ff-t-container { display: contents; }
.mam-adresse .ff-t-cell { display: block; width: auto; max-width: none; padding: 0; }
.mam-adresse .ff-t-cell .ff-el-group { width: 100%; }
.mam-adresse .ff-t-container:first-child .ff-t-cell:first-child { grid-column: 1 / -1; }

/* Mobile menu overlay, after the Wix one: dark panel over the dimmed page, centred items,
   Band folds out under a chevron, the "Mehr" pages listed directly, current page greyed. */
.wp-block-navigation__responsive-container.is-menu-open { background: rgba(40, 40, 40, .85) !important; padding: 0 !important; }
.is-menu-open .wp-block-navigation__responsive-close { flex-shrink: 0; max-width: 22rem; width: 74%; min-height: calc(100% - 1.5rem); margin: .75rem auto; border: 1px solid #2c2c2e; background: var(--wp--preset--color--base); }
.is-menu-open .wp-block-navigation__responsive-dialog { padding: 1.75rem 1.5rem 2rem; position: relative; }
.is-menu-open .wp-block-navigation__responsive-container-close { top: 1.6rem; right: 1.25rem; }
.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; align-items: center !important; }
.is-menu-open .wp-block-navigation__container { position: static !important; align-items: stretch !important; gap: 0 !important; width: 100%; }
.is-menu-open .wp-block-navigation-item { align-items: center !important; width: 100%; position: relative; }
.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; font-weight: 200; padding: .4rem 0 !important; text-align: center; }
.is-menu-open .wp-block-navigation-item__content:focus { outline: none; }
.is-menu-open .wp-block-navigation-item__content:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: #8f8a85; }

/* Band: submenu closed until the chevron is tapped (assets/js/menu.js toggles .mam-offen). */
.is-menu-open .has-child .wp-block-navigation-submenu__toggle { display: block !important; position: absolute; right: .25rem; top: .85rem; width: 1.5rem; height: 1.5rem; padding: 0; transition: transform .2s; }
.is-menu-open .has-child .wp-block-navigation-submenu__toggle svg { display: block !important; width: 16px; height: 16px; margin: 0 auto; stroke-width: 1.5px; transform: none !important; }
.is-menu-open .has-child.mam-offen > .wp-block-navigation-submenu__toggle { transform: rotate(180deg); }
.is-menu-open .has-child > .wp-block-navigation__submenu-container { display: none !important; padding: 0 0 .5rem !important; gap: 0 !important; }
.is-menu-open .has-child.mam-offen > .wp-block-navigation__submenu-container { display: flex !important; }
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; padding: .3rem 0 !important; }

/* "Mehr" (the last top-level entry) is a desktop dropdown only; on mobile its pages are listed directly. */
.is-menu-open .wp-block-navigation__container > .has-child:last-child,
.is-menu-open .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation__submenu-container { display: contents !important; }
.is-menu-open .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation-item__content,
.is-menu-open .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation-submenu__toggle { display: none !important; }
.is-menu-open .wp-block-navigation__container > .has-child:last-child .wp-block-navigation-item__content { font-size: 1.15rem; padding: .4rem 0 !important; }