/**
 * Footer CSS — log-core
 * 4-column dark footer matching home_page2.html reference.
 */

footer.log-site-footer {
	/* Warm black→bronze wash, stops per website_reference/*.html footer.site */
	background: linear-gradient(135deg, #050505 0%, #0d0b06 28%, #1a1306 50%, #241a07 70%, #0A0A0A 100%);
	color: #fff;
	/* Reference layout: 64px from footer edge to column headings, with a
	 * compact 54px close before the bottom divider. */
	padding: 64px 24px 0;
	position: relative;
	overflow: hidden;
}

/* Faint 48px gold grid, then three soft gold pools — the two decorative
   layers the reference stacks behind the footer content. */
footer.log-site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(rgba(212, 175, 55, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 175, 55, .06) 1px, transparent 1px);
	background-size: 48px 48px;
}

footer.log-site-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 60% 55% at 0% 10%, rgba(212, 175, 55, .18) 0%, transparent 65%),
		radial-gradient(ellipse 50% 60% at 100% 40%, rgba(212, 175, 55, .11) 0%, transparent 65%),
		radial-gradient(ellipse 45% 35% at 50% 100%, rgba(240, 204, 85, .09) 0%, transparent 60%);
}

/* Container constraint shared by top + bottom */
.log-footer-container {
	/* Reference content runs from 348px to 1,568px on a 1,916px viewport. */
	max-width: 1220px;
	margin: 0 auto;
}

/* Lift content above the two decorative layers. */
.log-footer-top,
.log-footer-bottom {
	position: relative;
	z-index: 1;
}

/* Top grid */
.log-footer-top {
	padding-bottom: 54px;
}

.log-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	/* Keep the four columns at the reference's 40px gutters. */
	gap: 40px;
}

/* Brand column */
.log-footer-tagline {
	font-size: 13.5px;
    line-height: 1.7;
    color: var(--gray-400);
    margin-top: 14px;
    max-width: 300px;
}

/* Existing Footer — Brand widgets use this legacy class. Keep it aligned
   with the default brand markup above. */
.log-footer-col--brand .log-footer-desc {
	font-family: var(--body);
    font-size: 13.5px !important;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
    margin-top: 14px;
    max-width: 300px;
}

/* Logo in footer */
.log-footer-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	min-width: 0;
}

.log-footer-logo .log-logo-mark {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.log-footer-logo .log-logo-mark svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.4;
	stroke: var(--paper);
}

.log-footer-logo b {
	color: var(--gold-500);
	font-weight: 800;
}

/* Social */
.log-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.log-fs-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: all .25s var(--ease);
}

.log-fs-btn:hover {
	background: var(--gold-500);
	color: var(--ink-900);
	border-color: var(--gold-500);
	transform: translateY(-2px);
}

.log-fs-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Newsletter */
.log-footer-news {
	margin-top: 24px;
}

.log-footer-news p {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 10px;
}

/* Newsletter — real Contact Form 7 markup (form#log-fn-cf7, fields
 * mr-nl-email / mr-nl-submit are CF7's own template class hooks). */
.log-fn-cf7 {
	display: flex;
	align-items: stretch;
}

/* Pill background/padding lives on the input row itself, not the <form> —
 * .wpcf7-response-output is a sibling of this <p>, not a child, so it no
 * longer inherits the pill's rounded background/padding. It renders as its
 * own full-width block after the pill instead of being crammed inside it. */
.log-fn-cf7 p {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .06);
	padding: 5px;
	border: 1.5px solid rgba(212, 175, 55, .3);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.log-fn-cf7 p:focus-within {
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, .2);
}

.log-fn-cf7 .wpcf7-form-control-wrap {
	flex: 1;
	display: block;
}

.log-fn-cf7 br {
	display: none;
}

.log-fn-cf7 .mr-nl-email {
	width: 100%;
	background: none;
	border: none;
	color: #fff;
	caret-color: #fff;
	font-size: 13px;
	padding: 10px 14px;
	border-radius: var(--r-pill);
	outline: none;
	transition: box-shadow .2s var(--ease);
}

.log-fn-cf7 .mr-nl-email::placeholder {
	color: rgba(255, 255, 255, .3);
}

.log-fn-cf7 .mr-nl-email:focus {
	background: inherit;
	color: #fff;
}

/* Chrome/Edge autofill forces its own white/yellow background + black text
 * (ignores color/background entirely, one of the few things !important on
 * a normal declaration can't override) — this is the standard workaround:
 * a huge inset box-shadow paints over the forced background, and
 * -webkit-text-fill-color (not color) is what autofill actually respects. */
.log-fn-cf7 .mr-nl-email:-webkit-autofill,
.log-fn-cf7 .mr-nl-email:-webkit-autofill:focus,
.log-fn-cf7 .mr-nl-email:-webkit-autofill:hover {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .08) inset;
	transition: background-color 5000s ease-in-out 0s;
}

.log-fn-cf7 .mr-nl-submit {
	background: var(--gold-500);
	color: var(--ink-950);
	font-family: var(--body);
	font-weight: 700;
	font-size: 12.5px;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	border: none;
	cursor: pointer;
	transition: background .25s var(--ease);
	flex-shrink: 0;
	white-space: nowrap;
}

.log-fn-cf7 .mr-nl-submit:hover {
	background: var(--gold-400);
}

/* issues-docx.css has an unscoped, sitewide
 * ".wpcf7-form.submitting .wpcf7-submit{color:transparent!important}" rule
 * (written for a different form's spinner-replaces-label pattern) that also
 * matches this footer submit button via its shared .wpcf7-submit class. CF7
 * adds .submitting to the form + disables the button while its AJAX request
 * is in flight, and since we hide .wpcf7-spinner entirely below, that rule
 * left the button blank — neither label nor spinner visible. Its selector
 * has 3 classes; this one needs 4+ to out-specificity it despite matching
 * !important, so both class names are repeated. */
.log-fn-cf7.log-fn-cf7.submitting .mr-nl-submit.wpcf7-submit,
.log-fn-cf7 .mr-nl-submit.wpcf7-submit:disabled {
	color: var(--ink-900) !important;
	background: var(--gold-500);
	opacity: 1;
}

.log-fn-cf7 .wpcf7-spinner {
	display: none;
}

/* Per-field inline tip duplicates the same message already shown, more
 * clearly, in the styled .wpcf7-response-output box below — avoid showing
 * the same error twice. */
.log-fn-cf7 .wpcf7-not-valid-tip {
	display: none !important;
}

/* CF7's own plugin CSS (.wpcf7 form.invalid/.unaccepted/.payment-required
 * .wpcf7-response-output) beats a plain .log-fn-cf7 override on specificity
 * alone (it adds a `form` type selector) — !important is the only clean
 * way to override a plugin default here, matching the border-color and
 * background rules it also otherwise applies. */
.log-fn-cf7 .wpcf7-response-output {
	/* issues-fixes.css sets an unscoped ".wpcf7-response-output{order:-1}"
	 * for the Contact Us page's own form (Issue #21) — it matches every
	 * CF7 form sitewide, including this one, and flips the notice above
	 * the pill-shaped input row here, rendering as a disconnected floating
	 * bubble. .log-fn-cf7 .wpcf7-response-output already has higher
	 * specificity than the unscoped rule, so this wins without !important
	 * and puts it back after the input row where it visually belongs. */
	order: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	box-sizing: border-box;
	margin: 8px 0 0 !important;
	font-size: 12px;
	/* Blocksy's cf-7.min.css sets font-style:italic on this class sitewide
	 * (unscoped) — override it here rather than touching parent theme files. */
	font-style: normal;
	color: rgba(255, 255, 255, .7);
	border: 1px solid rgba(255, 255, 255, .15) !important;
	background: rgba(255, 255, 255, .05);
	border-radius: var(--r-md, 10px);
	padding: 8px 12px !important;
}

/* Status icon: a plain circle by default, recolored to a check/warning
 * glyph once CF7 adds its validation/success class — keeps both states
 * visually distinct from a glance instead of color being the only cue. */
.log-fn-cf7 .wpcf7-response-output::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: currentColor;
	opacity: .18;
}

.log-fn-cf7.invalid .wpcf7-response-output,
.log-fn-cf7 .wpcf7-response-output.wpcf7-validation-errors {
	color: #ffb0b0;
	border-color: rgba(255, 90, 90, .35) !important;
	background: rgba(255, 90, 90, .08);
}

.log-fn-cf7.invalid .wpcf7-response-output::before,
.log-fn-cf7 .wpcf7-response-output.wpcf7-validation-errors::before {
	content: '!';
	display: flex;
	align-items: center;
	justify-content: center;
	/* Can't reuse currentColor for the circle here — this rule also sets
	 * this same element's text color, so background:currentColor would
	 * just match the glyph color instead of contrasting with it. */
	background: #ffb0b0;
	color: var(--ink-950);
	opacity: 1;
	font-weight: 800;
	font-size: 10px;
}

.log-fn-cf7.sent .wpcf7-response-output,
.log-fn-cf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
	color: var(--gold-400);
	border-color: rgba(212, 175, 55, .35) !important;
	background: rgba(212, 175, 55, .08);
}

.log-fn-cf7.sent .wpcf7-response-output::before,
.log-fn-cf7 .wpcf7-response-output.wpcf7-mail-sent-ok::before {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gold-400);
	color: var(--ink-950);
	opacity: 1;
	font-weight: 800;
	font-size: 10px;
}

/* Link columns — reference sets column headings in the mono face. */
.log-footer-col h5,
.log-footer-heading {
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	/* The reference leaves a clear 14px break before the first link. */
	margin-bottom: 12px;
	margin-top: 0;
}

/* Match the specificity of `.log-footer-col h5` above so the payment
 * heading's separation is not reset to zero by the general heading rule. */
.log-footer-col h5.log-footer-heading--pay,
.log-footer-heading.log-footer-heading--pay {
	margin-top: 20px;
}

/* The contact heading sits directly above its first address row, so it
 * needs a tighter break than the link-column headings. */
.log-footer-col--contact .log-footer-heading:not(.log-footer-heading--pay) {
	margin-bottom: 6px;
}

.log-footer-col ul,
.log-footer-links {
	display: flex;
	flex-direction: column;
	/* 19px link line-height + 7px gap gives the reference's 26px list rhythm. */
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.log-footer-col ul li,
.log-footer-links li {
	margin: 0;
}

.log-footer-col ul a,
.log-footer-links a {
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
	display: block;
	/* transform, not padding-left — same 4px hover nudge as the reference,
	   but composited instead of triggering a layout recalc. */
	transition: color .25s var(--ease);
}

.log-footer-col ul a:hover,
.log-footer-links a:hover {
	color: var(--gold-400);
	transform: translateX(4px);
}

/* Contact column */
.log-footer-contact-info {
	display: flex;
	flex-direction: column;
	/* Matches the 10px row separation used in the reference contact block. */
	gap: 10px;
}

.log-ft-contact-line,
.log-footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	margin: 0;
	line-height: 1.5;
}

.log-ft-contact-line svg,
.log-footer-contact-item svg {
	width: 15px;
	height: 15px;
	color: var(--gold-500);
	flex-shrink: 0;
	margin-top: 2px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Payment chips */
.log-pay-row {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.log-pay-chip {
	background: rgba(255, 255, 255, .08);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	/* border: 1px solid rgba(255, 255, 255, .12); */
}

/* Bottom bar */
.log-footer-bottom {
	font-size: 13px;
	color: var(--gold-500);
	border-top: 1px solid rgba(255, 255, 255, .10);
}

.log-footer-bottom-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 22px 0 28px;
}

.log-footer-bottom a,
.log-footer-links-bar a {
	color: var(--gold-500);
	text-decoration: none;
	transition: color .2s;
}

.log-footer-bottom a:hover,
.log-footer-links-bar a:hover {
	color: var(--gold-400);
}

.log-footer-links-bar {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/* Back to top */
.log-to-top {
	position: fixed;
	bottom: 20px;
	right: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gold-500);
	color: var(--ink-900);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(212, 175, 55, .45);
	opacity: 0;
	transform: translateY(12px);
	transition: all .3s var(--ease);
	z-index: 200;
	border: none;
	cursor: pointer;
}

.log-to-top:hover {
	background: var(--gold-400);
	transform: translateY(-3px);
}

.log-to-top.show {
	opacity: 1;
	transform: translateY(0);
}

.log-to-top:hover {
	background: var(--gold-400);
	transform: translateY(-3px);
}

.log-to-top svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Responsive */
@media (max-width: 1080px) {
	.log-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 600px) {
	/* Reference keeps two columns here and only drops to one at 420px; the
	   brand and contact columns span the full width so the two link columns
	   sit side by side between them. */
	.log-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px 18px;
	}

	.log-footer-col--brand,
	.log-footer-col--contact {
		grid-column: 1 / -1;
	}

	.log-footer-top {
		padding-bottom: 30px;
	}

	footer.log-site-footer {
		padding-top: 48px;
	}

	.log-footer-bottom-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 18px 0 22px;
	}

	.log-fn-cf7 {
		flex-direction: column;
		border-radius: var(--r-md);
		padding: 8px;
	}

	.log-fn-cf7 p {
		flex-direction: column;
		/* Base rule gives this the full pill radius (var(--r-pill), 999px) to
		 * match the desktop single-row layout. Stacked here, that leaves a
		 * full oval sitting inside the now-squared .log-fn-cf7 (r-md above)
		 * — match it so the input/button block reads as one shape. */
		border-radius: var(--r-md);
	}

	.log-fn-cf7 .mr-nl-email {
		padding: 10px 12px;
		/* Same mismatch as the .log-fn-cf7 p fix above — the input's own
		 * base-rule radius is the full pill (var(--r-pill)), never squared
		 * off for the stacked mobile layout. */
		border-radius: var(--r-md);
	}

	.log-fn-cf7 .mr-nl-submit {
		border-radius: var(--r-md);
		padding: 11px 18px;
		width: 100%;
		margin-top: 6px;
	}
}

@media (max-width: 420px) {
	.log-footer-grid {
		grid-template-columns: 1fr;
	}

	.log-footer-col--brand,
	.log-footer-col--contact {
		grid-column: 1;
	}
}