/*
Theme Name: Carlito
Description: Child theme of Twenty Twenty-Five for Carlito Driving School.
Template: twentytwentyfive
Version: 1.0.0
Text Domain: carlito
*/

/* Machine translation can produce words longer than a phone screen (Dutch: "chauffeursopleidingsprogramma"). */
body {
	overflow-wrap: break-word;
}

/* theme.json cannot style focus on form fields, so one ring for everything focusable. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Core outlines everything focused, so a mouse click on the logo or a link drew a box. Keyboard users keep the ring above. */
.wp-site-blocks :focus:not(:focus-visible) {
	outline: none;
}

/* Core's 200px dropdown wraps "Inexperienced drivers" onto two lines. */
.wp-block-navigation__submenu-container {
	min-width: max-content !important;
}

/* The current page in the menu (aria-current comes from carlito_nav_current_page in functions.php). */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Trust-line check icons. */
.carlito-check {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

/* The logo image already shows the name, and its alt text carries it. */
.wp-block-site-logo + .wp-block-site-title {
	display: none;
}

/* Tighter gutters on small phones, site-wide so the header stays aligned with the content. */
@media (max-width: 399px) {
	html body {
		--wp--style--root--padding-right: 16px;
		--wp--style--root--padding-left: 16px;
	}
}

/* Task 5, closing CTA: a Primary focus ring is only 2.42:1 on Contrast, Base is 18.9:1. */
.has-contrast-background-color :focus-visible,
.has-contrast-background-color .wp-element-button:focus {
	outline-color: var(--wp--preset--color--base);
}

/* Task 4, "Which describes you?": each list row is one link with a title, a sub-line and an arrow. */
.carlito-situations {
	list-style: none;
	padding-left: 0;
	border-top: var(--wp--custom--line--strong);
}

.carlito-situations li {
	margin: 0;
	border-bottom: var(--wp--custom--line--soft);
}

.carlito-situations a {
	display: block;
	position: relative;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--20) 3rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.carlito-situations strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
}

.carlito-situations a::after {
	content: "\2192";
	content: "\2192" / "";
	position: absolute;
	top: 50%;
	inset-inline-end: var(--wp--preset--spacing--20);
	transform: translateY(-50%);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
}

/* The arrow points the way the text reads. */
.translated-rtl .carlito-situations a::after {
	content: "\2190";
	content: "\2190" / "";
}

.carlito-situations a:hover,
.carlito-situations a:focus-visible {
	background-color: var(--wp--preset--color--surface);
}

.carlito-situations a:hover strong,
.carlito-situations a:focus-visible strong {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.carlito-situations a:hover::after,
.carlito-situations a:focus-visible::after {
	transform: translate(0.25rem, -50%);
}

/* Task 9, Contact Form 7 on /contact-us/: labels above full-width fields, submit looks like the primary button. */
.wpcf7-form br {
	display: none;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.wpcf7-form input:not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 6px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wpcf7-form .carlito-form-note {
	margin-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form .wpcf7-submit {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* CF7's red tip is only colour; bold dark text plus a thicker border makes the error clear without it. */
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
	border-width: 2px;
	border-color: var(--wp--preset--color--contrast);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wpcf7 .wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.75rem 1rem;
}

/* Part A, calls to action: the phone-only quick contact bar (end of patterns/footer.php) and the tablet header. */
.carlito-contact-bar {
	display: none;
}

/* WhatsApp: round logo button next to the booking button (hero, closing section) and the fixed round button on every page. A deeper green than the brand's, because white on the brand green is only 2:1; this one is 4.7:1. */
/* font-size 0 hides the word "WhatsApp" on screen; screen readers still read it as the button's name. */
.carlito-whatsapp .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	background-color: var(--wp--custom--whatsapp--base);
	color: var(--wp--preset--color--base);
	font-size: 0;
}

.carlito-whatsapp .wp-block-button__link:hover {
	background-color: var(--wp--custom--whatsapp--hover);
	color: var(--wp--preset--color--base);
}

.carlito-whatsapp .wp-block-button__link::before,
.carlito-whatsapp-float::before {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	background-color: currentColor;
	mask: url("assets/images/whatsapp.svg") center / contain no-repeat;
}

.carlito-whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 11;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--wp--custom--whatsapp--base);
	color: var(--wp--preset--color--base);
	font-size: 26px;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	transition: transform 0.15s;
}

.carlito-whatsapp-float:hover {
	background-color: var(--wp--custom--whatsapp--hover);
	transform: scale(1.06);
}

@media (max-width: 599px) {
	/* 61px = 0.5rem + 44px button + 0.5rem + 1px border, so the bar never covers the footer's last line. */
	body {
		padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px));
	}

	/* Keeps a focused element or anchor target from scrolling in under the bar (WCAG 2.4.11). */
	html {
		scroll-padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px));
	}

	.carlito-contact-bar {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 0.5rem 76px calc(0.5rem + env(safe-area-inset-bottom, 0px)) 16px; /* 76px keeps the round WhatsApp button free. */
		border-top: var(--wp--custom--line--soft);
	}

	.carlito-contact-bar .wp-block-buttons {
		gap: 0.5rem;
	}

	.carlito-contact-bar .wp-block-button {
		flex: 1 1 0;
	}

	.carlito-contact-bar .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0.5rem;
		font-size: var(--wp--preset--font-size--medium);
		white-space: nowrap;
	}

	/* The contact page already has the form; its body class is only page-id-N, which differs between local and live. */
	body:has(.wpcf7-form) {
		padding-bottom: 0;
	}

	html:has(.wpcf7-form) {
		scroll-padding-bottom: 0;
	}

	body:has(.wpcf7-form) .carlito-contact-bar {
		display: none;
	}

	/* Sits inside the bottom bar, next to the booking button. */
	.carlito-whatsapp-float {
		right: 16px;
		bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		width: 48px;
		height: 48px;
	}

	body:has(.wpcf7-form) .carlito-whatsapp-float {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

/* 600-899px: the full menu no longer fits next to the logo, so keep the overlay menu button. Overrides core navigation/style.css (min-width: 600px). */
@media (min-width: 600px) and (max-width: 899px) {
	header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* Open phone menu: core pads the submenu by 2rem on both sides, which pushed the Driving lessons sub-items in from the right edge. Same selector as core's, plus the header, so it wins. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-right: 0;
}

/* Open phone menu, design 3 (chosen 2026-11-03): two groups under small blue labels. "Driving lessons" (still a link) is the first label; "More" is the second. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	gap: 0.75rem;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	padding-top: 0.75rem;
}

/* Core pads submenu links top and bottom, which spread the lesson types further apart than the other links. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-top: 0;
	padding-bottom: 0;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .carlito-menu-label {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Added by carlito_menu_more_label in functions.php; only the open phone menu shows it. */
.carlito-menu-label {
	display: none;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .carlito-menu-label {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}


/* Part A, new homepage sections: numbered steps (How it works), package price rows (Packages) and FAQ rows. */
.carlito-steps li {
	color: var(--wp--preset--color--muted);
}

.carlito-steps li + li {
	margin-top: var(--wp--preset--spacing--30);
}

.carlito-steps strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
}

.carlito-price-list {
	list-style: none;
	padding-left: 0;
	border-top: var(--wp--custom--line--strong);
	font-size: var(--wp--preset--font-size--large);
}

.carlito-price-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: var(--wp--custom--line--soft);
}

/* Each package row is one link to the form with that package chosen: the link's ::after covers the whole row. */
.carlito-price-list li {
	position: relative;
	padding-inline: var(--wp--preset--spacing--20);
}

.carlito-price-list a {
	color: inherit;
	text-decoration: none;
}

.carlito-price-list a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.carlito-price-list strong::after {
	content: " \2192";
	content: " \2192" / "";
	color: var(--wp--preset--color--primary);
}

.carlito-price-list li:hover,
.carlito-price-list li:has(a:focus-visible) {
	background-color: var(--wp--preset--color--surface);
}

.carlito-price-list li:hover a,
.carlito-price-list a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Footer quick links: core sets them about 25px tall; 0.5rem above and below makes a 40px+ tap target with the gap folded in. */
footer.wp-block-template-part .wp-block-navigation {
	gap: 0;
}

footer.wp-block-template-part .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.5rem;
}

.carlito-faq .wp-block-details {
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: var(--wp--custom--line--soft);
}

.carlito-faq h2 + .wp-block-details {
	border-top: var(--wp--custom--line--strong);
}

.carlito-faq summary {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	cursor: pointer;
}

.carlito-faq .wp-block-details p {
	max-width: 70ch;
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

/* Editorial look (direction 3, chosen 2026-11-03): white page, big type, thin lines, rounded photos. Lines and corners come from settings.custom in theme.json; docs/style-variants.md keeps the earlier styles. */
header.wp-block-template-part {
	border-bottom: var(--wp--custom--line--soft);
}

.carlito-hero h1 {
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	line-height: 1;
}

/* Small label above the photo filmstrip. */
.carlito-eyebrow {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
}

/* Thin lines around the trust facts instead of a grey band. */
.carlito-trust p {
	font-size: var(--wp--preset--font-size--medium);
}

.carlito-trust {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: var(--wp--custom--line--soft);
	border-bottom: var(--wp--custom--line--soft);
}

.carlito-cta {
	border-top: var(--wp--custom--line--soft);
}

.wp-block-image img {
	border-radius: 12px;
}

/* Tables: thin row lines instead of a box around every cell. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: var(--wp--custom--line--soft);
	padding: 0.75rem 1rem 0.75rem 0;
}

/* Translated column headings are wider; less space between columns keeps the table inside the page on phones. */
@media (max-width: 599px) {
	.wp-block-table th,
	.wp-block-table td {
		padding-right: 0.5rem;
	}
}

.wp-block-table th:not([class*="has-text-align"]) {
	text-align: left;
}

.wp-block-table thead {
	border-bottom: var(--wp--custom--line--strong);
}

.wp-block-group.has-surface-background-color:not(.alignfull),
.wp-block-group.has-contrast-background-color:not(.alignfull) {
	border-radius: 16px;
}

.carlito-steps {
	list-style: none;
	padding-left: 0;
	counter-reset: carlito-step;
}

.carlito-steps li {
	counter-increment: carlito-step;
	position: relative;
	min-height: 3rem;
	padding-inline-start: 5rem;
}

.carlito-steps li::before {
	content: counter(carlito-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

@media (min-width: 782px) {
	/* Situations and package prices: two columns of rows with thin lines. */
	.carlito-situations,
	.carlito-price-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--60);
	}
}

/* "Recommended" pill on its own line above "18 hours"; ::before is an empty full-width break and order -1 puts the pill in front of it. */
.carlito-badge {
	order: -1;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.carlito-price-list li.is-advised::before {
	content: "";
	flex-basis: 100%;
}

/* Carousel (photo slideshow): a scroll-snap strip; assets/js/carousel.js adds the dots underneath. */
.carlito-carousel {
	--carlito-slide: 70%;
	/* Arabic (via the language switcher) makes the page right-to-left, which turns scrollLeft negative and breaks carousel.js; photos have no reading direction. */
	direction: ltr;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

/* The dots show the position, so no scrollbar. */
.carlito-carousel::-webkit-scrollbar {
	display: none;
}

.carlito-carousel > * {
	flex: 0 0 var(--carlito-slide);
	margin: 0;
	scroll-snap-align: start;
}

/* The slideshow is an edge-to-edge filmstrip; the side padding lines the first photo up with the hero, 1340px wide. */
.carlito-slideshow {
	--carlito-slide: clamp(200px, 62vw, 320px);
	/* Padding percentages are relative to the section's inner width, which already excludes the root padding. */
	--carlito-edge: calc(var(--wp--style--root--padding-left) + max(0px, (100% - 1340px) / 2));
	padding-right: var(--carlito-edge);
	padding-left: var(--carlito-edge);
	scroll-padding-inline: var(--carlito-edge);
}

.carlito-slideshow img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 12px;
}

/* Dots under the slideshow (added by assets/js/carousel.js): each button is 24px for an easy tap, the visible dot is 8px. */
.carlito-dots {
	direction: ltr;
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-top: var(--wp--preset--spacing--20);
}

.carlito-dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.carlito-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	transition: background-color 0.2s, transform 0.2s;
}

.carlito-dot[aria-current="true"]::before {
	background-color: var(--wp--preset--color--primary);
	transform: scale(1.25);
}

/* Homepage (no-title template): every section on one 1340px column, in line with the logo. */
.page-template-page-no-title main {
	--wp--style--global--content-size: 1340px;
}

/* Inner pages: wider, with the text sections in two columns so pages get shorter. Lines stay readable at about half the width. */
.page-template-default main {
	--wp--style--global--content-size: 1200px;
}

.carlito-section {
	break-inside: avoid;
}

.carlito-section > :first-child {
	margin-top: 0;
}

.carlito-section + .carlito-section {
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.carlito-sections {
		columns: 2;
		column-gap: var(--wp--preset--spacing--60);
	}
}

/* Language switcher (GTranslate) in the header: a thin pill with a globe and the language code, no flags. The list opens over the page instead of pushing the header down. */
.carlito-lang .gt_float_switcher {
	position: relative;
	overflow: visible;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.carlito-lang .gt_float_switcher img {
	display: none;
}

.carlito-lang .gt_float_switcher .gt-selected {
	background: none;
}

.carlito-lang .gt_float_switcher .gt-selected .gt-current-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.5rem 0.3rem 0.6rem;
	border: var(--wp--custom--line--strong);
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s;
}

.carlito-lang .gt_float_switcher .gt-selected .gt-current-lang:hover {
	background-color: var(--wp--preset--color--surface);
}

.carlito-lang .gt-current-lang::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	mask: url("assets/images/globe.svg") center / contain no-repeat;
}

.carlito-lang .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
	top: 0;
}

/* The plugin's arrow points up when closed; this list opens downwards, so it is the other way round. */
.carlito-lang .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
	height: 16px;
	transform: rotate(0deg);
}

.carlito-lang .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.gt_arrow_rotate {
	transform: rotate(180deg);
}

.carlito-lang .gt_float_switcher .gt_options {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 180px;
	max-height: none;
	margin-top: 0.5rem;
	padding: 0.35rem;
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	transform: translateY(-6px);
	transition: opacity 0.15s, transform 0.15s;
}

.carlito-lang .gt_float_switcher .gt_options.gt-open {
	transform: none;
}

/* Arabic puts the switcher on the left, so the list has to open towards the page instead of past the screen edge. */
.translated-rtl .carlito-lang .gt_float_switcher .gt_options {
	right: auto;
	left: 0;
}

.carlito-lang .gt_float_switcher .gt_options:not(.gt-open) {
	visibility: hidden;
}

.carlito-lang .gt_float_switcher .gt_options a {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	transition: none;
}

.carlito-lang .gt_float_switcher .gt_options a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* Translated menu labels are longer than the English ones; this keeps the full menu on one row where it is tight. English doesn't need it. */
@media (min-width: 900px) and (max-width: 1299px) {
	:is(.translated-ltr, .translated-rtl) header.wp-block-template-part .wp-block-site-logo {
		width: 130px;
	}

	:is(.translated-ltr, .translated-rtl) header.wp-block-template-part .wp-block-navigation {
		font-size: 0.875rem;
	}

	:is(.translated-ltr, .translated-rtl) header.wp-block-template-part .wp-block-navigation__container {
		gap: 0.75rem;
	}
}

/* Up to 899px the menu is the button: keep it at the far right, with the switcher to its left. */
@media (max-width: 899px) {
	.carlito-lang {
		order: -1;
	}
}

/* Logo, switcher and menu button share one row; the logo gives way on narrow phones. */
@media (max-width: 439px) {
	header.wp-block-template-part .wp-block-site-logo {
		width: min(150px, 42vw);
	}
}

/* Arabic: core's "justify right" becomes left on a right-to-left page, so the open phone menu needs the opposite value to stay on the right. */
.translated-rtl header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.translated-rtl header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.translated-rtl header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.translated-rtl header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	align-items: flex-start;
}