/* Artmark Footer — structural layout. Colors/typography come from widget controls. */

.am-footer {
	width: 100%;
}

.am-footer__inner {
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	padding-bottom: 60px;
}

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

/* Width travels as a custom property so the stacked layout below can drop it.
   Set directly by the control it would outrank the media query, and in a
   column flex container `flex-basis` is the HEIGHT, not the width. */
.am-footer__brand {
	flex: 0 0 var(--am-f-brandw, 280px);
	max-width: var(--am-f-brandw, 320px);
}

.am-footer__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.am-footer__logo-text {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.am-footer__desc {
	margin: 22px 0 0;
	font-size: 14px;
	line-height: 1.65;
}

.am-footer__locations {
	margin-top: 26px;
}

.am-footer__locations-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.am-footer__locations-text {
	font-size: 14px;
	line-height: 1.6;
}

.am-footer__social {
	margin-top: 26px;
	display: flex;
	gap: 16px;
}

/* Centered placement (Social Icons → Position: Centered below columns) */
.am-footer__social-row {
	display: flex;
	justify-content: center;
	margin-top: 56px;
	padding-bottom: 32px;
}

.am-footer__social-row .am-footer__social {
	margin-top: 0;
}

.am-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: color 0.2s ease;
}

.am-footer__social svg {
	fill: currentColor;
}

/* ---------------------------------------------------------------- */
/* Link columns                                                      */
/* ---------------------------------------------------------------- */

.am-footer__columns {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.am-footer__col-heading {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.am-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* When a column's links are split in two, keep each link on one side */
.am-footer__col li {
	break-inside: avoid;
}

.am-footer__col a {
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.2s ease;
}

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

.am-footer__bottom {
	border-top: 1px solid;
	padding: 22px 0;
}

.am-footer__bottom-inner {
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 13px;
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.am-footer__inner {
		flex-direction: column;
		/* Stacked, `flex-start` shrink-wraps each block to its content and
		   hugs the left edge — so the Brand and Columns alignment controls end
		   up centring text inside a narrow left-hand strip instead of across
		   the footer. Stretch makes the blocks fill the width, which is what
		   those controls assume. */
		align-items: stretch;
	}

	/* A fixed brand width is a two-column idea. Stacked it would set the
	   block's HEIGHT (flex-basis follows the main axis) and push the footer
	   wider than the screen. */
	.am-footer__brand {
		flex: 0 0 auto;
		max-width: none;
	}
}

/* 767px, not 600px: this has to line up with Elementor's own mobile
   breakpoint, or the band from 601–767 takes the mobile control values with
   the desktop bottom-bar layout. */
@media (max-width: 767px) {
	/* Stacked, `justify-content` — which the Bottom Bar Alignment control sets
	   — runs down the vertical axis and stops aligning anything horizontally.
	   `align-items` is the property that matters here, so the control's class
	   maps onto it. "Left / Right Split" has nothing left to split once
	   stacked, so it lands on the centred default alongside "Center". */
	.am-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.am-f-bottom-flex-start .am-footer__bottom-inner {
		align-items: flex-start;
		text-align: left;
	}

	.am-f-bottom-flex-end .am-footer__bottom-inner {
		align-items: flex-end;
		text-align: right;
	}

	.am-footer__inner {
		padding-bottom: 36px;
	}

	.am-footer__col-heading {
		margin-bottom: 14px;
	}
}