/*
 * Murex Resorts — footer v4 (HOMEPAGE-SPEC §3.10)
 * Top strip: brand/primary band carrying the decorative fish-pattern overlay.
 * Mobile order: contact -> newsletter -> link groups -> legal.
 */

.c-footer {
	background-color: var(--color-surface-page);
	color: var(--color-text-primary);
}

/*
 * Decorative fish-pattern strip. 74px is the Figma frame's value and the asset's
 * intrinsic height (1440x74) — not a spacing-scale step, so it is a literal 74
 * rather than --space-3xl (64). The asset is a faint white pattern at low alpha,
 * so the band colour comes from brand/primary underneath it. repeat-x tiles
 * across the full-bleed footer at 1:1 (auto 74px); the pattern is never scaled.
 */
.c-footer::before {
	content: "";
	display: block;
	block-size: 74px;
	background-color: var(--color-surface-brand);
	background-image: url('../img/footer-rectangle-blue-patern.png');
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 74px;
}

.c-footer__body {
	padding-block: var(--section-rhythm) var(--space-lg);
}

/* Grid + column spacing (WordPress flow-layout margins are reset; spacing is owned here). */
.c-footer .c-footer__grid {
	row-gap: var(--space-2xl);
}

.c-footer .c-footer__grid > *,
.c-footer .c-footer__legal > * {
	margin-block: 0;
}

.c-footer__col > * + * {
	margin-block-start: var(--space-base);
}

.c-footer__col--contact {
	grid-column: 1 / -1;
}

.c-footer__col--newsletter {
	grid-column: 1 / -1;
	order: 2;
}

.c-footer__col--quick,
.c-footer__col--experiences {
	grid-column: 1 / -1;
	order: 3;
}

.c-footer__col--contact {
	order: 1;
}

.c-footer__logo,
.c-footer__logo img {
	margin: 0;
}

.c-footer__logo img {
	inline-size: 157px;
	max-inline-size: 100%;
	block-size: auto;
}

.c-footer__contact {
	margin: 0;
	overflow-wrap: anywhere;
}

.c-footer__contact a,
.c-footer__list a,
.c-footer__legal a {
	display: flex;
	align-items: center;
	min-block-size: var(--touch-target-min);
	color: var(--color-text-primary);
	text-decoration: none;
}

.c-footer__contact a:hover,
.c-footer__list a:hover,
.c-footer__legal a:hover {
	color: var(--color-text-link);
	text-decoration: underline;
	text-underline-offset: var(--space-xs);
}

.c-footer__title {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-brand);
}

.c-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--target-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Footer list spacing (Header & Footer options). Compact is the design default: the reference
 * crop's ~35px row pitch is approached as closely as the 12-step scale allows at 36.8px, so
 * Compact emits the data-list-density attribute. The no-attribute base is the wider Comfortable
 * fallback and needs no rule. Compact relaxes the link's 44px touch
 * minimum to the documented 24px floor (--space-lg), so the row pitch becomes the link line box
 * (~28.8px) plus the fixed 8px gap (--target-gap) instead of 44px + 8px. The gap is a fixed floor
 * and is never changed; the 24px floor keeps the hit area at or above the WCAG 2.5.8 24x24 minimum
 * (the rendered box is the taller line box). See the Design Deviations Log in docs/ai/AI-INSTRUCTIONS.md.
 */
[data-list-density="compact"] .c-footer__list a {
	min-block-size: var(--space-lg);
}

/* Social icons: brand blue glyphs on a 56px target, no filled chip. */
.c-footer .c-footer__social {
	gap: var(--target-gap);
	margin: 0;
}

.c-footer .c-footer__social .wp-social-link {
	background: none;
	color: var(--color-text-link);
}

.c-footer .c-footer__social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	padding: 0;
	color: var(--color-text-link);
}

.c-footer .c-footer__social .wp-social-link svg {
	inline-size: 28px;
	block-size: 28px;
}

/*
 * Legal row (REF/10-footer-v4.png). The crop's whole legal region is 73px: margin + 1px border +
 * 24px padding + a ~25px line, which leaves ~24px as the margin, so it is --space-lg, not
 * --space-2xl. The row's ink is 11px (the cap-height of body-sm 16px) and its region only fits a
 * natural line, so p and a drop the 44px --touch-target-min floor and render at the 24.8px
 * body-sm line box. The Privacy / Terms links therefore carry a ~24.8px hit box — above the WCAG
 * 2.5.8 24x24 minimum, below both the design system's 56px standard and AAA's 44px. A deliberate
 * design-matching reduction (the same class as the 28.8px link-list rows), recorded in the Design
 * Deviations Log in docs/ai/AI-INSTRUCTIONS.md; reversible by the owner.
 */
.c-footer__legal {
	margin-block-start: var(--space-lg);
	padding-block-start: var(--space-lg);
	border-block-start: 1px solid var(--color-border-subtle);
	column-gap: var(--space-sm);
	color: var(--color-text-secondary);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.c-footer__legal p {
	display: flex;
	align-items: center;
	margin: 0;
	min-block-size: auto;
}

.c-footer__legal a {
	min-block-size: auto;
}

.c-footer__legal p + p::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: var(--space-sm);
}

/* ---------------------------------------------------------------- Newsletter card */
.c-newsletter[data-mode] {
	padding: var(--space-lg);
	border-radius: var(--radius-base);
	background-color: var(--color-surface-brand);
	color: var(--color-text-primary);
}

.c-newsletter > * {
	margin-block: 0;
}

.c-newsletter > * + * {
	margin-block-start: var(--space-base);
}

/*
 * Card body-to-form gap (REF/10-footer-v4.png): the crop's card body ink ends at y316 and the white
 * form pill starts at y369 — ~48px box-to-box (--space-2xl). This is the card's only missing space;
 * every other internal gap stays --space-base. Only consumed by the newsletter card's form.
 */
.c-newsletter__body + .c-newsletter__form {
	margin-block-start: var(--space-2xl);
}

/*
 * Footer card offset (REF/10-footer-v4.png): the card starts 64px below the body's top, 32px
 * above the link columns, which sit at the body's 96px padding. The columns are unchanged, so
 * the offset is on the card itself — a relative 32px shift (--space-xl) moves the card without
 * reflowing the grid. Scoped to the footer; the newsletter card elsewhere is untouched.
 */
.c-footer .c-newsletter[data-mode] {
	position: relative;
	inset-block-start: calc(-1 * var(--space-xl));
}

/*
 * The newsletter heading is the h3 text style's MOBILE bound (22px) used at desktop, per
 * HOMEPAGE-SPEC §3.10: the footer v4 crop (REF/10-footer-v4.png) measures its card heading at
 * 22px with a 30px line pitch and 16px ink, so the fluid --fs-h3 (26px desktop) is not used here.
 * The class is only consumed by the newsletter heading (blocks/newsletter/render.php).
 */
.t-h3 {
	font-family: var(--font-roboto);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.c-newsletter__body {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.c-newsletter__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.c-newsletter__input {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--touch-target);
	padding: 0 var(--space-lg);
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-on-brand);
	/*
	 * The white field sits inside the [data-mode="inverse"] card, where --color-text-primary
	 * resolves to white (invisible) and --color-text-muted to neutral/200. Pin the neutral-800 /
	 * neutral-600 primitives so the typed text and placeholder keep their Default-mode values here.
	 */
	color: var(--color-neutral-800);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.c-newsletter__input::placeholder {
	color: var(--color-neutral-600);
	opacity: 1;
}

.c-newsletter__input[aria-invalid="true"] {
	border-color: var(--color-text-primary);
}

.c-newsletter__status[data-mode] {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-sm) 0 0;
	padding: var(--space-md) var(--space-base);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

/* Feedback is never colour alone: icon glyph + text. */
.c-newsletter__status.is-error {
	color: var(--color-feedback-error);
}

.c-newsletter__status.is-error::before {
	content: "!";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--space-lg);
	block-size: var(--space-lg);
	border: 2px solid currentColor;
	border-radius: var(--radius-full);
	font-weight: 700;
	line-height: 1;
}

@media (min-width: 480px) {
	.c-newsletter[data-mode] {
		padding: var(--space-xl);
	}

	/* Nested pill: the Subscribe button sits inside the field outline. */
	.c-newsletter__field {
		flex-direction: row;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-xs);
		border: 2px solid var(--color-border-strong);
		border-radius: var(--radius-full);
		background-color: var(--color-surface-on-brand);
	}

	.c-newsletter__input {
		flex: 1;
		border: 0;
		outline: 0;
	}

	/*
	 * The reference form pill is 56px tall (a full-width white band 369–424 in the crop). The
	 * wrapper contributes 4px padding + 2px border a side (12px total), so the inner controls are
	 * sized to the documented 44px minimum (--touch-target-min) to land the pill on 56.
	 */
	.c-newsletter__field .c-newsletter__input,
	.c-newsletter__field .c-button {
		min-block-size: var(--touch-target-min);
	}

	.c-newsletter__field:has(.c-newsletter__input:focus-visible) {
		outline: 2px solid var(--color-border-focus);
		outline-offset: 2px;
	}

	/*
	 * Only the Subscribe button's ring colour changes. At >=480 the button sits inside the white
	 * field pill, where the global :focus-visible ring (--color-border-focus, re-mapped to white
	 * by [data-mode="inverse"]) is white-on-white. --color-border-focus cannot be reused here for
	 * that reason; --color-surface-brand is the inverse block's unmapped brand/primary alias, so it
	 * stays #005CA2 inside this card (6.88:1 on white). Width and offset stay from the global rule.
	 * The wrapper's own ring above is deliberately left white: its 2px offset lands outside the white
	 * pill on the card's blue, where white is correct. Below 480 the button sits directly on the blue
	 * card, so this override is scoped to the breakpoint where the nested pill exists.
	 */
	.c-newsletter__field .c-button:focus-visible {
		outline-color: var(--color-surface-brand);
	}
}

/* ---------------------------------------------------------------- Breakpoints */
@media (min-width: 768px) {
	.c-footer__col--contact,
	.c-footer__col--newsletter {
		grid-column: span 6;
	}

	.c-footer__col--quick,
	.c-footer__col--experiences {
		grid-column: span 3;
	}
}

@media (min-width: 1024px) {
	.c-footer__col--contact,
	.c-footer__col--quick,
	.c-footer__col--experiences {
		grid-column: span 4;
		order: 0;
	}

	.c-footer__col--newsletter {
		grid-column: 1 / -1;
		order: 0;
	}
}

@media (min-width: 1280px) {
	.c-footer__col--contact,
	.c-footer__col--experiences {
		grid-column: span 3;
	}

	.c-footer__col--quick {
		grid-column: span 2;
	}

	.c-footer__col--newsletter {
		grid-column: span 4;
	}

	/*
	 * Footer v4 crop tracks (REF/10-footer-v4.png). The four measured ink positions 81 / 423 /
	 * 584 / 896 plus the card fill 896–1360 fix the tracks at 316 / 140 / 288 / 464 across the
	 * 1280px container with the existing 24px column gap (316+140+288+464 + 3x24 = 1280).
	 * Expressed as `minmax(0, Nfr)` so they resolve to exactly those pixels when the container
	 * reaches 1280 (viewport >= 1376) and scale down proportionally below it, without a new
	 * breakpoint. Columns auto-place into the four tracks, so the 12-column spans above are
	 * overridden only while the newsletter column is present; c-footer--no-newsletter keeps its
	 * 4+4+4 fill.
	 */
	.c-footer:not(.c-footer--no-newsletter) .c-footer__grid {
		grid-template-columns: minmax(0, 316fr) minmax(0, 140fr) minmax(0, 288fr) minmax(0, 464fr);
	}

	.c-footer:not(.c-footer--no-newsletter) .c-footer__col {
		grid-column: auto;
	}
}

/* Newsletter hidden: the three remaining columns fill the 12-column row (4+4+4), no gap. */
@media (min-width: 1280px) {
	.c-footer--no-newsletter .c-footer__col--contact,
	.c-footer--no-newsletter .c-footer__col--experiences,
	.c-footer--no-newsletter .c-footer__col--quick {
		grid-column: span 4;
	}
}