/*
 * Baseline styling for the footer CTA banner. Projects with their own
 * `.footer-cta` rules (like loddeskakel's main.css, loaded after this
 * file) simply override these — this exists so the banner still looks
 * reasonable out of the box on a project that hasn't styled it yet.
 */
.footer-cta {
	background: #111;
}

.footer-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.footer-cta-text h2 {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 1.8rem;
}

.footer-cta-text p {
	margin: 0;
	color: #ddd;
}

.footer-cta-button {
	flex-shrink: 0;
	display: inline-block;
	background: #fff;
	color: #111;
	text-decoration: none;
	font-weight: 600;
	padding: 0.9rem 1.8rem;
	border-radius: 0.4rem;
}

@media (max-width: 700px) {
	.footer-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-cta-button {
		width: 100%;
		text-align: center;
	}
}

/*
 * The button's non-hover colors are applied as inline styles by
 * webone_footer_cta_render() (which owns the whole banner's markup, unlike
 * the WebOne Header plugin), so they always win over the rules above with
 * no specificity concerns. :hover can't be expressed inline though, so it's
 * handled here via CSS custom properties set on the same inline style
 * attribute - but only when a hover color was actually chosen (the button gets
 * `.footer-cta-button--own-hover-bg` / `--own-hover-text`), so an unset hover
 * color falls through to the site's default button style or the theme's own
 * `.footer-cta-button:hover` rule instead of resetting to nothing. The extra
 * `.footer-cta--managed` class (always present) keeps these rules' specificity
 * above the theme's own rule regardless of stylesheet load order.
 */
/* !important: knappens vanliga färger ligger som inline style (se ovan), och
   inline slår alla stilmallsregler utan !important - utan det syntes hover-
   färgen aldrig. Kanten följer med, annars blir den kvar i normalfärgen. */
.footer-cta.footer-cta--managed .footer-cta-button--own-hover-bg:hover,
.footer-cta.footer-cta--managed .footer-cta-button--own-hover-bg:focus-visible {
	background-color: var(--footer-cta-btn-hover-bg) !important;
	border-color: var(--footer-cta-btn-hover-bg) !important;
}

.footer-cta.footer-cta--managed .footer-cta-button--own-hover-text:hover,
.footer-cta.footer-cta--managed .footer-cta-button--own-hover-text:focus-visible {
	color: var(--footer-cta-btn-hover-text) !important;
}

/* Hover-animation vald i pluginet (settings button_hover_animation) - samma
   val och värden som formulärpluginets "Knapp hover-animation". !important +
   högre specificitet än temats standardstil (button-defaults.php skriver sina
   animationer med !important på a.footer-cta-button), så valet här vinner.
   "Ingen" stänger av standardstilens rörelse. Bara för enheter med hover och
   besökare som inte bett om minskad rörelse. */
.footer-cta.footer-cta--managed a.footer-cta-button[class*="footer-cta-button--anim-"] {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-none:hover,
	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-none:focus-visible {
		transform: none !important;
	}

	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-lift:hover,
	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-lift:focus-visible {
		transform: translateY(-3px) !important;
	}

	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-zoom:hover,
	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-zoom:focus-visible {
		transform: scale(1.05) !important;
	}

	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-shadow:hover,
	.footer-cta.footer-cta--managed a.footer-cta-button.footer-cta-button--anim-shadow:focus-visible {
		transform: none !important;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
	}
}

/*
 * Admin's "Vertikal padding" / "Vertikal padding (mobil)" fields
 * (webone_footer_cta_resolve_mobile_padding()) - same CSS-variable-instead-
 * of-inline-property technique as .footer-cta-button:hover above, for the
 * same reason: an inline `style="padding-block:..."` would out-rank every
 * external rule including this media query, so the mobile override could
 * never apply. The ".footer-cta-inner--custom-padding" class is only ever
 * present when admin set a non-zero desktop padding (see
 * webone_footer_cta_render()) - if this rule matched unconditionally
 * instead, an UNSET --footer-cta-vpad variable would make the whole
 * declaration invalid and reset padding-block to 0 even when admin never
 * touched this setting, clobbering .footer-cta-inner's own responsive
 * default padding from whichever theme/base stylesheet is loaded.
 */
.footer-cta--managed .footer-cta-inner--custom-padding {
	padding-block: var(--footer-cta-vpad);
}

@media (max-width: 700px) {
	.footer-cta--managed .footer-cta-inner--custom-padding {
		padding-block: var(--footer-cta-vpad-mobile);
	}
}

/*
 * Optional button icon (Knappikon in the admin): the button becomes a
 * centered flex row so icon and text sit on one baseline with an even gap.
 * Before/after is decided by the markup order (see webone_footer_cta_render()),
 * not by CSS, so screen readers get the same order as sighted users. The icon
 * inherits the button's text color (currentColor), hover color included. The
 * icon font itself (Line Awesome / Font Awesome) is loaded by the theme.
 * The doubled class keeps this above the theme's `display: inline-block`.
 */
.footer-cta-button.footer-cta-button--has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
}

.footer-cta-button--has-icon .footer-cta-button-icon {
	flex: 0 0 auto;
	font-size: 1.2em;
	line-height: 1;
	color: inherit;
}