/* ==========================================================================
   Emily H&B — Footer and mobile bottom navigation
   --------------------------------------------------------------------------
   Row structure and spacing are seeded into the Kadence Footer Builder by
   inc/class-emily-hb-footer.php. This file carries the photographic ground,
   the column type, the TGA strip, the mobile accordion and the bottom nav.

   Kadence markup this file relies on:
     #colophon                  the footer element
     .site-top-footer-wrap      the five-column row
     .site-bottom-footer-wrap   the TGA strip row
     .site-footer-row           the inner grid
     .footer-widget-area        one column
   ========================================================================== */

/* --- The ground ----------------------------------------------------------
   Figma: a jacaranda photograph under a linear gradient from
   rgba(36,19,32,.90) to rgba(36,19,32,.82). The gradient is the first
   background layer so it paints over the image.

   The flat --ehb-surface-ink seeded into footer_wrap_background stays as the
   paint-before-image colour, so the footer never flashes white.            */

#colophon {
	position: relative;
	background-color: var(--ehb-surface-ink);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--ehb-text-muted-on-dark);
}

#colophon .site-footer-wrap {
	background: linear-gradient(90deg, rgba(36, 19, 32, 0.9), rgba(36, 19, 32, 0.82));
}

/* Same split as the header rows: the `.site-container` is the padded full-bleed outer (so the
   "cloudy sky" ground still reaches the viewport edge), and the row's inner wrap is the
   centred column capped at --ehb-content-width, so footer columns line up with the body
   headings above them instead of running out to the edge on a wide screen. */
#colophon .site-footer-row-container .site-container {
	max-width: none;
	padding-inline: var(--ehb-gutter);
}

#colophon .site-top-footer-inner-wrap,
#colophon .site-middle-footer-inner-wrap,
#colophon .site-bottom-footer-inner-wrap {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

#colophon .site-top-footer-inner-wrap {
	grid-template-columns: 300px repeat(4, minmax(0, 1fr));
	gap: 56px;
}

.ehb-footer-column summary {
	font-family: var(--ehb-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	list-style: none;
	margin-bottom: 14px;
}

.ehb-footer-column summary::-webkit-details-marker {
	display: none;
}

#colophon .ehb-footer-column ul {
	gap: 0;
}

#colophon .ehb-footer-column a {
	line-height: 26px;
}

#colophon .ehb-footer-column li {
	margin: 0;
}

@media (min-width: 1024px) {
	.ehb-footer-column:not([open])>ul {
		display: flex;
	}

	.ehb-footer-column::details-content {
		content-visibility: visible;
	}
}

/* --- Columns -------------------------------------------------------------
   Figma: Label/Eyebrow headings in paper, links at 13px in muted-on-dark.  */

#colophon .widget-title,
#colophon .footer-widget-area .widget-title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-eyebrow);
	line-height: var(--ehb-lh-label-eyebrow);
	letter-spacing: var(--ehb-ls-label-eyebrow);
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	margin: 0 0 var(--ehb-space-16);
}

#colophon .footer-widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-12);
}

#colophon .footer-widget-area a {
	font-family: var(--ehb-font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ehb-text-muted-on-dark);
	text-decoration: none;
}

#colophon .footer-widget-area a:hover,
#colophon .footer-widget-area a:focus-visible {
	color: var(--ehb-text-on-dark);
	text-decoration: underline;
}

/* Brand column — the logo, no heading. */
#colophon .footer-widget-area:first-child img {
	max-width: 152px;
	height: auto;
}

/* --- TGA disclaimer strip ------------------------------------------------
   Figma: a 6% white wash over the ground, not a separate colour.          */

#colophon .site-bottom-footer-wrap {
	background: rgba(255, 255, 255, 0.06);
}

.ehb-disclaimer {
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-8);
	text-align: start;
}

.ehb-disclaimer p {
	margin: 0;
}

/* The TGA line is a legal requirement, not decoration. It is set heavier and
   in full-strength white so it reads first. */
.ehb-disclaimer__tga {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-semibold);
	font-size: 13px;
	line-height: 1.45;
	color: var(--ehb-text-on-dark);
}

.ehb-disclaimer__legal {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
	color: var(--ehb-text-muted-on-dark);
}

/* "Developed by 123Website" credit (footer HTML in the Customizer): the link picked up
   the footer link size (13px) over this 11–12px line and stood out. Same size as the
   line, a step quieter than the copyright. */
#colophon .ehb-disclaimer__legal a {
	font-size: inherit;
	color: inherit;
	text-decoration: none;
	opacity: 0.7;
}

#colophon .ehb-disclaimer__legal a:hover,
#colophon .ehb-disclaimer__legal a:focus-visible {
	opacity: 1;
}

/* Footer language switcher (Figma 10:21) — repeats the announcement-bar
   switcher. Placeholder link until TranslatePress is wired (debt #5). */
.ehb-lang-switcher--footer {
	color: var(--ehb-text-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

.ehb-lang-switcher--footer:hover,
.ehb-lang-switcher--footer:focus-visible {
	text-decoration: underline;
}

/* --- Mobile: columns become accordion rows -------------------------------
   Figma · 04 Motion, behaviour 04: four columns become four rows, one open
   at a time, chevron rotates 180deg, native details/summary with a
   max-height transition.

   The accordion itself is behaviour, and behaviour is build step 7. What
   this file does now is the resting mobile layout: stacked rows divided by a
   hairline, sized to the 44px touch target in the design. The details/summary
   markup replaces these rows when the motion layer lands.                 */

@media (max-width: 1023px) {
	#colophon .site-footer-row-container .site-container {
		padding-inline: var(--ehb-gutter);
	}

	#colophon .site-top-footer-inner-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ehb-footer-column summary {
		margin: 0;
		cursor: pointer;
	}

	.ehb-footer-column summary::after {
		content: '+';
		float: right;
	}

	.ehb-footer-column[open] summary::after {
		content: '\2212';
	}

	#colophon .ehb-footer-column[open] ul {
		padding-top: 14px;
	}

	#colophon .site-top-footer-wrap .footer-widget-area {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: var(--ehb-space-16) 0;
	}

	#colophon .site-top-footer-wrap .footer-widget-area:first-child {
		border-bottom: 0;
		padding-top: 0;
	}

	#colophon .widget-title {
		margin-bottom: var(--ehb-space-12);
	}

	.ehb-disclaimer__legal {
		font-size: 11px;
	}
}

/* Client-added Customizer → Additional CSS (`wp_custom_css` post 277, added
   21/09/2026) puts the legal line and the copyright line side by side with
   `display:flex; justify-content:space-between` and forces the copyright
   span `white-space:nowrap` — desktop-only, no breakpoint of its own.
   Customizer CSS prints late in <head>, after this file, so equal-specificity
   plain-class rules here can't win; `#colophon` (id) is needed to outrank it.
   Below 768px the two spans have too little room and shrink to a few px
   each, wrapping every word onto its own line. Stack them instead — this
   theme file is not the one to edit (client-owned, self-service field), so
   this overrides it rather than removing it. */
@media (max-width: 767px) {
	#colophon .ehb-disclaimer__legal {
		display: block;
	}

	#colophon .ehb-disclaimer__legal span:last-child {
		white-space: normal;
		text-align: left;
	}
}

/* The floating contact stack and back-to-top button are position:fixed in the
   last 70px of the viewport (50px wide at right:20px). They clear the content
   column only while the viewport is at least ~1440 + 2*86 wide (70px lane + breathing room); below that the
   column reaches into their lane and the copyright line — the one thing that
   sits hard against the column's right edge — ran under them and was clipped
   ("Developed by 123Web…"). Reserve the lane for that row only. */
@media (max-width: 1620px) {
	#colophon .ehb-disclaimer__legal {
		padding-inline-end: 76px;
	}
}

/* --- Mobile bottom navigation --------------------------------------------
   Figma: Bottom Nav / Mobile, 390x68, paper ground, 4 items, 34px side
   padding. Rendered into wp_footer by Emily_HB_Footer::render_bottom_nav().
   Kadence has no equivalent element.                                      */

.ehb-bottom-nav {
	display: none;
}

@media (max-width: 1023px) {
	.ehb-bottom-nav {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 68px;
		padding: 0 34px;
		/* Keep the bar clear of the iOS home indicator. */
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: var(--ehb-surface-paper);
		border-top: 1px solid var(--ehb-line-subtle);
	}

	/* Hides with the header: Kadence's reveal-on-scroll-up puts .item-hidden-above
	   on the sticky mobile header while the visitor scrolls down, so both bars get
	   out of the way while reading and come back on the first scroll up. */
	.ehb-bottom-nav {
		transition: transform 240ms ease;
	}

	body:has(#mobile-header .item-hidden-above) .ehb-bottom-nav {
		transform: translateY(100%);
	}

	.ehb-bottom-nav__item {
		font-family: var(--ehb-font-body);
		font-weight: var(--ehb-weight-semibold);
		font-size: 11.5px;
		line-height: 1.2;
		color: var(--ehb-text-ink);
		text-decoration: none;
		/* The label is small; the tap target is not. */
		padding: var(--ehb-space-12) var(--ehb-space-8);
	}

	.ehb-bottom-nav__item:hover,
	.ehb-bottom-nav__item:focus-visible {
		color: var(--ehb-brand-magenta);
	}

	/*
	 * The fixed bar would otherwise cover the last of the footer. Reserve its
	 * height at the end of the page rather than padding <body>, which would
	 * fight Kadence's own layout.
	 */
	body:has(.ehb-bottom-nav) #colophon {
		padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	}
}
/* Footer "Cookie settings" link (assets/js/consent.js opens Complianz' own
   preferences panel). Matches the language switcher beside it rather than the
   footer link size, so the row reads as one line of small print. */
#colophon .ehb-disclaimer__lang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ehb-space-8);
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
	color: var(--ehb-text-muted-on-dark);
}

#colophon .ehb-consent-link {
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#colophon .ehb-consent-link:hover,
#colophon .ehb-consent-link:focus-visible {
	color: var(--ehb-text-on-dark);
}

#colophon .ehb-consent-link[hidden] {
	display: none;
}

/* Payment marks in the footer ([ehb_payment_marks], R010 §3). The marks are the
   official files from assets/img/payment — never recoloured — so on the dark
   ground each sits on a small white field, the usual way acceptance marks are
   shown on dark backgrounds. Afterpay's badge already carries its own mint
   ground and rounded corners, so it goes in bare. Reuses the cart row
   (.ehb-cart-payment-marks, woocommerce.css) for the markup only. */
#colophon .ehb-footer-payments .ehb-cart-payment-marks {
	padding-top: 0;
}

#colophon .ehb-footer-payments .ehb-payment-row {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

#colophon .ehb-footer-payments .ehb-payment-mark {
	box-sizing: border-box;
	height: 30px;
	padding: 0 9px;
	background: #fff;
	border-radius: 6px;
}

#colophon .ehb-footer-payments .ehb-payment-mark--afterpay {
	padding: 0;
	background: none;
}

#colophon .ehb-footer-payments .ehb-payment-row img {
	height: 16px;
}

#colophon .ehb-footer-payments .ehb-payment-row img[alt*='Visa' i] {
	height: 11px;
}

#colophon .ehb-footer-payments .ehb-payment-row img[alt*='Mastercard' i] {
	height: 20px;
}

#colophon .ehb-footer-payments .ehb-payment-row img[alt*='Afterpay' i] {
	height: 30px;
	border-radius: 6px;
}

/* Facebook logo under the footer headings ([ehb_facebook], Phil UAT §4): white mark + label, desktop and mobile. */
.ehb-footer-social {
	padding-bottom: var(--ehb-space-8);
	margin-bottom: var(--ehb-space-8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* .footer-widget-area in the chain: `#colophon .footer-widget-area a` (muted footer links) would win otherwise. */
#colophon .footer-widget-area .ehb-footer-social__link,
#colophon .ehb-footer-social__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--ehb-text-on-dark);
	font-family: var(--ehb-font-body);
	font-size: 14px;
	font-weight: var(--ehb-weight-semibold);
	text-decoration: none;
}

#colophon .footer-widget-area .ehb-footer-social__link:hover,
#colophon .footer-widget-area .ehb-footer-social__link:focus-visible {
	color: var(--ehb-text-on-dark);
}

#colophon .ehb-footer-social__link:hover span,
#colophon .ehb-footer-social__link:focus-visible span {
	text-decoration: underline;
}

/* Logo variant (Phil, UAT §4: "an obvious Facebook logo below the four headings"): a clear 40px mark under the
   columns, before the TGA line, on desktop and mobile. */
.ehb-disclaimer > .ehb-footer-social .ehb-footer-social__link svg {
	flex: none;
}

/* Facebook card under the footer logo ([ehb_facebook variant="card"]): the site's own colours on the dark footer,
   avatar = the page's profile picture. Fits the 300px logo column on desktop, full width on mobile up to 360px. */
.ehb-fb-card {
	max-width: 300px;
	margin-top: var(--ehb-space-24, 24px);
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

#colophon .footer-widget-area .ehb-fb-card__id {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
}

.ehb-fb-card__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.ehb-fb-card__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--ehb-font-body);
	line-height: 1.3;
}

.ehb-fb-card__text strong {
	font-size: 16px;
	font-weight: var(--ehb-weight-semibold);
}

.ehb-fb-card__text span {
	font-size: 13px;
	color: var(--ehb-text-muted-on-dark);
}

.ehb-fb-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}

#colophon .footer-widget-area .ehb-fb-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: var(--ehb-text-on-dark);
	font-family: var(--ehb-font-body);
	font-size: 13px;
	font-weight: var(--ehb-weight-semibold);
	text-decoration: none;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

/* The footer's a:hover underline (1,2,1) outranks the card's own rules; buttons and the name row stay plain. */
#colophon .footer-widget-area .ehb-fb-card__btn:hover,
#colophon .footer-widget-area .ehb-fb-card__btn:focus-visible,
#colophon .footer-widget-area .ehb-fb-card__id:hover,
#colophon .footer-widget-area .ehb-fb-card__id:focus-visible {
	color: var(--ehb-text-on-dark);
	text-decoration: none;
}

#colophon .footer-widget-area .ehb-fb-card__btn--primary {
	border-color: var(--ehb-brand-rose-plum);
	background: var(--ehb-brand-rose-plum);
}

@media (hover: hover) {
	#colophon .footer-widget-area .ehb-fb-card__btn:hover {
		border-color: rgba(255, 255, 255, 0.6);
	}

	#colophon .footer-widget-area .ehb-fb-card__btn--primary:hover {
		background: var(--ehb-brand-magenta);
		border-color: var(--ehb-brand-magenta);
	}
}

#colophon .footer-widget-area .ehb-fb-card__btn:focus-visible,
#colophon .footer-widget-area .ehb-fb-card__id:focus-visible {
	outline: 2px solid var(--ehb-text-on-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#colophon .footer-widget-area .ehb-fb-card__btn {
		transition: none;
	}
}