/*
 * footer.css - the site footer.
 *
 * Replaces roughly 60 generated GenerateBlocks rules (.gb-container-*,
 * .gb-headline-*, .gb-button-*, .gb-grid-*) with about 40 lines of grid CSS.
 * Class names are rlj-* per ruling C4, so no front-end HTML claims to be
 * generated by a plugin that is being deleted.
 *
 * The social row's width and alignment are NOT here: they come from
 * legacy-customizer.css rule 16, which beat all three of GenerateBlocks'
 * responsive widths at equal specificity, so the row has always been full width
 * with the icons flush right at every breakpoint.
 *
 * Anomaly fixed on the way past: the footer contact text is 19px everywhere,
 * including /contact/. It renders at 22px there today, and the address column
 * at 200% width, because GenerateBlocks generated colliding uniqueIds for the
 * footer element and page 3395. Rewriting both deletes the collision.
 */

.site-footer {
	background-color: var(--base-3);
}

.rlj-footer-inner {
	padding: var(--footer-padding);
}

.rlj-footer-width {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container);
	text-align: left;
}

/* ==========================================================================
   Upper grid: 60% intro column, 25% address column.

   The negative margin plus matching padding is how the original gutter worked
   and it is kept, rather than swapped for `gap`, because the columns are
   percentage-width and gap would change where they wrap.
   ========================================================================== */

.rlj-footer-grid {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--footer-grid-gutter) * -1);
}

.rlj-footer-col {
	box-sizing: border-box;
	padding-left: var(--footer-grid-gutter);
}

.rlj-footer-col--intro {
	width: 60%;
}

.rlj-footer-col--address {
	width: 25%;
}

.rlj-footer-heading {
	color: var(--contrast);
}

.rlj-footer-lede {
	color: var(--contrast);
	padding-right: 100px;
}

.rlj-footer-address {
	color: var(--contrast);
	font-size: var(--fs-footer-contact);
}

/*
 * Icon and number on one line, optically centred on each other.
 *
 * Reported misaligned on /contact/ 2026-08-10. Measured at ten widths from 390
 * to 1728 and the icon sat 4 to 5px below the number at every one of them: the
 * icon span carried padding-top:.1em on top of line-height:0, which grows its
 * flex box at the top, and align-items:center then centres that taller box and
 * pushes the glyph down. The padding is gone and the gap is a real `gap` rather
 * than padding-right, so nothing offsets the cross axis any more.
 *
 * flex-wrap:nowrap is explicit because this row must never break: if the icon
 * ever inflates (a font-size token failing to resolve would do it) the number
 * would otherwise drop to a second line, indented by the icon's own padding,
 * which is exactly the shape the report described.
 */
.rlj-footer-phone {
	align-items: center;
	color: var(--contrast, #222222);
	display: flex;
	flex-wrap: nowrap;
	font-size: var(--fs-footer-contact, 19px);
	gap: 0.5em;
	margin-bottom: 0;
}

.rlj-footer-phone a,
.rlj-footer-phone a:hover,
.rlj-footer-phone a:focus {
	color: var(--contrast);
}

.rlj-footer-phone .rlj-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.rlj-footer-phone .rlj-icon svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
}

/*
 * The one filled pill in the footer.
 *
 * The colours carry literal fallbacks deliberately. Reported 2026-08-10: the
 * label was invisible at rest and appeared on hover. It could not be reproduced
 * headlessly at 1440, 1728 or 390, on home or /contact/ (12.7 to 17.3 per cent
 * light pixels inside the button every time), and the served CSS defines
 * --base-3 exactly once, as #ffffff. But the one failure mode that produces
 * precisely that symptom is var(--base-3) failing to resolve: `color` then
 * becomes invalid at computed-value time and INHERITS the footer's #222 body
 * colour, which is the same colour as the button. A two-token fallback removes
 * the possibility entirely and costs nothing.
 */
/*
 * display is inline-block, NOT inline-flex, and that is the fix rather than a
 * preference.
 *
 * Reported 2026-08-10: the label was invisible after navigating here by
 * CLICKING a link, never on a direct load, and it persisted until any repaint
 * (hovering was enough). Diagnosed live in the owner's browser: colour, fill,
 * background, opacity and layout metrics were all correct, nothing overlaid it,
 * and no ancestor carried containment or a transform, yet the glyphs never
 * painted. Setting any inline style forced them to appear.
 *
 * The tell came from comparing it against the two dark pills that never broke,
 * the hero Shop button and the newsletter GET MY DISCOUNT: identical colour,
 * fill and background, and both inline-block. This one was the only inline-flex
 * on the site, so its bare text node was an ANONYMOUS flex item, a box with no
 * element of its own and nothing for a paint invalidation to attach to. The
 * button carries no icon, so flex bought it nothing in the first place.
 *
 * Geometry is unchanged: 8px padding against a 25.6px line-height gives the same
 * 42px box, and text-align:center replaces justify-content.
 */
.rlj-footer-cta {
	background-color: var(--contrast, #222222);
	border: 0;
	border-radius: var(--radius-pill-gb, 999px);
	color: var(--base-3, #ffffff);
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	margin-right: 20px;
	padding: 8px 20px;
	text-align: center;
	text-decoration: none;
	/*
	 * background-color only, deliberately NOT the --transition-button token,
	 * which is `all 0.2s` and therefore includes `color`. A colour transition
	 * that begins while the document is hidden (a prefetched or prerendered
	 * navigation) does not tick, so it can sit at its START value indefinitely
	 * once the page is activated. The start value here is the inherited #222
	 * footer colour, identical to this button's own background, which renders
	 * the label invisible until something forces a new transition. Hovering
	 * does, which is exactly the reported symptom. Nothing here needs its text
	 * colour animated.
	 */
	transition: background-color 0.2s ease-in-out;
}

/*
 * The label carries its own colour rather than inheriting it, so the span is a
 * paint target in its own right. See the note in footer.php.
 */
.rlj-footer-cta__label {
	color: var(--base-3, #ffffff);
	display: inline-block;
}

.rlj-footer-cta:hover,
.rlj-footer-cta:focus,
.rlj-footer-cta:active {
	background-color: var(--btn-bg-hover, #444444);
	color: var(--base-3, #ffffff);
}

.rlj-footer-cta:hover .rlj-footer-cta__label,
.rlj-footer-cta:focus .rlj-footer-cta__label,
.rlj-footer-cta:active .rlj-footer-cta__label {
	color: var(--base-3, #ffffff);
}

/* ==========================================================================
   Social row. Width and alignment live in legacy-customizer.css; only the
   buttons themselves are described here.

   Live, not one of these had a visible hover state - every hover colour equalled
   its rest colour. Reproducing that would be reproducing a bug, so they get a
   real one.
   ========================================================================== */

/*
 * No margin-top. GenerateBlocks generated `margin-top:20px` for this row and the
 * Customizer rule that follows it set `margin:0` at equal specificity, so the
 * 20px has never rendered. Carrying it over pushed the social row, the rule, the
 * copyright and all six legal links down 20px and made the footer 563.9px
 * against 543.9px live. The `margin:0` is in legacy-customizer.css rule 16,
 * which loads BEFORE this file, so declaring margin-top here would win.
 */
.rlj-footer-social {
	column-gap: 10px;
}

.rlj-social-link {
	align-items: center;
	border: 2px solid var(--contrast);
	border-radius: var(--radius-icon-button);
	color: var(--contrast);
	display: inline-flex;
	justify-content: center;
	padding: 6px;
	text-align: center;
	text-decoration: none;
	transition: var(--transition-button);
}

.rlj-social-link:hover,
.rlj-social-link:focus {
	background-color: var(--contrast);
	color: var(--base-3);
}

.rlj-social-link .rlj-icon {
	line-height: 0;
}

.rlj-social-link .rlj-icon svg {
	fill: currentColor;
	height: 1.2em;
	width: 1.2em;
}

/* ==========================================================================
   Bottom bar: copyright left, legal links right.
   ========================================================================== */

.rlj-footer-bar {
	align-items: center;
	border-top: 1px solid var(--contrast);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: var(--footer-bar-margin-top);
	padding: var(--footer-bar-padding);
}

.rlj-footer-copyright p {
	color: var(--contrast);
	font-size: var(--fs-footer-body);
	margin-bottom: 0;
}

.rlj-footer-legal {
	align-items: center;
	column-gap: 20px;
	display: flex;
	flex-direction: row;
	font-size: var(--fs-footer-body);
}

.rlj-footer-legal a {
	align-items: center;
	color: var(--contrast);
	display: inline-flex;
	justify-content: center;
	text-align: center;
	text-decoration: none;
}

.rlj-footer-legal a:hover,
.rlj-footer-legal a:focus {
	text-decoration: underline;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {

	.rlj-footer-col {
		padding-bottom: 40px;
	}

	.rlj-footer-col--intro {
		width: 100%;
	}

	.rlj-footer-col--address {
		width: 50%;
	}

	.rlj-footer-lede {
		padding-right: 0;
	}
}

@media (max-width: 1024px) and (min-width: 769px) {

	.rlj-footer-col--address {
		padding-bottom: 0;
	}
}

@media (max-width: 768px) {

	/*
	 * The address column KEEPS its 40px bottom padding here. GenerateBlocks
	 * dropped it only in the tablet band, `(max-width:1024px) and
	 * (min-width:768px)`, where the two columns still sit side by side; below
	 * that they stack and the gap is what separates the phone number from the
	 * social row. Zeroing it here made the mobile footer 40px short of live.
	 */
	.rlj-footer-col--address {
		width: 100%;
	}

	.rlj-footer-bar {
		flex-direction: column-reverse;
		row-gap: 20px;
	}

	.rlj-footer-copyright {
		width: 100%;
	}

	.rlj-footer-legal {
		align-items: flex-start;
		flex-direction: column;
		row-gap: 10px;
		width: 100%;
	}

	.rlj-footer-cta {
		margin-bottom: 20px;
	}
}