/*
 * Quick task 260811-1ts (Footer + Rechtsseiten, AUFTRAG_Claude_Code_Footer_und_Recht.md):
 * site-wide navy footer.
 *
 * This file OWNS: the `.pcg-footer` markup printed by inc/site-footer.php on every public
 * page (three columns on desktop, one stacked column on mobile, the Sto-Klimapartner
 * badge, and the separated legal bar). It deliberately does NOT own: page layout above the
 * footer (that stays in Bricks Custom CSS / pcg-responsive.css), and the site's global
 * design tokens - it only READS `--pcg-font-heading` / `--pcg-font-sans` (defined in
 * pcg-fonts.css) and falls back to a literal font stack if either is ever unavailable.
 *
 * Palette/metrics source: design-exports/PCG_Startseite_Mockup_Komplett.html (footer
 * section, lines ~108-118 and ~211-218) - background #0f1b30, wordmark 22px/800 #fff,
 * column headings 15px/700 #fff, body/link text 14px rgba(255,255,255,.72) line-height
 * 1.9, legal bar separated by a 1px rgba(255,255,255,.12) rule, 13px rgba(255,255,255,.6)
 * text with rgba(255,255,255,.75) links, desktop grid 1.5fr 1fr 1fr with a 36px gap and
 * 54px/40px padding, phone single column with a 26px gap and 38px/22px padding, legal bar
 * column-direction and centred on phone.
 *
 * Grid tracks use minmax(0, ...) rather than a bare fr unit - the exact CSS-grid blowout
 * bug quick task 260810-1ld hit on `.pcg-2col` (a bare `1fr` track's automatic minimum
 * defaults to its widest child's min-content size, not 0). No specificity-forcing
 * override keyword appears anywhere in this file - nothing else on the page competes for
 * `.pcg-footer-*` selectors.
 */

.pcg-footer {
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	background: #0f1b30;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--pcg-font-sans, 'Inter', system-ui, sans-serif);
}

.pcg-footer *,
.pcg-footer *::before,
.pcg-footer *::after {
	box-sizing: border-box;
}

.pcg-footer-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	padding: 54px 40px;
}

.pcg-footer-col {
	min-width: 0;
}

.pcg-footer-logo {
	font-family: var(--pcg-font-heading, 'Manrope', system-ui, sans-serif);
	font-weight: 800;
	font-size: 22px;
	color: #fff;
}

.pcg-footer-claim {
	margin: 14px 0 0;
	max-width: 300px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.9;
}

.pcg-footer-badge {
	display: block;
	margin-top: 18px;
	max-width: 110px;
	height: auto;
	opacity: 0.85;
}

.pcg-footer-badge-text {
	display: inline-block;
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pcg-footer-h {
	margin: 0 0 12px;
	font-family: var(--pcg-font-heading, 'Manrope', system-ui, sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: #fff;
}

.pcg-footer-address {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.9;
}

.pcg-footer-link,
.pcg-footer-nav a,
.pcg-footer-legal-links a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.9;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pcg-footer-link,
.pcg-footer-nav a {
	display: block;
}

/* Die vier Gewerke unter "Leistungen" (Pre-Launch-Audit 260908, §25/§90).
   Zwei Klassen im Selektor (0,2,1) statt nur `.pcg-footer-nav a` (0,1,1) - sonst
   gewaenne die allgemeinere Regel darueber und die Einrueckung bliebe wirkungslos.
   Genau diese Falle hat auf derselben Seite schon einmal zugeschlagen. */
.pcg-footer-nav a.pcg-footer-sub {
	padding-left: 14px;
	font-size: 13px;
	opacity: 0.78;
}

.pcg-footer-nav a.pcg-footer-sub:hover,
.pcg-footer-nav a.pcg-footer-sub:focus-visible {
	opacity: 1;
}

.pcg-footer-link:hover,
.pcg-footer-nav a:hover,
.pcg-footer-legal-links a:hover {
	color: #EE0000;
}

.pcg-footer :focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.pcg-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 18px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.pcg-footer-legal-links a {
	margin-left: 18px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

/* --- Breakpoint: stack the three columns, centre the legal bar ------------------- */
/* Single breakpoint, matching pcg-responsive.css's own convention of one clean mobile
   cut rather than an intermediate tablet step for this component. Below this width every
   footer link also gets a 44px minimum tap target (the standard adopted in quick task
   260810-l9b) plus vertical padding so real fingers can hit them reliably. */
@media (max-width: 860px) {

	.pcg-footer-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 38px 22px;
	}

	.pcg-footer-legal {
		padding: 16px 22px;
		flex-direction: column;
		text-align: center;
	}

	.pcg-footer-legal-links a {
		margin: 0 9px;
	}

	.pcg-footer-link,
	.pcg-footer-nav a,
	.pcg-footer-legal-links a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 4px 0;
	}

	.pcg-footer-nav a,
	.pcg-footer-link {
		display: flex;
	}
}

/*
 * --------------------------------------------------------------------------------------
 * .pcg-legal - Quick task 260811-1ts, Task 2: typography for the [pcg_impressum] and
 * [pcg_datenschutz] shortcodes (AUFTRAG_Claude_Code_Footer_und_Recht.md sections 2 + 3).
 *
 * Lives in this file rather than a dedicated legal-pages.css on purpose: both shortcodes
 * exist ONLY because of the footer's own legal links, and this whole component is two
 * short pages, not a growing page family - one extra HTTP request site-wide (a new
 * stylesheet, loaded on every page for two pages' worth of rules) is worse than a few
 * extra rules riding along in the file this footer already enqueues everywhere.
 *
 * Uses the same design tokens already declared in price-calculator.css's :root block
 * (loaded site-wide, so available here without redeclaring anything): navy
 * `--pcg-color-ink` for headings, `--pcg-color-body` for running text. Literal fallbacks
 * are supplied for both in case that :root block is ever removed.
 * --------------------------------------------------------------------------------------
 */

.pcg-legal {
	box-sizing: border-box;
	max-width: 760px;
	margin-inline: auto;
	padding: 56px 24px;
	font-family: var(--pcg-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--pcg-color-body, rgba(20, 36, 64, 0.65));
	line-height: 1.8;
}

.pcg-legal h1 {
	margin: 0 0 28px;
	font-family: var(--pcg-font-heading, 'Manrope', system-ui, sans-serif);
	font-weight: 700;
	color: var(--pcg-color-ink, #142440);
}

.pcg-legal h2 {
	margin: 32px 0 12px;
	font-family: var(--pcg-font-heading, 'Manrope', system-ui, sans-serif);
	font-weight: 700;
	color: var(--pcg-color-ink, #142440);
}

.pcg-legal p {
	margin: 0 0 18px;
}

.pcg-legal strong {
	color: var(--pcg-color-ink, #142440);
}

.pcg-legal hr {
	margin: 32px 0;
	border: none;
	border-top: 1px solid rgba(20, 36, 64, 0.12);
}

.pcg-legal a {
	color: #EE0000;
	text-decoration: underline;
}

.pcg-legal a:hover {
	color: #D40000;
}

@media (max-width: 860px) {
	.pcg-legal {
		padding: 40px 20px;
	}
}