/* Agile Cologne site components (hero, facts bar, cards, timeline).
   Palette from the logo: #005892 (dark), #0282c9 (mid), #00b1ff (bright). */

.wp-block-group.ac-hero {
	background: linear-gradient(135deg, #012c49 0%, #005892 100%);
	color: #fff;
	padding: 56px 36px 48px;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}
.ac-hero h1 {
	color: #fff;
	font-size: clamp(28px, 3.2vw, 58px);
	line-height: 1.15;
	margin-bottom: 0.4em;
	max-width: 19ch;
}
.ac-eyebrow {
	color: #00b1ff;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 0.8em;
}
.ac-hero .ac-sub {
	color: #b7cfe2;
	max-width: 50ch;
}
.ac-hero .wp-block-buttons {
	margin-top: 1.4em;
}

.wp-block-button.ac-btn-primary .wp-block-button__link, .wp-block-button.ac-btn-primary .wp-block-button__link:visited {
	background: #00b1ff;
	color: #012c49;
	font-weight: 700;
	border-radius: 4px;
}
.wp-block-button.ac-btn-ghost .wp-block-button__link, .wp-block-button.ac-btn-ghost .wp-block-button__link:visited {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	border-radius: 4px;
}
.wp-block-button.ac-btn-blue .wp-block-button__link, .wp-block-button.ac-btn-blue .wp-block-button__link:visited {
	background: #0282c9;
	color: #fff;
	font-weight: 700;
	border-radius: 4px;
}

.wp-block-group.ac-facts {
	background: #005892;
	color: #fff;
	border-radius: 6px;
	margin-top: 14px;
}
.ac-facts {
	display: flex;
	flex-wrap: wrap;
}
.wp-block-group.ac-fact {
	margin-top: 0;
	flex: 1 1 170px;
	padding: 14px 22px;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0;
}
.wp-block-group.ac-fact:first-child {
	padding-left: 0;
}
.ac-fact:last-child {
	border-right: 0;
}
.ac-fact-k {
	color: #9fd3f5;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.14em;
	font-weight: 700;
	margin-bottom: 2px;
}
.ac-fact-v {
	font-weight: 700;
	margin-bottom: 0;
	color: #fff;
}

.ac-news {
	background: #f2f8fc;
	border-left: 4px solid #0282c9;
	padding: 24px 28px;
	margin-top: 28px;
	border-radius: 4px;
}
.ac-news-tag {
	color: #0282c9;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.14em;
	font-weight: 700;
	margin-bottom: 4px;
}
.ac-news h2 {
	color: #005892;
	font-size: 22px;
	margin-top: 0;
}

.ac-cards .ac-card {
	border: 1px solid #dde1e5;
	border-radius: 6px;
	padding: 24px 20px;
}
.ac-card h3 {
	color: #005892;
	font-size: 19px;
	margin-top: 0;
}
.ac-card svg {
	display: block;
	margin-bottom: 14px;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ac-card-1 { border-top: 4px solid #005892; }
.ac-card-2 { border-top: 4px solid #0282c9; }
.ac-card-3 { border-top: 4px solid #00b1ff; }
.ac-card-1 svg { stroke: #005892; }
.ac-card-2 svg { stroke: #0282c9; }
.ac-card-3 svg { stroke: #00b1ff; }

.ac-lead {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 700;
	color: #005892;
}

.wp-block-group.ac-teaser {
	border-top: 1px solid #dde1e5;
	border-bottom: 1px solid #dde1e5;
	padding: 30px 0;
	margin-top: 34px;
}

.ac-timeline {
	border-left: 3px solid #0282c9;
	padding-left: 26px;
	margin-left: 6px;
	margin-bottom: 40px;
}
.ac-slot {
	position: relative;
	margin-bottom: 18px;
}
.ac-slot::before {
	content: "";
	position: absolute;
	left: -36.5px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #0282c9;
}
.ac-slot-hl::before {
	background: #0282c9;
}
.ac-slot-time {
	font-weight: 700;
	color: #005892;
	margin-bottom: 0;
}
.ac-slot p {
	margin-bottom: 0;
}
.ac-slot-hint {
	color: #575760;
	font-size: 14px;
}

.ac-notice {
	background: #fff7e6;
	border: 1px solid #e8d9a8;
	border-left: 4px solid #e8a13c;
	padding: 14px 18px;
	border-radius: 4px;
	margin-bottom: 28px;
}
.ac-notice p {
	margin-bottom: 0;
	max-width: none;
}
/* Info variant in CI blue (amber stays reserved for warnings) */
.ac-notice-info {
	background: #f2f8fc;
	border-color: #cfe3f2;
	border-left-color: #0282c9;
}

.ac-map-ph {
	min-height: 220px;
	height: 100%;
	border-radius: 6px;
	border: 1px solid #dde1e5;
	background: repeating-linear-gradient(45deg, #f2f6f9, #f2f6f9 12px, #e9f0f5 12px, #e9f0f5 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #575760;
	font-size: 13px;
}

/* Newsletter section: dark panel, CleverReach form restyled inline. */
.wp-block-group.ac-newsletter {
	background: #012c49;
	border-radius: 6px;
	padding: 38px 30px 30px;
	margin-top: 38px;
	text-align: center;
}
.ac-newsletter h2 {
	color: #fff;
	margin-top: 0;
}
/* Direct-child p: the inner-container variant matches the front end DOM,
   the bare variant the editor canvas (no inner container there). */
:is(.ac-newsletter > .wp-block-group__inner-container, .ac-newsletter) > p {
	color: #b7cfe2;
}
.ac-newsletter .cr_site,
.ac-newsletter .cr_body {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
.ac-newsletter .cr_form {
	background: transparent;
}
/* The form repeats its own intro line; the section heading replaces it. */
.ac-newsletter .mce_text,
.ac-newsletter .cr_ipe_item[rel="mce_text"],
.ac-newsletter .non_sortable {
	display: none;
}
.ac-newsletter .editable_content {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: flex-end;
	text-align: left !important;
}
.ac-newsletter .cr_ipe_item {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	flex: 0 1 200px;
}
.ac-newsletter .cr_ipe_item.submit_container {
	flex: 0 0 auto;
}
.ac-newsletter .cr_ipe_item label {
	color: #9fd3f5;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 4px;
}
.ac-newsletter .cr_ipe_item input {
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 4px;
	font-size: 14px;
	margin: 0 !important;
	height: 40px;
	box-sizing: border-box;
}
.ac-newsletter .cr_button {
	margin: 0 !important;
	display: block;
	height: 40px;
	box-sizing: border-box;
	background: #00b1ff;
	color: #012c49;
	font-weight: 700;
	border: 0;
	border-radius: 4px;
	padding: 0 24px;
	font-size: 15px;
	cursor: pointer;
}
.ac-newsletter .cr_button:hover {
	background: #33c1ff;
}

.ac-iframe iframe {
	width: 100%;
	border: 0;
	min-height: 1200px;
}

@media (max-width: 700px) {
	.wp-block-group.ac-hero {
		padding: 36px var(--ac-pad);
	}
	.ac-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.wp-block-group.ac-facts {
		padding: 0 var(--ac-pad);
	}
	.wp-block-group.ac-fact {
		padding: 12px 14px 12px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.wp-block-group.ac-fact:nth-child(even) {
		padding-left: 14px;
	}
	.wp-block-group.ac-fact:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	.wp-block-group.ac-fact:nth-last-child(-n+2) {
		border-bottom: 0;
	}
	.ac-fact-k {
		font-size: 10px;
	}
	.ac-fact-v {
		font-size: 13.5px;
	}
	.ac-newsletter .cr_ipe_item {
		flex-basis: 100%;
	}
}

/* Make the classic-theme group inner container layout-transparent for all
   ac components. The front end DOM then behaves like the editor canvas DOM
   (no extra box), so every layout rule targets the component class alone.
   This also voids the theme's default inner-container padding. */
:where(.ac-hero, .ac-facts, .ac-fact, .ac-news, .ac-questions, .ac-teaser,
	.ac-newsletter, .ac-subpage, .ac-timeline, .ac-slot, .ac-notice)
	> .wp-block-group__inner-container {
	display: contents;
}

/* ---- Full-bleed start page (GP "Full Width" content) & draft type scale ---- */
:root {
	--ac-max: 1120px;
	--ac-pad: 48px;
}

.full-width-content .site-main {
	margin: 0 !important;
}
.full-width-content .inside-article {
	padding: 0;
}
.full-width-content .entry-content > .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

/* Centered content column without an inner box: side padding grows once the
   section is wider than --ac-max (+ padding), same math as max-width+auto. */
.wp-block-group.ac-hero {
	border-radius: 0;
	padding: 68px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2)) 64px;
}
.ac-hero .ac-sub {
	font-size: 16px;
}

.wp-block-group.ac-facts {
	border-radius: 0;
	margin-top: 0;
	padding: 0 max(var(--ac-pad), calc((100% - var(--ac-max)) / 2));
}
.ac-fact-v {
	font-size: 15px;
}

.wp-block-group.ac-news {
	margin-top: 0;
	border-radius: 0;
	border-left: 0;
	border-bottom: 1px solid #dde1e5;
	padding: 34px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2));
}
.ac-news p {
	font-size: 15px;
	max-width: 72ch;
}
.ac-news h2 {
	font-size: 21px;
}

.wp-block-group.ac-questions {
	background: #fff;
	padding: 52px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2)) 36px;
}
.ac-questions .ac-lead {
	margin-bottom: 30px;
}
.wp-block-columns.ac-cards {
	gap: 18px;
}
.ac-card h3 {
	font-size: 18px;
}
.ac-card p {
	font-size: 14px;
	color: #575760;
}
.ac-questions p.has-text-align-center {
	margin-top: 30px;
	margin-bottom: 0;
	font-size: 16px;
}

.wp-block-group.ac-teaser {
	background: #fff;
	margin-top: 0;
	border-bottom: 0;
	padding: 30px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2)) 40px;
}
.ac-teaser h2 {
	font-size: 22px;
	color: #005892;
}
.ac-teaser p {
	font-size: 15px;
	color: #575760;
}

.wp-block-group.ac-newsletter {
	border-radius: 0;
	margin-top: 0;
	padding: 44px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2)) 36px;
}
:is(.ac-newsletter > .wp-block-group__inner-container, .ac-newsletter) > p {
	font-size: 15px;
}

/* Sub pages: type scale from the draft */
.ac-subpage {
	font-size: 16px;
}
.ac-subpage h2 {
	font-size: 20px;
	color: #005892;
}
.ac-subpage p {
	max-width: 70ch;
}
.ac-slot p {
	font-size: 15px;
}
.ac-slot-hint {
	font-size: 13.5px;
}

@media (max-width: 700px) {
	:root {
		--ac-pad: 16px;
	}
}

/* ---- Draft-exact typography: GP headings default to weight 400 ---- */
.ac-hero h1,
.ac-news h2,
.ac-card h3,
.ac-teaser h2,
.ac-newsletter h2,
.ac-subpage h1,
.ac-subpage h2 {
	font-weight: 700;
}
.ac-newsletter h2 {
	font-size: 22px;
}
.wp-block-button.ac-btn-primary .wp-block-button__link,
.wp-block-button.ac-btn-ghost .wp-block-button__link,
.wp-block-button.ac-btn-blue .wp-block-button__link {
	font-size: 15px;
}
.ac-news p.ac-news-tag {
	font-size: 11px;
}

/* ---- Full-bleed sub pages (white section spans the viewport) ---- */
.wp-block-group.ac-subpage {
	background: #fff;
	padding: 48px max(var(--ac-pad), calc((100% - var(--ac-max)) / 2)) 56px;
}
.ac-subpage .ac-eyebrow {
	font-size: 12px;
	color: #0282c9;
	margin-bottom: 8px;
}
.ac-subpage h1 {
	font-size: clamp(24px, 3.4vw, 34px);
	color: #005892;
	margin-bottom: 10px;
}

/* ---- Header: compact like the draft, aligned with the content width ---- */
.site-header .inside-header {
	max-width: calc(var(--ac-max) + 2 * var(--ac-pad));
	margin: 0 auto;
	padding: 14px var(--ac-pad) !important;
}
.site-header .header-image {
	width: 150px !important;
}
.main-navigation .main-nav ul li a {
	font-size: 14px;
}
.inside-navigation {
	max-width: calc(var(--ac-max) + 2 * var(--ac-pad));
	margin: 0 auto;
}

/* ---- Responsive refinements (tablet range and stacked layouts) ---- */

/* Facts: 2x2 grid between mobile stack and full 4-column row */
@media (min-width: 701px) and (max-width: 1100px) {
	.ac-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.wp-block-group.ac-facts {
		padding: 0 var(--ac-pad);
	}
	.wp-block-group.ac-fact {
		padding: 18px 26px 18px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.wp-block-group.ac-fact:nth-child(even) {
		padding-left: 26px;
	}
	.wp-block-group.ac-fact:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	.wp-block-group.ac-fact:nth-last-child(-n+2) {
		border-bottom: 0;
	}
}

/* Cards: keep three columns above 700px (core stacks them below 782px) */
@media (min-width: 701px) and (max-width: 781px) {
	.wp-block-columns.ac-cards {
		flex-wrap: nowrap !important;
	}
	.ac-cards > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* Teaser button: left-aligned once the columns stack */
@media (max-width: 781px) {
	.ac-teaser .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

/* Newsletter form: bounded width, fields share the row evenly */
.ac-newsletter .editable_content {
	max-width: 760px;
	margin: 0 auto;
}
.ac-newsletter .cr_ipe_item {
	flex: 1 1 160px;
}
.ac-newsletter .cr_ipe_item.submit_container {
	flex: 0 0 auto;
}

/* Hero grows on every device so hero + facts close the first viewport.
   Offset = header + facts height per breakpoint; capped for tall screens. */
/* Vertical centering via block-level align-content (baseline 2024) keeps
   normal flow and margin collapsing, so editor and front end lay out alike. */
.wp-block-group.ac-hero {
	min-height: min(calc(100vh - var(--ac-hero-offset, 250px)), 900px);
	align-content: center;
}
@media (min-width: 701px) {
	:root {
		--ac-hero-offset: 230px;
	}
}
/* Short landscape viewports (e.g. iPad quer): tighter hero so facts still fit */
@media (min-width: 701px) and (max-height: 720px) {
	:root {
		--ac-hero-offset: 255px;
	}
	.wp-block-group.ac-hero {
		padding-top: 26px;
		padding-bottom: 26px;
	}
	.ac-hero .wp-block-buttons {
		margin-top: 1em;
	}
}
@media (min-width: 1200px) {
	:root {
		--ac-hero-offset: 265px;
	}
}

/* Large screens: hero display type grows with the bigger stage */
@media (min-width: 1200px) {
	.ac-hero .ac-sub {
		font-size: 18px;
	}
	.ac-hero .ac-eyebrow {
		font-size: 14px;
	}
}

/* Facts: a notch larger on big screens */
@media (min-width: 1200px) {
	.wp-block-group.ac-fact {
		padding: 20px 28px;
	}
	.wp-block-group.ac-fact:first-child {
		padding-left: 0;
	}
	.ac-fact-k {
		font-size: 12px;
	}
	.ac-fact-v {
		font-size: 17px;
	}
}

/* Newsletter form: one tidy grid row on desktop */
@media (min-width: 900px) {
	.ac-newsletter .editable_content {
		display: grid;
		grid-template-columns: 1fr 1fr 1.4fr auto;
		max-width: 860px;
		align-items: end;
	}
}

/* Hero CTAs: stacked block buttons instead of ragged wrapping */
@media (max-width: 700px) {
	.ac-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.ac-hero .wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.ac-hero .wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Fact values: separator dot vanishes when the second part wraps.
   Each part carries a leading dot; the row is shifted left by one
   separator width and clipped, so line-start dots are never visible. */
.ac-fact-v {
	overflow: hidden;
}
.ac-fact-parts {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1em;
}
.ac-fact-parts > span {
	white-space: nowrap;
	padding-left: 1em;
	position: relative;
}
.ac-fact-parts > span::before {
	content: "·";
	position: absolute;
	left: 0.32em;
}

/* Large screens (max type size): fact values always on two lines */
@media (min-width: 1200px) {
	.ac-fact-parts {
		flex-direction: column;
	}
}

/* FAQ accordion (core details blocks) */
.wp-block-details {
	border: 1px solid #dde1e5;
	border-radius: 6px;
	padding: 14px 18px;
	margin: 0 0 10px;
	max-width: 72ch;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: #005892;
	font-size: 17px;
}
.wp-block-details summary::marker {
	color: #0282c9;
}
.wp-block-details summary:hover {
	color: #0282c9;
}
.wp-block-details[open] {
	border-left: 4px solid #0282c9;
}
.wp-block-details[open] summary {
	margin-bottom: 10px;
}
.wp-block-details p {
	margin-bottom: 0;
}
.wp-block-details p + p {
	margin-top: 10px;
}
.ac-subpage h2 {
	margin-top: 34px;
}