/**
 * Promen Footer Widget
 *
 * Design tokens mirror the Figma design (node 636-2932).
 * Responsive: 3 columns → 2 columns (≤ 1024 px) → 1 column (≤ 640 px).
 * WCAG 2.2 AAA: contrast, focus indicators, touch targets.
 */

/* ── Tokens ────────────────────────────────────────────────────────── */
.promen-footer {
	--pf-bg:            #f9fbfc;
	--pf-color:         #002469;
	--pf-accent:        #00a6d6;
	--pf-font-light:    300;
	--pf-font-bold:     700;
	--pf-size:          1rem;        /* 16 px */
	--pf-lh:            2rem;        /* 32 px */
	--pf-col-gap:       7.9375rem;   /* 127 px */
	--pf-pt:            5rem;        /* 80 px */
	--pf-px:            9.75rem;     /* 156 px */
	--pf-bottom-pt:     1.5rem;
	--pf-bottom-pb:     1.5rem;
	--pf-location-gap:  7.75rem;     /* ~124 px between location blocks */
	--pf-focus-color:   #002469;
	--pf-focus-width:   3px;
	--pf-focus-offset:  3px;
	--pf-radius:        4px;
	--pf-social-size:   3rem;        /* 48 px – LinkedIn circle */
	--pf-icon-size:     1.25rem;     /* 20 px */
}

/* ── Base ──────────────────────────────────────────────────────────── */
.promen-footer {
	background-color: transparent;
	color:            var(--pf-color);
	font-family:      'Manrope', sans-serif;
	font-size:        var(--pf-size);
	font-weight:      var(--pf-font-light);
	line-height:      var(--pf-lh);
	box-sizing:       border-box;
}

.promen-footer *,
.promen-footer *::before,
.promen-footer *::after {
	box-sizing: inherit;
}

/* ── Screen-reader-only helper ─────────────────────────────────────── */
.promen-footer__sr-only {
	position: absolute;
	width:    1px;
	height:   1px;
	padding:  0;
	margin:   -1px;
	overflow: hidden;
	clip:     rect(0, 0, 0, 0);
	white-space: nowrap;
	border:   0;
}

/* ── Body – 3-column flex ──────────────────────────────────────────── */
.promen-footer__body {
	display:        flex;
	flex-direction: row;
	gap:            var(--pf-col-gap);
	max-width:      75rem;   /* 1408 px – prevents over-stretch on wide screens */
	margin-inline:  auto;
	padding:        3rem 0;
	align-items:   	space-between;
}

/* ── Columns ───────────────────────────────────────────────────────── */
.promen-footer__column {
	flex:      0 0 auto;
	min-width: 0;
}

.promen-footer__column--locations {
	width: 17.5625rem; /* 281 px */
	display: flex;
	flex-direction: column;
	gap: 0;
}

.promen-footer__column--contact {
	width: 17.6875rem; /* 283 px */
}

.promen-footer__column--nav {
	width: 17.5625rem; /* 281 px */
}

/* ── Location blocks ───────────────────────────────────────────────── */
.promen-footer__location {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem; /* 12 px */
}

.promen-footer__location + .promen-footer__location {
	margin-top: 2rem;
}

.promen-footer__location-title {
	font-weight:  var(--pf-font-bold);
	line-height:  var(--pf-lh);
	margin:       0;
}

/* ── Address ───────────────────────────────────────────────────────── */
.promen-footer__address {
	font-style:  normal;
	font-weight: var(--pf-font-light);
	line-height: var(--pf-lh);
	margin:      0;
}

.promen-footer__address--postal {
	margin-bottom: 0.75rem;
}

/* ── Social – LinkedIn ─────────────────────────────────────────────── */
.promen-footer__social {
	margin-top: var(--pf-location-gap);
}

.promen-footer__social-link {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--pf-social-size);
	height:          var(--pf-social-size);
	min-width:       44px; /* SC 2.5.5 AAA */
	min-height:      44px;
	border:          1px solid var(--pf-accent);
	border-radius:   100px;
	color:           var(--pf-accent);
	text-decoration: none;
	transition:      background-color 0.15s ease, color 0.15s ease;
}

.promen-footer__social-link svg,
.promen-footer__social-link i {
	width:      var(--pf-icon-size);
	height:     var(--pf-icon-size);
	font-size:  var(--pf-icon-size);
	line-height: 1;
	display:    block;
}

.promen-footer__social-link:hover,
.promen-footer__social-link:focus-visible {
	background-color: var(--pf-accent);
	color:            #fff;
}

/* ── Column heading (bold label row) ──────────────────────────────── */
.promen-footer__column-heading {
	font-weight:   var(--pf-font-bold);
	line-height:   var(--pf-lh);
	margin:        0 0 0.75rem;
}

/* ── Contact list ──────────────────────────────────────────────────── */
.promen-footer__contact-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
}

.promen-footer__contact-item {
	display: flex;
}

.promen-footer__contact-link {
	display:         inline-flex;
	align-items:     center;
	gap:             0.75rem;
	color:           var(--pf-color) !important;
	text-decoration: none;
	font-weight:     var(--pf-font-light);
	line-height:     var(--pf-lh);
	/* Ensure the entire row is a large enough touch target */
	min-height:      44px; /* SC 2.5.5 AAA */
	padding:         0.125rem 0;
}

.promen-footer__contact-link:hover,
.promen-footer__contact-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.promen-footer__contact-icon {
	flex-shrink: 0;
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	width:       var(--pf-icon-size);
	height:      var(--pf-icon-size);
	font-size:   var(--pf-icon-size);
	line-height: 1;
}

.promen-footer__contact-icon svg,
.promen-footer__contact-icon i {
	display: block;
	width:   var(--pf-icon-size);
	height:  var(--pf-icon-size);
	font-size: var(--pf-icon-size);
	line-height: 1;
}

.promen-footer__contact-text {
	white-space: nowrap;
}

/* ── Footer nav (wp_nav_menu output) ──────────────────────────────── */
.promen-footer__nav {
	margin:  0;
	padding: 0;
}

.promen-footer__nav-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
}

.promen-footer__nav-list .menu-item {
	display: block;
}

.promen-footer__nav-list .menu-item a {
	display:         inline-flex;
	align-items:     center;
	min-height:      44px; /* SC 2.5.5 AAA */
	padding:         0.125rem 0;
	color:           var(--pf-color);
	font-weight:     var(--pf-font-light);
	line-height:     var(--pf-lh);
	text-decoration: none;
	white-space:     nowrap;
}

.promen-footer__nav-list .menu-item a:hover,
.promen-footer__nav-list .menu-item a:focus-visible {
	text-decoration:       underline;
	text-underline-offset: 3px;
}

.promen-footer__nav-placeholder {
	color:       var(--pf-color);
	font-style:  italic;
	opacity:     0.65;
	margin:      0;
}

/* ── Bottom bar ────────────────────────────────────────────────────── */
.promen-footer__bottom {
	border-top: 1px solid rgba(0, 36, 105, 0.12);
}

.promen-footer__bottom-inner {
	max-width:     75rem;
	margin-inline: auto;
	padding:      2rem 0;
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         1rem 2.5rem; /* 40 px column gap */
}

.promen-footer__copyright {
	font-family:  'Plus Jakarta Sans', 'Manrope', sans-serif;
	font-weight:  var(--pf-font-light);
	line-height:  var(--pf-lh);
	margin:       0;
	flex-shrink:  0;
}

.promen-footer__legal-nav {
	margin: 0;
}

.promen-footer__legal-list {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.5rem 2rem;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.promen-footer__legal-link {
	font-family:     'Plus Jakarta Sans', 'Manrope', sans-serif;
	font-weight:     var(--pf-font-light);
	line-height:     var(--pf-lh);
	color:           var(--pf-color);
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
	min-height:      44px; /* SC 2.5.5 AAA */
}

.promen-footer__legal-link:hover,
.promen-footer__legal-link:focus-visible {
	text-decoration:       underline;
	text-underline-offset: 3px;
}

/* ── Focus indicators – WCAG 2.2 AAA SC 2.4.12 ────────────────────── */
/*
   All interactive elements must show a focus indicator that:
   – encloses the component,
   – has ≥ 2 px perimeter thickness (we use 3 px),
   – contrasts ≥ 3:1 against adjacent colours.
   We achieve this via :focus-visible + outline.
*/
.promen-footer a:focus-visible,
.promen-footer button:focus-visible {
	outline:        var(--pf-focus-width) solid var(--pf-focus-color);
	outline-offset: var(--pf-focus-offset);
	border-radius:  var(--pf-radius);
}

/* Remove default focus ring for mouse users */
.promen-footer a:focus:not(:focus-visible),
.promen-footer button:focus:not(:focus-visible) {
	outline: none;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.promen-footer__social-link {
		transition: none;
	}
}

/* ── Tablet – 2-column layout (≤ 1100 px) ─────────────────────────── */
@media (max-width: 68.75em) { /* 1100 px */

	.promen-footer__body {
		--pf-col-gap: 3rem;
		padding-left:  3rem;
		padding-right: 3rem;
		flex-wrap:     wrap;
	}

	.promen-footer__column--locations {
		flex:  0 0 calc(50% - 1.5rem);
		width: auto;
	}

	.promen-footer__column--contact {
		flex:  0 0 calc(50% - 1.5rem);
		width: auto;
	}

	.promen-footer__column--nav {
		flex:  0 0 100%;
		width: auto;
	}

	.promen-footer__bottom-inner {
		padding-left:  3rem;
		padding-right: 3rem;
	}
}

/* ── Mobile – single column (≤ 640 px) ────────────────────────────── */
@media (max-width: 40em) { /* 640 px */

	.promen-footer__body {
		--pf-pt:      2.5rem;
		--pf-col-gap: 2rem;
		padding-left:  1.25rem;
		padding-right: 1.25rem;
		flex-direction: column;
	}

	.promen-footer__column--locations,
	.promen-footer__column--contact,
	.promen-footer__column--nav {
		flex:  0 0 100%;
		width: auto;
	}

	/* Reduce vertical gap between the two location blocks on small screens */
	.promen-footer__location + .promen-footer__location {
		margin-top: 2rem;
	}

	.promen-footer__social {
		margin-top: 2rem;
	}

	.promen-footer__bottom-inner {
		padding-left:  1.25rem;
		padding-right: 1.25rem;
		flex-direction: column;
		align-items:   flex-start;
		gap:           0.5rem;
	}

	.promen-footer__legal-list {
		gap: 0.25rem 1.5rem;
	}

	/* Ensure contact links wrap gracefully */
	.promen-footer__contact-text,
	.promen-footer__nav-list .menu-item a {
		white-space: normal;
	}
}

/* ── High-contrast mode (Windows forced colours) ───────────────────── */
@media (forced-colors: active) {
	.promen-footer__social-link {
		border-color: ButtonText;
		color:        ButtonText;
		forced-color-adjust: auto;
	}

	.promen-footer a:focus-visible,
	.promen-footer button:focus-visible {
		outline-color: Highlight;
	}
}