/*
 * Overrides for footer-main/footer-bottom background, text/hover colors,
 * and the 3 selectable structures (grid/centered/bar). Relies on the
 * theme's own footer markup/classes already existing (footer-main,
 * footer-col-*, footer-links, footer-social, footer-bottom, ...) - it only
 * adds the ".webone-footer-managed" modifier class (always present when
 * rendered by webone_footer_main_render()/webone_footer_bottom_render(),
 * see includes/webone_footer_output.php), so every selector below carries
 * MORE classes than the theme's plain equivalent in main.css and therefore
 * wins on specificity regardless of stylesheet load order - no !important
 * needed anywhere in this file (see README-WEBONE.md's note on why relying
 * on !important to win a color-override fight is fragile).
 *
 * --webone-footer-main-bg / -heading / -text / -link-hover /
 * -grid-columns (footer-main), --webone-footer-promo-link / -hover
 * (promo column only), and --webone-footer-bottom-bg / -fg / -hover
 * (footer-bottom) are all set inline per-page by the two render
 * functions above.
 */

.footer-main.webone-footer-managed {
	background: var(--webone-footer-main-bg);
}

.footer-main.webone-footer-managed .footer-col-title {
	color: var(--webone-footer-heading);
	/* Fallbacken speglar temats hårdkodade original (main.css: font-size
	   1.6rem, ingen egen font-weight - dvs webbläsarens h3-standard, bold)
	   exakt, så ett tomt fält i adminen aldrig ändrar något. */
	font-size: var(--webone-footer-heading-size, 1.6rem);
	font-weight: var(--webone-footer-heading-weight, 700);
}

.footer-main.webone-footer-managed p,
.footer-main.webone-footer-managed a {
	color: var(--webone-footer-text);
}

/*
 * Textstorlek/-tjocklek (settings: Brödtextens storlek & tjocklek) - bara
 * dessa fyra element (alla delar samma 1.5rem i temats main.css idag), inte
 * hela "p, a" ovan: .footer-social/.footer-instagram-link-ikonen har egna,
 * medvetet större storlekar (2.4rem/2rem) som INTE ska påverkas av det här
 * fältet.
 */
.footer-main.webone-footer-managed .footer-tagline,
.footer-main.webone-footer-managed .footer-contact-item,
.footer-main.webone-footer-managed .footer-links a,
.footer-main.webone-footer-managed .footer-col-instagram p {
	font-size: var(--webone-footer-text-size, 1.5rem);
	font-weight: var(--webone-footer-text-weight, 400);
}

.footer-main.webone-footer-managed .footer-social {
	color: var(--webone-footer-text);
}

/* Certifieringar/behörigheter (liten bildrad i varumärkeskolumnen). Bilden
   har egen vit bakgrund, så den får rundade hörn och blir en "etikett" mot
   den mörka footern. */
.footer-main.webone-footer-managed .footer-badges {
	display: block;
	width: var(--webone-footer-badges-width, 160px);
	max-width: 100%;
	margin-top: 1.6rem;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
	opacity: 0.92;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-main.webone-footer-managed .footer-badges img {
	display: block;
	width: 100%;
	height: auto;
}

.footer-main.webone-footer-managed a.footer-badges:hover,
.footer-main.webone-footer-managed a.footer-badges:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-badges {
	margin-left: auto;
	margin-right: auto;
}

.footer-main.webone-footer-managed .footer-social:hover,
.footer-main.webone-footer-managed .footer-links a:hover,
.footer-main.webone-footer-managed .footer-col-contact a:hover {
	color: var(--webone-footer-link-hover);
}

.footer-main.webone-footer-managed .footer-col-instagram .footer-instagram-link {
	color: var(--webone-footer-promo-link);
}

.footer-main.webone-footer-managed .footer-col-instagram .footer-instagram-link:hover {
	color: var(--webone-footer-promo-hover);
}

.footer-contact-item {
	/* font-size: se .footer-main.webone-footer-managed .footer-contact-item ovan. */
	margin-bottom: 0.8rem;
}

.footer-contact-item i {
	margin-right: 0.4rem;
}

/*
 * ---- Struktur: Flerkolumn (standard) ----
 * Måste upprepa temats EGNA brytpunkter (main.css: max-width 1024px/767px,
 * samma par som webone_responsive_style_tag() i functions.php använder för
 * Surfplatta/Mobil överallt annars i sidbyggaren) här - annars vinner denna
 * regel (3 klasser) över temats media-scopade regel (1 klass) på ALLA
 * bredder oavsett vilken av dem som "borde" gälla, eftersom en media-query
 * inte i sig ger högre specificitet. Utan detta hade footerns kolumner
 * aldrig staplats på surfplatta/mobil.
 */
.footer-main.webone-footer-managed.footer-main--style-grid {
	grid-template-columns: var(--webone-footer-grid-columns, 1fr);
}

@media all and (max-width: 1024px) {
	.footer-main.webone-footer-managed.footer-main--style-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media all and (max-width: 767px) {
	.footer-main.webone-footer-managed.footer-main--style-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Struktur: Centrerad (minimal) ---- */
.footer-main.webone-footer-managed.footer-main--style-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-col {
	align-items: center;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-col-brand {
	order: -2;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-col-links {
	order: -1;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-logo,
.footer-main.webone-footer-managed.footer-main--style-centered .footer-tagline {
	margin-left: auto;
	margin-right: auto;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-social-wrapper {
	justify-content: center;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-links {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 2rem;
}

.footer-main.webone-footer-managed.footer-main--style-centered .footer-col-contact p {
	margin-bottom: 0.4rem;
}

/* ---- Struktur: Rad (kompakt) ---- */
.footer-main.webone-footer-managed.footer-main--style-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.footer-main.webone-footer-managed.footer-main--style-bar .footer-col {
	margin: 0;
}

.footer-main.webone-footer-managed.footer-main--style-bar .footer-col-title,
.footer-main.webone-footer-managed.footer-main--style-bar .footer-tagline,
.footer-main.webone-footer-managed.footer-main--style-bar .footer-col-contact p:not(:first-of-type),
.footer-main.webone-footer-managed.footer-main--style-bar .footer-col-instagram p {
	display: none;
}

.footer-main.webone-footer-managed.footer-main--style-bar .footer-links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
}

.footer-main.webone-footer-managed.footer-main--style-bar .footer-col-contact {
	display: flex;
	align-items: center;
}

@media all and (max-width: 767px) {
	.footer-main.webone-footer-managed.footer-main--style-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * Temats generiska ".footer-col" (main.css) centrerar numera all
	 * kolumninnehåll (flex/align-items/text-align) så fort footer-main
	 * staplas till en kolumn på mobil - rätt för Flerkolumn/Centrerad, men
	 * fel för Rad (kompakt): den strukturen staplar medvetet vänsterjusterat
	 * (se ovan). 3 klasser här slår temats 1-klassregel oavsett laddordning,
	 * så ingen !important behövs (samma resonemang som filens header-
	 * kommentar för style-grid).
	 */
	.footer-main.webone-footer-managed.footer-main--style-bar .footer-col {
		align-items: flex-start;
		text-align: left;
	}

	.footer-main.webone-footer-managed.footer-main--style-bar .footer-social-wrapper {
		justify-content: flex-start;
	}
}

/*
 * ---- Mobilinställning: "Centrera inte kolumnerna på mobil" ----
 * Redaktören kan slå av temats default-centrering (se ovan i main.css)
 * för Flerkolumn/Centrerad-strukturerna via kryssrutan i adminen
 * (mobile_center_columns) - webone_footer_main_render() lägger då till
 * ".footer-main--mobile-no-center" på wrappern. Rad-strukturen påverkas
 * inte (är redan vänsterjusterad på mobil, se ovan).
 */
@media all and (max-width: 767px) {
	.footer-main.webone-footer-managed.footer-main--mobile-no-center .footer-col {
		align-items: flex-start;
		text-align: left;
	}

	.footer-main.webone-footer-managed.footer-main--mobile-no-center .footer-social-wrapper {
		justify-content: flex-start;
	}

	.footer-main.webone-footer-managed.footer-main--mobile-no-center .footer-logo,
	.footer-main.webone-footer-managed.footer-main--mobile-no-center .footer-tagline,
	.footer-main.webone-footer-managed.footer-main--mobile-no-center .footer-badges {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---- footer-bottom ---- */
.footer-bottom.webone-footer-managed {
	background: var(--webone-footer-bottom-bg);
}

.footer-bottom.webone-footer-managed .footer-copyright,
.footer-bottom.webone-footer-managed .change-myCookie-preference,
.footer-bottom.webone-footer-managed .footer-privacy-link {
	color: var(--webone-footer-bottom-fg);
}

.footer-bottom.webone-footer-managed .footer-bottom-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 2rem;
}

.footer-bottom.webone-footer-managed .footer-privacy-link {
	font-size: 1.3rem;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.footer-bottom.webone-footer-managed .footer-privacy-link:hover {
	color: var(--webone-footer-bottom-hover);
}

.footer-bottom.webone-footer-managed .footer-copyright a {
	color: inherit;
}

.footer-bottom.webone-footer-managed .change-myCookie-preference:hover,
.footer-bottom.webone-footer-managed .footer-copyright:hover {
	color: var(--webone-footer-bottom-hover);
}

.footer-bottom.webone-footer-managed.footer-bottom--align-center .footer-bottom-inner {
	justify-content: center;
	gap: 2rem;
}