/*
Theme Name: Smoking Pot
Theme URI: https://smoking-pot.de
Author: d&k design
Description: Schlankes Block-Theme für Smoking Pot. Kreativ. Laut. Echt.
Version: 1.2.3
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smoking-pot
*/

/* Kleine Ergänzungen, die theme.json nicht abdeckt */

.sp-eyebrow {
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
}

.sp-logo img {
	height: auto;
}

.sp-hauptteil {
	min-height: 72vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sp-banner .wp-block-button__link {
	box-shadow: 0 0 0 0 transparent;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sp-banner .wp-block-button__link:hover,
.sp-banner .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}

.sp-fuss a {
	color: inherit;
	text-decoration: none;
}

.sp-fuss a:hover,
.sp-fuss a:focus-visible {
	color: var(--wp--preset--color--orange);
	text-decoration: underline;
}

:where(a, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.sp-rechtstext h2 {
	font-size: var(--wp--preset--font-size--gross);
	margin-top: 2.5rem;
}

.sp-rechtstext h3 {
	font-size: var(--wp--preset--font-size--normal);
	margin-top: 1.75rem;
}

/* Störer „Unterstütze uns auf Startnext!“ rechts neben bzw. über der Headline, ohne die Schrift zu verdecken */
.sp-headline {
	--kreis: 8.75rem;
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

.sp-headline > h1 {
	margin-top: 0 !important;
}

.sp-headline > .sp-stoerer {
	position: absolute;
	top: 0;
	left: calc(100% + 1.5rem);
	margin: 0 !important;
	transform: translateY(-45%);
}

.sp-stoerer a {
	display: grid;
	place-items: center;
	width: var(--kreis);
	aspect-ratio: 1;
	padding: calc(var(--kreis) * 0.13);
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--weiss);
	font-size: calc(var(--kreis) * 0.13);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transform: rotate(12deg);
	box-shadow: 0 10px 24px -12px rgba(21, 20, 18, 0.55);
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.sp-stoerer a:hover,
.sp-stoerer a:focus-visible {
	background: var(--wp--preset--color--orange-dunkel);
	color: var(--wp--preset--color--weiss);
	transform: rotate(4deg) scale(1.06);
}

/* Zu wenig Platz daneben: rechts über der Headline, mit eigenem Raum darüber */
@media (max-width: 1099px) {
	.sp-headline {
		--kreis: 7rem;
		margin-top: calc(var(--kreis) + 1.75rem) !important;
	}

	.sp-headline > .sp-stoerer {
		top: auto;
		bottom: calc(100% + 0.9rem);
		left: auto;
		right: 0;
		transform: none;
	}
}

@media (max-width: 600px) {
	.sp-headline {
		--kreis: 6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-stoerer a {
		transition: none;
	}

	.sp-stoerer a:hover,
	.sp-stoerer a:focus-visible {
		transform: rotate(12deg);
	}
}