/**
 * ISS site footer — brand · directory · contact · legal.
 *
 * Loaded site-wide (see inc/site-footer.php). The7's footer widget area and
 * bottom bar are switched off, so nothing here is an override: every selector
 * is namespaced `.iss-ft` and every property is declared explicitly, because
 * The7's broad `#page a`, `ul`, `p`, `h4` rules would otherwise leak in — the
 * same discipline css/iss-header.css follows.
 *
 * WHY DARK. Every designed template ends with the blue `.iss-cta-band`. A light
 * footer under it read as a second, weaker CTA; navy makes the page's floor
 * unmistakable and lets the blue band keep the emphasis it was designed for. The
 * palette is the design system's own (`--iss-navy`, `--iss-sky`, `--iss-red`),
 * restated locally so the footer is not dependent on css/iss-global.css having
 * loaded — it renders on legacy The7 pages too, which carry no `.iss-page`.
 *
 * WIDTH. Asks for the header's 1320px rather than the 1120px content column —
 * four tracks (brand + three link columns) need the room, and the site already
 * reads as chrome-wide / content-narrow. In practice The7's #page grid column
 * caps it below that, which lands the footer between the header's edge and the
 * content's: intended, not a miss.
 */

.iss-ft {
	--ft-max: 1320px;

	/*
	 * The hero's navy ramp, restated locally under --ft- names for the same
	 * reason the rest of this palette is: the footer renders on legacy The7
	 * pages that never load css/iss-global.css, so it cannot read
	 * --iss-navy/-2/-3 from :root. Values are copied from §0 of iss-global.css
	 * and must be kept in step with it — the footer and the hero are supposed
	 * to be the same ground.
	 */
	--ft-navy: #0a2940;
	--ft-navy-2: #071a2b;
	--ft-navy-3: #0b3654;
	--ft-white: #fff;
	--ft-text: rgba(255, 255, 255, .66);
	--ft-text-dim: rgba(255, 255, 255, .48);
	--ft-line: rgba(255, 255, 255, .1);
	--ft-line-strong: rgba(255, 255, 255, .17);
	--ft-fill: rgba(255, 255, 255, .04);
	--ft-fill-hover: rgba(255, 255, 255, .07);

	--ft-sky: #a9deff;
	--ft-blue: #0d6fbb;
	--ft-red: #ed3342;

	--ft-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
	--ft-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
	--ft-ease: cubic-bezier(.2, .7, .2, 1);

	/*
	 * The7 lays #page out as a CSS grid with named rows:
	 *   "header" "slider" "title" "fancyheader" "elementor-header" "checkout"
	 *   "main" "footer"
	 * and assigns `grid-area: main` to #main and `grid-area: footer` to its own
	 * #footer. A grid item with no area is auto-placed into the first free row —
	 * which put this footer in "slider", i.e. directly under the header and on
	 * top of the page content, with #main pushed 556px down the page. Claiming
	 * the area The7's own footer used is the fix; the declaration is inert
	 * anywhere #page is not a grid.
	 */
	grid-area: footer;

	position: relative;
	isolation: isolate;
	/* Clips the ::after ring at the band's edges — the hero does the same. */
	overflow: hidden;
	/*
	 * SAME GROUND AS THE HERO. Danny, 2026-09-04: the footer is to carry the
	 * hero's gradient treatment rather than a footer-specific one, so the page
	 * opens and closes on the same navy. This stack is `.iss-page
	 * .iss-detail-hero`'s, verbatim (css/iss-global.css §7) — two cyan/blue
	 * radial lifts over a 145deg navy ramp — with the deep navy also declared
	 * as `background-color` so the band is still navy if the gradients fail to
	 * paint, and so the computed value stays assertable.
	 *
	 * The 180deg top-to-bottom ramp and the wide 1200px radial that used to be
	 * here are gone with it; so is the 64px blueprint rule grid that sat on top
	 * (`.iss-ft__grid-texture`), which is the "grid-like background" this
	 * replaces. The hero has no such texture, and keeping it would have been
	 * the one thing still telling the two bands apart.
	 */
	background-color: var(--ft-navy-2);
	background-image:
		radial-gradient(circle at 77% 26%, rgba(57, 195, 230, .17), transparent 29%),
		radial-gradient(circle at 16% 88%, rgba(31, 139, 224, .17), transparent 31%),
		linear-gradient(145deg, var(--ft-navy-2), var(--ft-navy) 61%, var(--ft-navy-3));
	color: var(--ft-text);
	font-family: var(--ft-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.iss-ft *,
.iss-ft *::before,
.iss-ft *::after {
	box-sizing: border-box;
}

.iss-ft ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iss-ft li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iss-ft p {
	margin: 0;
}

.iss-ft a {
	color: inherit;
	text-decoration: none;
}

.iss-ft svg {
	display: block;
}

/* One focus treatment for every control in the footer. */
.iss-ft a:focus-visible {
	outline: 2px solid var(--ft-sky);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * Brand accent rail — the three colours in the mark, left to right, fading out
 * before the right edge so it reads as an accent rather than a full-width band.
 */
.iss-ft .iss-ft__rail {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ft-red) 0%, var(--ft-blue) 26%, var(--ft-sky) 58%, rgba(143, 226, 245, 0) 100%);
	z-index: 2;
}

/*
 * Decorative ring bleeding off the bottom-right corner — the hero's own
 * (`.iss-page .iss-detail-hero::after`), same geometry and same 8% sky hairline,
 * so the closing band carries the hero's treatment and not just its gradient.
 * A pseudo-element rather than the markup <div> the blueprint texture used:
 * nothing needs to address it, and the template is one element lighter.
 */
.iss-ft::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -160px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	border: 1px solid rgba(143, 226, 245, .08);
	pointer-events: none;
	z-index: 0;
}

.iss-ft .iss-ft__inner {
	position: relative;
	z-index: 1;
	width: min(var(--ft-max), calc(100% - 48px));
	margin-inline: auto;
	padding-top: clamp(48px, 6vw, 78px);
}

/* ============================================================
   TOP — brand + directory
   ============================================================ */

.iss-ft .iss-ft__top {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 3fr);
	gap: clamp(36px, 4.5vw, 72px);
	align-items: start;
}

/* ---- Brand ---- */

/*
 * The mark is red + blue + dark grey artwork on white; knocking it out or
 * tinting it would misrepresent the logo, and "GROUP" all but disappears on
 * navy. A white plate keeps the asset intact and reads as a deliberate device.
 * The 2026-09-12 artwork is dimensional and carries its own soft drop shadow,
 * which needs a light ground to read as shadow rather than as grey haze — so
 * the plate earns its keep twice over now.
 *
 * Sized off the tagline rather than off the mark, the same way the header is:
 * 120px puts the tagline's x-height at 6.07px against 5.15px for the outgoing
 * logo at 44px, so the footer tagline reads better than it did. It runs a
 * little larger than the header's 106px deliberately — the footer has the room,
 * and this is where the lock-up is the brand statement rather than a nav
 * fixture.
 *
 * The plate lands ~278px wide. The brand track measures 388px at 1512 and
 * 364px at 1280 (measured on staging — the 1.35fr of 4.35 grid gives more than
 * the ~329px this comment used to estimate), so it fits with ~86px to spare at
 * the tightest desktop width, and below 1180px the brand is a full-width row.
 */
.iss-ft .iss-ft__logo-plate {
	display: inline-flex;
	align-items: center;
	padding: 18px 20px;
	background: var(--ft-white);
	border-radius: 14px;
	box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .8);
	transition: transform .25s var(--ft-ease), box-shadow .25s var(--ft-ease);
}

.iss-ft .iss-ft__logo-plate:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .85);
}

.iss-ft .iss-ft__logo {
	display: block;
	width: auto;
	height: 120px;
	max-width: none;
}

.iss-ft .iss-ft__tagline {
	margin-top: 22px;
	max-width: 34ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ft-text);
}

.iss-ft .iss-ft__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.iss-ft .iss-ft__badges li {
	padding: 6px 12px;
	border: 1px solid var(--ft-line-strong);
	border-radius: 999px;
	background: var(--ft-fill);
	font-family: var(--ft-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ft-text-dim);
	white-space: nowrap;
}

.iss-ft .iss-ft__social {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.iss-ft .iss-ft__social-link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--ft-line-strong);
	border-radius: 12px;
	background: var(--ft-fill);
	color: rgba(255, 255, 255, .75);
	transition: background .22s var(--ft-ease), border-color .22s var(--ft-ease), color .22s var(--ft-ease), transform .22s var(--ft-ease);
}

.iss-ft .iss-ft__social-link svg {
	width: 17px;
	height: 17px;
}

.iss-ft .iss-ft__social-link:hover {
	background: var(--ft-blue);
	border-color: transparent;
	color: var(--ft-white);
	transform: translateY(-2px);
}

/* ---- Directory column + BBB seal ---- */

/*
 * Wrapper around the directory nav so the seal has a box to bottom-align in.
 * `.iss-ft__top` is `align-items: start`, so this has to claim the row height
 * back with `align-self: stretch` — without that the flex column is only as
 * tall as the links and `margin-top: auto` below has nothing to push against.
 */
.iss-ft .iss-ft__dir {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * WHERE, AND WHY NOT IN THE BRAND COLUMN. The seal shipped stacked under the
 * brand first. That was wrong twice over (Danny, 2026-09-14): it pushed a
 * column that was already 392px to 483px against the directory's 249px, and it
 * left — in fact worsened — the 236px of dead space under the link columns.
 *
 * Pinned bottom-right of the band instead, it fills that space rather than
 * adding to the other side, and the band closes on a diagonal: logo plate
 * top-left, seal bottom-right, each anchored to a corner of the content box,
 * with the seal's baseline landing on the social row's. Placements in the
 * bottom bar were built and measured too — they shorten the brand column but
 * leave the void under the directory completely intact, which was the actual
 * complaint.
 */
.iss-ft .iss-ft__bbb {
	margin-top: auto;
	align-self: flex-end;
	/* Floor, for the day the directory grows tall enough to meet the seal. */
	padding-top: 36px;
	transition: transform .22s var(--ft-ease);
}

.iss-ft .iss-ft__bbb img {
	display: block;
	/*
	 * DRAWN SMALLER THAN IT IS, DELIBERATELY. BBB ships 1x artwork and nothing
	 * else: there is no @2x, no SVG and no WebP, and every larger size 404s to a
	 * 1x1 placeholder PNG rather than an image (checked across the whole
	 * `blue-seal-<w>-<h>` range). A 293px seal drawn at 293 CSS px is therefore a
	 * 2x upscale on a retina screen, which is exactly the grain Danny reported.
	 *
	 * 195px gives it ~1.5x density and reads sharp. Smaller would be sharper
	 * again, but "BBB Rating: A+" and the date stop being legible below roughly
	 * this size — and an illegible trust mark is worse than a soft one. The
	 * width/height attributes in the template stay at the intrinsic 293x61 so
	 * the aspect ratio (and the reserved box) is still right.
	 */
	width: 195px;
	max-width: 100%;
	height: auto;
	border: 0;
}

.iss-ft .iss-ft__bbb:hover {
	transform: translateY(-2px);
}

/* ---- Directory columns ---- */

/*
 * MULTI-COLUMN, not a grid, since 2026-09-04 — the one place in this file that
 * isn't `display: grid`, and deliberately.
 *
 * The directory is now 1:1 with the primary nav (Platform, Solutions, AI Layer,
 * Customers, Projects, Company), and four of those six sections are single
 * pages: their columns are a heading link with nothing under them, next to two
 * columns of five links. A grid can't pack that. Its rows are uniform, so
 * whichever row holds Solutions or Customers is five links tall and every
 * one-line column sharing it leaves a ~140px hole — which is exactly what
 * `repeat(3, 1fr)` shipped and what the first screenshot of this change
 * showed: "PLATFORM" and "AI LAYER" stranded above empty space.
 *
 * `columns` balances the tracks by height instead, so the short sections tuck
 * in above and below the long ones with no holes, and it keeps doing that at
 * any count and any width — including when ISS adds or removes a column in
 * Appearance → Menus, which a hand-placed grid would not survive.
 *
 * `break-inside: avoid` is what keeps a column's links attached to its heading;
 * without it a five-link list can be split across two tracks, orphaning links
 * under someone else's heading. Reading order is unchanged (column-major, DOM
 * order), so tab order still follows what you see.
 */
.iss-ft .iss-ft__cols {
	columns: 3;
	column-gap: 28px;
}

.iss-ft .iss-ft__col {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	/* The row gap the grid used to supply. */
	margin-bottom: 34px;
}

/*
 * Column headings use the design system's mono "utility voice" (`.iss-kicker`),
 * which is what separates a heading from a link at this size without a weight
 * or colour that would compete with the links underneath.
 */
.iss-ft .iss-ft__col-head {
	display: block;
	margin-bottom: 16px;
	font-family: var(--ft-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ft-sky);
}

.iss-ft a.iss-ft__col-head {
	transition: color .2s var(--ft-ease);
}

.iss-ft a.iss-ft__col-head:hover {
	color: var(--ft-white);
}

.iss-ft .iss-ft__links {
	display: grid;
	gap: 11px;
	align-content: start;
}

/*
 * Hover is an underline that wipes in, not a colour swap plus a nudge: with up
 * to six links per column a transform on each one turns the whole block into
 * noise on a diagonal mouse path.
 */
.iss-ft .iss-ft__link {
	display: inline;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ft-text);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: color .2s var(--ft-ease), background-size .28s var(--ft-ease);
}

.iss-ft .iss-ft__link:hover {
	color: var(--ft-white);
	background-size: 100% 1px;
}

.iss-ft .iss-ft__link-item.is-current .iss-ft__link {
	color: var(--ft-white);
}

/* ============================================================
   CONTACT CARDS
   ------------------------------------------------------------
   `auto-fit` rather than a fixed column count: the row carries four cards
   normally and five when there is an upcoming event, and any of them can be
   empty if ISS clears that Customizer field. A fixed count would leave a hole.
   ============================================================ */

.iss-ft .iss-ft__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: 14px;
	margin-top: clamp(40px, 5vw, 62px);
	padding-top: clamp(34px, 4vw, 50px);
	border-top: 1px solid var(--ft-line);
}

.iss-ft .iss-ft__card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 17px 18px;
	border: 1px solid var(--ft-line);
	border-radius: 16px;
	background: var(--ft-fill);
	transition: background .22s var(--ft-ease), border-color .22s var(--ft-ease), transform .22s var(--ft-ease);
}

.iss-ft .iss-ft__card:hover,
.iss-ft .iss-ft__card:focus-within {
	background: var(--ft-fill-hover);
	border-color: rgba(143, 226, 245, .34);
	transform: translateY(-2px);
}

.iss-ft .iss-ft__card-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(143, 226, 245, .13);
	color: var(--ft-sky);
}

.iss-ft .iss-ft__card-icon svg {
	width: 17px;
	height: 17px;
}

/* The event card is the one row item that is news rather than contact detail. */
.iss-ft .iss-ft__card.is-accent .iss-ft__card-icon {
	background: rgba(237, 51, 66, .16);
	color: #ff909a;
}

.iss-ft .iss-ft__card-body {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.iss-ft .iss-ft__card-label {
	font-family: var(--ft-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-text-dim);
}

.iss-ft .iss-ft__card-value {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ft-white);
	/* Long addresses wrap; `sales@issgroup.net` must not overflow the card. */
	overflow-wrap: anywhere;
	transition: color .2s var(--ft-ease);
}

.iss-ft a.iss-ft__card-value:hover {
	color: var(--ft-sky);
}

/* Qualifier line — "Toll free" above a number, the date under an event title. */
.iss-ft .iss-ft__card-sub {
	display: block;
	font-family: var(--ft-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ft-text-dim);
}

.iss-ft .iss-ft__card-value > .iss-ft__card-sub:first-child {
	margin-bottom: 3px;
}

.iss-ft .iss-ft__card-value > .iss-ft__card-sub:last-child {
	margin-top: 4px;
}

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

.iss-ft .iss-ft__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: clamp(34px, 4vw, 50px);
	padding: 22px 0 clamp(26px, 3vw, 36px);
	border-top: 1px solid var(--ft-line);
}

.iss-ft .iss-ft__copy {
	font-size: 13px;
	color: var(--ft-text-dim);
}

.iss-ft .iss-ft__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.iss-ft .iss-ft__legal a {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	transition: color .2s var(--ft-ease);
}

.iss-ft .iss-ft__legal a:hover {
	color: var(--ft-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Brand stops being a column and becomes the row above the directory. */
@media (max-width: 1180px) {
	.iss-ft .iss-ft__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	/*
	 * One column now, so there is no band corner to anchor to and nothing to
	 * bottom-align against — the seal just follows the links, on the same left
	 * edge as everything else.
	 */
	.iss-ft .iss-ft__bbb {
		align-self: flex-start;
		padding-top: 34px;
	}

	.iss-ft .iss-ft__tagline {
		max-width: 60ch;
	}
}

@media (max-width: 860px) {
	.iss-ft .iss-ft__cols {
		columns: 2;
		column-gap: 24px;
	}

	.iss-ft .iss-ft__col {
		margin-bottom: 32px;
	}
}

@media (max-width: 640px) {
	.iss-ft .iss-ft__inner {
		width: calc(100% - 36px);
	}

	.iss-ft .iss-ft__bottom {
		justify-content: flex-start;
	}
}

/*
 * Two columns are held all the way down to ~340px on purpose. Stacking the
 * directory into one column at phone width makes the footer far taller and
 * turns its 16 links into a scroll; two 160px columns halve that. The longest
 * label ("Supplier Lifecycle Management") wraps to two lines at this width —
 * it does at four tracks on the desktop grid too — which is still shorter than
 * the single-column stack. Below ~340px there genuinely isn't room.
 */
@media (max-width: 339px) {
	.iss-ft .iss-ft__cols {
		columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iss-ft *,
	.iss-ft *::before,
	.iss-ft *::after {
		transition: none !important;
		animation: none !important;
	}

	.iss-ft .iss-ft__card:hover,
	.iss-ft .iss-ft__card:focus-within,
	.iss-ft .iss-ft__logo-plate:hover,
	.iss-ft .iss-ft__bbb:hover,
	.iss-ft .iss-ft__social-link:hover {
		transform: none;
	}
}