/* ==========================================================================
   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));
}

#colophon .site-footer-row-container .site-container {
	max-width: none;
	padding-inline: 48px;
}

#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);
}

/* 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: 16px;
	}

	#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;
	}
}

/* --- 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);
	}

	.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));
	}
}