/* ==========================================================
   FOOTER
========================================================== */

#footer.ct-footer {
	background-color: var(--im-footer-bg) !important;
	color: var(--im-footer-text) !important;
}


/* ==========================================================
   ROW BACKGROUNDS
========================================================== */

#footer [data-row="middle"],
#footer [data-row="bottom"],
#footer [data-row="middle"] > .ct-container,
#footer [data-row="bottom"] > .ct-container {
	background-color: var(--im-footer-bg) !important;
}


/* ==========================================================
   FOOTER CONTAINER
========================================================== */

#footer [data-row="middle"] > .ct-container,
#footer [data-row="bottom"] > .ct-container {
	width: 100% !important;
	max-width: 1600px !important;

	padding-left: clamp(24px, 4vw, 64px) !important;
	padding-right: clamp(24px, 4vw, 64px) !important;
}


/* ==========================================================
   MIDDLE ROW
========================================================== */

#footer [data-row="middle"] > .ct-container {
	padding-top: 42px !important;
	padding-bottom: 36px !important;
}

#footer [data-row="middle"] [data-column] {
	align-items: flex-start;
}


/* ==========================================================
   SHARED WIDGET RESET
========================================================== */

#footer .im-footer-brand,
#footer .im-footer-links,
#footer .im-footer-company {
	--wp--style--block-gap: 0;

	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#footer .im-footer-brand > *,
#footer .im-footer-links > *,
#footer .im-footer-company > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}


/* ==========================================================
   BRAND COLUMN
========================================================== */

#footer .im-footer-brand {
	max-width: 420px;
}

#footer .im-footer-logo {
	display: block;

	width: min(100%, 280px);
	margin: 0 0 20px !important;
}

#footer .im-footer-logo img {
	display: block;

	width: 100%;
	height: auto;
	margin: 0;
}

#footer .im-footer-description {
	max-width: 390px;
	margin: 0 !important;

	color: var(--im-footer-text) !important;
	font-size: 15px;
	line-height: 1.7;
}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

#footer .im-footer-socials {
	margin: 24px 0 0 !important;
	padding: 0 !important;
}

#footer .im-footer-socials .wp-social-link {
	background-color: var(--im-transparent) !important;
	color: var(--im-footer-text) !important;
}

#footer .im-footer-socials .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	padding: 0;

	border: 1px solid var(--im-footer-social-border);
	border-radius: 0;

	color: var(--im-footer-text) !important;

	transition:
		border-color var(--im-transition),
		background-color var(--im-transition),
		color var(--im-transition);
}

#footer .im-footer-socials .wp-social-link:hover a {
	border-color: var(--im-footer-social-hover-bg);
	background-color: var(--im-footer-social-hover-bg);
	color: var(--im-footer-text) !important;
}


/* ==========================================================
   LINK COLUMNS
========================================================== */

#footer .im-footer-heading {
	margin: 0 0 18px !important;

	color: var(--im-brand-accent-soft) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

#footer .im-footer-list {
	margin: 0 !important;
	padding: 0 !important;

	color: var(--im-footer-text) !important;
	list-style: none;
}

#footer .im-footer-list li {
	margin: 0;
	padding: 0;

	color: var(--im-footer-text) !important;
	font-size: 15px;
	line-height: 1.45;
}

#footer .im-footer-list li + li {
	margin-top: 11px;
}

#footer .im-footer-list a {
	display: inline-block;

	color: var(--im-footer-text) !important;
	text-decoration: none;

	transition:
		color var(--im-transition),
		transform var(--im-transition);
}

#footer .im-footer-list a:hover {
	color: var(--im-footer-link-hover) !important;
	transform: translateX(3px);
}


/* ==========================================================
   COMPANY DETAILS
========================================================== */

#footer .im-footer-company {
	text-align: left;
}

#footer .im-footer-company-text {
	margin: 0 !important;

	color: var(--im-footer-text) !important;
	font-size: 13px;
	line-height: 1.7;
}


/* ==========================================================
   BOTTOM ROW
========================================================== */

#footer [data-row="bottom"] > .ct-container {
	padding-top: 14px !important;
	padding-bottom: 14px !important;

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

#footer [data-row="bottom"] [data-column="copyright"] {
	justify-content: flex-start;
}


/* ==========================================================
   COPYRIGHT
========================================================== */

#footer .ct-footer-copyright {
	color: var(--im-footer-text) !important;
	font-size: 13px;
	line-height: 1.5;
}

#footer .ct-footer-copyright p {
	margin: 0;
}

#footer .ct-footer-copyright a {
	color: var(--im-footer-text) !important;
	text-decoration: none;
}

#footer .ct-footer-copyright a:hover {
	color: var(--im-footer-link-hover) !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {
	#footer [data-row="middle"] > .ct-container {
		padding-top: 38px !important;
		padding-bottom: 34px !important;
	}

	#footer .im-footer-logo {
		width: min(100%, 230px);
	}

	#footer .im-footer-description,
	#footer .im-footer-list li,
	#footer .im-footer-list a {
		font-size: 14px;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 689px) {
	#footer [data-row="middle"] > .ct-container,
	#footer [data-row="bottom"] > .ct-container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	#footer [data-row="middle"] > .ct-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
		row-gap: 34px;

		padding-top: 30px !important;
		padding-bottom: 28px !important;
	}

	#footer [data-row="middle"] [data-column] {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Brand */
	#footer [data-row="middle"] [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}

	/* Kupnja */
	#footer [data-row="middle"] [data-column="widget-area-2"] {
		grid-column: 1;
	}

	/* Podrška */
	#footer [data-row="middle"] [data-column="widget-area-3"] {
		grid-column: 2;
	}

	/* Podaci tvrtke */
	#footer [data-row="middle"] [data-column="widget-area-4"] {
		grid-column: 1 / -1;
	}

	#footer .im-footer-brand,
	#footer .im-footer-links,
	#footer .im-footer-company {
		max-width: none;
	}

	#footer .im-footer-logo {
		width: min(100%, 270px);
		margin-bottom: 16px !important;
	}

	#footer .im-footer-description {
		max-width: 360px;

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

	#footer .im-footer-socials {
		margin-top: 20px !important;
	}

	#footer .im-footer-heading {
		margin-bottom: 14px !important;
	}

	#footer .im-footer-list li,
	#footer .im-footer-list a {
		font-size: 14px;
	}

	#footer .im-footer-list li + li {
		margin-top: 9px;
	}

	#footer .im-footer-company {
		margin: 0 !important;
		text-align: left;
	}

	#footer .im-footer-company-text {
		font-size: 12px;
		line-height: 1.55;
	}

	#footer [data-row="bottom"] > .ct-container {
		padding-top: 13px !important;
		padding-bottom: 13px !important;
	}

	#footer [data-row="bottom"] [data-column="copyright"] {
		justify-content: flex-start;
	}

	#footer .ct-footer-copyright {
		font-size: 12px;
		line-height: 1.55;
	}
}