/* Rota — phone menu and the information card (framework 1.6.2). */

/* The information bar moves into the menu on phones. */
@media (max-width: 599px) {
	body.rota-ui:has(.rota-nav-card) .rota-topbar {
		display: none !important;
	}
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .rota-nav-card {
	display: none !important;
}

/* A blurred or transformed sticky header would trap the full-screen menu. */
html.has-modal-open body.rota-ui header,
html.has-modal-open body.rota-ui header .wp-block-group {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
	filter: none !important;
}

/* Menu panel */
body.rota-ui .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base, #fff) !important;
	color: var(--wp--preset--color--contrast, #111) !important;
	padding: 16px 20px calc(28px + env(safe-area-inset-bottom)) !important;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 52px !important;
	gap: 0 !important;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: inherit;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100%;
	font-size: 1.0625rem !important;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	align-items: stretch !important;
	border-bottom: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.1));
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 2px !important;
	color: inherit !important;
	font-weight: 600;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left;
	text-decoration: none;
	line-height: 1.35;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	outline-offset: -2px;
	border-radius: 8px;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary, inherit) !important;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 8px 14px !important;
	gap: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 2px !important;
	font-weight: 400;
}

body.rota-ui .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Information card */
body.rota-ui .rota-nav-card {
	margin: 24px 0 0 !important;
	padding: 16px 18px !important;
	border-radius: 16px;
	width: 100%;
	max-width: none !important;
	box-sizing: border-box;
	font-size: 0.9375rem !important;
	line-height: 1.5;
	text-align: left;
	position: static !important;
}

body.rota-ui .rota-nav-card:not(.has-background) {
	background: var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.1));
}

body.rota-ui .rota-nav-card > *,
body.rota-ui .rota-nav-card .alignwide,
body.rota-ui .rota-nav-card .alignfull {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}

/* Everything stacks: one fact per line. */
body.rota-ui .rota-nav-card .is-layout-flex,
body.rota-ui .rota-nav-card ul,
body.rota-ui .rota-nav-card ol,
body.rota-ui .rota-nav-card > *,
body.rota-ui .rota-nav-card [class*="-bar"],
body.rota-ui .rota-nav-card [class*="topbar"],
body.rota-ui .rota-nav-card [class*="-info"] {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	height: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}

body.rota-ui .rota-nav-card ul,
body.rota-ui .rota-nav-card ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Bars hide some facts on small screens; the card has room for all of them. */
body.rota-ui .rota-nav-card :is(div, ul, ol):not(.screen-reader-text):not([hidden]) {
	display: flex !important;
	flex-direction: column;
}

body.rota-ui .rota-nav-card p:not(.screen-reader-text):not([hidden]) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.rota-ui .rota-nav-card a:not(.wp-element-button) {
	color: inherit !important;
}

body.rota-ui .rota-nav-card li:not(.screen-reader-text):not([hidden]) {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

body.rota-ui .rota-nav-card :is(a, span, time, strong):not(.screen-reader-text):not([hidden]):not([aria-hidden="true"]) {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}

body.rota-ui .rota-nav-card li,
body.rota-ui .rota-nav-card p,
body.rota-ui .rota-nav-card a,
body.rota-ui .rota-nav-card span {
	white-space: normal !important;
	margin: 0;
}

body.rota-ui .rota-nav-card * {
	max-width: 100%;
	animation: none !important;
}

body.rota-ui .rota-nav-card [hidden],
body.rota-ui .rota-nav-card .screen-reader-text {
	display: none;
}

/* Icons stay in a row. */
body.rota-ui .rota-nav-card .wp-block-social-links,
body.rota-ui .rota-nav-card [class*="social"] {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
}

body.rota-ui .rota-nav-card a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
}

body.rota-ui .rota-nav-card li[class] {
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
}