/*
 * Anan Footer.
 *
 * ---------------------------------------------------------------------------
 * On the taupe
 * ---------------------------------------------------------------------------
 * The band taupe is #6e6659. Against it, white text measures 5.7:1 - fine - but
 * every *quieter* tone the layout needs (the blurb, the small-caps headings,
 * the gold) lands between 3.2:1 and 4.0:1, i.e. below AA for text that size.
 * The footer therefore sits a few shades deeper at #4f483d, the same hue with
 * the value pulled down, which buys enough headroom that the muted tones pass
 * too: gold 5.0:1, dim text 5.0:1, links 7.1:1. It also matches the reference,
 * whose footer is markedly darker than the page above it.
 *
 * Change --anan-f-bg to #6e6659 for the flat band taupe if the depth is not
 * wanted - the contrast comment above is the only reason it is not that already.
 * ---------------------------------------------------------------------------
 */

.anan-footer {
	--anan-f-bg:    #4f483d;
	--anan-f-text:  #ece7dd;
	--anan-f-dim:   #c9c1b1;
	--anan-f-gold:  #d2c196;
	--anan-f-rule:  rgba( 210, 193, 150, 0.22 );
	--anan-f-pad:   clamp( 48px, 5vw, 84px );

	background-color: #4f483d;
	background-color: var( --anan-f-bg, #4f483d );
	color: var( --anan-f-text, #ece7dd );
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.65;
	width: 100%;
}

/*
 * The theme prints this inside `#footer-widget-area`, which is a Bootstrap .row
 * - negative side margins and display:flex. Both have to be undone or the
 * footer sits 12px proud of the viewport and its children become flex items.
 */
#footer-widget-area:has( > .anan-footer ),
.anan-footer-on #footer-widget-area {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* .row > * also hands every child half a Bootstrap gutter. Between that and the
   30px the theme puts on #footer-widget-area, the footer would carry 42px of
   inset before .anan-footer__inner adds its own 30 - so both are cleared and
   the inner element owns the gutter alone. */
.anan-footer-on #footer-widget-area > .anan-footer {
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
}

/* The theme's own sub-footer. Hidden rather than switched off at the option,
   because wp_estate_show_footer_copy is global and the seven translated sites
   still render their copyright through it. */
.anan-footer-on .sub_footer {
	display: none;
}

.anan-footer-on footer#colophon {
	background-color: var( --anan-f-bg, #4f483d );
	background-image: none;
	padding: 0;
}

.anan-footer__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1340px;
	padding: var( --anan-f-pad ) 30px 28px;
}

/* ---------------------------------------------------------------- brand --- */

.anan-footer__brand {
	margin-bottom: clamp( 32px, 4vw, 56px );
}

.anan-footer__logo {
	display: inline-block;
	line-height: 0;
}

/*
 * There is only one logo on the site and it is drawn for a light ground - dark
 * wordmark, gold mark. brightness(0) crushes it to solid black regardless of
 * its colours, invert(1) lifts that to solid white, which is exactly the
 * treatment the reference gives its own logo. No second asset to keep in step.
 */
.anan-footer__logo img {
	display: block;
	filter: brightness( 0 ) invert( 1 );
	height: auto;
	opacity: 0.94;
	width: clamp( 150px, 13vw, 190px );
}

/* --------------------------------------------------------------- columns --- */

.anan-footer__cols {
	display: grid;
	gap: clamp( 32px, 3vw, 56px ) clamp( 24px, 2.6vw, 48px );
	grid-template-columns: 1.55fr repeat( 4, 1fr );
}

.anan-footer__heading {
	color: var( --anan-f-gold );
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.anan-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.anan-footer__list li {
	margin: 0 0 9px;
}

/* #colophon a is (1,0,1) and sets the theme's grey #757575 on every link in
   here. One id in the selector is the cheapest way past it - no !important. */
#colophon .anan-footer a {
	border: 0;
	color: var( --anan-f-text );
	text-decoration: none;
	transition: color 200ms ease;
}

#colophon .anan-footer a:hover,
#colophon .anan-footer a:focus-visible {
	color: var( --anan-f-gold );
}

#colophon .anan-footer a:focus-visible {
	outline: 2px solid var( --anan-f-gold );
	outline-offset: 3px;
}

/*
 * The trailing arrow. A pseudo-element so it stays out of the accessible name -
 * a screen reader should hear "Bang Tao", not "Bang Tao right arrow".
 */
.anan-footer__list a::after,
.anan-footer__arrowlink::after {
	content: "\2192";
	display: inline-block;
	font-size: 0.92em;
	margin-left: 7px;
	opacity: 0.5;
	transform: translateX( 0 );
	transition: transform 200ms ease, opacity 200ms ease;
}

.anan-footer__list a:hover::after,
.anan-footer__list a:focus-visible::after,
.anan-footer__arrowlink:hover::after,
.anan-footer__arrowlink:focus-visible::after {
	opacity: 1;
	transform: translateX( 4px );
}

/* ----------------------------------------------------------------- about --- */

.anan-footer__col--about {
	max-width: 340px;
}

.anan-footer__blurb {
	color: var( --anan-f-dim );
	margin: 0 0 26px;
}

.anan-footer__address {
	color: var( --anan-f-dim );
	font-style: normal;
	margin: 0 0 14px;
}

.anan-footer__address span {
	display: block;
}

.anan-footer__line {
	margin: 0 0 8px;
}

.anan-footer__sep {
	color: var( --anan-f-gold );
	margin: 0 8px;
	opacity: 0.65;
}

.anan-footer__heading--follow {
	margin: 30px 0 14px;
}

.anan-footer__social {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.anan-footer__social li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.anan-footer__social a {
	align-items: center;
	display: inline-flex;
	font-size: 19px;
	height: 24px;
	justify-content: center;
	opacity: 0.9;
	width: 24px;
}

.anan-footer__social a:hover {
	opacity: 1;
}

/* ----------------------------------------------------------- recognition --- */

.anan-footer__recognition {
	border-top: 1px solid var( --anan-f-rule );
	margin-top: clamp( 44px, 4.5vw, 72px );
	padding-top: clamp( 32px, 3.5vw, 52px );
}

.anan-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 32px, 4vw, 72px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.anan-footer__badge {
	max-width: 150px;
	text-align: center;
}

.anan-footer__badge img {
	display: block;
	height: auto;
	margin: 0 auto 14px;
	max-height: 128px;
	width: auto;
}

.anan-footer__badge-title {
	color: var( --anan-f-dim );
	display: block;
	font-size: 13px;
	line-height: 1.45;
}

.anan-footer__badge-link {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.14em;
	margin-top: 10px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- legal bar --- */

.anan-footer__base {
	align-items: center;
	border-top: 1px solid var( --anan-f-rule );
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: clamp( 44px, 4.5vw, 72px );
	padding-top: 26px;
	row-gap: 6px;
}

.anan-footer__legal {
	color: var( --anan-f-dim );
	font-size: 13px;
	margin: 0;
	text-align: center;
}

.anan-footer__legal-list {
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 6px;
}

/* Dot between the legal menu items, matching the separators to their left. */
.anan-footer__legal-list li + li::before {
	color: var( --anan-f-gold );
	content: "\00B7";
	margin-right: 10px;
	opacity: 0.65;
}

#colophon .anan-footer__legal-list a {
	color: var( --anan-f-dim );
}

.anan-footer__legal-menu .anan-footer__legal-list a::after {
	content: none;
}

/* ------------------------------------------------------------ responsive --- */

/*
 * Below the five-across layout the about block goes full width and the four
 * link lists divide evenly - 4, then 2x2, then one. Three across was the first
 * attempt and it strands Popular Searches alone on its own row.
 */
@media ( max-width: 1200px ) {
	.anan-footer__cols {
		grid-template-columns: repeat( 4, 1fr );
	}

	.anan-footer__col--about {
		grid-column: 1 / -1;
		max-width: 620px;
	}
}

@media ( max-width: 900px ) {
	.anan-footer__cols {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 520px ) {
	.anan-footer__inner {
		padding-left: 22px;
		padding-right: 22px;
	}

	.anan-footer__cols {
		grid-template-columns: 1fr;
	}

	.anan-footer__badges {
		justify-content: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.anan-footer a,
	.anan-footer__list a::after,
	.anan-footer__arrowlink::after {
		transition: none;
	}
}

/* Each column carries the footer ground explicitly, so contrast tools
   resolve the links' background without walking past scroll containers. */
.anan-footer__col,
.anan-footer__cols,
.anan-footer__base {
	background-color: var( --anan-f-bg, #4f483d );
}