/*
 * Footer (assets/php/footer.php), modelled on the mara-m.gr footer.
 *
 * Shares the header's look: same max width, line and soft colours, and the
 * 768px breakpoint. Widget markup comes from wp-admin, so the rules here have
 * to outrank Storefront's .widget / .widget-title styles.
 */

.wecom-new-footer {
	--ftr-text: #222;
	--ftr-body: #4a4a4a;
	--ftr-muted: #6b6b6b;
	--ftr-line: #ececec;
	--ftr-soft: #f6f5f3;
}

/* Storefront's own footer is emptied in PHP; drop its box too. */
.wecom-new-footer #colophon {
	display: none !important;
}

.wecom-ftr {
	margin: 0;
	padding: 48px 0 0;
	border-top: 1px solid var(--ftr-line);
	background: #fff;
	color: var(--ftr-body);
	font-size: 14px;
	line-height: 1.55;
}

.wecom-ftr__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.wecom-ftr__grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
}

.wecom-ftr .widget {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px;
}

/* Footer-4's block widget wraps a second .widget inside the first. */
.wecom-ftr .widget .widget {
	margin: 0 0 6px !important;
}

.wecom-ftr .widget-title {
	display: block;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--ftr-text) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wecom-ftr ul.menu,
.wecom-ftr__contact {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.wecom-ftr ul.menu li {
	margin: 0 0 8px !important;
	padding: 0 !important;
	list-style: none;
}

/* Storefront puts a page icon in front of every nav-menu widget link. */
.wecom-ftr .widget_nav_menu ul li::before {
	display: none !important;
	content: none !important;
}

.wecom-ftr a {
	color: var(--ftr-body) !important;
	text-decoration: none !important;
	transition: color 0.15s;
}

.wecom-ftr a:hover {
	color: #000 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.wecom-ftr p {
	margin: 0 0 6px;
}

/* ---- Brand column ---- */

.wecom-ftr__brand .custom-logo-link {
	display: inline-block;
	margin-bottom: 10px;
	line-height: 0;
}

.wecom-ftr__brand .custom-logo {
	width: 170px !important;
	height: auto !important;
}

.wecom-ftr__tagline {
	margin-bottom: 18px !important;
	color: var(--ftr-text);
	font-size: 15px;
}

.wecom-ftr__brand .widget-title {
	margin-bottom: 6px !important;
}

.wecom-ftr__brand .widget a[href^="tel:"] {
	color: var(--ftr-text) !important;
	font-weight: 700;
}

.wecom-ftr__contact {
	margin-top: 14px !important;
}

.wecom-ftr__contact li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
}

.wecom-ftr__contact .wecom-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--ftr-text);
}

/* ---- Bottom bar ---- */

.wecom-ftr__bottom {
	border-top: 1px solid var(--ftr-line);
	background: var(--ftr-soft);
}

.wecom-ftr__bottom .wecom-ftr__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.wecom-ftr__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.wecom-ftr__payments img {
	display: block;
	width: auto;
	height: 24px;
}

.wecom-ftr__payments a:hover {
	text-decoration: none !important;
	opacity: 0.8;
}

.wecom-ftr__copy {
	color: var(--ftr-muted);
	font-size: 12.5px;
}

.wecom-ftr__copy a {
	color: var(--ftr-text) !important;
	font-weight: 600;
}

/* ---- Tablet ---- */

@media (min-width: 769px) and (max-width: 1100px) {
	.wecom-ftr__inner {
		padding: 0 20px;
	}

	.wecom-ftr__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- Mobile: brand centred, link columns as an accordion ---- */

@media (max-width: 768px) {
	.wecom-ftr {
		padding-top: 28px;
	}

	.wecom-ftr__inner {
		padding: 0 16px;
	}

	.wecom-ftr__grid {
		grid-template-columns: 1fr;
		gap: 0;
		padding-bottom: 16px;
	}

	.wecom-ftr__brand {
		padding-bottom: 20px;
		text-align: center;
	}

	.wecom-ftr__brand .custom-logo-link {
		margin-left: auto;
		margin-right: auto;
	}

	.wecom-ftr__contact li {
		justify-content: center;
	}

	.wecom-ftr__col {
		border-top: 1px solid var(--ftr-line);
	}

	.wecom-ftr__col:last-child {
		border-bottom: 1px solid var(--ftr-line);
	}

	.wecom-ftr__col .widget-title {
		position: relative;
		margin: 0 !important;
		padding: 16px 32px 16px 0 !important;
		cursor: pointer;
	}

	.wecom-ftr__col .widget-title::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 6px;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--ftr-text);
		border-bottom: 2px solid var(--ftr-text);
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s;
	}

	.wecom-ftr__col .widget.is-open .widget-title::after {
		transform: translateY(-30%) rotate(-135deg);
	}

	.wecom-ftr__col .widget > :not(.widget-title) {
		display: none;
	}

	.wecom-ftr__col .widget.is-open > :not(.widget-title) {
		display: block;
		padding-bottom: 16px;
	}

	.wecom-ftr__bottom .wecom-ftr__inner {
		flex-direction: column;
		text-align: center;
	}

	.wecom-ftr__payments {
		justify-content: center;
	}

	/* Room for the floating Side Cart basket. */
	.wecom-ftr__bottom {
		padding-bottom: 72px;
	}
}