/*
 * footer.css — the site footer.
 * Contents: 1 footer shell · 2 brand column · 3 social links · 4 link columns ·
 * 4b certification row · 5 bottom bar · 6 narrow screens.
 *
 * Loaded by inc/assets.php as "synergi-footer", on every page, depending on the
 * "synergi-base" handle. Markup: footer.php and parts/footer-links.php.
 * Needs no JavaScript.
 *
 * As in header.css, these are the design source's rules consolidated to the
 * value that actually wins. main.min.css sets .footer-grid's columns seven
 * times; the last unconditional pass beats five of them outright, so only two
 * of its breakpoints ever fire. Those two are what is written here.
 *
 * Class map, design source -> theme:
 *   .site-footer  -> .syn-site-footer     .footer-grid    -> .syn-footer-grid
 *   .footer-brand -> .syn-footer-brand    .footer-email   -> .syn-footer-email
 *   .social-links -> .syn-social-links    .footer-heading -> .syn-footer-heading
 *   .footer-links -> .syn-footer-links    .footer-bottom  -> .syn-footer-bottom
 *
 * Two classes differ from the source on purpose.
 *
 * .footer-conversation is not carried across. Its only rules in main.min.css
 * were grid-column overrides inside media queries that a later unconditional
 * pass beats, so they never fire at any width — the class is dead weight there
 * and would be a class with no rule here, which CLAUDE.md §13 forbids.
 *
 * .syn-footer-column is new. The design styles three columns that happen to be
 * identical; naming them once gives them one place to change.
 *
 * .syn-footer-certs is new (7 Oct). The design source predates the ISO
 * certifications, so the row has no counterpart in main.min.css; it borrows
 * the footer's own label, text and rule values and introduces nothing.
 */

.syn-site-footer {
	--syn-footer-text: color-mix(in srgb, var(--syn-white) 86%, transparent);
	--syn-footer-muted: color-mix(in srgb, var(--syn-white) 76%, transparent);
	/*
	 * 65%, not the design's 45%. The bottom bar is not decoration — it holds the
	 * Terms and Privacy links, so §9's 4.5:1 applies to it like any other body
	 * text. 45% white on navy measures 3.04:1; 65% is the first step that clears
	 * the floor, at 4.57:1. Still visibly quieter than the columns above it.
	 */
	--syn-footer-faint: color-mix(in srgb, var(--syn-white) 65%, transparent);
	--syn-footer-rule: color-mix(in srgb, var(--syn-white) 12%, transparent);
	/*
	 * The grid's track list, named once because two rows read it: the link grid
	 * and the certification row (4b), whose label must sit on the logo's edge
	 * and whose badges must start under "Services". One place to retune, so the
	 * two can never drift apart (CLAUDE.md §13).
	 */
	--syn-footer-columns: minmax(14rem, 1.2fr) repeat(4, minmax(0, 0.8fr));
}

/* ==========================================================================
   1. Footer shell
   ========================================================================== */

/*
 * Solid navy rather than the design's --gradient-brand-deep, decided 25 Aug.
 *
 * That gradient runs navy to cyan at 45deg, which puts its lightest point in the
 * top-right — exactly where the last column's heading sits. Measured against
 * white: 8.39:1 at the navy end, 4.48:1 at the midpoint, 2.61:1 at the cyan end,
 * against the 4.5:1 floor in CLAUDE.md §9. Roughly half the footer failed, and
 * the links failed further into it than the headings did.
 *
 * A navy scrim over the gradient was the alternative and reached only 4.78:1 —
 * passing by 0.28, and muting the gradient so far that it barely read as one.
 * Navy is an approved §3 token, passes at every position and every viewport, and
 * matches what the header already becomes once it is scrolled.
 */
.syn-site-footer {
	padding-block-start: clamp(4rem, 8vw, 7rem);
	background-color: var(--syn-navy);
	color: var(--syn-white);
}

.syn-footer-grid {
	display: grid;
	min-inline-size: 0;
	grid-template-columns: var(--syn-footer-columns);
	gap: clamp(2rem, 4.5vw, 4rem);
	padding-block-end: 4rem;
}

/* ==========================================================================
   2. Brand column
   ========================================================================== */

.syn-footer-brand .syn-brand {
	margin-block-end: 1.5rem;
}

.syn-footer-brand .syn-brand__logo {
	inline-size: 10rem;
}

.syn-footer-brand > p {
	max-inline-size: 24rem;
	color: var(--syn-footer-muted);
	font-size: 0.82rem;
}

.syn-footer-email {
	display: inline-block;
	margin-block-start: 0.35rem;
	padding-block-end: 0.15rem;
	border-block-end: 1px solid color-mix(in srgb, var(--syn-white) 40%, transparent);
	color: var(--syn-white);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--syn-duration-fast);
}

.syn-footer-email:hover {
	border-block-end-color: var(--syn-white);
	color: var(--syn-white);
}

/* ==========================================================================
   3. Social links
   ========================================================================== */

.syn-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.syn-social-links a {
	display: grid;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--syn-white) 34%, transparent);
	border-radius: 50%;
	color: var(--syn-white);
	text-decoration: none;
	transition:
		background-color var(--syn-duration-fast),
		border-color var(--syn-duration-fast),
		color var(--syn-duration-fast),
		transform var(--syn-duration-fast) var(--syn-ease-out);
}

.syn-social-links a:hover,
.syn-social-links a:focus-visible {
	border-color: var(--syn-white);
	background-color: var(--syn-white);
	color: var(--syn-navy);
	transform: translateY(-2px);
}

.syn-social-links svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	fill: currentColor;
}

/* ==========================================================================
   4. Link columns
   ========================================================================== */

/*
 * min-inline-size: 0 stops a long unbreakable link text ("BPO Services in
 * Saudi Arabia") from forcing the grid track wider than its share and pushing
 * the whole footer into a horizontal scroll. Grid items default to auto, which
 * means "at least as wide as my content".
 */
.syn-footer-column {
	min-inline-size: 0;
}

/*
 * Full white and a heavier weight, so a column heading reads as a heading
 * rather than as the first, slightly faded item in its own list. The design had
 * these at 72% white against links at 86% — the label was quieter than the
 * things it labelled, which inverted the hierarchy. Changed on request, 25 Aug.
 * No new colour: white is already in the §3 palette, and the family is still
 * inherited Montserrat.
 */
/*
 * A <p> since 10 Sep, not an <h2> (see parts/footer-links.php). The top margin
 * is zeroed because a paragraph can pick one up where a heading here had none.
 */
.syn-footer-heading {
	margin-block-start: 0;
	margin-block-end: 1.2rem;
	color: var(--syn-white);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.syn-footer-links {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.syn-footer-links a {
	color: var(--syn-footer-text);
	font-size: 0.8rem;
	text-decoration: none;
	transition: color var(--syn-duration-fast);
}

.syn-footer-links a:hover {
	color: var(--syn-white);
}

/*
 * An entry whose page does not exist yet (parts/footer-links.php renders it as
 * a <span>). Dimmed so it does not read as a link that failed to work, and it
 * carries no hover or pointer affordance at all.
 */
.syn-footer-links__pending {
	color: var(--syn-footer-faint);
	font-size: 0.8rem;
}

/* ==========================================================================
   4b. Certification row
   Added 7 Oct. Three ISO badges between the link grid and the bottom bar, on
   every page. A badge is drawn at 5rem: larger and three gold rosettes
   outweigh the 10rem logo above them, smaller and a rosette reads as a coin.
   At that size the lettering inside the artwork is ~6px and is not relied on —
   the standard and its scope are real text beside each badge, in the footer's
   existing white and muted steps, so the claim stays legible and searchable
   whatever the badge does. The images are decorative (alt="") for the same
   reason: the text already says it.
   ========================================================================== */

.syn-footer-certs {
	display: grid;
	grid-template-columns: var(--syn-footer-columns);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
	padding-block: 2rem;
	border-block-start: 1px solid var(--syn-footer-rule);
}

/* The label reuses .syn-footer-heading; only its bottom margin differs, since
   nothing sits under it here. */
.syn-footer-certs__label {
	margin-block-end: 0;
}

/* Spans the four link-column tracks, so the first badge starts under the
   first column heading at every width where the grid has five tracks. */
.syn-footer-certs__list {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2 / -1;
	align-items: center;
	gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.syn-footer-certs__item {
	display: flex;
	min-inline-size: 0;
	align-items: center;
	gap: 0.85rem;
}

/* A fixed block-size plus the width and height attributes in the markup give
   the row its height before the lazy image arrives — no layout shift. */
.syn-footer-certs__badge {
	flex: none;
	block-size: 5rem;
	inline-size: auto;
}

.syn-footer-certs__text {
	display: grid;
	gap: 0.15rem;
	line-height: 1.3;
}

.syn-footer-certs__name {
	color: var(--syn-white);
	font-size: 0.8rem;
	font-weight: 700;
}

.syn-footer-certs__scope {
	color: var(--syn-footer-muted);
	font-size: 0.72rem;
}

/* ==========================================================================
   5. Bottom bar
   ========================================================================== */

.syn-footer-bottom {
	display: flex;
	min-block-size: 5rem;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	border-block-start: 1px solid var(--syn-footer-rule);
	color: var(--syn-footer-faint);
	font-size: 0.68rem;
}

.syn-footer-bottom p {
	margin: 0;
}

.syn-footer-bottom div {
	display: flex;
	gap: 1.5rem;
}

.syn-footer-bottom a {
	color: inherit;
	text-decoration: none;
}

.syn-footer-bottom a:hover {
	color: var(--syn-white);
}

/* "Cookie settings" — a button, because it opens the consent banner rather
   than going anywhere, dressed to sit in line with the two links beside it. */
.syn-footer-consent {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	cursor: pointer;
}

.syn-footer-consent:hover {
	color: var(--syn-white);
}

/* ==========================================================================
   6. Narrow screens
   Rebuilt 31 Aug. The footer used to end at one column below 27rem, which put
   twenty links in a single stack taller than the phone showing it — the reader
   scrolled past the whole site map to reach the copyright line. It now stops at
   two columns and never goes narrower: two columns of short link text is
   comfortably readable at 320px and halves the height.
   ========================================================================== */

/*
 * Small laptop: the certification row gives up its first track before the link
 * grid does. Three badge-and-text items need about 54rem beside the label, and
 * the four-column span is narrower than that below ~75rem, where they wrapped
 * 2 + 1 against a label floating mid-height. The label takes its own line and
 * the three items share the next one, wrapping by themselves when it gets tight.
 */
@media (max-width: 75rem) {

	.syn-footer-certs {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.syn-footer-certs__list {
		grid-column: auto;
	}
}

/* Tablet and small laptop: the brand takes its own row, the four link columns
   share the next one. */
@media (max-width: 61.25rem) {

	.syn-footer-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}

	.syn-footer-brand {
		grid-column: 1 / -1;
		max-inline-size: 34rem;
	}
}

/* Large phone and below: two columns, and they stay two. */
@media (max-width: 47.99rem) {

	.syn-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem clamp(1.25rem, 5vw, 2rem);
		padding-block-end: 2.5rem;
	}

	.syn-footer-bottom,
	.syn-footer-bottom > div {
		max-inline-size: 100%;
		flex-wrap: wrap;
	}

	.syn-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding-block: 1.25rem;
	}

	/* Three centred tiles, badge above text. Between here and the 30rem
	   query below — large phones held sideways, small tablets — a tile is at
	   least 140px wide and holds "Environmental management" on two lines. */
	.syn-footer-certs {
		padding-block: 1.5rem;
	}

	.syn-footer-certs__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem 0.75rem;
	}

	.syn-footer-certs__item {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}
}

/*
 * Small phone. Still two columns; only the spacing and the heading tighten, so
 * the footer stays a footer rather than becoming a second page.
 */
@media (max-width: 30rem) {

	.syn-footer-grid {
		gap: 1.75rem 1.25rem;
	}

	.syn-footer-heading {
		margin-block-end: 0.75rem;
	}

	.syn-footer-bottom div {
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Badge-beside-text rows, as on desktop, at 4rem: every phone held upright
	   lands here (480px and under), where a 113px tile would already squeeze
	   the text and a 90px one at 320px would break "Environmental" mid-word.
	   Checked 7 Oct at 390, 360 and 320 (emulated): three rows, start-aligned
	   like the link columns above them. The markup's sizes attribute names
	   4rem here so the same srcset still picks the right render. */
	.syn-footer-certs__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}

	.syn-footer-certs__item {
		flex-direction: row;
		gap: 0.85rem;
		text-align: start;
	}

	.syn-footer-certs__badge {
		block-size: 4rem;
	}
}