/* =========================================================
   ProzentHilfe — Footer Enhancements
   Social icons · CTA block · scroll reveal · animated accent
   Uses existing design tokens from style.css.
   ========================================================= */

/* ---------------------------------------------------------
   ANIMATED ACCENT LINE (top of footer)
   --------------------------------------------------------- */
.site-footer.has-accent {
	position: relative;
}
.site-footer.has-accent::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--color-primary),
		var(--ph-green, #16a34a),
		var(--color-primary)
	);
	background-size: 200% 100%;
	animation: ph-accent-slide 6s linear infinite;
}
@keyframes ph-accent-slide {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* ---------------------------------------------------------
   FOOTER CTA / NEWSLETTER BLOCK
   --------------------------------------------------------- */
.footer-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	margin-bottom: var(--space-10);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
	.footer-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
	}
}
.footer-cta__heading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
}
.footer-cta__text {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: 0;
}
.footer-cta__body { display: flex; flex-direction: column; gap: var(--space-1); }

/* ---------------------------------------------------------
   SOCIAL ICON ROW
   --------------------------------------------------------- */
.footer-social { margin-top: var(--space-2); }
.footer-social__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	background: var(--color-bg-card);
	transition: color var(--transition), border-color var(--transition),
		background var(--transition), transform var(--transition);
}
.footer-social__link svg { width: 1.125rem; height: 1.125rem; }
.footer-social__link:hover,
.footer-social__link:focus-visible {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------
   SCROLL REVEAL
   Initial hidden state only applied once JS marks the element,
   so non-JS users always see content (progressive enhancement).
   --------------------------------------------------------- */
.reveal-init {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	will-change: opacity, transform;
}
.reveal-init.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------
   FOOTER COLUMN HOVER POLISH
   --------------------------------------------------------- */
.footer-nav ul li a {
	display: inline-block;
}
.footer-nav ul li a:hover,
.footer-nav ul li a:focus-visible {
	transform: translateX(3px);
}

/* ---------------------------------------------------------
   REDUCED MOTION — disable all of the above movement
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.site-footer.has-accent::before { animation: none; }
	.reveal-init {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.footer-social__link:hover,
	.footer-social__link:focus-visible,
	.footer-nav ul li a:hover,
	.footer-nav ul li a:focus-visible {
		transform: none;
	}
}

/* =========================================================
   ABOUT / CONTACT / LEGAL PAGE COMPONENTS
   Uses existing design tokens from style.css.
   ========================================================= */

/* Feature / value cards (About page, contact methods) */
.ph-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-6);
	margin-block: var(--space-8);
}
.ph-feature-card {
	padding: var(--space-6);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}
.ph-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: #fff;
	margin-bottom: var(--space-4);
}
.ph-feature-card__icon svg { width: 1.25rem; height: 1.25rem; }
.ph-feature-card h3 {
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--space-2);
	color: var(--color-text);
}
.ph-feature-card p {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	margin: 0;
}
.ph-feature-card a { font-weight: 600; text-decoration: none; color: var(--color-primary); }
.ph-feature-card a:hover { text-decoration: underline; }

/* Contact form */
.ph-form { margin-top: var(--space-6); }
.ph-form__row { margin-bottom: var(--space-5); }
.ph-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}
@media (max-width: 560px) { .ph-form__grid { grid-template-columns: 1fr; } }
.ph-form label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}
.ph-form label .ph-req { color: var(--color-primary); }
.ph-form input,
.ph-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--font-size-base);
	color: var(--color-text);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.ph-form input:focus,
.ph-form textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	background: var(--color-bg-card);
}
.ph-form textarea { min-height: 160px; resize: vertical; }

/* Accessible honeypot — hidden from humans, present for bots */
.ph-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success / error notices */
.ph-notice {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-6);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}
.ph-notice svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.ph-notice--success {
	background: var(--color-success-light);
	border: 1px solid rgba(22, 163, 74, 0.3);
	color: #14532d;
}
.ph-notice--error {
	background: var(--color-warning-light);
	border: 1px solid rgba(220, 38, 38, 0.3);
	color: #7f1d1d;
}
[data-theme="dark"] .ph-notice--success { color: #a7f3d0; }
[data-theme="dark"] .ph-notice--error { color: #fecaca; }