/* ─────────────────────────────────────────────────────────────
   GTD Desco — footer.

   A tidy-up, not a redesign: the red slab, the four columns, the
   stacked logo and the hex graphic all stay. What changes is the
   rhythm — one type scale instead of three, columns that reach
   the full width instead of bunching left, and a bottom bar that
   holds the social row and the legal line on one line.

   Plain CSS for the same reason as hero.css and buttons.css: the
   theme compiles through Compass (config.rb, Ruby), unverified.
   Loaded after sass/style.css, so it overrides by order.
   ───────────────────────────────────────────────────────────── */

footer {
	--f-rule: rgba(255, 255, 255, .28);
	--f-quiet: rgba(255, 255, 255, .82);
	--f-ease: cubic-bezier(.16, 1, .3, 1);

	/* Was a flat 80px all round, which on a 1520px container left the four
	   columns bunched into the left two-thirds with the hex graphic filling
	   the rest. Vertical padding stays generous; horizontal is handed to the
	   container so the columns span the same measure as the page above. */
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2rem);
	overflow: hidden;
}

footer .container { position: relative; z-index: 1; }

footer .footer__cols {
	display: grid;
	/* The brand column carries one mark; the other three carry lists, so they
	   get the wider tracks. */
	grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3.5rem);
	align-items: start;
}

/* Bootstrap's col-* still carry float/width in this theme; the grid above
   owns the layout now, so neutralise them rather than fight them. */
footer .footer__cols > [class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	position: relative;
}

/* ── type ─────────────────────────────────────────────────── */

/*
 * Headings were 28px !important while the links beneath them were 18px at
 * weight 200 — a 10px gap that made every column read as a poster rather
 * than a list. One scale now: a small tracked heading, links at a readable
 * weight, in the same relationship the mega panel uses.
 */
footer .footer__heading {
	margin: 0 0 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--f-rule);
	font-size: .78rem !important;   /* answers the 28px !important above */
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: #fff;
}

footer .footer__links,
footer .footer__places {
	margin: 0;
	padding: 0;
	list-style: none;
}

footer .footer__links li + li,
footer .footer__places li + li { margin-top: .1rem; }

footer .footer__links a {
	display: inline-block;
	padding: .3rem 0;
	/* !important: css/type.css sets p/a/li site-wide with !important. */
	font-size: .95rem !important;
	font-weight: 400;                /* was 200 — too light to hold on red */
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: transform .2s var(--f-ease), opacity .2s var(--f-ease);
}
footer .footer__links a:hover {
	/* Was a font-weight change on hover, which reflows the row and shifts
	   every link after it. A nudge does the same job without the jump. */
	font-weight: 400;
	transform: translateX(3px);
	opacity: 1;
	text-decoration: none;
	color: #fff;
}
footer .footer__links a:focus-visible,
footer .footer__legal a:focus-visible,
footer .footer__social a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

footer .footer__places li {
	padding: .3rem 0;
	font-size: .95rem !important;
	color: var(--f-quiet);
}

footer .footer__logo {
	display: block;
	/* The mark now holds its column on its own, so it can carry the weight the
	   120px version could not. Capped against the column rather than fixed, so
	   it never outgrows the grid track. */
	width: clamp(150px, 88%, 200px);
	height: auto;
	margin: 0;
}

/* The locations list follows the Contact Us button, so it needs a gap above it
   rather than the flush top the column headings get. */
footer .footer__heading--tight { margin-top: 2.25rem; }

footer .footer__advice {
	margin: 0 0 1.2rem;
	max-width: 26ch;
	font-size: .95rem !important;
	line-height: 1.55;
	color: var(--f-quiet);
}

/* The Contact Us button is .info-button, already on the new square geometry
   from css/buttons.css. It only needs its stray top margin removed here. */
footer #advice-outter .info-button { margin-top: 0; }

/* ── the hex graphic ──────────────────────────────────────── */

/*
 * Kept, but pinned to the footer rather than to the last column: it was
 * positioned off #advice-outter, so it moved with that column and, once the
 * columns stack on mobile, landed on top of the copy.
 */
footer #advice-outter::after { content: none; }

footer::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -40px;
	width: 472px;
	height: 450px;
	background: url('/wp-content/themes/gtd-desco/images/footer_304.svg') no-repeat right bottom / contain;
	/* .5 competed with the Need Advice column sitting on top of it. */
	opacity: .28;
	pointer-events: none;
	z-index: 0;
}
footer { position: relative; }

/* ── bottom bar ───────────────────────────────────────────── */

footer .footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;

	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	/* Was a solid 2px white rule; at this scale it read as a divider between
	   two pages rather than a hairline under one footer. */
	border-top: 1px solid var(--f-rule);
	/* The old rule centred this row while everything above it was left
	   aligned, and added its own 15px side margins. */
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	color: #fff;
}

footer .footer__legal {
	margin: 0;
	font-size: .82rem !important;
	letter-spacing: .02em;
	color: var(--f-quiet);
}
footer .footer__legal a {
	color: #fff;
	font-size: inherit !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	padding-bottom: 1px;
	transition: border-color .2s var(--f-ease);
}
footer .footer__legal a:hover { border-bottom-color: #fff; }
footer .footer__legal span { margin: 0 .5rem; opacity: .5; }

/* ── social ───────────────────────────────────────────────── */

footer .footer__social {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

footer .footer__social-label {
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--f-quiet);
}

footer .footer__social ul {
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
footer .footer__social li + li { margin-top: 0; }

footer .footer__social a {
	/* 44px, so it clears the touch minimum without a media query. */
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 0;              /* square, as the buttons now are */
	color: #fff;
	text-decoration: none;
	transition:
		background-color .2s var(--f-ease),
		border-color .2s var(--f-ease),
		color .2s var(--f-ease),
		transform .2s var(--f-ease);
}
footer .footer__social a:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--gtd-red, #c60000);
	transform: translateY(-2px);
}
footer .footer__social svg { width: 21px; height: 21px; display: block; }

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 900px) {
	footer .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	footer .footer__logo { width: clamp(150px, 60%, 200px); }
}

@media (max-width: 600px) {
	footer { padding: clamp(2.5rem, 8vw, 3rem) 0 1.5rem; }
	footer .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	footer .footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}
	footer::after { width: 300px; height: 286px; right: -90px; opacity: .35; }
	footer .footer__legal { font-size: .78rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	footer * { transition: none !important; }
}

/* ── the Riglife footer ───────────────────────────────────────
   Same markup, same system, different ground: sass/style.css
   paints #rig-life-footer-outter at #2d2d2d !important instead
   of the red slab. Everything above applies unchanged; only the
   two things that are genuinely Riglife's live here.
   ───────────────────────────────────────────────────────────── */

/*
 * The store note, where the "Products" list used to point at /shop/. It is a
 * status, not a link, so it is built as one: the label in the same tracked
 * caps the column heading uses, the state under it in the foreground weight,
 * behind a hairline that ties it to the list above rather than floating free.
 */
footer .footer__soon {
	margin: 1.75rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--f-rule);
	font-size: .95rem !important;
	line-height: 1.4;
	color: #fff;
}

footer .footer__soon-lab {
	display: block;
	margin-bottom: .2rem;
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--f-quiet);
}

/*
 * The social marks invert to the brand red on the red slab. On the Riglife
 * ground the red that belongs is the club's stamp, which is the one the header
 * nav already underlines. --stamp comes from the `rl` scope; the Riglife
 * sub-page templates do not opt into it, hence the fallback.
 */
footer#rig-life-footer-outter .footer__social a:hover {
	color: var(--stamp, #f03a2f);
}

/* ─────────────────────────────────────────────────────────────
   GTD Desco — the closing call to action.

   Lives in this file rather than a tenth stylesheet because it
   is one thing with the footer: the two bands the page ends on.

   WHAT WAS WRONG

   A 450px slab of #ebebeb under a 4px top border in #e60000 — a
   red that is not the brand's #c60000 and appears nowhere else
   on the site. The ask was set at 65px in near-black inside a
   col-md-8, so a third of the container was empty beside it, and
   a 140px dark dash was absolutely positioned 151px OUTSIDE that
   column, in the page margin.

   Then it stopped, and 35px of white sat between it and the red
   footer — the one place on the page where two full-bleed
   coloured bands meet, wearing a white line.

   WHAT THIS DOES

   The page ends on a pale stone field carrying the ask at display
   scale, running straight into the footer with no gap at all.
   Two bands meeting on a hard edge, and it is the light one that
   gives the red footer beneath it its full weight. The ask is the
   largest type on most of these pages, which is right for the
   last thing they say.

   The ground is not the old #ebebeb and not white. White is what
   the page above it already is, so a white band would not be a
   band at all; #e6e9e8 is a twelve-percent wash of the brand ink
   on white, which separates from the page cleanly and belongs to
   the palette rather than being a neutral grey borrowed from
   nowhere.

   THE MOMENT

   A red rule draws across the full width as the block arrives —
   the line the page ends on. It travels horizontally, which the
   CTA panels' curtain also does, but it is a 6px rule rather
   than a full-height wipe, so the two do not read as the same
   entrance twice in one screen.
   ───────────────────────────────────────────────────────────── */

/*
 * Scoped to the class, not the id. `#contact-us-block` is ALSO the wrapper id
 * of two statement blocks — in about-our-story.php and contact-us.php — that
 * carry no button and sit mid-page followed by a gallery. They still want the
 * legacy grey slab, and an id-only rule here would quietly turn both of them
 * into ink bands. Same trap as #factory-tour-outter; see css/cta.css.
 */
#contact-us-block.gtd-close {
	--c-ink:    var(--gtd-ink, #101d1d);
	--c-red:    var(--gtd-red, #c60000);
	/* A twelve-percent wash of the ink on white. Cool rather than warm, so it
	   sits under the brand red without going pink. */
	--c-ground: #e6e9e8;
	/* On a light ground the brand red is the right red — 5.06:1 here, against
	   the 2.45:1 that #ff5b4a (the on-dark red) would manage. */
	--c-lift:   var(--gtd-red, #c60000);
	--c-ease:  cubic-bezier(.16, 1, .3, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;

	display: block;
	width: 100%;
	max-width: none;
	background-color: var(--c-ground);

	/* The old border was 4px of #e60000; the seam below is 6px of the actual
	   brand red, and it is drawn rather than declared. */
	border-top: 0 !important;

	min-height: 0;
	/* More below than above: the ask must not sit on the footer's edge. */
	padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(5rem, 9vw, 8rem) !important;

	margin-top: clamp(4rem, 8vw, 7.5rem) !important;   /* answers `margin-top: 50px`, and 15px !important on mobile */
	margin-bottom: 0 !important;
}

/*
 * The gap. `footer { margin-top: 35px }` — and `15px !important` below 800px —
 * put a white line between two full-bleed coloured bands. It is removed only
 * where this block is genuinely the last thing in <main>, which is every page
 * that includes it, so a page that ever puts something after it keeps its
 * spacing rather than butting the footer against whatever that is.
 */
main:has(> .gtd-close:last-child) ~ footer {
	margin-top: 0 !important;
}

.gtd-close__inner {
	position: relative;
	z-index: 1;
}

/* ── the rule ─────────────────────────────────────────────── */

.gtd-close__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	background: var(--c-lift);
	transform-origin: left;
}

/* ── the ask ──────────────────────────────────────────────── */

.gtd-close__title {
	margin: 0;
	/*
	 * 65px was a heading. This is the last thing the page says, so it is the
	 * largest type on it. !important answers css/type.css's `h2 { … !important }`.
	 */
	font-size: clamp(2.1rem, 1.1rem + 4vw, 5.5rem) !important;
	font-weight: 900;
	line-height: .93;
	letter-spacing: -.035em;
	text-transform: uppercase;
	/* The brand ink, not the theme's #212529 — 14.4:1 on this ground. */
	color: var(--c-ink) !important;
	max-width: min(34ch, 100%);
	text-wrap: balance;
}

/*
 * The operative phrase in the brand red — the hero's own device. The phrase
 * being emphasised must not be the hardest part of the sentence to read; on
 * this ground the brand red is 5.06:1, so it reads as emphasis rather than as
 * something fading out.
 */
.gtd-close__lift { color: var(--c-lift); }

/* ── the button ───────────────────────────────────────────────
   .red-info-button: a solid red face with white type at 6.17:1.
   On a pale ground it is the only saturated thing above the
   footer, which is what the last control on the page should be.
   Its stock hover already lifts to #e11414, so only the scale and
   the shadow are added.
   ───────────────────────────────────────────────────────────── */

.gtd-close__cta {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding: 1.25rem 2.4rem;
}

.gtd-close__cta:hover,
.gtd-close__cta:focus-visible {
	transform: translateY(-2px);
	/* Tinted from the button's own hue rather than black: a grey shadow under a
	   red button on a pale ground reads as dirt. Real offset, real blur. */
	box-shadow: 0 12px 28px rgba(198, 0, 0, .32);
}

.gtd-close__cta:focus-visible {
	/* Was #fff, which was invisible the moment the ground stopped being ink. */
	outline: 2px solid var(--c-ink);
	outline-offset: 3px;
}

/* ── the seam ─────────────────────────────────────────────── */

.gtd-close__seam {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	height: 6px;
	background: var(--c-red);
	transform-origin: left;
	pointer-events: none;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdCloseDraw {
			from { transform: scaleX(0); }
			to   { transform: scaleX(1); }
		}

		@keyframes gtdCloseRise {
			from { opacity: 0; transform: translateY(28px); }
			to   { opacity: 1; transform: none; }
		}

		.gtd-close__seam {
			animation: gtdCloseDraw linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 70%;
		}

		.gtd-close__rule {
			animation: gtdCloseDraw linear both;
			animation-timeline: view();
			animation-range: entry 24% cover 6%;
		}

		.gtd-close__title {
			animation: gtdCloseRise linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 10%;
		}

		.gtd-close__cta {
			animation: gtdCloseRise linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 18%;
		}
	}
}

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 800px) {
	#contact-us-block.gtd-close {
		padding: clamp(3rem, 12vw, 4.5rem) 0 clamp(3.5rem, 14vw, 5rem) !important;
		margin-top: clamp(3.5rem, 12vw, 5rem) !important;
	}

	.gtd-close__title { max-width: 100%; }

	/* A button that runs the measure is easier to hit than one that does not,
	   and at this width there is nothing beside it to balance against. */
	.gtd-close__cta {
		width: 100%;
		max-width: 24rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-close__seam,
	.gtd-close__rule,
	.gtd-close__title,
	.gtd-close__cta {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}