/*
Theme Name: BitS FSE
Theme URI: https://bachinthesubways.org
Author: Bach in the Subways
Author URI: https://bachinthesubways.org
Description: Block theme for Bach in the Subways.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bits-fse
*/

/*
 * Component styles for the bits/* blocks live in the BitS Core plugin
 * (wp-content/plugins/bits-core/assets/blocks.css) so the blocks stay portable.
 * This file covers the theme's own chrome: header, sub-nav, footer, forms and
 * shared content styling.
 */

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

strong,
b {
	font-weight: 700;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Full-width bands (header, sub-nav, hero, map, search) sit flush against each
   other; each band owns its own vertical padding. */

.wp-site-blocks > *,
.wp-site-blocks > main > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

/* ==========================================================================
   Header
   ========================================================================== */

.bits-header {
	background: var(--wp--preset--color--black);
	/* Containing block for the mobile menu panel, which drops below the bar. */
	position: relative;
}

.bits-header a {
	color: #fff;
}

.bits-header .wp-block-site-logo img {
	display: block;
}

.bits-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bits-header .wp-block-navigation .wp-block-navigation-item > a {
	padding: 1.15rem 0 1rem;
	border-bottom: 2px solid transparent;
}

.bits-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.bits-header .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > a,
.bits-header .wp-block-navigation .wp-block-navigation-item > a:hover {
	border-bottom-color: #fff;
	text-decoration: none;
}

.bits-header .wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	display: none;
}

/* The overlay (mobile) menu inherits red from theme.json; keep links legible. */
.bits-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff;
}

/* ==========================================================================
   Sub-navigation (red band under the header)
   ========================================================================== */

.bits-subnav {
	background: var(--wp--preset--color--red);
}

.bits-subnav .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bits-subnav a {
	color: rgba(255, 255, 255, 0.72);
	padding: 0.55rem 0;
	display: inline-block;
}

.bits-subnav .current-menu-item > a,
.bits-subnav a:hover {
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bits-footer {
	background: var(--wp--preset--color--black);
	color: #fff;
}

.bits-footer a {
	color: #fff;
}

.bits-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.bits-footer .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bits-footer__legal {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   Newsletter signup (header of the footer block)
   ========================================================================== */

.bits-newsletter {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.bits-newsletter input[type="email"] {
	min-width: 320px;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: 0.9375rem;
}

.bits-newsletter button {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}

.bits-newsletter button:hover {
	background: var(--wp--preset--color--red-dark);
}

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

.bits-back-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bits-table-wrap {
	overflow-x: auto;
}

.bits-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.bits-table-wrap th {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 2px solid var(--wp--preset--color--border);
	padding: 0.55rem 0.75rem 0.55rem 0;
}

.bits-table-wrap td {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.55rem 0.75rem 0.55rem 0;
	vertical-align: top;
}

/* ==========================================================================
   Gravity Forms
   ========================================================================== */

.gform_wrapper.gravity-theme .gform_title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
}

.gform_wrapper.gravity-theme .gsection_title,
.gform_wrapper.gravity-theme h2.gsection_title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.5rem;
}

.gform_wrapper.gravity-theme .gfield_label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
}

.gform_wrapper.gravity-theme .gfield_description,
.gform_wrapper.gravity-theme .gform_fileupload_rules {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: 0.875rem;
	color: #555;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"] {
	background: var(--wp--preset--color--red);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1rem 2.25rem;
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
	background: var(--wp--preset--color--red-dark);
}

/* Grey callout used inside the registration form. */
.gform_wrapper .bits-form-callout {
	background: var(--wp--preset--color--grey);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	padding: 0.85rem 1rem;
}

.gform_wrapper .bits-form-callout a {
	color: #fff;
	text-decoration: underline;
}

/* Address autocomplete map preview inside the registration form. */
.bits-address-map {
	width: 100%;
	height: 220px;
	background: var(--wp--preset--color--off-white);
	border: 1px solid var(--wp--preset--color--border);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * The solid red treatment is the theme.json default (styles.elements.button),
 * which also owns the padding, the 2px border and the type metrics. The two
 * outline variations below change *only* colours, so every button is exactly
 * the same size — a solid and an outlined button sit level side by side, and
 * neither one resizes on hover because the border is always present.
 */

.wp-block-button.is-style-bits-outline-light > .wp-block-button__link,
.wp-block-button.is-style-bits-outline-red > .wp-block-button__link {
	background-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-bits-outline-light > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-bits-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-bits-outline-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-bits-outline-red > .wp-block-button__link {
	color: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
}

.wp-block-button.is-style-bits-outline-red > .wp-block-button__link:hover,
.wp-block-button.is-style-bits-outline-red > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--base);
}

/* The solid default keeps its border on hover too, so it cannot collapse. */
.wp-block-button:not([class*="is-style-bits-outline"]) > .wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ==========================================================================
   Home page panes
   ========================================================================== */

/* The first two panes fill the viewport; the "Our Story" strip sits between
   them and the cue inside it scrolls down to the second. */

/* Every band on the home page fills the viewport. */

.bits-pane {
	min-height: 100vh;
	min-height: 100svh;
	scroll-margin-top: 0;
}

.bits-pane:focus {
	outline: none;
}

/*
 * The hero holds its full height from the first paint, whether or not the
 * video — or the cover block's own stylesheet — has arrived. The film is laid
 * over the band rather than in it, so it can never add height when it loads
 * and push the next pane down. Until then the band shows the film's first
 * frame, so there is never an empty panel to look at.
 */
.bits-pane--hero {
	position: relative;
	overflow: hidden;
	background: #000 url("assets/video/hero-poster.jpg") center / cover no-repeat;
}

.bits-pane--hero > .wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.bits-pane--hero > .wp-block-cover__background {
	position: absolute;
	inset: 0;
}

.bits-pane--hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/*
 * Pause control for the background film (WCAG 2.2.2). Injected by home.js, so
 * it only exists where it can work. Sits bottom-right, clear of the scroll cue,
 * and is well over the 24px minimum target (2.5.8).
 */
.bits-hero-toggle {
	position: absolute;
	right: var(--wp--preset--spacing--40, 1.5rem);
	bottom: var(--wp--preset--spacing--40, 1.5rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	cursor: pointer;
}

.bits-hero-toggle:hover {
	background: #000;
}

.bits-hero-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.bits-hero-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Centre the content of the bands that are not covers. */

.bits-pane--about,
.bits-pane--story,
.bits-pane--movement {
	display: flex;
	align-items: center;
}

.bits-pane--about > *,
.bits-pane--story > *,
.bits-pane--movement > * {
	width: 100%;
}

/*
 * The scroll cue floats over the bottom of the hero rather than occupying a
 * band of its own, and nudges downward on hover.
 */

.bits-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 5rem;
	transform: translateX(-50%);
	z-index: 2;
	display: block;
	padding: 0.75rem 1.5rem;
	color: #fff;
	line-height: 0;
	transition: transform 0.25s ease;
	/*
	 * One nudge, once, after the hero has settled — enough to catch the eye and
	 * say the page continues below. No fill-mode, so it hands the transform back
	 * to the hover transition when it finishes.
	 */
	animation: bits-scroll-cue-wiggle 1.5s ease-in-out 1.4s 1;
}

@keyframes bits-scroll-cue-wiggle {
	0%,
	45%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	15% {
		transform: translateX(-50%) translateY(11px);
	}

	30% {
		transform: translateX(-50%) translateY(-3px);
	}

	60% {
		transform: translateX(-50%) translateY(7px);
	}

	80% {
		transform: translateX(-50%) translateY(-2px);
	}
}

.bits-scroll-cue:hover,
.bits-scroll-cue:focus-visible {
	color: #fff;
	transform: translateX(-50%) translateY(6px);
}

.bits-scroll-cue svg {
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
	.bits-scroll-cue {
		transition: none;
		animation: none;
	}

	.bits-scroll-cue:hover,
	.bits-scroll-cue:focus-visible {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   Home page header: over the hero, then pinned
   ========================================================================== */

/*
 * On the home page the header floats over the video hero rather than sitting
 * above it, so the film runs to the top of the window. Once the visitor
 * scrolls it pins itself to the top, takes a black background and loses a
 * little height — the same behaviour the current site has, and the reason the
 * hero has to start underneath rather than below.
 *
 * Only here: every other page keeps a header that is black from the start and
 * scrolls away with the content.
 */
.home .bits-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 0.25s ease;
}

/* A hairline over the film, as the current site has. */
.home .bits-header::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--40, 1.5rem);
	right: var(--wp--preset--spacing--40, 1.5rem);
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
	transition: opacity 0.25s ease;
}

.home .bits-header.is-pinned {
	position: fixed;
	background: var(--wp--preset--color--black);
}

/* The rule belongs to the transparent state; against black it is just a line. */
.home .bits-header.is-pinned::after {
	opacity: 0;
}

/* Losing height is what signals the change as much as the colour does. */
.home .bits-header.is-pinned .bits-menu__list--primary > li > a {
	padding-top: 0.8rem;
	padding-bottom: 0.65rem;
}

.home .bits-header.is-pinned .wp-block-site-logo img {
	max-height: 44px;
	width: auto;
}

.home .bits-header .wp-block-site-logo img,
.home .bits-header .bits-menu__list--primary > li > a {
	transition: max-height 0.25s ease, padding 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.home .bits-header,
	.home .bits-header::after,
	.home .bits-header .wp-block-site-logo img,
	.home .bits-header .bits-menu__list--primary > li > a {
		transition: none;
	}
}

/*
 * The sub-navigation follows the floating header on the home page.
 *
 * Everywhere else the header is in the flow and the red bar simply sits under
 * it. Here the header is lifted out, so the bar has to be placed against the
 * header's measured height — which nav.js publishes as --bits-header-height and
 * keeps current as the header shrinks on scroll and as the menu rewraps.
 */
.home .bits-section-nav {
	position: absolute;
	top: var(--bits-header-height, 63px);
	left: 0;
	right: 0;
	z-index: 99;
}

.bits-header-pinned .bits-section-nav {
	position: fixed;
}