/* =============================================================================
   footer.css — Veil Group site footer (FOOTER-01, 2026-08-04)

   A VERBATIM PORT. Every declaration below was lifted from the footer as it
   rendered before this rebuild, from three sources:

     1. the inline <style> block GreenShift emitted inside footer widget
        `block-13` (ct-footer-sidebar-6) — the bulk of it;
     2. `assets/dist/main.css` (Coalition Technologies child theme), rules
        `.footer-main-col-links-wrapper a.wp-block-navigation-item__content`
        {,:hover} — the footer menu link colour + hover underline;
     3. `assets/css/font-override.css`, whose `[class*="heading"]` and
        `h1..h6` !important rules were silently re-typing GreenShift's
        `gspb_heading` elements to Source Serif 4. See §BRAND and §NAV below.

   Nothing here is new design. Selectors were renamed (gspb ids -> .veil-footer*)
   and the `body.gspb-bodyfront` prefix was dropped by folding its declarations
   in as the effective value, so the footer no longer depends on the GreenShift
   plugin adding that body class. Markup: inc/veil-footer.php.

   Do not "tidy" the odd numbers (21.55039%, 69.224806%, 999.98px, 689.98px,
   1.3571428em, the 24px margin-top): each is the exact value that was
   rendering. Changing one is a visual change to an approved, live footer.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   SHELL
   The 24px margin-top is not decoration. Until this rebuild the widget content
   was run through wpautop, which left an empty <p> ahead of the footer row;
   that <p> carried `margin-block-end: var(--theme-content-spacing)` (24px) from
   Blocksy, pushing the whole footer down by 24px on every page. The <p> is gone
   now, so the offset is restated here to keep the footer where it has always
   been. Both the strip above and the row itself are #084026, so this space has
   never been visible as anything but height.
   -------------------------------------------------------------------------- */
.veil-footer {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: var(--theme-content-spacing, 24px);
	margin-bottom: 0;
	padding-top: 50px;
	background-color: #084026;
}

.veil-footer__inner,
.veil-footer__main-inner,
.veil-footer__nav-inner,
.veil-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: var(--theme-container-width, 1200px);
	max-width: var(--theme-normal-container-max-width, 1200px);
}

.veil-footer__main,
.veil-footer__nav-row,
.veil-footer__legal {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0;
	margin-bottom: 0;
}

/* every column: GreenShift's `div[id^=gspb_col-id]` base rule */
.veil-footer__wrap,
.veil-footer__brand,
.veil-footer__nav,
.veil-footer__nav-col,
.veil-footer__legal-wrap {
	box-sizing: border-box;
	position: relative;
}

.veil-footer__wrap {
	width: 100%;
}

/* -----------------------------------------------------------------------------
   TOP BAND — brand column + the three menu columns
   Widths are the `body.gspb-bodyfront` values, which is what actually rendered;
   the unprefixed 50%/50% fallback underneath them never applied.
   -------------------------------------------------------------------------- */
.veil-footer__brand {
	width: 21.55039%;
}

.veil-footer__nav {
	width: 69.224806%;
}

@media (max-width: 999.98px) {

	.veil-footer__brand,
	.veil-footer__nav {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   BRAND — logo, tagline, contact list
   Note the tagline: GreenShift declared `font-family: var(--veil-font-body)` on it,
   but font-override.css's `[class*="heading"] { ... !important }` matched its
   `gspb_heading` class and overrode that to the display face. Source Serif 4 is
   therefore what the owner approved, so it is set explicitly here rather than
   left to an accidental substring match on a class name we no longer emit.
   -------------------------------------------------------------------------- */
.veil-footer__logo {
	margin-bottom: 20px;
}

.veil-footer__logo img {
	vertical-align: top;
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

.veil-footer__tagline {
	font-family: var(--veil-font-display, 'Source Serif 4', Georgia, serif);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
	padding-bottom: 40px;
}

.veil-footer__contact-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	position: relative;
	font-family: var(--veil-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5em;
	margin-bottom: 20px;
	color: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
}

.veil-footer__contact-item:hover {
	color: var(--wp--preset--color--card-base, #FFFEFE);
}

/* GreenShift shipped the icons with an inline style="width:5rem;height:5rem;
   margin:10px" and then beat it back down with !important. The inline style is
   gone from the markup, so plain declarations do the job. */
.veil-footer__contact-item svg {
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
}

.veil-footer__contact-item svg path {
	fill: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
}

.veil-footer__contact-item:hover svg path {
	fill: #fffefe;
}

.veil-footer__contact-text {
	margin-left: 15px;
}

/* -----------------------------------------------------------------------------
   LINK TREATMENT — shared by the contact list, the menus and the legal bar.
   A 1px gradient "underline" that wipes in from the left over 0.7s on hover.
   -------------------------------------------------------------------------- */
.veil-footer__contact-item a,
.veil-footer__menu-link,
.veil-footer__legal-item a {
	color: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
	display: inline;
	background-repeat: no-repeat;
	background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
	background-size: 0 95%;
	transition: .7s ease;
	text-decoration: none;
}

.veil-footer__contact-item a:hover,
.veil-footer__menu-link:hover,
.veil-footer__legal-item a:hover {
	background-size: 100% 95%;
}

/* colour-only hovers, which the two icon lists declared separately */
.veil-footer__contact-item a:hover {
	color: #fefefe;
}

/* -----------------------------------------------------------------------------
   MENU COLUMNS
   Blocksy's reset zeroes list margins/padding but `ul, ol` then re-adds
   `padding-inline-start: var(--theme-list-indent)` and a bottom margin, so the
   list reset has to be restated. `font: inherit` in the same reset is why the
   <li> never needed a font rule.
   -------------------------------------------------------------------------- */
.veil-footer__nav-col {
	width: 33.333333333333336%;
	padding-top: 0;
}

@media (max-width: 689.98px) {

	.veil-footer__nav-col {
		width: 100%;
	}

	.veil-footer__nav-col--services {
		padding-top: 20px;
	}

	.veil-footer__nav-col--industries,
	.veil-footer__nav-col--about {
		padding-top: 40px;
	}
}

/* h1..h6 already get the display face from font-override.css with !important;
   declared here too so the rule is legible where the element is defined. */
.veil-footer__nav-title {
	font-family: var(--veil-font-display, 'Source Serif 4', Georgia, serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
	margin: 0;
	padding-bottom: 20px;
}

.veil-footer__menu,
.veil-footer__menu-list {
	line-height: 1.3;
}

.veil-footer__menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}

.veil-footer__menu-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------------------------------------
   LEGAL BAR — copyright + policy links, pipe-separated
   -------------------------------------------------------------------------- */
.veil-footer__legal-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.veil-footer__legal-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 50px;
}

.veil-footer__legal-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	font-size: 14px;
	line-height: 1.3571428em;
	color: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff));
	padding-right: 24px;
	border-right-style: solid;
	border-right-width: 1px;
}

.veil-footer__legal-item:hover {
	color: #eee;
}

.veil-footer__legal-item:first-child {
	padding-left: 0;
}

.veil-footer__legal-item:last-child {
	padding-right: 0;
	border-right: none;
}

/* -----------------------------------------------------------------------------
   LEGAL BAR SEPARATOR, WRAP-AWARE (B-15)
   ROOT CAUSE: the separator is `border-right` on the item (see LEGAL BAR
   above), cancelled only by `:last-child`. The list is `inline-flex` +
   `flex-wrap: wrap`, so the visually-last item of every wrapped row is not
   `:last-child` and keeps a trailing pipe. Confirmed on production: 3 dangling
   rows at 320, 2 at 375, 2 at 390, 1 at 768, 0 at 1440 — including the
   copyright line, which sits alone on row 1 below 690px with a pipe after it.
   (The backlog recorded this as a 375px defect; it is four widths.)

   THE CHOICE: hand the separator to the FOLLOWING item as a `::before` sitting
   in the gap at left:-25px (24px flex gap + the 1px the border occupied — the
   exact x the border painted at), then let the list clip it. A row's leading
   item puts its pseudo at listLeft - 25, outside the content box, so it
   disappears without any selector needing to know about rows. A row's trailing
   item has no pipe because the pipe now belongs to the next item, which is on
   the next row. This is why it is NOT another `:last-child` rule: no selector
   can see a wrap.

   GEOMETRY IS UNTOUCHED. `border-right-color: transparent` rather than
   `border-right: none` — the 1px keeps occupying space, so every item's box
   width, the `gap: 24px`, and therefore every wrap point stay exactly as they
   are; only the paint moves. (`border-right: none` was tried first and re-flowed
   the 768px bar from 3+3 items to 4+2.) Measured at 320/375/390/768/1440: text
   left and right edges identical to the pixel at every width, wrap points
   identical, interior separator counts identical (0/1/1/0, 0/1/2, 0/1/2, 2/2,
   5), and the unwrapped 1440 bar diffs to ZERO changed pixels.

   `overflow: hidden` is declared first purely as the fallback for Safari < 16,
   which lacks `clip`. `clip` is preferred because it creates no scroll
   container, and `overflow-clip-margin: 4px` lets the 3px focus ring on the
   first link bleed out while still clipping the pipe 21px further out. Old
   Safari takes `hidden` and clips 3px of that ring — the only regression, and
   it is 3px of outline on one link.
   -------------------------------------------------------------------------- */
.veil-footer__legal-list {
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 4px;
}

.veil-footer__legal-item {
	border-right-color: transparent;
}

.veil-footer__legal-item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: -25px;
	top: 0;
	bottom: 0;
	border-left: 1px solid currentColor;
}

/* -----------------------------------------------------------------------------
   MENU COLUMN TAP TARGETS (B-24)
   ROOT CAUSE: `line-height: 1.3` on the list puts the menu links on a 20.8px
   pitch while each anchor's box is 22px tall — the links literally overlap by
   1.2px. Under WCAG 2.2 SC 2.5.8 the 24px circles centred on adjacent links
   intersect (measured 21.0 / 21.1 / 21.9 / 22.9px apart), and the Spacing
   exception cannot save them. Six of the thirteen links failed at every width
   from 320 to 1440 — six and not thirteen only because the horizontal offset
   between two labels of very different length drags the centres just past 24px.
   That is accidental: rewording any footer link can flip a passing one into a
   failure, which is why the fix is to the pitch and not to the six.

   THE CHOICE: 1.5 is the smallest line-height that puts the pitch on exactly
   24px (16px font x 1.5). It costs 3.2px per link — the ONE place where B-24
   changes the approved footer, and the owner signed off on it 2026-08-15 from
   the rendered before/after. The footer grows 42px below 690px (columns
   stacked), 20px at 768px, and 0px at 1440px (the brand column is taller than
   the nav there, so it absorbs the change).

   The ::after is the part that fixes real fingers. The anchor box stays 22px
   (font metrics, not line-height), so 24px pitch alone leaves a 1px sliver
   between targets; the transparent 24px band makes each link own its full
   pitch. Measured: a tap at every link's centre +/-11px went from 13/13 landing
   on the WRONG link to 0/13.

   DELIBERATELY NOT DONE: the anchors stay `display: inline`. That is
   load-bearing for the LINK TREATMENT gradient underline above — inline-block
   would re-anchor `background-size: 0 95%` off the text baseline and change the
   hover. Verified unchanged: display, background-image, background-size and the
   0.7s transition are all identical after the patch. And the links are NOT
   taken to 44px: that needs a 44px pitch and would roughly double the footer.
   -------------------------------------------------------------------------- */
.veil-footer__menu-list {
	line-height: 1.5;
}

.veil-footer__menu-link {
	position: relative;
}

.veil-footer__menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 24px;
	transform: translateY(-50%);
}

/* -------------------------------------------------------------------------
   A11Y-03 — footer logo link target size (WCAG 2.5.8, AA)
   MEASURED at 375x812: `.veil-footer__logo > a` rendered 134 x 22 px — 2px
   short of the 24px minimum, on all 7 audited pages. The image inside is
   `display:inline-block` with `height:auto`, so the anchor collapses to the
   image box. Same invisible ::after band as A11Y-02: no layout shift.
   ---------------------------------------------------------------------- */
.veil-footer__logo a {
	position: relative;
	display: inline-block;
}

.veil-footer__logo a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	min-height: 24px;
	height: 100%;
}