/**
 * Site footer — restyle to match the Figma design.
 *
 * The footer itself (columns, nav menus, social links, copyright) is
 * built with the TemPlaza Framework's front-end builder and lives in the
 * database (Theme Options → Footer), not in this theme's files — only
 * its look-and-feel is overridden here. Selectors are scoped with the
 * `.templaza-footer` + `.templaza-section` combo (rather than either
 * alone) so they win over the builder's own per-instance inline styles
 * regardless of stylesheet load order.
 *
 * Figma reference:
 * https://www.figma.com/design/UFbyQSXqjJ3fkYXo3ORgO7/Wellenreiten-2026-Handoff-Ext--Copy-?node-id=70-13498
 */

.templaza-footer.templaza-section {
	background: #ffffff !important;
	border-radius: 0 !important;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

.templaza-footer.templaza-section,
.templaza-footer.templaza-section .textwidget {
	color: #525252 !important;
	font-size: 18px;
	line-height: 28px;
}

/* Logo: builder content links to the white/reversed mark, which
   disappears on the new white background — flatten it to black instead
   of touching the builder's stored HTML. */
.templaza-footer.templaza-section .widget_text img {
	filter: brightness(0);
}

.templaza-footer.templaza-section .textwidget a[href^="mailto:"] {
	color: var(--color-wr-main, #0f4c81) !important;
	font-weight: 600;
	line-height: 24px;
}

/* Social icon links: plain glyphs -> bg-secondary circular badges. */
.templaza-footer.templaza-section .templaza-social {
	margin: 0;
}

.templaza-footer.templaza-section .templaza-social > li:not(:last-child) {
	margin-right: 8px;
}

.templaza-footer.templaza-section .templaza-social > li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	border-radius: 20px !important;
	background: #fafafa !important;
	border: none !important;
	color: #171717 !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.templaza-footer.templaza-section .templaza-social > li > a:hover {
	background: var(--color-wr-main, #0f4c81) !important;
	color: #ffffff !important;
}

.templaza-footer.templaza-section .templaza-social > li > a i {
	color: inherit !important;
}

/* "Quick Links" widget heading. */
.templaza-footer.templaza-section .templaza-heading h3 {
	color: #171717 !important;
	font-size: 18px !important;
	line-height: 28px !important;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 4px;
}

/* Region column headings, e.g. "Surfcamps Atlantikküste" — the builder
   renders these as a single-item nav list with a bold modifier class
   rather than a heading tag. */
.templaza-footer.templaza-section .templaza-navigation.uk-text-bold > li > a,
.templaza-footer.templaza-section .templaza-navigation.uk-text-bold > li > a:visited {
	color: #171717 !important;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
}

/* Quick Links items and regional surf-camp links. */
.templaza-footer.templaza-section .templaza-navigation:not(.uk-text-bold) > li > a,
.templaza-footer.templaza-section .templaza-navigation:not(.uk-text-bold) > li > a:visited {
	color: #525252 !important;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.templaza-footer.templaza-section .templaza-navigation > li > a:hover {
	color: var(--color-wr-main, #0f4c81) !important;
}

.templaza-footer.templaza-section .templaza-navigation > li {
	padding: 0;
}

/* Copyright line — plain quaternary text, no link color. */
.templaza-footer.templaza-section .templaza-copyright,
.templaza-footer.templaza-section .templaza-copyright a {
	color: #737373 !important;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}

/* Scroll-to-top button: bg-secondary rounded box instead of the solid
   brand-color circle. */
#templaza-backtotop {
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	border-radius: 10px !important;
	background: #fafafa !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

#templaza-backtotop > i {
	font-size: 16px !important;
	color: #404040 !important;
	height: auto !important;
	width: auto !important;
	line-height: normal !important;
}

#templaza-backtotop:hover {
	background: #f0f0f0 !important;
}