/**
 * Footer — one section of the design.
 *
 * Every measurement here was read off the file, node by node. Colour and type
 * that the Style tab can carry are left to it.
 */

.custom-footer {
	position: relative;
	width: 100%;
}

/* The design's own texture, carried by the build rather than uploaded. The
   file's own fifteen per cent is already in the exported asset, so nothing here
   dims it again. It tiles sideways so a viewport wider than the cap carries
   it too. */
.custom-footer::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	left: 0;
	height: 457px;
	background-image: url( "../img/footer-watermark.webp" );
	background-repeat: repeat-x;
	background-position: top center;
	background-size: 1440px auto;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.custom-footer__container {
	position: relative;
}

.custom-footer__container {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 96px 48px 34px 48px;
	box-sizing: border-box;
}

.custom-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 1344px;
}

.custom-footer__content {
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
}

/* Left — the sign-up, then the two contact columns. */
.custom-footer__signup-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	min-width: 0;
}

.custom-footer__heading {
	margin: 0;
	padding: 0;
}

.custom-footer__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.custom-footer__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 508px;
	max-width: 100%;
}

.custom-footer__form {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
}

/* The theme dresses every input and button of its own accord, so these say it
   again from inside the section, where they win. */
.custom-footer .custom-footer__field,
.custom-footer input.custom-footer__field {
	flex: 1 0 0;
	min-width: 0;
	height: 40px;
	padding: 12px 24px;
	border: 1px solid currentColor;
	border-radius: 28px;
	font-size: 14px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	box-shadow: none;
	box-sizing: border-box;
}

/* The answer, once the button carries it, is kept for whoever hears the page
   rather than sees it. */
.custom-footer__result.is-in-button {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* A press that has been heard, and cannot be repeated by accident. */
.custom-footer .custom-footer__submit[ disabled ],
.custom-footer button.custom-footer__submit[ disabled ] {
	cursor: progress;
	opacity: 0.6;
}

.custom-footer .custom-footer__field::placeholder {
	color: inherit;
	opacity: 1;
}

/* Reached, held or pressed, the field keeps what it was resting in: the theme
   answers a focused input with an edge and an ink of its own, at the same
   weight as the rule above, so it is said again one step heavier. */
.custom-footer input.custom-footer__field:hover,
.custom-footer input.custom-footer__field:focus,
.custom-footer input.custom-footer__field:active {
	outline: none;
	border-color: currentColor;
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.custom-footer .custom-footer__submit,
.custom-footer button.custom-footer__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 40px;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	font-size: 14px;
	font: inherit;
	line-height: normal;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
}

.custom-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.custom-footer__contact-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* A column keeps the room its own lines need. */
	flex: 0 0 auto;
	gap: 16px;
	min-width: 0;
}

/* The one carrying prose is the one that gives: its lines break, and the
   columns beside it stay where they are on the row. */
.custom-footer__contact-column:last-child {
	flex: 0 1 auto;
}

.custom-footer__contact-lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.custom-footer__contact-label,
.custom-footer__contact-column p {
	margin: 0;
}

/* Right — the links. */
.custom-footer__menus {
	display: flex;
	align-items: flex-start;
}

/* Two columns of one list, filled across before they are filled down: the
   order the client typed is read left to right, the way it is read on a page. */
.custom-footer__menu ul {
	display: grid;
	grid-template-columns: repeat( 2, max-content );
	justify-content: start;
	align-items: start;
	column-gap: 96px;
	row-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-footer__menu li {
	margin: 0;
	padding: 0;
}

.custom-footer__menu a {
	padding-top: 4px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The line across, then the bottom row. */
.custom-footer__rule {
	width: 100%;
	height: 1px;
	border: 0;
	margin: 0;
	background: currentColor;
	opacity: 0.4;
}

.custom-footer__bottom {
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
}

.custom-footer__copyright {
	margin: 0;
	min-width: 0;
}

.custom-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* The file draws a 40 disc with a 20 mark in the middle of it. */
.custom-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background-color: #3a2114;
	text-decoration: none;
}

.custom-footer__social-link svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: #c9bca6;
}

/* Motion — the same 300ms, ease in and out, the file gives every hover. */

.custom-footer__menu a,
.custom-footer__social-link,
.custom-footer__submit,
.custom-footer__field {
	transition:
		background-color 300ms ease-in-out,
		border-color 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

.custom-footer__social-link:hover {
	opacity: 0.7;
}

.custom-footer__submit:hover {
	opacity: 0.85;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-footer__menu a,
	.custom-footer__social-link,
	.custom-footer__submit,
	.custom-footer__field {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them, and both take it: the two
   halves come down into a single column, and the two lists of links keep their
   row beside each other. */
@media ( max-width: 1024px ) {
	.custom-footer__container {
		padding: 44px 22px 36px;
	}

	.custom-footer__inner {
		gap: 30px;
	}

	.custom-footer__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}

	.custom-footer__signup-column {
		align-self: stretch;
		gap: 24px;
	}

	/* The box and the button keep their row: the file draws them side by side,
	   the box taking what the button leaves. */
	.custom-footer__form {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.custom-footer__field {
		flex: 1 1 auto;
		min-width: 0;
	}

	.custom-footer .custom-footer__field {
		height: 27px;
		padding: 8px 16px;
		border-radius: 19px;
		font-size: 9px;
	}

	.custom-footer .custom-footer__submit,
	.custom-footer button.custom-footer__submit {
		flex: 0 0 auto;
		width: 81px;
		height: 27px;
		padding: 8px 16px;
		font-size: 9px;
	}

	.custom-footer__contact {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.custom-footer__menus {
		align-self: stretch;
		justify-content: flex-start;
		gap: 96px;
	}

	/* The marks stand in the middle of the band, and what is said about who
	   made it stands under them. */
	.custom-footer__bottom {
		flex-direction: column-reverse;
		align-items: center;
		gap: 24px;
	}

	.custom-footer__copyright {
		width: 100%;
		text-align: center;
	}
}

/* An anchor takes the browser's own colour unless it is told not to. The name
   at the foot of the page is drawn as part of the line, not apart from it. */
.custom-footer__menu a,
.custom-footer__social-link,
.custom-footer__maker,
.custom-footer__maker:hover,
.custom-footer__maker:focus,
.custom-footer__maker:active {
	color: inherit;
	text-decoration: none;
}

/* What the page says back to somebody who has just signed up. */
.custom-footer__result.custom-footer__result {
	margin: 12px 0 0;
	padding: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
}