/*
Theme Name: The Websailing Regatta
Theme URI: https://websailing.dev/
Author: Timo Werlich - Websailing
Author URI: https://www.websailing.de/
Author Email: info@websailing.de
Description: Produktionsreifes Full Site Editing Theme mit Fokus auf Barrierefreiheit, Performance und saubere Architektur.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-websailing-regatta
Tags: full-site-editing, accessibility-ready, block-styles
*/

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--accent);
	outline-offset: 0.125rem;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	transform: translateY(-120%);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

:root {
	--wsr-container-max: var(--wp--style--global--content-size, 80rem);
	--wsr-wide-max: var(--wp--style--global--wide-size, 100rem);
	--wsr-container-padding: 2rem;
}

.wp-block-columns {
	--wsr-columns-current-width: min(100%, var(--wsr-container-max));
	--wsr-columns-gutter: max(0rem, calc((100% - var(--wsr-columns-current-width)) / 2));
	--wsr-columns-target-indent: max(0rem, calc((var(--wsr-wide-max) - var(--wsr-container-max)) / 2));
	--wsr-columns-indent: min(var(--wsr-columns-target-indent), var(--wsr-columns-gutter));
}

.wp-block-columns.alignwide {
	--wsr-columns-current-width: min(100%, var(--wsr-wide-max));
}

.wp-block-columns.alignfull,
.wp-block-columns.is-style-wsr-full-width {
	--wsr-columns-current-width: 100vw;
	--wsr-columns-gutter: 0rem;
	--wsr-columns-indent: var(--wsr-columns-target-indent);
}

.wsr-container {
	width: min(calc(100% - (var(--wsr-container-padding) * 2)), var(--wsr-container-max));
	margin-inline: auto;
}

main.wsr-main > *:not(.alignfull) {
	width: min(calc(100% - (var(--wsr-container-padding) * 2)), var(--wsr-container-max));
	margin-inline: auto;
}

main.wsr-main > .alignwide {
	width: min(calc(100% - (var(--wsr-container-padding) * 2)), var(--wsr-wide-max));
	margin-inline: auto;
}

/* Keep explicit full-width blocks possible inside constrained areas. */
.wsr-container .alignfull,
main.wsr-main .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wp-block-columns.alignfull,
.wp-block-columns.is-style-wsr-full-width {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.wp-block-columns.alignwide {
	width: min(calc(100% - (var(--wsr-container-padding) * 2)), var(--wsr-wide-max)) !important;
	max-width: var(--wsr-wide-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-columns.wsr-indent-left {
	width: calc(var(--wsr-columns-current-width) - var(--wsr-columns-indent)) !important;
	max-width: none !important;
	margin-left: calc(var(--wsr-columns-gutter) + var(--wsr-columns-indent)) !important;
	margin-right: var(--wsr-columns-gutter) !important;
}

.wp-block-columns.wsr-indent-right {
	width: calc(var(--wsr-columns-current-width) - var(--wsr-columns-indent)) !important;
	max-width: none !important;
	margin-left: var(--wsr-columns-gutter) !important;
	margin-right: calc(var(--wsr-columns-gutter) + var(--wsr-columns-indent)) !important;
}

.wp-block-columns.wsr-indent-left.wsr-indent-right {
	width: calc(var(--wsr-columns-current-width) - (var(--wsr-columns-indent) * 2)) !important;
	max-width: none !important;
	margin-left: calc(var(--wsr-columns-gutter) + var(--wsr-columns-indent)) !important;
	margin-right: calc(var(--wsr-columns-gutter) + var(--wsr-columns-indent)) !important;
}

/* Full-width columns with active indent toggles keep viewport breakout and subtract side indents. */
.wp-block-columns.alignfull.wsr-indent-left,
.wp-block-columns.is-style-wsr-full-width.wsr-indent-left {
	width: calc(100vw - var(--wsr-columns-indent)) !important;
	max-width: none !important;
	margin-left: calc((50% - 50vw) + var(--wsr-columns-indent)) !important;
	margin-right: calc(50% - 50vw) !important;
}

.wp-block-columns.alignfull.wsr-indent-right,
.wp-block-columns.is-style-wsr-full-width.wsr-indent-right {
	width: calc(100vw - var(--wsr-columns-indent)) !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc((50% - 50vw) + var(--wsr-columns-indent)) !important;
}

.wp-block-columns.alignfull.wsr-indent-left.wsr-indent-right,
.wp-block-columns.is-style-wsr-full-width.wsr-indent-left.wsr-indent-right {
	width: calc(100vw - (var(--wsr-columns-indent) * 2)) !important;
	max-width: none !important;
	margin-left: calc((50% - 50vw) + var(--wsr-columns-indent)) !important;
	margin-right: calc((50% - 50vw) + var(--wsr-columns-indent)) !important;
}

/* Keep nested standard columns inside full-width columns constrained to their wrapper. */
.wp-block-columns.alignfull .wp-block-columns:not(.alignfull):not(.alignwide):not(.wsr-indent-left):not(.wsr-indent-right),
.wp-block-columns.is-style-wsr-full-width .wp-block-columns:not(.alignfull):not(.alignwide):not(.wsr-indent-left):not(.wsr-indent-right) {
	width: var(--wsr-columns-current-width) !important;
	max-width: var(--wsr-columns-current-width) !important;
	margin-left: var(--wsr-columns-gutter) !important;
	margin-right: var(--wsr-columns-gutter) !important;
}

.wsr-header-container {
	gap: 1rem;
}

.wsr-footer-container {
	gap: 0.75rem;
}

/* Columns blocks must not add inner padding. */
.wp-block-columns,
.wp-block-columns.has-background,
.wp-block-column,
.wp-block-column.has-background {
	padding: 0;
}

/* Tablet breakpoint: <= 1024px (64rem). */
@media (max-width: 64rem) {
	:root {
		--wsr-container-padding: 1.5rem;
	}

	.wsr-header-container {
		flex-wrap: wrap;
	}
}

/* Mobile breakpoint: <= 768px (48rem). */
@media (max-width: 48rem) {
	:root {
		--wsr-container-padding: 1rem;
	}

	.wsr-header-container {
		justify-content: flex-start;
	}

	.wsr-header-container .wp-block-navigation {
		width: 100%;
	}

	.wsr-footer-container {
		justify-content: flex-start;
	}
}