/*
 * DuSunnah - site footer
 * ---------------------------------------------------------------------------
 * Scoped entirely under .dus-footer, loaded on every template.
 *
 * The type scale and column geometry below are MEASURED from the approved
 * reference (1806px wide), then mapped to this site's 1184px content measure
 * (factor ~0.80):
 *
 *   identity name      29px bbox  -> 24px
 *   place label        14px cap   -> 13px
 *   description        18px       -> 15px
 *   column heading     11px cap   -> 12px
 *   navigation link    19px       -> 15px   (was 13px: the "too small" note)
 *   link baseline pitch 33.5px    -> 27px   (was 33px - bigger type, tighter leading)
 *   heading -> 1st link 29px      -> 23px + the requested 4-6px = 27px
 *   social glyph       29px       -> 23px
 *   divider            #cab5a9 hairline -> a warm low-contrast rule
 *
 * Column x-positions in the reference (261 / 641 / 883 / 1147 / 1390 of a 1446
 * content width) give the track ratios 1.5 : 1 : 1.05 : 1 : 1.3.
 *
 * Mobile-first: base rules are the phone layout; min-width queries widen it.
 */

.dus-footer {
	--ft-ink:        #111111;
	--ft-ink-soft:   #4a4441;   /* warm body, as the reference */
	--ft-muted:      #7a7168;   /* warm metadata; 4.55:1 on the paper, clears AA */
	--ft-rule:       #e2d8cf;   /* warm low-contrast hairline */
	--ft-paper:      #fcf9f3;   /* sampled from the panorama's sky, so its top edge cannot show */
	--ft-accent:     #a8501a;
	--ft-accent-deep:#96461a;
	--ft-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;

	position: relative;
	overflow: hidden;
	background: var(--ft-paper);
	color: var(--ft-ink);
	font-family: var(--ft-sans);
	-webkit-font-smoothing: antialiased;
}

.dus-footer *,
.dus-footer *::before,
.dus-footer *::after { box-sizing: border-box; }

.dus-footer__inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	padding: 52px 20px 0;
}

/* ------------------------------------------------------------- layout */

.dus-footer__top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
}

.dus-footer__identity,
.dus-footer__connect { grid-column: 1 / -1; }

/* Support holds a single link until its pages exist; it sits with the rest. */
.dus-footer__group--support { grid-column: 1 / -1; }

/* ------------------------------------------------------------- identity */

.dus-footer__lockup { display: inline-block; color: inherit; text-decoration: none; }

.dus-footer__name {
	display: block;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ft-ink);
}

.dus-footer__place {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ft-muted);
}

.dus-footer__tagline {
	margin: 20px 0 0;
	max-width: 30ch;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ft-ink-soft);
}

/* compact next-prayer line; rendered only with a real timetable */
.dus-footer__prayer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 20px 0 0;
}
.dus-footer__prayer-label {
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ft-muted);
}
.dus-footer__prayer-value { font-size: 15px; font-weight: 700; color: var(--ft-ink); }
.dus-footer__prayer-time { color: var(--ft-accent-deep); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ------------------------------------------------------------- navigation */

.dus-footer__label {
	margin: 0 0 24px;           /* reference 23px + the requested 4-6px */
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ft-accent-deep);
}

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

.dus-footer__list a {
	display: block;
	padding: 3px 0;             /* 15px * 1.5 + 6 = 28.5px pitch */
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ft-ink-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.dus-footer__list a:hover,
.dus-footer__list a:focus-visible { color: var(--ft-accent); }

/* ------------------------------------------------------------- stay connected */

.dus-footer__connect-text {
	margin: 0 0 18px;
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ft-ink-soft);
}

.dus-footer__subscribe {
	display: flex;
	align-items: stretch;
	max-width: 340px;
	border: 1px solid var(--ft-rule);
	background: #fff;
	border-radius: 2px;         /* the reference's square field, not a pill */
	overflow: hidden;
}

.dus-footer__subscribe input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;            /* +4px of usable field width */
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--ft-ink);
}
.dus-footer__subscribe input::placeholder { color: var(--ft-muted); opacity: 1; }
.dus-footer__subscribe input:focus { outline: none; }
.dus-footer__subscribe:focus-within { border-color: var(--ft-accent); }

.dus-footer__subscribe button {
	flex: 0 0 auto;
	width: 44px;                /* 4px back to the field, without moving columns */
	border: 0;
	background: var(--ft-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.dus-footer__subscribe button:hover { background: var(--ft-accent-deep); }
.dus-footer__subscribe button svg { width: 18px; height: 18px; display: block; }

/* bare glyphs - no circle, card or container of any kind */
.dus-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.dus-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;                /* the touch target is the box, not a shape */
	height: 40px;
	margin-left: -9px;          /* optically align the first glyph to the text */
	color: var(--ft-muted);     /* subordinate to the newsletter field above */
	text-decoration: none;
	transition: color .15s ease;
}
.dus-footer__social li:not(:first-child) a { margin-left: 0; }
.dus-footer__social a:hover,
.dus-footer__social a:focus-visible { color: var(--ft-accent); }
.dus-footer__social svg { width: 20px; height: 20px; display: block; }

/* ------------------------------------------------------------- utility row */

.dus-footer__utility {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--ft-rule);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dus-footer__utility-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* deliberately quieter than the copyright beside it */
.dus-footer__utility-nav a {
	display: block;
	padding: 4px 0;
	font-size: 13px;
	color: var(--ft-muted);
	text-decoration: none;
	transition: color .15s ease;
}
.dus-footer__utility-nav a:hover,
.dus-footer__utility-nav a:focus-visible { color: var(--ft-accent); }

.dus-footer__copyright {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ft-ink-soft);
}
.dus-footer__charity { display: block; color: var(--ft-muted); }

/* visible keyboard focus everywhere in the footer */
.dus-footer a:focus-visible,
.dus-footer button:focus-visible,
.dus-footer input:focus-visible {
	outline: 2px solid var(--ft-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- landscape */

/*
 * The approved artwork, unchanged. The scene is a cropping window: the image is
 * anchored to its bottom edge so the empty sky above overflows and is clipped.
 * The asset itself is untouched - the crop is presentational.
 */
/*
 * The supplied panorama is 1971x798 (height = 40.49% of width). Measured:
 *   - its ground samples #fcf9f3, identical to --ft-paper, so its top edge is
 *     invisible against the footer and needs no rule, spacer or margin;
 *   - the first ink anywhere (the tall flanking palms) is at row 163 = 20.42%;
 *   - the centre sky gives way to mountains at row 396 = 49.62%;
 *   - the Kaaba sits at 50.4% across, i.e. already horizontally centred.
 *
 * There is deliberately NO margin above the scene. The image carries its own
 * breathing room in that empty upper fifth, which is what now sits behind the
 * lower footer content instead of a blank gap.
 */
.dus-footer__scene {
	position: relative;
	overflow: hidden;
	z-index: 0;
	margin-top: 0;
	pointer-events: none;
	line-height: 0;
	height: 220px;              /* narrow screens: a much shallower band */
}

/*
 * Narrow screens crop twice: horizontally to the centre (which keeps the Kaaba
 * central, since it already sits at 50.4%), and vertically from row 396, so the
 * band opens on the mountains and the city rather than on empty sky.
 */
.dus-footer__landscape {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: 357px;              /* sized so ~40px of the image's own pale sky
	                               sits above the mountains (row 396) inside the
	                               220px band - breathing room from the artwork,
	                               not from an inserted white spacer */
	max-width: none;
}

/* =========================================================== 576px+ */
@media (min-width: 576px) {
	/* a deeper band, same crop, same ~40px of sky above the mountains */
	.dus-footer__scene { height: 260px; }
	.dus-footer__landscape { height: 437px; }
}

/* =========================================================== 768px+ */
@media (min-width: 768px) {
	/*
	 * LONGHAND deliberately. The padding-bottom below reserves the artwork's
	 * inked height; a `padding` shorthand in a later block would silently reset
	 * it to 0 and drop the whole panorama behind the text.
	 */
	.dus-footer__inner { padding-top: 68px; padding-left: 32px; padding-right: 32px; }

	/* identity across the top, then the three link clusters, then connect */
	.dus-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 44px 32px;
	}
	.dus-footer__identity { grid-column: 1 / -1; }
	.dus-footer__group--support { grid-column: auto; }
	.dus-footer__connect { grid-column: 1 / -1; }

	.dus-footer__utility {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 24px;
		margin-top: 52px;
	}

	/*
	 * The utility links hold one line and never wrap: a dropped "Sitemap" lands
	 * in the artwork band below. The copyright takes the remaining width and
	 * wraps there instead, where there is room for it.
	 */
	.dus-footer__utility-nav { flex: 0 0 auto; }
	.dus-footer__utility-nav ul { flex-wrap: nowrap; white-space: nowrap; }
	.dus-footer__copyright { flex: 1 1 auto; text-align: right; }
	.dus-footer__charity { display: inline; }
	.dus-footer__charity::before { content: "\00a0\00b7\00a0"; }

	/*
	 * Wide enough for the whole panorama, shown complete and undistorted.
	 *
	 * The scene becomes a BACKDROP pinned to the footer's bottom edge at full
	 * width, so the artwork keeps its own aspect ratio (40.49% of width) and the
	 * Kaaba stays centred at 50.4%.
	 *
	 * The content then reserves only the INKED height beneath itself:
	 *   0.7958 (rows 163-798) x 40.49vw = 32.22vw
	 * so the flanking palms begin exactly at the content's bottom edge, while the
	 * empty upper fifth of the image (8.27vw) falls behind the lower content and
	 * reads as ordinary footer background. Content -> pale sky -> mountains ->
	 * city is therefore continuous, with no spacer, margin or boundary anywhere.
	 */
	.dus-footer__scene {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
		margin-top: 0;
	}
	.dus-footer__landscape {
		position: static;
		width: 100%;
		height: auto;
		left: auto;
		transform: none;
	}
	/*
	 * 32.22vw = exactly the artwork's inked height, so the palms begin precisely
	 * at the content's bottom edge and NOTHING overlaps.
	 *
	 * Between 768 and 1099 this must stay exact: the copyright line needs ~560px
	 * at 13px, more than this row can give it, so it wraps to two lines and the
	 * second line would sit inside any overlap. The tightened value is applied
	 * only from 1100 up, where the copyright fits on one line.
	 */
	.dus-footer__inner { padding-bottom: 32.22vw; }

	/* desktop reads a step larger; leading and heading gaps are unchanged */
	/* 16px matches the homepage body scale (.dus-ex) */
	.dus-footer__list a { font-size: 16px; }
}

/* =========================================================== 1100px+ */
@media (min-width: 1100px) {
	/* longhand, so the reserved padding-bottom from the 768 block survives */
	.dus-footer__inner { padding-top: 94px; padding-left: 48px; padding-right: 48px; }

	/*
	 * +5px between each heading and its first link, desktop only, so the narrow
	 * layout keeps its tighter rhythm.
	 */
	.dus-footer__label { margin-bottom: 29px; }

	/*
	 * Desktop only: trim 3.02vw (43px at 1440) off the reservation so the
	 * bottom-anchored artwork slides up by the same amount, closing the pale gap
	 * between the legal row and the mountains WITHOUT scaling the image. Safe
	 * here because the copyright sits on one line, leaving that band empty; the
	 * only ink rising into it is the palm tips at x<8% and x>92%, clear of the
	 * utility links (x 128) and the copyright (ending x 1312).
	 */
	.dus-footer__inner { padding-bottom: 29.2vw; }

	/*
	 * The reference's five areas. The track ratios start from the measured
	 * reference (1.5 : 1 : 1.05 : 1 : 1.3) but give Stay Connected more room:
	 * at that original split its track computed to ~235px, which clipped the
	 * "Enter your email address" placeholder once the 48px button was
	 * subtracted. The navigation columns can spare it - their longest label,
	 * "Weekly classes", needs ~105px against a 174px track.
	 */
	.dus-footer__top {
		grid-template-columns:
			minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1.65fr);
		gap: 0 28px;
	}
	.dus-footer__identity,
	.dus-footer__connect,
	.dus-footer__group--support { grid-column: auto; }

	/*
	 * The utility row sits 10px lower. This does NOT open up the gap below it:
	 * the artwork is anchored to the footer's bottom and the reservation is
	 * unchanged, so a taller content block pushes the artwork down with it and
	 * the legal-to-landscape relationship stays exactly as approved.
	 */
	.dus-footer__utility { margin-top: 66px; padding-top: 26px; }
}

/* ============================== 1100-1439px: artwork clearance only */
/*
 * The artwork is full bleed while the content is capped at 1280px and centred,
 * so the two converge as the viewport narrows. Measured from the source image,
 * the left palm's inner edge sits at 8.4% of image width in the rows the 43px
 * rise lifts into the utility band:
 *
 *     palm reaches   0.084 x W
 *     links start    48px  (below 1280)  /  (W-1280)/2 + 48  (from 1280 up)
 *
 * Those only clear each other from about 1423px, which is why 1440 escapes by
 * ~7px and everything below it collides - "About us" sits under the fronds.
 *
 * The fix restores the exact inked-height reservation and adds the required
 * 24px, pushing the artwork DOWN by that much inside this range only. Scale,
 * aspect ratio, crop and the centred Kaaba are untouched - vertical position is
 * the only thing that changes. 1440 and above keep the approved composition
 * with the 43px rise intact, and the narrow layout is not affected.
 */
@media (min-width: 1100px) and (max-width: 1439px) {
	.dus-footer__inner { padding-bottom: calc(32.22vw + 24px); }
}

/* ============================== 1440px+: optical lift of the landscape */
/*
 * Brings the artwork up 22px so the detailed landscape sits closer to the legal
 * row: the mountains move from ~127px below the legal text to ~105px, trimming
 * the pale sky without touching scale, crop, aspect ratio or the centred Kaaba.
 *
 * Deliberately scoped to 1440 and up. Below that the palm crosses the utility
 * links horizontally (8.4% of image width against links starting at 48px), so
 * the 24px vertical clearance in the range above is the only thing keeping them
 * apart - lifting the artwork there would reinstate the collision.
 *
 * At 1440 this shifts the rows entering the legal band from ~195-222 to
 * ~225-253, where the palm reaches 121px against links at 128px: still clear,
 * with a tighter but sufficient margin. The gap widens quickly above 1440
 * (74px at 1600, 207px at 1920) as the content cap pushes the links inward.
 */
@media (min-width: 1440px) {
	.dus-footer__inner { padding-bottom: calc(29.2vw - 22px); }
}

/* =========================================================== motion */
@media (prefers-reduced-motion: reduce) {
	.dus-footer * { transition: none !important; }
}