/* =========================================================
   Spinwinners España
   Custom Footer
   ========================================================= */


/* ---------------------------------------------------------
   Basis
   --------------------------------------------------------- */

.sw-footer {
	--sw-footer-bg: #3f005f;
	--sw-footer-bg-dark: #33004d;

	--sw-footer-text: #ffffff;
	--sw-footer-text-soft: rgba(255, 255, 255, 0.78);
	--sw-footer-text-muted: rgba(255, 255, 255, 0.60);

	--sw-footer-border: rgba(255, 255, 255, 0.14);
	--sw-footer-hover: #ffffff;

	width: 100%;
	margin: 0;
	padding: 0;

	background:
		linear-gradient(
			180deg,
			var(--sw-footer-bg) 0%,
			var(--sw-footer-bg-dark) 100%
		);

	color: var(--sw-footer-text);

	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;

	box-sizing: border-box;
}


/* Reset alleen binnen de footer */

.sw-footer *,
.sw-footer *::before,
.sw-footer *::after {
	box-sizing: border-box;
}

.sw-footer p,
.sw-footer ul,
.sw-footer li {
	margin-top: 0;
}

.sw-footer img {
	max-width: 100%;
}

.sw-footer a {
	box-shadow: none;
}


/* ---------------------------------------------------------
   Centrale container
   --------------------------------------------------------- */

.sw-footer__inner {
	width: 100%;
	max-width: 1240px;

	margin: 0 auto;
	padding: 56px 32px 22px;
}


/* ---------------------------------------------------------
   Hoofdstructuur
   --------------------------------------------------------- */

.sw-footer__main {
	display: grid;

	grid-template-columns:
		minmax(0, 1.55fr)
		minmax(180px, 0.7fr)
		minmax(210px, 0.85fr);

	gap: 70px;

	align-items: start;

	padding-bottom: 44px;
}


.sw-footer__column {
	min-width: 0;
}


/* ---------------------------------------------------------
   Over Spinwinners
   --------------------------------------------------------- */

.sw-footer__about {
	max-width: 520px;
}


.sw-footer__brand {
	display: inline-block;

	margin: 0 0 17px;
	padding: 0;

	color: var(--sw-footer-text);

	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;

	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}


.sw-footer__brand:hover,
.sw-footer__brand:focus {
	color: var(--sw-footer-text);
	text-decoration: none;
	opacity: 0.82;
}


.sw-footer__description {
	max-width: 500px;

	margin: 0 0 13px;

	color: var(--sw-footer-text-soft);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}


.sw-footer__description--small {
	max-width: 490px;

	margin-bottom: 21px;

	color: var(--sw-footer-text-muted);

	font-size: 12px;
	line-height: 1.65;
}


/* Home link */

.sw-footer__home-link {
	display: inline-flex;

	align-items: center;
	gap: 7px;

	color: var(--sw-footer-text);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;

	text-decoration: none;

	transition:
		opacity 0.18s ease,
		gap 0.18s ease;
}


.sw-footer__home-link:hover,
.sw-footer__home-link:focus {
	color: var(--sw-footer-text);
	text-decoration: none;

	opacity: 0.78;
	gap: 10px;
}


.sw-footer__arrow {
	display: inline-block;

	font-size: 16px;
	line-height: 1;
}


/* ---------------------------------------------------------
   Navigatie titels
   --------------------------------------------------------- */

.sw-footer__title {
	margin: 2px 0 18px;
	padding: 0;

	color: var(--sw-footer-text);

	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: 0;
	text-transform: none;
}


/* ---------------------------------------------------------
   Footerlinks
   --------------------------------------------------------- */

.sw-footer__links {
	display: flex;
	flex-direction: column;

	gap: 11px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.sw-footer__link-item {
	margin: 0;
	padding: 0;

	list-style: none;
}


.sw-footer__link-item::before {
	display: none;
	content: none;
}


.sw-footer__link-item a {
	display: inline-block;

	padding: 1px 0;

	color: var(--sw-footer-text-soft);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;

	text-decoration: none;

	transition:
		color 0.18s ease,
		transform 0.18s ease;
}


.sw-footer__link-item a:hover,
.sw-footer__link-item a:focus {
	color: var(--sw-footer-hover);

	text-decoration: none;

	transform: translateX(3px);
}


/* ---------------------------------------------------------
   Compliance
   --------------------------------------------------------- */

.sw-footer__compliance {
	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 34px 0 29px;

	border-top: 1px solid var(--sw-footer-border);

	text-align: center;
}


/* Logo container */

.sw-footer__compliance-logos {
	display: flex;

	flex-wrap: wrap;

	align-items: center;
	justify-content: center;

	gap: 38px;

	width: 100%;

	margin: 0 0 23px;
	padding: 0;
}


/* Individueel logo */

.sw-footer__compliance-logo {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;
}


.sw-footer__compliance-logo img {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;

	margin: 0;
	padding: 0;

	border: 0;

	object-fit: contain;
}


/* DGOJ */

.sw-footer__compliance-logo--dgoj img {
	width: 200px;
}


/* JugarBIEN */

.sw-footer__compliance-logo--jugarbien img {
	width: 140px;
}


/* 18+ */

.sw-footer__compliance-logo--age img {
	width: 76px;
	height: 76px;
}


/* Responsible gambling tekst */

.sw-footer__responsible {
	max-width: 760px;

	margin: 0 auto;
	padding: 0;

	color: var(--sw-footer-text-soft);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.65;

	text-align: center;
}


/* ---------------------------------------------------------
   Onderste gedeelte
   --------------------------------------------------------- */

.sw-footer__bottom {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;

	padding-top: 21px;

	border-top: 1px solid var(--sw-footer-border);
}


.sw-footer__copyright {
	margin: 0;
	padding: 0;

	color: var(--sw-footer-text-muted);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;

	text-align: center;
}


/* ---------------------------------------------------------
   Focus / accessibility
   --------------------------------------------------------- */

.sw-footer a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;

	border-radius: 2px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

	.sw-footer__inner {
		padding:
			46px
			28px
			22px;
	}


	.sw-footer__main {
		grid-template-columns: 1fr 1fr;

		gap: 38px 52px;

		padding-bottom: 39px;
	}


	/* About boven de twee menu's */

	.sw-footer__about {
		grid-column: 1 / -1;

		max-width: 700px;
	}


	.sw-footer__description {
		max-width: 650px;
	}


	.sw-footer__description--small {
		max-width: 620px;
	}

}


/* =========================================================
   Mobiel
   ========================================================= */

@media (max-width: 600px) {

	.sw-footer__inner {
		padding:
			37px
			20px
			19px;
	}


	/* Alles onder elkaar */

	.sw-footer__main {
		display: block;

		padding-bottom: 28px;
	}


	.sw-footer__column {
		width: 100%;
	}


	/* About */

	.sw-footer__about {
		max-width: none;

		padding: 0 0 29px;
	}


	.sw-footer__brand {
		margin-bottom: 13px;

		font-size: 21px;
	}


	.sw-footer__description {
		max-width: none;

		margin-bottom: 11px;

		font-size: 13px;
		line-height: 1.65;
	}


	.sw-footer__description--small {
		margin-bottom: 18px;

		font-size: 11px;
		line-height: 1.6;
	}


	/* Menu secties */

	.sw-footer__nav {
		padding: 23px 0;

		border-top: 1px solid var(--sw-footer-border);
	}


	.sw-footer__title {
		margin: 0 0 14px;

		font-size: 15px;
	}


	.sw-footer__links {
		gap: 9px;
	}


	.sw-footer__link-item a {
		font-size: 13px;
	}


	/* Compliance */

	.sw-footer__compliance {
		padding: 28px 0 25px;
	}


	.sw-footer__compliance-logos {
		gap: 21px;

		margin-bottom: 21px;
	}


	.sw-footer__compliance-logo--dgoj img {
		width: 155px;
	}


	.sw-footer__compliance-logo--jugarbien img {
		width: 112px;
	}


	.sw-footer__compliance-logo--age img {
		width: 58px;
		height: 58px;
	}


	.sw-footer__responsible {
		max-width: 420px;

		font-size: 11px;
		line-height: 1.6;
	}


	/* Bottom */

	.sw-footer__bottom {
		padding-top: 18px;
	}


	.sw-footer__copyright {
		font-size: 11px;
	}

}


/* =========================================================
   Kleine mobiele schermen
   ========================================================= */

@media (max-width: 420px) {

	.sw-footer__inner {
		padding-left: 17px;
		padding-right: 17px;
	}


	.sw-footer__compliance-logos {
		gap: 16px;
	}


	.sw-footer__compliance-logo--dgoj img {
		width: 135px;
	}


	.sw-footer__compliance-logo--jugarbien img {
		width: 100px;
	}


	.sw-footer__compliance-logo--age img {
		width: 52px;
		height: 52px;
	}

}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.sw-footer__brand,
	.sw-footer__home-link,
	.sw-footer__link-item a {
		transition: none;
	}

}