/* ==========================================================================
   IAEJ – site footer (all pages). Figma: "Group 45" + "footer" (logo).
   ========================================================================== */

:root {
	--c-cream: #f8f3eb;
	--c-cream-text: #f8f3e9;
	--c-pink: #ee3472;
}

/* Reset the old generic footer rules from main.css */
.site-footer {
	background: none;
	color: var(--c-cream-text);
	font-size: 20px;
	line-height: 35px;
}
/* :where() keeps these resets at zero weight so component rules below win. */
.site-footer :where(a) { color: inherit; text-decoration: none; }
.site-footer :where(a):hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:hover { color: inherit; } /* beats the yellow hover from main.css */
.site-footer :where(ul) { list-style: none; margin: 0; padding: 0; }

/* ---------- Main (navy) ---------- */

.site-footer__main {
	background: var(--c-navy);
	padding-block: 62px 36px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1fr) 378px;
	column-gap: 64px;
	align-items: start;
}

/* Brand: logo, address, donate */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand .custom-logo-link { display: block; margin-top: 3px; }
.site-footer__brand .custom-logo { display: block; width: 329px; max-width: 100%; height: auto; }
.site-footer__name { font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1.1; }

.site-footer__address {
	max-width: 292px;
	margin-top: 17px;
	font-style: normal;
}

.site-footer__donate {
	display: inline-block;
	margin-top: 32px;
	border-radius: 4px;
}
.site-footer__donate:hover { text-decoration: none; }
.site-footer__donate-shape {
	display: grid;
	place-items: center;
	width: 268px;
	height: 63px;
	background: var(--c-pink);
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	clip-path: polygon(29% 0, 87.5% 0, 100% 54%, 77% 100%, 9.5% 100%, 0 38%);
	transition: filter 0.15s ease;
}
.site-footer__donate:hover .site-footer__donate-shape { filter: brightness(1.08); }

/* Lists: quick nav + contact (35px line, 35px between items) */
.site-footer__list { display: flex; flex-direction: column; gap: 35px; }

/* Social */
.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 65px;
}
.site-footer__social-link {
	display: grid;
	place-items: center;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: var(--c-cream-text);
	color: var(--c-navy);
	transition: transform 0.15s ease;
}
.site-footer .site-footer__social-link:hover { color: var(--c-navy); transform: translateY(-2px); }
.site-footer__social-link .icon { width: 20px; height: 20px; }

/* ---------- Contact form ---------- */

.site-footer__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 30px;
	line-height: 35px;
	color: var(--c-white);
	margin-bottom: 14px;
}

.ft-form {
	display: grid;
	grid-template-columns: 179fr 189fr;
	gap: 14px 8px;
	font-size: 15px;
	line-height: 1.4;
}
.ft-form__field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ft-form__field--full { grid-column: 1 / -1; }

.ft-form input,
.ft-form textarea {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--c-cream);
	border-radius: 20px;
	background: transparent;
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: 15px;
	text-align: right;
}
.ft-form textarea {
	height: 122px;
	padding-block: 7px;
	line-height: 1.6;
	resize: vertical;
}
.ft-form input::placeholder,
.ft-form textarea::placeholder { color: var(--c-white); opacity: 1; }
.ft-form input:focus,
.ft-form textarea:focus { border-color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-white); outline: none; }
.ft-form input:focus-visible,
.ft-form textarea:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; box-shadow: none; }
.ft-form [aria-invalid="true"] { border-color: #ff9bbd; box-shadow: inset 0 0 0 1px #ff9bbd; }

.ft-form__error { font-size: 13px; line-height: 1.3; color: #ffb3cb; padding-inline: 14px; }
.ft-form__error:empty { display: none; }
.ft-form__error:not(:empty) { margin-top: 4px; }

.ft-form__trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ft-form__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: -8px;
}
.ft-form__notice { font-size: 14px; line-height: 1.4; }
.ft-form__notice.is-error { color: #ffb3cb; }
.ft-form__submit {
	margin-inline-start: auto;
	padding: 0 6px;
	border: 0;
	background: none;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 35px;
	cursor: pointer;
}
.ft-form__submit:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-form__submit:disabled { opacity: 0.6; cursor: progress; }

.ft-form__done {
	padding: 18px 20px;
	border: 1px solid var(--c-cream);
	border-radius: 20px;
	font-size: 18px;
	line-height: 1.5;
}

/* ---------- Bottom (cream) ---------- */

.site-footer__bottom {
	background: var(--c-cream);
	color: var(--c-navy);
	padding-block: 15px 7px;
	min-height: 112px;
}
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0 48px;
}
.site-footer__legal { font-size: 20px; line-height: 35px; }
.site-footer__meta { display: flex; flex-direction: column; align-items: flex-start; }

.site-footer__legal-menu { display: flex; flex-wrap: wrap; font-size: 20px; line-height: 35px; }
.site-footer__legal-menu li + li::before { content: "|"; padding-inline: 0.55em; }

/* Credit menu (design / development), items side by side. */
.site-footer__credit { font-size: 15px; line-height: 35px; }
.site-footer__credit-menu { display: flex; flex-wrap: wrap; gap: 0 1.2em; }

/* ---------- Responsive ---------- */

@media (min-width: 1200px) {
	/* The donate shape sticks out past the brand column, as in the design. */
	.site-footer__donate { margin-inline-start: -24px; }
}

@media (max-width: 1199px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px 48px;
	}
	.site-footer__nav,
	.site-footer__contact { padding-top: 8px; }
}

@media (max-width: 720px) {
	.site-footer { font-size: 18px; }
	.site-footer__main { padding-block: 48px 40px; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.site-footer__brand { align-items: center; text-align: center; }
	.site-footer__brand .custom-logo { width: 260px; }
	.site-footer__address { margin-inline: auto; }
	.site-footer__nav,
	.site-footer__contact { padding-top: 0; text-align: center; }
	.site-footer__list { gap: 14px; }
	.site-footer__social { justify-content: center; margin-top: 28px; }
	.ft-form { grid-template-columns: minmax(0, 1fr); }
	.ft-form input,
	.ft-form textarea { font-size: 16px; } /* no iOS zoom on focus */
	.site-footer__title { text-align: center; }

	.site-footer__bottom { padding-block: 20px; }
	.site-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
	.site-footer__legal { font-size: 16px; line-height: 1.6; }
	.site-footer__meta { align-items: center; }
	.site-footer__legal-menu { justify-content: center; font-size: 16px; }
	.site-footer__credit-menu { justify-content: center; }
}