/*
 * Layout and components for the homepage, built to match the reference page at
 * profresults.com/amsterdam. Anything expressible in theme.json lives there;
 * this file holds the component shapes theme.json has no vocabulary for.
 */

/* ---------- base ---------- */

.mog-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--karte);
	text-decoration: none;
}

.mog-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
}

img, video, iframe { max-width: 100%; height: auto; }

:where(p, li) { text-wrap: pretty; hyphens: manual; }
:where(h1, h2, h3) { text-wrap: balance; }

/* The one word set in serif italic inside a heading. It is the signature detail
   of the reference layout, so it gets a class rather than inline markup. */
.mog-it {
	font-family: var(--wp--preset--font-family--akzent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ---------- headings ----------
 * Set explicitly rather than left to theme.json. The homepage sections are raw
 * HTML inside a wp:html block, and theme.json element styles are scoped in a way
 * that does not reach them, so headings there fell back to body size.
 */

.mog-hero h1 {
	font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.035em;
	margin: 1.2rem 0 1.4rem;
	max-width: 15ch;
}

section h2 {
	font-size: clamp(1.625rem, 1.15rem + 1.4vw, 1.875rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 1.05rem 0 0;
}

.mog-cta h2 {
	font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.1875rem);
	max-width: 18ch;
	margin-inline: auto;
}

.mog-card h3,
.mog-row__num {
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* The brand name is a link, so it inherited the link hover colour and turned
   green on hover. It is a wordmark, not a navigation item. */
.mog-header .wp-block-site-title a,
.mog-header .wp-block-site-title a:hover,
.mog-header .wp-block-site-title a:focus {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

/* ---------- vertical rhythm ----------
 * Measured off the reference rather than guessed: the gaps between its major
 * blocks are 199, 200, 200 and 280px. Ours were 120, 88, 88 and 63, which is
 * why the page read as cramped next to it at identical font sizes.
 */

/* WordPress emits its blockGap as `:root :where(.is-layout-flow) > :where(*+*)`,
   which is specificity (0,1,0). A bare `section + section` is (0,0,2) and loses,
   so three of the five sections silently kept the 28px block gap. Anchoring on
   the content wrapper puts this at (0,1,2), which wins. */
.wp-block-post-content > section + section { margin-top: 12.5rem; }

.wp-block-post-content > .mog-cta { margin-top: 19rem; }
.mog-footer { margin-top: 7.5rem; }

section > .mog-center h2 { margin-top: 1.15rem; }

@media (max-width: 900px) {
	.wp-block-post-content > section + section { margin-top: 5.5rem; }
	.wp-block-post-content > .mog-cta { margin-top: 7rem; }
	.mog-footer { margin-top: 4.5rem; }
}

/* ---------- sticky header ----------
 * The reference header scrolls away. This one does not, on purpose: the only
 * ask on this page is the call, and keeping the button reachable costs nothing.
 */

.mog-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--papier) 88%, transparent);
	backdrop-filter: saturate(140%) blur(9px);
	-webkit-backdrop-filter: saturate(140%) blur(9px);
}

@supports not (backdrop-filter: blur(1px)) {
	.mog-header { background: var(--wp--preset--color--papier); }
}

/* ---------- header ---------- */

.mog-header { padding-block: 1.15rem; }
.mog-header .wp-block-site-title a { text-decoration: none; }
.mog-header .wp-block-site-logo img { border-radius: 6px; display: block; }

.mog-header__bar {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-bottom: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* ---------- section label pill ---------- */

.mog-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	padding: 0.34rem 0.8rem;
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--text-sekundaer);
	letter-spacing: 0;
	line-height: 1;
}

.mog-pill--plain {
	background: #E7E2DA;
	border-color: transparent;
}

.mog-pill__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gruen);
	flex: none;
}

.mog-center { text-align: center; }
.mog-center .mog-pill { margin-inline: auto; }

/* ---------- hero ---------- */

/* No bottom padding: the gap below the hero is owned by the section rule
   below, so it is set in exactly one place. */
.mog-hero { padding-block: 3.25rem 0; }

.mog-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: 3.25rem;
	align-items: center;
}

.mog-hero__lead {
	color: var(--wp--preset--color--text-sekundaer);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
	max-width: 30rem;
}

.mog-hero__lead + .mog-hero__lead { margin-top: 0.85rem; }

/* Video placeholder. Holds the exact 16:9 box the real embed will take, so
   dropping the video in later changes nothing about the layout. */
.mog-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #DED8CE;
	border: 1px solid var(--wp--preset--color--linie);
	display: grid;
	place-items: center;
}

.mog-video__label {
	font-size: var(--wp--preset--font-size--klein);
	color: #5F5A52;
	letter-spacing: 0.06em;
	margin: 0;
}

.mog-video__play {
	width: 62px;
	height: 44px;
	border-radius: 10px;
	background: rgba(16, 16, 16, 0.72);
	display: grid;
	place-items: center;
	margin: 0 auto 0.7rem;
}

.mog-video__play::after {
	content: "";
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

/* ---------- cards, shared shell ---------- */

.mog-card,
.mog-row,
.mog-faq,
.mog-panel {
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 14px;
}

/* ---------- stat strip ---------- */

.mog-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.4rem;
}

.mog-stat {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.05rem;
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
}

.mog-stat svg { flex: none; color: var(--wp--preset--color--gruen); }

/* ---------- three advantage cards ---------- */

.mog-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin-top: 2.2rem;
}

.mog-card { padding: 1.5rem 1.4rem 1.6rem; }

.mog-card__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #EEF2FF;
	color: #3D4CA8;
	display: grid;
	place-items: center;
	margin-bottom: 1.5rem;
}

.mog-card h3 {
	font-size: var(--wp--preset--font-size--basis);
	margin: 0 0 0.55rem;
}

.mog-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-sekundaer);
	line-height: 1.6;
}

/* ---------- before / after panel ---------- */

.mog-panel { padding: 1.4rem; margin-top: 1.4rem; position: relative; }

.mog-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 1.4rem;
	align-items: start;
}

.mog-toggle {
	display: inline-flex;
	background: #F1EDE6;
	border-radius: 9px;
	padding: 3px;
	gap: 3px;
	margin-bottom: 1.1rem;
}

.mog-toggle label {
	padding: 0.36rem 0.95rem;
	border-radius: 7px;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
	color: var(--wp--preset--color--text-sekundaer);
	cursor: pointer;
	user-select: none;
}

/* The toggle is real, with two radios and no JavaScript. Sibling selectors do
   the switching, so it keeps working with scripts blocked. */
.mog-toggle__input { position: absolute; opacity: 0; pointer-events: none; }

#mog-vorher:checked ~ .mog-panel__grid .mog-toggle label[for="mog-vorher"],
#mog-nachher:checked ~ .mog-panel__grid .mog-toggle label[for="mog-nachher"] {
	background: var(--wp--preset--color--karte);
	color: var(--wp--preset--color--text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

.mog-werte, .mog-karte picture { display: none; }

#mog-vorher:checked ~ .mog-panel__grid .mog-werte--vorher,
#mog-nachher:checked ~ .mog-panel__grid .mog-werte--nachher,
#mog-vorher:checked ~ .mog-panel__grid .mog-karte--vorher,
#mog-nachher:checked ~ .mog-panel__grid .mog-karte--nachher { display: block; }

/* The two grids were exported at different sizes. Fixing the box and cropping
   to fill stops the panel jumping height when the toggle flips. */
.mog-karte { aspect-ratio: 1 / 1; }
.mog-karte picture { height: 100%; }

.mog-karte img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 11px;
	border: 1px solid var(--wp--preset--color--linie);
	display: block;
}

.mog-note {
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--text-sekundaer);
	margin: 0.9rem 0 0;
}

.mog-firma {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	background: #F4F1EB;
	border-radius: 11px;
	padding: 0.8rem 0.95rem;
	margin-bottom: 0.9rem;
}

.mog-firma__mark {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--wp--preset--color--text);
	flex: none;
}

.mog-firma strong { display: block; font-size: var(--wp--preset--font-size--klein); }

.mog-firma span {
	display: block;
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--text-sekundaer);
}

.mog-metrik {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #F7F4EF;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 9px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--klein);
}

.mog-metrik b {
	margin-left: auto;
	background: #F3D9D5;
	color: #9B2C25;
	border-radius: 6px;
	padding: 0.14rem 0.5rem;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
}

.mog-metrik.is-gut b { background: #D8ECDF; color: #1F6244; }

.mog-karte-platzhalter {
	aspect-ratio: 4 / 3;
	border-radius: 11px;
	background: #E8E4DC;
	border: 1px solid var(--wp--preset--color--linie);
	display: grid;
	place-items: center;
	font-size: var(--wp--preset--font-size--klein);
	color: #5F5A52;
	letter-spacing: 0.06em;
}

/* ---------- numbered steps, full width rows ---------- */

.mog-rows { margin-top: 2.2rem; display: grid; gap: 0.75rem; }

.mog-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1.05rem 1.25rem;
	font-size: var(--wp--preset--font-size--klein);
}

.mog-row__num { font-weight: 600; white-space: nowrap; }
.mog-row > svg { flex: none; align-self: center; color: var(--wp--preset--color--text); }

.mog-row p {
	margin: 0;
	color: var(--wp--preset--color--text-sekundaer);
	line-height: 1.6;
}

/* ---------- faq ---------- */

.mog-faqs { margin-top: 2.2rem; display: grid; gap: 0.7rem; max-width: 46rem; margin-inline: auto; }

.mog-faq { padding: 0; }

.mog-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
}

.mog-faq summary::-webkit-details-marker { display: none; }

.mog-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--text-sekundaer);
	flex: none;
}

.mog-faq[open] summary::after { content: "\2212"; }

.mog-faq > :not(summary) {
	margin: 0;
	padding: 0 1.25rem 1.15rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-sekundaer);
	line-height: 1.65;
}

/* ---------- closing cta ---------- */

.mog-cta {
	position: relative;
	background: var(--wp--preset--color--papier-gedeckt);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 22px;
	padding: 4.2rem 1.5rem 3.4rem;
	text-align: center;
}

.mog-cta__badge {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--wp--preset--color--text);
	display: grid;
	place-items: center;
}

.mog-cta__badge img { width: 30px; height: 30px; }

.mog-cta h2 { margin: 0.9rem 0 0; }

.mog-cta p {
	margin: 1rem auto 0;
	max-width: 27rem;
	color: var(--wp--preset--color--text-sekundaer);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.65;
}

.mog-cta .wp-block-buttons { margin-top: 1.7rem; justify-content: center; }

/* ---------- footer ---------- */

.mog-footer {
	padding: 3rem 0 2.5rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein);
}

.mog-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2rem;
}

.mog-footer p { margin: 0; color: var(--wp--preset--color--text-sekundaer); line-height: 1.7; }
.mog-footer strong { color: var(--wp--preset--color--text); }

.mog-footer h4 {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
	color: var(--wp--preset--color--text-sekundaer);
	letter-spacing: 0.06em;
}

.mog-footer a { color: var(--wp--preset--color--text-sekundaer); text-decoration: none; }
.mog-footer a:hover { color: var(--wp--preset--color--text); text-decoration: underline; }

.mog-footer__legal {
	margin-top: 2.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--mini);
}

/* ---------- tables, kept from before ---------- */

.wp-block-table, .wp-block-code { overflow-x: auto; max-width: 100%; }
.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table :where(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

/* ---------- forms ---------- */

.frm-fluent-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--klein);
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 9px;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.frm-fluent-form .ff-btn-submit {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	background: var(--wp--preset--color--text);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.mog-hero__grid,
	.mog-panel__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.mog-grid-3 { grid-template-columns: 1fr; }
	.mog-stats { grid-template-columns: 1fr; }
	.mog-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 620px) {
	.mog-row { flex-direction: column; gap: 0.3rem; }

	/* The header button wrapped to two lines and shoved the wordmark into the
	   corner. Tighten both rather than shorten the label, which is the ask. */
	.mog-header__bar .wp-block-button__link {
		padding: 0.6rem 1rem;
		white-space: nowrap;
		font-size: 0.8125rem;
	}

	.mog-header .wp-block-site-title,
	.mog-header .wp-block-site-title a {
		font-size: 0.9375rem;
		white-space: nowrap;
	}
	.mog-header__bar { gap: 0.6rem; }
}

@media (max-width: 400px) {
	.mog-header__bar .wp-block-button__link { padding: 0.55rem 0.85rem; font-size: 0.75rem; }
	.mog-header .wp-block-site-title,
	.mog-header .wp-block-site-title a { font-size: 0.875rem; }
	.mog-cta { padding: 3.6rem 1.15rem 2.8rem; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}