/* =============================================================
   ADORNCROFT – SITE-WIDE FOOTER
   Loaded on every page (inc/footer.php) — self-contained, doesn't
   depend on any other stylesheet being present.
   ============================================================= */

.ac-site-footer {
	--ac-footer-cream : #F7F3EE;
	--ac-footer-dark  : #2B2A29;

	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : 24px;
	width          : 100%;
	padding        : 48px clamp(20px, 11vw, 160px) 24px;
	background     : var(--ac-footer-dark);
	font-family    : 'Satoshi Variable', system-ui, sans-serif;
	box-sizing     : border-box;
}

.ac-site-footer * { box-sizing: border-box; }

.ac-site-footer-links {
	display         : flex;
	flex-wrap       : wrap;
	align-items     : flex-start;
	justify-content : flex-start;
	gap             : 32px;
	width           : 100%;
}

/* ── Contact block ───────────────────────────────────────────── */
.ac-site-footer-contact {
	display        : flex;
	flex-direction : column;
	gap            : 30px;
	flex           : 0 1 220px;
}

/* No layout effect on desktop — the fields stack directly inside
   .ac-site-footer-contact exactly as before. On mobile (≤600px) each group
   becomes one of the two side-by-side contact columns. */
.ac-site-footer-contact-group { display : contents; }

.ac-site-footer-field {
	display        : flex;
	flex-direction : column;
	gap            : 16px;
}

.ac-site-footer-label {
	font-family    : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size      : 14px;
	font-weight    : 700;
	line-height    : 19px;
	text-transform : uppercase;
	color          : var(--ac-footer-cream);
}

.ac-site-footer-value {
	font-family : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size   : 14px;
	font-weight : 400;
	line-height : 19px;
	color       : var(--ac-footer-cream);
}

/* ── Link columns (Shop / Company / Help) ───────────────────────
   Rendered from wp_nav_menu() — editable via Appearance > Menus. */
.ac-site-footer-col {
	display        : flex;
	flex-direction : column;
	gap            : 16px;
	flex           : 0 0 auto; /* size to its own content (item text), not a fixed column width — Figma's three columns are 138/89/158px because that's what "Shop"/"Company"/"Help" each naturally need, not an even split */
}

/* Push the first nav column (and everything after it — the other columns +
   the CTA) over to the right, leaving the contact block alone on the left.
   That single auto-margin gap groups the link columns next to the buttons,
   matching the Figma layout. */
.ac-site-footer-contact + .ac-site-footer-col { margin-left: auto; }

.ac-site-footer-col-title {
	font-family    : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size      : 12px;
	font-weight    : 700;
	line-height    : 17px;
	text-transform : uppercase;
	color          : var(--ac-footer-cream);
}

.ac-site-footer-col-list {
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	list-style     : none;
	margin         : 0;
	padding        : 0;
}

.ac-site-footer-col-list a {
	font-family     : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size       : 14px;
	font-weight     : 400;
	line-height     : 19px;
	color           : var(--ac-footer-cream);
	text-decoration : none;
}

.ac-site-footer-col-list a:hover { text-decoration: underline; }

/* ── Buttons + social icons ──────────────────────────────────── */
.ac-site-footer-cta {
	display         : flex;
	flex-direction  : column;
	justify-content : space-between;
	align-items     : flex-end;
	gap             : 48px;
	flex            : 0 1 200px;
	/* Stretch to the full height of the tallest column (the contact block)
	   so justify-content:space-between actually has room to work — buttons
	   pinned to the top, social icons dropped to the bottom, per Figma.
	   Overrides the row's align-items:flex-start for this column only. */
	align-self      : stretch;
}

.ac-site-footer-buttons {
	display        : flex;
	flex-direction : column;
	align-items    : flex-end;
	gap            : 16px;
}

.ac-site-footer .ac-btn {
	display          : inline-flex;
	align-items      : center;
	justify-content  : center;
	padding          : 11px 16px;
	background       : var(--ac-footer-cream);
	color            : var(--ac-footer-dark);
	border           : 1px solid var(--ac-footer-dark);
	font-family      : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size        : 12px;
	font-weight      : 700;
	line-height      : 14px;
	text-align       : center;
	text-transform   : uppercase;
	text-decoration  : none;
	letter-spacing   : .5px;
	white-space      : nowrap;
	transition       : background 0.2s ease, color 0.2s ease;
}

.ac-site-footer .ac-btn:hover {
	background : var(--ac-footer-dark);
	color      : var(--ac-footer-cream);
	border-color : var(--ac-footer-cream);
}

.ac-site-footer-social {
	display     : flex;
	flex-direction : row;
	align-items : center;
	gap         : 12px;
}

.ac-site-footer-social-icon {
	display         : flex;
	align-items     : center;
	justify-content : center;
	line-height     : 0;
}

.ac-site-footer-social-icon svg { display: block; }

/* ── Bottom bar ──────────────────────────────────────────────── */
.ac-site-footer-base {
	display         : flex;
	flex-wrap       : wrap;
	flex-direction  : row;
	justify-content : space-between;
	align-items     : center;
	gap             : 12px;
	width           : 100%;
	padding-top     : 24px;
	border-top      : 1px solid var(--ac-footer-cream);
}

.ac-site-footer-copy {
	font-family : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size   : 14px;
	font-weight : 400;
	line-height : 19px;
	color       : var(--ac-footer-cream);
	margin      : 0;
}

.ac-site-footer-legal {
	display : flex;
	flex-direction : row;
	gap     : 20px;
}

/* wp_nav_menu still wraps each item in <li>, even though items_wrap swaps
   the outer <ul> for a plain <div> here — reset the marker/spacing that
   would otherwise leave a bullet in front of each link. */
.ac-site-footer-legal li {
	list-style : none;
	margin     : 0;
	padding    : 0;
}

.ac-site-footer-legal a {
	font-family     : 'Satoshi Variable', system-ui, sans-serif !important;
	font-size       : 14px;
	font-weight     : 400;
	line-height     : 19px;
	color           : var(--ac-footer-cream);
	text-decoration : none;
}

.ac-site-footer-legal a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* Drop the desktop right-cluster: columns flow left-to-right again. */
	.ac-site-footer-contact + .ac-site-footer-col { margin-left: 0; }
	.ac-site-footer-cta { flex-basis: 100%; align-items: flex-start; margin-left: 0; }
	.ac-site-footer-buttons { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
	.ac-site-footer-social { justify-content: flex-start; }
}

/* Phone layout (per the mobile Figma): a two-column grid —
     row 1: Email+Phone | Address+Showroom
     row 2: Shop        | Company
     row 3: Help        | Text Us / Free Design Call buttons
     row 4: social icons, centered, spanning both columns
   …then the bottom bar stacks with the legal links ABOVE the copyright. */
@media (max-width: 600px) {
	.ac-site-footer { padding: 40px 20px 24px; gap: 32px; }

	.ac-site-footer-links {
		display               : grid;
		grid-template-columns : 1fr 1fr;
		gap                   : 36px 24px;
	}

	/* Contact spans the full row and splits into its two groups. */
	.ac-site-footer-contact {
		grid-column    : 1 / -1;
		flex-direction : row;
		align-items    : flex-start;
		gap            : 24px;
	}

	.ac-site-footer-contact-group {
		display        : flex;
		flex-direction : column;
		gap            : 30px;
		flex           : 1 1 0;
		min-width      : 0;
	}

	/* Dissolve the CTA wrapper so the buttons and the social row become
	   grid items of .ac-site-footer-links themselves — buttons take the
	   cell beside Help, social gets its own full-width centered row. */
	.ac-site-footer-cta { display : contents; }

	.ac-site-footer-buttons {
		flex-direction : column;
		align-items    : flex-start;
		gap            : 16px;
		align-self     : end; /* pin to the bottom of the Help row, per the mobile Figma */
	}

	.ac-site-footer-social {
		grid-column     : 1 / -1;
		justify-content : center;
		gap             : 24px;
	}

	/* Menu links sit tight under each other (line-height only, no gap). */
	.ac-site-footer-col-list { gap: 0; }

	/* Bottom bar: legal links above the copyright, both left-aligned. */
	.ac-site-footer-base { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ac-site-footer-copy { order: 2; }
}