/* ============================================================
   FOOTER
   Espresso brand V6 (rev 2) — cognac gradient, grain, hairline top edge
   and a cropped logomark watermark. Replaces the earlier gradient/ring
   canon shared with the OG card and the my-pages login hero
   (.pvmp-login-hero in wp-plugin-provitalia-my-pages assets/css/
   bankid.css) — those surfaces are unaffected by this revision.
   ============================================================ */
/* The design stylesheet carries a blanket `footer { background: #1b1712
   !important }` from the export; the gradient has to be marked important
   too (and the selector one step more specific) to show on those pages. */
footer.pv-footer {
	position: relative;
	overflow: hidden;
	background-color: #1b1712 !important;
	background-image: linear-gradient(
		135deg,
		#1b1712 0%,
		#332818 38%,
		#5a4630 70%,
		#8f6e4c 100%
	) !important;
	color: rgba(245, 239, 229, 0.78);
	padding-block: 4rem 2.5rem;
}

/* Grain — subtle film-grain texture over the gradient, blended so it
   only ever perturbs contrast rather than adding visible noise. Its own
   layer (not stacked into ::before/::after) because opacity + blend-mode
   need to apply to the whole layer, not just one background-image. */
.pv-footer__grain {
	position: absolute;
	inset: 0;
	opacity: 0.055;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
}

/* Hairline — cognac thread along the footer's top edge. */
.pv-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(200, 138, 78, 0) 4%,
		rgba(200, 138, 78, 0.65) 38%,
		rgba(220, 167, 110, 0.8) 55%,
		rgba(200, 138, 78, 0) 96%
	);
	pointer-events: none;
}

/* Glow — soft highlight over the whole band, behind the content. */
.pv-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(
			110% 85% at 88% 112%,
			rgba(200, 138, 78, 0.4),
			transparent 58%
		),
		radial-gradient(
			120% 90% at 10% -14%,
			rgba(220, 207, 187, 0.15),
			transparent 50%
		);
	pointer-events: none;
}

/* Logomark watermark — cropped by the corner, fixed px sizing so it
   never balloons on a wide-short desktop footer or a narrow-tall mobile
   one (a %-of-height size would do exactly that). Behind the content. */
.pv-footer__watermark {
	position: absolute;
	right: -84px;
	bottom: -44px;
	width: 370px;
	height: 264px;
	pointer-events: none;
}

.pv-footer > .pv-container {
	position: relative;
	z-index: 1;
}

.pv-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-bottom: 3rem;
}

@media (min-width: 640px) {
	.pv-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.pv-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1.5fr;
		gap: 3rem;
	}
}

.pv-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pv-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: opacity 0.15s;
}

.pv-footer__logo:hover {
	opacity: 0.85;
}

.pv-footer__logo:focus-visible {
	outline: 2px solid #c88a4e;
	outline-offset: 4px;
}

.pv-footer__logo:active {
	opacity: 0.7;
}

.pv-footer__logo-mark {
	flex-shrink: 0;
}

.pv-footer__logo-word {
	font-family: "Karla", "Helvetica Neue", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	color: #fbf7f1;
}

.pv-footer__tagline {
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 18rem;
}

.pv-footer__col-title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fbf7f1;
	margin-bottom: 1rem;
}

.pv-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pv-footer__links a {
	font-size: 0.9rem;
	/* .72, not the header nav's .8/.68: bumped from an original .68 for
	   extra AA margin against the gradient's warmest reachable text
	   position (the Behandlingar/Legal columns at ~1024-1280px), on
	   top of the background-size darkening above. Worst measured
	   default-text case at this alpha: 4.90:1 (need 4.5:1). */
	color: rgba(251, 247, 241, 0.72);
	text-decoration: none;
	border-radius: 0.15em;
	transition: color 0.15s;
}

.pv-footer__links a:hover {
	color: #fbf7f1;
}

.pv-footer__links a:focus-visible {
	color: #fbf7f1;
	outline: 2px solid #c88a4e;
	outline-offset: 2px;
}

.pv-footer__links a:active {
	/* Lighter konjak tint, not the nav's #c88a4e: the nav's color drops
	   below 4.5:1 in the footer's warmest reachable text zones (the
	   nav sits on a uniform dark bar, this footer's background varies).
	   #dca467 keeps the same accent family; worst measured case across
	   every link position at 320-1920px is 5.32:1 (need 4.5:1). */
	color: #dca467;
}
.pv-footer__address {
	font-size: 0.875rem;
	line-height: 1.7;
}

.pv-footer__address--contact {
	margin-top: 1.5rem;
}

.pv-footer__meta-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.75rem;
	color: rgba(251, 247, 241, 0.55);
}

.pv-footer__meta-link {
	font-size: 0.875rem;
	/* See .pv-footer__links a — same AA-driven alpha bump. */
	color: rgba(251, 247, 241, 0.72);
	text-decoration: none;
	border-radius: 0.15em;
	transition: color 0.15s;
}

.pv-footer__meta-link:hover {
	color: #fbf7f1;
}

.pv-footer__meta-link:focus-visible {
	color: #fbf7f1;
	outline: 2px solid #c88a4e;
	outline-offset: 2px;
}

.pv-footer__meta-link:active {
	/* See .pv-footer__links a:active — same AA-driven lighter konjak. */
	color: #dca467;
}

.pv-footer__meta-link--underline {
	text-decoration: underline;
}

.pv-footer__bottom {
	border-top: 1px solid rgba(251, 247, 241, 0.12);
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: 0.8125rem;
}

@media (min-width: 768px) {
	.pv-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pv-footer__logo,
	.pv-footer__links a,
	.pv-footer__meta-link {
		transition: none;
	}
}

/* Container — on the design pages this stylesheet is the only one that
   knows .pv-container, so the footer carries its own copy. */
.pv-footer > .pv-container {
	width: 100%;
	max-width: var(--container-site, 80rem);
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;
}

/* The footer sets its own type so it looks the same on the design pages
   (Karla via the design stylesheet) and the Provitalia+ pages. */
.pv-footer {
	font-family: "Karla", "Helvetica Neue", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* The design stylesheet gives paragraphs their own margins; reset them
   here, then restore the two spacings the footer relies on. */
.pv-footer p {
	margin: 0;
}

.pv-footer p.pv-footer__col-title {
	margin-bottom: 1rem;
}

.pv-footer p.pv-footer__address--contact {
	margin-top: 1.5rem;
}

/* Payment marks and the LegitScript seal (Kajal, 2026-09-09): the two
   things kept from the previous site footer, now on every page. The marks
   are Bildplatser image slots (pay-mastercard, pay-visa, pay-klarna; Swish
   and Apple Pay are added at render time), the seal is LegitScript's
   official embed. */
.pv-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	margin-bottom: 2.5rem;
}

.pv-footer__payments {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pv-footer__payments .pv-footer__col-title {
	margin-bottom: 0;
}

.pv-footer__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
}

/* No chip behind the marks: the logos are the versions made for dark
   backgrounds, exactly as the design pages already showed them. */
.pv-footer__mark {
	height: 32px;
	width: 56px;
	border-radius: 7px;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pv-footer__mark image-slot,
.pv-footer__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pv-footer__seal {
	display: inline-flex;
	line-height: 0;
	/* Reserves the seal's footprint (73x79, see inc/slot-photos.php) so the
	   footer doesn't reflow when js/cookiebot-settings.js fills the inert
	   pre-consent slot in after Cookiebot marketing consent. */
	min-width: 73px;
	min-height: 79px;
}

.pv-footer__seal .pv-legitscript-seal {
	display: inline-flex;
	line-height: 0;
	border-radius: 0.5rem;
}

.pv-footer__seal .pv-legitscript-seal:focus-visible {
	outline: 2px solid #c88a4e;
	outline-offset: 4px;
}