/**
 * Footer styles — Homepage
 *
 * Social strip: centered row of platform icons with brand-color hover.
 * Footer: four-column layout with nav columns + bottom bar.
 *
 * Social icon hover colors use each platform's official brand color.
 * To remove an icon, delete its <a> block in footer.php — no CSS change needed.
 *
 * Five platforms, locked 2026-08-10: Instagram, Facebook, TikTok, X,
 * YouTube. Snapchat and Pinterest were removed — the brand does not maintain
 * them. Adding one back means an <a> block here and a hover rule below.
 *
 * EXEMPTION — external brand colors:
 *   The "no hardcoded hex" rule does not apply to the social-icon
 *   hover colors below. These are third-party platform brand colors
 *   (Instagram, Facebook, TikTok, YouTube) and are intentionally hardcoded so
 *   they remain stable regardless of our token palette. Do NOT migrate these
 *   to brand variables.
 *   X is deliberately NOT in that list: its brand colour is plain white,
 *   which is a token we own, so it uses --color-text-light. The exception
 *   registry does not sanction a hex for X.
 *
 * @package parfumsabsoluta
 * @since   1.0.0
 */


/* ================================================================
   SOCIAL STRIP
   ================================================================ */

.pa-social {
	padding: 44px 40px;
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.1);
	border-bottom: 0.5px solid rgba(var(--color-accent-rgb), 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 36px;
	flex-wrap: wrap;
	background: var(--color-primary);
}

.pa-social__label {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-muted);
}

.pa-social__icons {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}


/* Individual icon */

.pa-social__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-muted);
	text-decoration: none;
	transition: color 0.25s ease, transform 0.2s ease;
}

.pa-social__icon svg {
	width: 18px;
	height: 18px;
}

.pa-social__icon:hover {
	transform: translateY(-2px);
}


/* Platform brand colors on hover */

.pa-social__icon--instagram:hover {
	color: #E4405F;
}

.pa-social__icon--facebook:hover {
	color: #1877F2;
}

.pa-social__icon--tiktok:hover {
	color: #00F2EA;
}

.pa-social__icon--x:hover {
	color: var(--color-text-light);
}

.pa-social__icon--youtube:hover {
	color: #FF0000;
}


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

.pa-footer {
	padding: 72px 40px 0;
	background: var(--color-primary-2);
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.1);
}


/* Inner grid — 4 columns */

/* Centred flex row, not a fr-grid (locked 2026-08-11).
   A `1.4fr 1fr 1fr 1fr` grid gives each column a share of the full width, so
   every column's contents sat at the LEFT edge of a wide track and the gaps
   between them were whatever was left over — visibly uneven, and the outer
   two pinned to the page edges. As a centred flex row the columns are content
   width, the gap between them is one declared value, and the whole group is
   centred with equal air on both sides. That is what makes the distance from
   the lockup to each column read as symmetric.
   The gap is capped at 220px (measured and confirmed in review) and falls
   away on narrower viewports so the row never outgrows the page. */

.pa-footer__inner {
	display: flex;
	justify-content: center;
	gap: clamp(56px, 14vw, 220px);
	/* Tightened from 56px (2026-08-10): the brand column is the tallest
	   in the row, so its foot set the distance to the legal strip and the
	   menu columns were left sitting over a lot of nothing. */
	padding-bottom: 32px;
}


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

/* The brand column's mark is the shared lockup partial
   (template-parts/global/absolvta-lockup.php). Its structure, tracking,
   colours and rule gradient are global — assets/css/variables.css, under
   ".pa-lockup".
   That block's default scale IS the footer's scale, so there is deliberately
   nothing to set here: the footer is the small-size case the defaults were
   written for. The homepage hero is the one that overrides them. Change the
   footer's size in variables.css, not by adding overrides here. */

/* The lockup and the tagline are centred within the brand column rather than
   flush left (decision of 2026-08-10). Left-aligned, the mark sat hard against the
   page gutter with the whole column's slack opening between it and the menu
   columns; centred, the four columns read as one balanced row. The lockup's
   own internal alignment was already centred, so this only moves the block. */

.pa-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pa-footer__logo {
	display: inline-flex;
	text-decoration: none;
	margin-bottom: 20px;
}

.pa-footer__tagline {
	font-family: var(--font-display);
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-muted);
	/* Was 32px on top of the logo's own 20px bottom margin — 52px of air
	   split the brand block in two and made the column tall enough to set
	   the whole row's height. Tightened so the mark and its line read as
	   one unit. */
	margin-top: 16px;
	margin-bottom: 2px;
}


/* ================================================================
   NAV COLUMNS
   ================================================================ */

.pa-footer__col-title {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 20px;
	opacity: 0.7;
}

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

.pa-footer__col li {
	margin-bottom: 4px;
}

.pa-footer__col a {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-base);
}

.pa-footer__col a:hover,
.pa-footer__col a:focus-visible {
	color: var(--color-accent);
}


/* ================================================================
   BOTTOM BAR
   ================================================================ */

.pa-footer__bottom {
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.08);
	padding: 24px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	row-gap: var(--space-md);
}

.pa-footer__bottom p {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 1.5px;
	color: var(--color-muted-2);
}

.pa-footer__siren {
	font-variant-numeric: tabular-nums;
}


/* ── Legal links row ──
 * Full-width line above the copyright / SIREN line. width:100% forces
 * it onto its own flex line so the two paragraphs below keep their
 * existing space-between placement. */

.pa-footer__legal {
	width: 100%;
}

.pa-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-md);
	row-gap: var(--space-sm);
}

/* Button reset first, so the typographic rule below wins the cascade
 * and the "Gérer les cookies" button reads identically to the links. */
.pa-footer__manage-cookies {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
}

.pa-footer__legal a,
.pa-footer__manage-cookies {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 1.5px;
	color: var(--color-muted-2);
	text-decoration: none;
	transition: color var(--transition-base);
}

.pa-footer__legal a:hover,
.pa-footer__legal a:focus-visible,
.pa-footer__manage-cookies:hover,
.pa-footer__manage-cookies:focus-visible {
	color: var(--color-accent);
}


/* ================================================================
   RESPONSIVE — ≤ 960px
   ================================================================ */

@media (max-width: 960px) {

	.pa-social {
		padding: 36px 24px;
		gap: 24px;
	}

	/* Two-up. The row wraps rather than shrinking its gap to nothing, and
	   the brand column takes a full line of its own so the mark is not
	   squeezed against a menu. */
	.pa-footer__inner {
		flex-wrap: wrap;
		gap: 40px 64px;
	}

	.pa-footer__brand {
		flex: 1 0 100%;
	}

	.pa-footer {
		padding: 56px 24px 0;
	}
}


/* ================================================================
   RESPONSIVE — ≤ 600px
   ================================================================ */

@media (max-width: 600px) {

	.pa-social {
		flex-direction: column;
		gap: 16px;
	}

	.pa-social__icons {
		max-width: 220px;
	}

	.pa-footer__inner {
		flex-direction: column;
		align-items: center;
		gap: 36px;
		text-align: center;
	}

	/* .pa-footer__logo centring used to live here; the brand column is
	   centred at every width now, so the override was redundant. */

	.pa-footer__bottom {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}

	.pa-footer__legal ul {
		justify-content: center;
	}
}