/*
 * Shop and legal pages in the look of the start page: the purple-to-green background with the
 * wordmark on it, and the content on a white panel, because forms and tables need it to stay
 * readable. Colours, fonts and sizes live in the variables below.
 */

:root {
	--color-purple: #9999ff;
	--color-green: #9cff8d;
	--color-panel: #fff;
	--color-text: #1e1e1e;
	--color-muted: #5a5a5a;
	--color-border: #d6d6d6;
	--color-error: #b32d2e;
	--color-success: #00703c;

	--color-field: #f6f6ff;
	--color-field-border: #cfcfe6;
	--color-field-hover: #a9a9e8;
	--color-focus-ring: rgba(153, 153, 255, 0.4);

	--font-base: "tt-commons-pro", system-ui, sans-serif;
	--font-display: "owners-xxwide", "tt-commons-pro", sans-serif;
	--font-size-base: 1.0625rem;
	--line-height-base: 1.5;

	--max-width: 1200px;
	--padding-side: 1rem;
	--radius: 1.25rem;
	--radius-small: 0.5rem;
}

@media (max-width: 768px) {
	:root {
		--padding-side: 0.75rem;
	}
}

/* html gets the background of body too, so pulling the page beyond its end (iOS, macOS) or a
   short page shows the gradient, not white. */
html,
body {
	background: var(--color-purple) url("/background.png") center top repeat-y;
	background-size: 100%;
}

@media (max-width: 768px) {
	html,
	body {
		background-size: 150%;
	}
}

@media (max-width: 480px) {
	html,
	body {
		background-size: 175%;
	}
}

body {
	/* Maia (ticket plugin) reads these; set on body so they win over Maia's :root defaults. */
	--maia-border: var(--color-border);
	--maia-muted: var(--color-muted);
	--maia-error: var(--color-error);
	--maia-success: var(--color-success);
	--maia-accent: var(--color-purple);

	margin: 0;
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-main {
	box-sizing: border-box;
	max-width: var(--max-width);
	margin: 0 auto;
}

.site-main a {
	color: inherit;
}

/* Header and footer: layout.css */

/* Content on a white panel */

.site-main {
	display: flow-root;
	margin-top: 2rem !important; /* room below the header (layout.css) */ /* grows around floated content, e.g. WooCommerce's product columns */
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	background: var(--color-panel);
}

@media (max-width: 1232px) {
	.site-main {
		margin-right: var(--padding-side);
		margin-left: var(--padding-side);
	}
}

.entry-title,
.product_title {
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	/* Long German words in the wide display font: hyphenate first, break anywhere only as a
	   last resort. */
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4; /* long words only, so "Sabine" stays whole */
	overflow-wrap: anywhere;
}

/* Ticket detail page: tickets have no images, so no placeholder; the text takes the width. */

body.single-product div.product .woocommerce-product-gallery--without-images {
	display: none;
}

body.single-product div.product .woocommerce-product-gallery--without-images + .summary {
	float: none;
	width: auto;
}

/* Readable line length for the text; the title may use the full width, so long words like
   "Schlossbergrestaurant" are not hyphenated on desktop. */
body.single-product div.product .summary > :not(.product_title) {
	max-width: 46rem;
}

body.single-product .product_title {
	margin-bottom: 2.5rem;
	font-size: clamp(1.375rem, 4vw, 2.5rem);
}

body.single-product div.product .stock.in-stock {
	color: var(--color-muted);
}

/* Label centred on the select: aligned to the top and pushed down by half the height difference,
   because on phones the hidden "Zurücksetzen" link wraps below the select and makes the cell
   taller, which would throw off vertical-align: middle. */
body.single-product div.product form.cart .variations :is(th, td) {
	vertical-align: top;
}

body.single-product div.product form.cart .variations th {
	padding-top: calc((2.875rem - 1.25em) / 2);
	width: 1%; /* as narrow as the word */
	padding-right: 1em;
	line-height: 1.25;
	text-align: left;
	white-space: nowrap;
}

body.single-product div.product form.cart .variations label {
	margin: 0;
	line-height: 1.25;
}

/* Quantity and "In den Warenkorb" in one row of equal height */
body.single-product div.product form.cart:not(.variations_form),
body.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

/* WooCommerce's clearfix pseudo-elements would be flex items and push the field to the right. */
body.single-product div.product form.cart:not(.variations_form)::before,
body.single-product div.product form.cart:not(.variations_form)::after,
body.single-product div.product .woocommerce-variation-add-to-cart::before,
body.single-product div.product .woocommerce-variation-add-to-cart::after {
	content: none;
}

/* Room between the description and the order controls */
body.single-product div.product form.cart {
	margin-top: 2rem;
}

body.single-product div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

body.single-product div.product form.cart div.quantity .qty {
	width: 4.5em;
	height: 100%;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.single-product div.product form.cart div.quantity .qty::-webkit-inner-spin-button,
body.single-product div.product form.cart div.quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

body.single-product div.product :is(p.price, span.price) {
	color: var(--color-text);
	font-size: 1.25em;
	font-weight: 600;
}

/* The price above quantity and button, with the same room above and below it */
body.single-product div.product .summary > p.price {
	margin: 2rem 0;
}

body.single-product div.product .summary > p.price + form.cart {
	margin-top: 0;
}

body.single-product div.product form.cart .variations {
	margin-bottom: 2rem;
}

body.single-product div.product .woocommerce-variation-price {
	margin-bottom: 2rem;
	line-height: var(--line-height-base);
}

/* Step indicator (Tickets, Teilnehmende, Bezahlen): links without underline, darker on hover */
body .site-main .maia-steps a {
	text-decoration: none;
	transition: color 0.15s;
}

body .site-main .maia-steps a:hover {
	color: var(--color-text);
}

/* Buttons and notices in the colours of the start page */

:is(body.woocommerce, body .woocommerce) a.button,
:is(body.woocommerce, body .woocommerce) button.button,
:is(body.woocommerce, body .woocommerce) input.button {
	border-radius: var(--radius-small);
	padding: 0.8em 1.25em;
	line-height: 1.25;
	background: #efefff;
	color: var(--color-text);
	font-weight: 500;
}

:is(body.woocommerce, body .woocommerce) a.button:hover,
:is(body.woocommerce, body .woocommerce) button.button:hover,
:is(body.woocommerce, body .woocommerce) input.button:hover {
	background: #e0e0ff;
	color: var(--color-text);
}

:is(body.woocommerce, body .woocommerce) a.button.alt,
:is(body.woocommerce, body .woocommerce) button.button.alt,
:is(body.woocommerce, body .woocommerce) input.button.alt {
	background: var(--color-purple);
	color: #000;
}

:is(body.woocommerce, body .woocommerce) a.button.alt:hover,
:is(body.woocommerce, body .woocommerce) button.button.alt:hover,
:is(body.woocommerce, body .woocommerce) input.button.alt:hover {
	background: var(--color-green);
	color: #000;
}

/* Disabled (e.g. "In den Warenkorb" before a category is chosen): the light purple, no hover. */
:is(body.woocommerce, body .woocommerce) :is(a, button, input).button.alt:is(.disabled, :disabled),
:is(body.woocommerce, body .woocommerce) :is(a, button, input).button.alt:is(.disabled, :disabled):hover {
	background: var(--color-purple);
	color: #000;
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Notices: softly tinted, rounded areas without lines; the tint and the symbol tell the kind
 * (error red, success green, info purple, hint amber). Maia's own boxes look the same.
 */
:is(body.woocommerce, body .woocommerce) :is(.woocommerce-error, .woocommerce-info, .woocommerce-message),
body .site-main :is(.maia-notice, .maia-attendee-warning, .maia-transfer-deadline, .maia-thankyou-proof) {
	border: 0;
	border-radius: 0.75rem;
	background: #f0f0ff;
	color: var(--color-text);
	line-height: 1.5;
}

:is(body.woocommerce, body .woocommerce) :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem 1rem 3.25rem;
}

:is(body.woocommerce, body .woocommerce) :is(.woocommerce-error, .woocommerce-info, .woocommerce-message)::before {
	top: 1.05rem;
	left: 1.25rem;
}

:is(body.woocommerce, body .woocommerce) .woocommerce-error,
body .site-main .maia-notice--error {
	background: #fff0f0;
}

:is(body.woocommerce, body .woocommerce) .woocommerce-error::before {
	color: var(--color-error);
}

:is(body.woocommerce, body .woocommerce) .woocommerce-message,
body .site-main .maia-notice--success {
	background: #e9ffe5;
}

:is(body.woocommerce, body .woocommerce) .woocommerce-message::before {
	color: var(--color-success);
}

:is(body.woocommerce, body .woocommerce) .woocommerce-info::before {
	color: #6b6bd9;
}

body .site-main :is(.maia-attendee-warning, .maia-transfer-deadline, .maia-thankyou-proof) {
	background: #fff5e0;
}

/* Several points in one notice (Maia's list of incomplete tickets, or WooCommerce's list of
   errors): each point separated by a thin line. */
:is(body.woocommerce, body .woocommerce) :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) > li + li,
:is(body.woocommerce, body .woocommerce) .maia-notice-list > li {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(30, 30, 30, 0.12);
}

:is(body.woocommerce, body .woocommerce) .maia-notice-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .site-main .maia-attendee-warning:empty {
	display: none;
}

/* Maia's boxes get the same symbol column as WooCommerce's notices (WooCommerce's icon font). */
body .site-main :is(.maia-notice, .maia-attendee-warning, .maia-transfer-deadline, .maia-thankyou-proof) {
	position: relative;
	padding: 1rem 1.25rem 1rem 3.25rem;
}

body .site-main :is(.maia-notice, .maia-attendee-warning, .maia-transfer-deadline, .maia-thankyou-proof)::before {
	position: absolute;
	top: 1.05rem;
	left: 1.25rem;
	color: #6b6bd9;
	font-family: WooCommerce;
	content: "\e028" / "";
}

body .site-main :is(.maia-attendee-warning, .maia-transfer-deadline, .maia-thankyou-proof)::before {
	color: var(--maia-warning, #b26200);
	content: "\e016" / "";
}

body .site-main .maia-notice--success::before {
	color: var(--color-success);
	content: "\e015" / "";
}

body .site-main .maia-notice--error::before {
	color: var(--color-error);
	content: "\e016" / "";
}

body.woocommerce-checkout #payment {
	border-radius: var(--radius-small);
	background: #f3f3ff;
}

body.woocommerce-checkout #payment div.payment_box {
	background: #e6e6ff;
}

body.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #e6e6ff;
}

/*
 * Form fields: light lavender fields with the purple of the start page as focus colour. The
 * WooCommerce selectors are listed next to the general ones because WooCommerce's own rules are
 * more specific.
 */

body .site-main :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), select, textarea),
body .woocommerce form .form-row :is(.input-text, select),
body.woocommerce-cart table.cart td.actions .coupon .input-text {
	box-sizing: border-box;
	min-height: 2.875rem;
	margin: 0;
	padding: 0.75em 1em;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-small);
	outline: none;
	background-color: var(--color-field);
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

body .site-main :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), select, textarea):hover,
body .woocommerce form .form-row :is(.input-text, select):hover,
body.woocommerce-cart table.cart td.actions .coupon .input-text:hover {
	border-color: var(--color-field-hover);
}

body .site-main :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), select, textarea):focus,
body .woocommerce form .form-row :is(.input-text, select):focus,
body.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: var(--color-purple);
	background-color: #fff;
	box-shadow: 0 0 0 4px var(--color-focus-ring);
}

body .site-main ::placeholder {
	color: var(--color-muted);
	opacity: 0.7;
}

body .site-main textarea {
	min-height: 6em;
	resize: vertical;
}

/* Select: own arrow instead of the browser's (:not() lifts it above the field rule) */
body .site-main select:not([multiple]),
body .woocommerce form .form-row select:not([multiple]) {
	padding-right: 2.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231e1e1e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 1em center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	cursor: pointer;
	appearance: none;
}

/* Errors */
body .site-main .maia-field--invalid input,
body .woocommerce form .form-row.woocommerce-invalid :is(.input-text, select) {
	border-color: var(--color-error);
	background-color: #fff7f7;
}

body .site-main .maia-field--invalid input:focus,
body .woocommerce form .form-row.woocommerce-invalid :is(.input-text, select):focus {
	box-shadow: 0 0 0 4px rgba(179, 45, 46, 0.18);
}

/* Checkboxes and radio buttons */
body .site-main :is(input[type="checkbox"], input[type="radio"]),
body .woocommerce form .form-row .input-checkbox {
	box-sizing: border-box;
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin: 0 0.5em 0 0;
	border: 1.5px solid var(--color-field-hover);
	border-radius: 0.375em;
	background: #fff center / 75% no-repeat;
	vertical-align: -0.25em;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

body .site-main input[type="radio"] {
	border-radius: 50%;
}

body .site-main :is(input[type="checkbox"], input[type="radio"]):hover {
	border-color: var(--color-purple);
}

body .site-main :is(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--color-focus-ring);
}

body .site-main input[type="checkbox"]:checked {
	border-color: var(--color-purple);
	background-color: var(--color-purple);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .site-main input[type="radio"]:checked {
	border-color: var(--color-purple);
	background-color: var(--color-purple);
	box-shadow: inset 0 0 0 0.2em #fff;
}

body .site-main input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 0.2em #fff, 0 0 0 4px var(--color-focus-ring);
}

/* File upload (proof of studies) */
body .site-main input[type="file"] {
	max-width: 100%;
	font-family: inherit;
	font-size: 1rem;
}

body .site-main input[type="file"]::file-selector-button {
	margin-right: 0.75em;
	padding: 0.7em 1.1em;
	border: 0;
	border-radius: var(--radius-small);
	background: #efefff;
	color: var(--color-text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s;
}

body .site-main input[type="file"]::file-selector-button:hover {
	background: #e0e0ff;
}

/* Ticket count: one pill with minus, number and plus */
.maia-js body .site-main .maia-qty {
	gap: 0;
	padding: 0.2em;
	border: 1px solid var(--color-field-border);
	border-radius: 999px;
	background: var(--color-field);
}

.maia-js body .site-main .maia-qty:focus-within {
	border-color: var(--color-purple);
	box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.maia-js body .site-main .maia-qty input[type="number"] {
	width: 2.75em;
	min-height: 0;
	padding: 0.35em 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-weight: 500;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

body .site-main .maia-qty input[type="number"]::-webkit-inner-spin-button,
body .site-main .maia-qty input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

body .site-main .maia-qty input[type="number"]:not(.maia-js *) {
	width: 4.5em;
	text-align: center;
}

body .site-main .maia-qty-step {
	min-width: 2.25em;
	min-height: 2.25em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--color-text);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s;
}

body .site-main .maia-qty-step:hover {
	background: var(--color-purple);
}

/* Cart, checkout and tables of the shop pages: shop.css */

/* Coupon in the cart: field and button in one row of equal height, also on small screens */
body.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
	float: none;
	max-width: 36rem;
	padding-bottom: 0;
}

body.woocommerce-cart table.cart td.actions .coupon::before,
body.woocommerce-cart table.cart td.actions .coupon::after {
	content: none;
}

body.woocommerce-cart table.cart td.actions .coupon .input-text {
	flex: 999 1 12rem;
	width: auto;
	float: none;
	margin: 0;
}

body.woocommerce-cart table.cart td.actions .coupon .button {
	flex: 1 0 auto; /* grows only when it wraps below the field */
	width: auto;
	float: none;
	margin: 0;
}

/* Select2 (country field of the invoice address) */
body .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: auto;
	min-height: 2.875rem;
	padding: 0.75em 2.5em 0.75em 1em;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-small);
	background: var(--color-field);
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.25;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.75em;
	height: 1.5em;
	transform: translateY(-50%);
}

body .select2-container--default:is(.select2-container--focus, .select2-container--open) .select2-selection--single {
	border-color: var(--color-purple);
	background: #fff;
	box-shadow: 0 0 0 4px var(--color-focus-ring);
}

body .select2-dropdown {
	overflow: hidden;
	border-color: var(--color-purple);
	border-radius: var(--radius-small);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--color-purple);
	color: #000;
}

/* Footer: as on the start page */

/* "Coming soon" placeholder (coming-soon.php): at least one screen high, footer at the bottom,
   more room around the panel. Flex items with auto side margins would shrink to their content,
   hence the explicit widths. */

body.hebammenkongress-coming-soon {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

body.hebammenkongress-coming-soon :is(.site-header, .text-footer) {
	width: 100%;
}

body.hebammenkongress-coming-soon .site-main {
	width: 100%;
	margin-top: clamp(2rem, 8svh, 5rem);
	margin-bottom: clamp(3rem, 12svh, 8rem);
}

body.hebammenkongress-coming-soon .text-footer {
	margin-top: auto;
}

@media (max-width: 1232px) {
	/* Fixed side margins here (see .site-main above): stretch instead of a width. */
	body.hebammenkongress-coming-soon .site-main {
		width: auto;
	}
}

/* "Zur Startseite": looks like the main shop button (a.button.alt above), outside WooCommerce. */

body.hebammenkongress-coming-soon .coming-soon-actions {
	margin: 2rem 0 0;
}

body.hebammenkongress-coming-soon .site-main a.coming-soon-button {
	display: inline-block;
	padding: 0.8em 1.25em;
	border-radius: var(--radius-small);
	background: var(--color-purple);
	color: #000;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}

body.hebammenkongress-coming-soon .site-main a.coming-soon-button:hover {
	background: var(--color-green);
}

body.hebammenkongress-coming-soon .site-main a.coming-soon-button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}