/* ============================================================
   Zency footer — site-wide ("Nærvær"), matches the NFooter mockup.
   Self-contained (own colour literals) so it can load on every page
   without the full design system. Dynamic link lists come from the
   footer-services snippet ([zency_footer_links]/[zency_footer_services]),
   which ships its own white-link styling.
   ============================================================ */

.zf {
	background: #14302a; /* flat forest — WCAG-AA safe for small text */
	color: #d8ece0;
	font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
}
.zf *, .zf *::before, .zf *::after { box-sizing: border-box; }

.zf__wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding: 4rem 1.25rem 2rem; }
@media (min-width: 768px) { .zf__wrap { padding-inline: 2rem; } }

/* ---- Link columns ---- */
.zf__cols {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem;
	border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 3rem;
}
@media (min-width: 768px) {
	.zf__cols { display: flex; justify-content: space-between; gap: 2.5rem; }
	.zf__col { flex: 0 1 auto; } /* content-width so justify-content: space-between spreads the 4 columns */
}

.zf__h { margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 400; color: #fff; }

.zf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
/* The `.zf` prefix lifts these above Elementor's global `.elementor-kit-7 a` (same 0,1,1
   specificity → the kit wins on source order and bleeds Dosis / 18px / 500 / line-height:15px /
   -0.7px into the links). We re-declare font-family/weight/letter-spacing because the kit sets
   them and our own rules otherwise wouldn't. */
.zf .zf__list a, .zf .zf__list li {
	color: rgba(178,221,195,.75); text-decoration: none;
	font-family: inherit; font-size: 0.9rem; font-weight: 400; line-height: 1.4; letter-spacing: normal;
	transition: color .2s;
}
.zf .zf__list a:hover { color: #fff; }
.zf__list--plain li { color: rgba(178,221,195,.75); }

/* Snippet-rendered lists ([zency_footer_links]/[zency_footer_services]) — align with the
   column type scale + add a hover affordance (the snippet sets the white base colour). */
.zf .zency-footer-services { padding: 0; margin: 0; }
.zf .zency-footer-services a.zency-footer-services__link {
	color: rgba(178,221,195,.75); font-family: inherit; font-size: 0.9rem; font-weight: 400; line-height: 1.4; letter-spacing: normal; padding-bottom: 0; margin-top: 0.75rem; transition: color .2s;
}
.zf .zency-footer-services li.zency-footer-services__item:first-child a.zency-footer-services__link { margin-top: 0; }
.zf .zency-footer-services a.zency-footer-services__link:hover { color: #fff; }

/* ---- Bottom bar: copyright (left) · payments (center) · social (right) ---- */
.zf__bar {
	display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
	margin-top: 2rem;
}
@media (min-width: 768px) { .zf__bar { flex-direction: row; justify-content: space-between; } }

.zf__copy { order: 3; margin: 0; font-size: 0.75rem; color: rgba(178,221,195,.7); }
@media (min-width: 768px) { .zf__copy { order: 1; } }

.zf__pay { order: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; }
@media (min-width: 768px) { .zf__pay { order: 2; } }
/* Phones: 2 icons per row (was 3 + 1, which read as unbalanced). */
@media (max-width: 600px) { .zf__pay { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 0.75rem 1rem; } }
.zf__pay-item { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,.8); font-size: 0.875rem; font-weight: 500; }
.zf__pay-item svg { height: 1.25rem; width: auto; }

.zf__social { order: 2; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .zf__social { order: 3; } }
.zf .zf__social a { color: rgba(178,221,195,.75); transition: color .2s; display: inline-flex; }
.zf .zf__social a:hover { color: #fff; }
.zf__social svg { width: 1.25rem; height: 1.25rem; }