/*
Theme Name:   Aniplay
Description:  Block theme for the Aniplay festival site. Recreates the original theatre-stage design and scales it down to tablets and phones.
Version:      0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain:  aniplay
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Layout
 *
 * The background artwork is 998px wide: curtains at both sides (17% each)
 * and the dark stage (66%) in the middle. On wider screens the frame stays
 * 998px; below that, everything scales with the viewport width.
 * Below 782px the side curtains are dropped and the top artwork becomes a
 * banner above the content.
 */

body {
	background: var(--wp--preset--color--backdrop);
}

.wp-site-blocks {
	max-width: 998px;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background:
		url(assets/images/bg-top.png) center top / 100% auto no-repeat,
		url(assets/images/bg-middle.png) center top / 100% auto repeat-y,
		var(--wp--preset--color--stage);
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1;
	/* Keep the whole top artwork visible on short pages. */
	min-height: min(368px, 36.9vw);
	/* Keeps text clear of the masks hanging over the stage edges (as on the old site). */
	padding: 0 23% 2.5rem;
}

/* Header */

.site-header {
	position: relative;
	aspect-ratio: 998 / 130;
}

/* Everything in the header is positioned on the artwork; drop WordPress's block gap. */
.site-header > * {
	margin-block: 0;
}

.site-header .wp-block-site-logo {
	position: absolute;
	top: 6.15%;
	left: 50%;
	width: 10.22%;
	transform: translateX(-50%);
	z-index: 3;
}

.site-header .wp-block-site-logo img {
	width: 100%;
	height: auto;
}

/*
 * Main menu: three items each side of the moon, in the same slots as on the
 * old site (measured on the 998px frame: x 200–802, text centred at y 50).
 * That keeps every item on the dark curtain border, clear of the bright lanterns.
 */
.site-header nav.site-nav {
	position: absolute;
	top: 38.8%;
	left: 20.04%;
	right: 19.64%;
	transform: translateY(-50%);
	z-index: 4;
	font-size: clamp(11px, 1.3vw, 13px);
}

/* Old slot widths 84 / 74 / 82 | moon 106 | 82 / 74 / 76 px, with 6px gaps, as % of 602px. */
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	display: grid;
	grid-template-columns: 13.95% 1% 12.29% 1% 13.62% 17.61% 13.62% 1% 12.29% 1% 12.62%;
	width: 100%;
	gap: 0;
}

.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li {
	justify-content: center;
}

.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(1) { grid-column: 1; }
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(2) { grid-column: 3; }
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(3) { grid-column: 5; }
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(4) { grid-column: 7; }
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(5) { grid-column: 9; }
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:nth-child(6) { grid-column: 11; }

/* No dropdown arrows, as on the old site; submenus open on hover and keyboard focus. */
.site-header .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
	display: none;
}

.site-header .site-nav .wp-block-navigation__responsive-container,
.site-header .site-nav .wp-block-navigation__responsive-container-content {
	width: 100%;
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--menu-hover);
}

.site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.site-nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--menu-current);
}

.site-nav .wp-block-navigation__submenu-container {
	min-width: 190px !important;
	padding: 4px;
	border: 2px solid var(--wp--preset--color--plum-dark) !important;
	border-radius: 6px;
	background: var(--wp--preset--color--plum) !important;
	color: var(--wp--preset--color--white) !important;
	box-shadow: -5px 5px 5px 0 rgba(19, 8, 18, 0.8);
}

.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.4em 0.8em;
	border-radius: 4px;
}

.site-header .wp-block-social-links {
	position: absolute;
	top: 6%;
	right: 2.5%;
	z-index: 3;
	gap: 6px;
}

/* Footer: content sits above the stage floor artwork. */

.site-footer {
	padding: 1rem 1rem 14.43%;
	background: url(assets/images/bg-bottom.png) center bottom / 100% auto no-repeat;
	text-align: center;
}

/* Partner logos are always shown at their original size and proportions. */
.site-footer .partners img {
	width: auto;
	height: auto;
	max-width: none;
}

/* Content */

.wp-block-post-title,
main h1,
main h2 {
	text-align: center;
}

.wp-block-embed.is-type-video iframe,
main iframe[src*="youtube"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 4px;
}

.wp-block-gallery.gallery-years {
	justify-content: center;
}

.wp-block-gallery.has-nested-images.gallery-years figure.wp-block-image {
	flex-grow: 0;
}

.gallery-years .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
}

/* Tablets and phones */

/*
 * Same stage layout as on desktop, with the artwork enlarged 1.3x so the
 * curtains become slim strips at the screen edges and the stage is wider.
 * At this zoom the masks end 14% in from each edge, so the content gets 15%
 * side padding.
 */
@media (max-width: 781px) {
	.wp-site-blocks {
		background:
			url(assets/images/bg-top.png) center top / 130% auto no-repeat,
			url(assets/images/bg-middle.png) center top / 130% auto repeat-y,
			var(--wp--preset--color--stage);
	}

	.wp-site-blocks > main {
		min-height: 0;
		padding: 0 15% 1.5rem;
	}

	.site-header {
		aspect-ratio: 998 / 169;
	}

	.site-header .wp-block-site-logo {
		width: 13.29%;
	}

	.site-header nav.site-nav {
		top: 12px;
		left: 12px;
		right: auto;
		transform: none;
		font-size: 1.125rem;
	}

	.site-header .wp-block-social-links {
		top: 12px;
		right: 12px;
	}

	/* Use the menu button up to 782px (WordPress switches at 600px). */
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		padding: 8px;
		border-radius: 6px;
		background: var(--wp--preset--color--plum);
		color: var(--wp--preset--color--white);
	}

	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--stage) !important;
		color: var(--wp--preset--color--white) !important;
	}

	.site-nav .is-menu-open .wp-block-navigation__submenu-container {
		border: 0 !important;
		background: transparent !important;
		box-shadow: none;
	}

	.site-footer {
		padding: 0.5rem 15% 18.76%;
		background-size: 130% auto;
	}}

/* Rules pages: which year they apply to, and when they were last changed. */

.page-updated {
	margin-top: -1rem;
	color: var(--wp--preset--color--text);
	opacity: 0.75;
}

.page-updated p,
.page-updated .wp-block-post-date {
	margin: 0;
}

.rules-validity {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: rgba(130, 29, 56, 0.35);
}