/* Drink With Us — Footer

   Inky green ground, cream type. The footer is one of the three
   sections allowed to interrupt the page.

   Selectors are written twice, with and without the .fl-page prefix.
   A Themer footer renders inside .fl-page in the builder but outside
   it on the front end — which is why the headings looked right while
   building and reverted to 40px page headings once saved. */

.dwu-footer {
	--dwu-f-ink: var(--color-cream, #f2ebe0);
	--dwu-f-soft: rgba(242, 235, 224, 0.72);
	--dwu-f-rule: rgba(242, 235, 224, 0.18);
	background: var(--color-inky-green, #0f2e26);
	color: var(--dwu-f-ink);
	padding: var(--space-12, 3rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem);
}

.dwu-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
	gap: var(--space-10, 2.5rem);
	max-width: 1100px;
	margin: 0 auto;
}

/* Brand */

.fl-page .dwu-footer .dwu-footer__intro,
.dwu-footer .dwu-footer__intro {
	margin: 0 0 var(--space-5, 1.25rem) !important;
	max-width: 34ch;
	color: var(--dwu-f-ink) !important;
	font-family: var(--font-heading, sans-serif) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
}

/* Social */

.dwu-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fl-page .dwu-footer .dwu-social__list li,
.dwu-footer .dwu-social__list li {
	margin: 0 !important;
	padding: 0 !important;
}

.fl-page .dwu-social .dwu-social__list a,
.dwu-social .dwu-social__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dwu-f-rule);
	border-radius: 50%;
	color: var(--dwu-f-ink) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fl-page .dwu-social .dwu-social__list a:hover,
.dwu-social .dwu-social__list a:hover,
.fl-page .dwu-social .dwu-social__list a:focus-visible,
.dwu-social .dwu-social__list a:focus-visible {
	background: var(--dwu-f-ink);
	border-color: var(--dwu-f-ink);
	color: var(--color-inky-green, #0f2e26) !important;
}

.dwu-social__list svg {
	width: 19px;
	height: 19px;
	display: block;
}

.fl-page .dwu-social .dwu-social__label,
.dwu-social .dwu-social__label {
	margin: 0 0 8px !important;
	color: var(--dwu-f-soft) !important;
	font-size: 0.6875rem !important;
	line-height: 1.2 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
}

/* Link columns */

.dwu-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-8, 2rem);
}

/* The column headings are h2 elements, so without these they take the
   page's h2 size — 40px, in inky green on an inky green ground, which
   is why "Explore" was invisible until it was selected. */

.fl-page .dwu-footer .dwu-footer__heading,
.dwu-footer .dwu-footer__heading,
.dwu-footer h2.dwu-footer__heading {
	display: block !important;
	margin: 0 0 var(--space-4, 1rem) !important;
	max-width: none !important;
	color: var(--color-dusty-mauve, #ba7157) !important;
	font-family: var(--font-body, sans-serif) !important;
	font-size: 0.6875rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-indent: 0 !important;
	text-align: left !important;
}

.fl-page .dwu-footer .dwu-footer__links,
.dwu-footer .dwu-footer__links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fl-page .dwu-footer .dwu-footer__links li,
.dwu-footer .dwu-footer__links li {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: var(--text-xs, 0.875rem) !important;
	line-height: 1.4 !important;
}

.fl-page .dwu-footer .dwu-footer__links a,
.dwu-footer .dwu-footer__links a {
	color: var(--dwu-f-soft) !important;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.fl-page .dwu-footer .dwu-footer__links a:hover,
.dwu-footer .dwu-footer__links a:hover {
	color: var(--dwu-f-ink) !important;
	border-bottom-color: currentColor;
}

/* Travel advisor.

   Set apart with a rule rather than buried in a column — a commission
   disclosure that has to be hunted for is not much of a disclosure. */

.dwu-footer__fora {
	max-width: 1100px;
	margin: var(--space-10, 2.5rem) auto 0;
	padding-top: var(--space-6, 1.5rem);
	border-top: 1px solid var(--dwu-f-rule);
}

.fl-page .dwu-footer .dwu-footer__fora-name,
.dwu-footer .dwu-footer__fora-name {
	margin: 0 0 6px !important;
	max-width: none !important;
	color: var(--dwu-f-ink) !important;
	font-family: var(--font-body, sans-serif) !important;
	font-size: var(--text-xs, 0.875rem) !important;
	line-height: 1.4 !important;
	letter-spacing: 0.04em !important;
}

.fl-page .dwu-footer .dwu-footer__fora-name a,
.dwu-footer .dwu-footer__fora-name a {
	color: inherit !important;
	border-bottom: 1px solid rgba(242, 235, 224, 0.4);
	text-decoration: none;
}

.fl-page .dwu-footer .dwu-footer__fora-name a:hover,
.dwu-footer .dwu-footer__fora-name a:hover {
	border-bottom-color: currentColor;
}

.fl-page .dwu-footer .dwu-footer__fora-note,
.dwu-footer .dwu-footer__fora-note {
	margin: 0 !important;
	max-width: 68ch;
	color: var(--dwu-f-soft) !important;
	font-family: var(--font-body, sans-serif) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
}

/* Base line */

.dwu-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	max-width: 1100px;
	margin: var(--space-8, 2rem) auto 0;
	padding-top: var(--space-5, 1.25rem);
	border-top: 1px solid var(--dwu-f-rule);
}

.fl-page .dwu-footer .dwu-footer__base p,
.dwu-footer .dwu-footer__base p {
	margin: 0 !important;
	max-width: none !important;
	color: var(--dwu-f-soft) !important;
	font-family: var(--font-body, sans-serif) !important;
	font-size: 0.75rem !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
}

.dwu-footer__place {
	margin-left: auto !important;
}

@media (max-width: 860px) {
	.dwu-footer__top {
		grid-template-columns: 1fr;
		gap: var(--space-8, 2rem);
	}
}

@media (max-width: 600px) {
	.dwu-footer {
		padding: var(--space-10, 2.5rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem);
	}

	.dwu-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6, 1.5rem);
	}

	.dwu-footer__place {
		margin-left: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dwu-social .dwu-social__list a,
	.dwu-footer .dwu-footer__links a {
		transition: none;
	}
}

@media print {
	.dwu-footer { display: none; }
}
