/**
 * Q8tly — Footer styles  (Module 7 F1 — D-127; spec §3/§4/§5 + §14.1)
 *
 * Scope: keyed to .q8tly-footer and its children. The footer is sitewide
 * (location=footer template), so unlike the per-page module sheets this one
 * paints on every template — by design (it replaces legacy template 940).
 *
 * Tone (§3.2): two zones, no top border (M7-01). The upper band is
 * --paper-dark — a deliberate light break between the M6 §11 ink For-Business
 * band above and the --ink legal rail below; that paper-dark/ink sandwich is
 * the first-eyeball tone gate (D-127 ruling 1). The ink-upper-band fallback,
 * if it ever fires, is NOT a one-token swap — it erases the band/rail boundary
 * and needs its own boundary-treatment decision (Advisor rider, §2.2 Q3); the
 * band background is therefore set directly on .footer-upper, not behind a
 * single flip-token.
 *
 * RTL (§9): logical properties throughout so the AR unfence stays CSS-cheap;
 * the column-order + arrow flips ride [dir="rtl"] at unfence, not here.
 * Component tokens are --ekg-footer-* (the C3 --ekg-forbiz-kicker-ink
 * precedent — never new globals).
 *
 * Breakpoints (§8): single-column stack < 760px; legal rail stacks < 480px.
 */

/* ------------------------------------------------------------------ *
 * 1. §14.1 component tokens
 * ------------------------------------------------------------------ */

:root {
	/* Rust-deep — submit button + terminal-link hover (v2.1's --rust-deep).
	   Value confirmable at the F4/F5 eyeball; #8f3a23 is the rust-family deep
	   already used by --ekg-tag-cuisine-ink / --ekg-other-loc-hub-ink. */
	--ekg-footer-accent-deep: var(--accent); /* reskin: rust-deep → brand coral */

	/* Active language toggle (§5.2) + masthead hover when M9 lights it (§5.1).
	   No global peach token exists in the shipped palette (v3 reconciliation). */
	--ekg-footer-toggle-active: var(--accent); /* reskin: peach → brand coral */

	/* Legal-rail on-ink palette (§5.1/§5.2 — v2.1's literal hexes, token-named) */
	--ekg-footer-rail-copy:          rgba(255, 255, 255, 0.55); /* reskin: © text, white@55% on the --ink navy rail */
	--ekg-footer-rail-sep:           rgba(255, 255, 255, 0.30); /* · separator, fainter */
	--ekg-footer-rail-link:          rgba(255, 255, 255, 0.72); /* Privacy / Terms / Cookies (F5) */
	--ekg-footer-rail-toggle-border: rgba(255, 255, 255, 0.24); /* language toggle pill border (F5) */

	/* Vertical rhythm (§3.4) — mobile overrides live in the media queries. */
	--ekg-footer-upper-pad-start: 72px;
	--ekg-footer-upper-pad-end:   56px;
	--ekg-footer-rail-pad-block:  18px;
}

/* ------------------------------------------------------------------ *
 * 2. Zones — full-bleed bands, 1240 contained inner (§3.3/§3.5)
 * ------------------------------------------------------------------ */

.q8tly-footer {
	/* Base ink so any sliver below the rail reads footer, not page. */
	background: var(--ink);
	font-family: var(--font-body, 'Inter'), sans-serif;
}

/* Upper band — --paper-dark set directly (see header note: the ink fallback
   is deliberately not a one-token swap). No border-top (M7-01). */
.footer-upper {
	width: 100%;
	background: var(--paper-dark);
	padding-block: var(--ekg-footer-upper-pad-start) var(--ekg-footer-upper-pad-end);
}

.footer-upper__container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 28px;
	display: grid;
	grid-template-columns: 1.1fr 1.6fr 1.3fr; /* §3.3 — Brand / Wayfinding / Stay */
	column-gap: 72px;
}

/* Legal rail — --ink (§5). */
.footer-legal {
	width: 100%;
	background: var(--ink);
}

.footer-legal__container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 28px;
	padding-block: var(--ekg-footer-rail-pad-block);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

/* ------------------------------------------------------------------ *
 * 3. Column 1 — Brand (§4.1)
 * ------------------------------------------------------------------ */

.f-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* Wordmark — Fraunces 32px/500, the single biggest type element (§4.1).
   Matches the M5 logo treatment (.q8tly-header__logo) at larger scale. */
.f-brand-wordmark {
	/* 2026-08-13: the font-size:0 image-replacement is GONE from this surface.
	   It hid real text to show a background image, which is exactly the
	   technique whose accessible-name exposure varies by AT — the logged-out QA
	   pass reported the brand announcing as "Qtly", the 8 dropped. A real <img>
	   with alt="Q8tly" carries the name in the accessibility tree outright, so
	   there is no zero-size text left to be skipped by anything.
	   Brand mark — does NOT mirror in RTL (the .f-brand column is
	   align-items:flex-start, so it rides to the correct edge). */
	margin: 0;
	line-height: 0;
}

/* Two classes deliberately: Elementor ships `.elementor img { height:auto }`
   at specificity (0,1,1), and the footer renders inside an Elementor container,
   so a bare `.f-brand-lockup` (0,1,0) LOSES and the mark falls back to
   width-constrained auto height — it rendered 286x95 instead of 145x48.
   (0,2,0) wins it back without needing !important. */
.f-brand-wordmark .f-brand-lockup {
	display: block;
	height: 48px;
	width: auto;   /* vector: viewBox 881x292 sets the intrinsic ratio */
}

/* Tagline — Fraunces 16px/400, max-inline-size forces a 2-line wrap (§4.1). */
.f-brand-tagline {
	margin: 0;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink-soft);
	max-inline-size: 280px;
}

/* Social row — circular 38px targets, 1px --rule border on --paper (§4.1).
   Empty at ship (ruling 6): a marker comment renders, so .f-social is absent. */
.f-social {
	display: flex;
	flex-direction: row;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	transition: color 160ms ease, border-color 160ms ease;
}

.f-social__link:hover,
.f-social__link:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
}

.f-social__glyph {
	display: block;
}

/* ------------------------------------------------------------------ *
 * 4. Column 2 — Wayfinding (§4.2): browse-by-category + browse-by-area.
 *    Two sub-groups side-by-side in the 1.6fr center column, 48px gap;
 *    section labels are <h2> (§10.1 heading-nav), styled as small mono text.
 * ------------------------------------------------------------------ */

.f-wayfinding {
	display: flex;
	gap: 48px; /* §4.2 — between the two sub-groups */
}

.f-wayfinding__categories,
.f-wayfinding__areas {
	flex: 1 1 0;
	min-inline-size: 0; /* let long labels wrap, never overflow the column */
}

/* Section label — JetBrains Mono 10px --accent uppercase 0.12em, with a
   --rule-soft rule beneath (§4.2.1/§4.2.2). <h2>, so reset the UA heading. */
.f-section-label {
	margin: 0 0 14px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--rule-soft);
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Category list — flat high-intent quick-links (revised 2026-06-30). Was pillar
   groups with sub-cats stacked inside; the grouped headers became bare non-link
   titles on mobile (subs hidden) — broken UX. Now real category links, styled
   like the area list (Fraunces 15.5px/500 --ink), so the two wayfinding columns
   match and render identically on mobile + desktop. */
.f-cat-list {
	display: flex;
	flex-direction: column;
	gap: 9px; /* §4.2.1 line spacing (matches .f-area-list) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.f-cat-link {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
	transition: color 160ms ease;
}

/* Area list — governorate hub LINKS, Fraunces 15.5px/500 --ink (the asymmetry
   against the non-link category pillars: these are real hub pages). */
.f-area-list {
	display: flex;
	flex-direction: column;
	gap: 9px; /* §4.2.2 line spacing */
	margin: 0;
	padding: 0;
	list-style: none;
}

.f-area-link {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
	transition: color 160ms ease;
}

/* Footer nav hover = the rust highlight (categories + governorates). */
.f-cat-link:hover,
.f-cat-link:focus-visible,
.f-area-link:hover,
.f-area-link:focus-visible {
	color: var(--accent);
}

/* Terminal "All categories →" / "All districts →" — JetBrains Mono --accent,
   hover --ekg-footer-accent-deep. The arrow is CSS decoration (::after); its
   RTL flip rides the unfence (§9), not this build. */
.f-terminal-link {
	display: inline-block;
	margin-block-start: 16px;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--accent);
	text-decoration: none;
	transition: color 160ms ease;
}

.f-terminal-link::after {
	content: '\00A0\2192'; /* nbsp + → */
}

.f-terminal-link:hover,
.f-terminal-link:focus-visible {
	color: var(--ekg-footer-accent-deep);
}

/* ------------------------------------------------------------------ *
 * 4b. Column 3 — Stay in touch (§4.3). Three stacked elements per spec; F3
 *     ships the link stack. The newsletter (F4, ships dark) + the --rule-soft
 *     divider that separates it from the stack (F4, with the component it
 *     divides — no rule over an empty slot) land later. Link stack = Inter
 *     13.5px --ink-soft, 8px gap, a terminal ::after arrow per link.
 * ------------------------------------------------------------------ */

.f-stay {
	display: flex;
	flex-direction: column;
}

.f-stay-links {
	display: flex;
	flex-direction: column;
	gap: 8px; /* §4.3 */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Stay link — muted text link, deliberately not a bold CTA (§4.3: the
   commercial pitch lives in the M6 §11 strip + the M5 Services mega card). */
.f-stay-link {
	font-family: var(--font-body, 'Inter'), sans-serif;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--ink-soft);
	text-decoration: none;
	transition: color 160ms ease;
}

/* Terminal arrow — CSS decoration (the F2 .f-terminal-link::after precedent);
   the → -> ← flip rides the AR unfence (§9), not this build. */
.f-stay-link::after {
	content: '\00A0\2192'; /* nbsp + → */
}

.f-stay-link:hover,
.f-stay-link:focus-visible {
	color: var(--accent);
}

/* ------------------------------------------------------------------ *
 * 4c. §6 Newsletter (F4) — built in full; the markup ships only behind the
 *     §6.1 dual gate, so these rules are inert until the form renders. The
 *     newsletter sits ABOVE the link stack in .f-stay, separated by the §4.3
 *     --rule-soft divider. The form is the one place --accent is a FILL.
 * ------------------------------------------------------------------ */

/* §6.8 deep-link anchor — clear the M5 sticky header (72px) + buffer. */
.f-newsletter {
	scroll-margin-top: calc(72px + 48px);
}

/* §6.2 head — Fraunces 20px/500 --ink (sits under the shared mono section
   label, which carries its own --rule-soft border + 14px bottom margin). */
.f-stay-head {
	margin: 0;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
}

/* §6.2 deck — Inter 13.5px --ink-soft (the "no noise" differentiator line). */
.f-stay-deck {
	margin: 8px 0 0;
	font-family: var(--font-body, 'Inter'), sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* §6.1/§6.3 form — email input + rust-fill button inline. No rounded corners
   (§6.3, the form is a rectangle); position: relative anchors the honeypot. */
.f-form {
	display: flex;
	position: relative;
	margin-block-start: 14px;
}

/* §6.3 input — 12px vertical padding, 1px --rule border, --paper bg (contrast
   against the --paper-dark column), flush to the button; border -> --ink on
   focus. Mono placeholder signals "field," not editorial copy. */
.f-form__email {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-inline-end: 0;
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body, 'Inter'), sans-serif;
	font-size: 14px;
	line-height: 1.2;
}

.f-form__email::placeholder {
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 12px;
	color: var(--ink-faint);
	opacity: 1;
}

.f-form__email:focus {
	/* Sitewide focus convention paints the ring; this only deepens the border. */
	border-color: var(--ink);
}

/* §6.6 honeypot (ruling 8) — off-screen, never shown, never tabbed. Logical
   inset so the AR unfence needs no override. */
.f-form__hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

/* §6.3 SUBSCRIBE — solid rust fill + paper text: the single most prominent
   action in the footer (§1.1 job 3). Hover drops to --ekg-footer-accent-deep. */
.f-form__submit {
	flex: 0 0 auto;
	padding: 12px 18px;
	border: 1px solid var(--accent);
	border-radius: 0;
	background: var(--accent);
	color: var(--paper);
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.f-form__submit:hover,
.f-form__submit:focus-visible {
	background: var(--ekg-footer-accent-deep);
	border-color: var(--ekg-footer-accent-deep);
}

.f-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* §6.2 fine print — mono 10px --ink-faint; the privacy link underlines. */
.f-form-fine {
	margin: 10px 0 0;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 10px;
	line-height: 1.5;
	color: var(--ink-faint);
}

.f-form-fine__link {
	color: var(--ink-faint);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 160ms ease;
}

.f-form-fine__link:hover,
.f-form-fine__link:focus-visible {
	color: var(--ink-soft);
}

/* §6.5 inline validation / network error — mono rust, below the form. */
.f-form__error {
	margin: 8px 0 0;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	line-height: 1.4;
	color: var(--accent);
}

/* §6.5 success / duplicate — Fraunces 16px --ink, replaces the form in place. */
.f-newsletter__success {
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
}

/* §4.3 divider — 1px --rule-soft between the newsletter and the link stack;
   rendered only when the form is. 22px above; the stack gets 22px below. */
.f-divider {
	block-size: 0;
	border-block-start: 1px solid var(--rule-soft);
	margin-block-start: 22px;
}

.f-divider + .f-stay-links {
	margin-block-start: 22px;
}

/* ------------------------------------------------------------------ *
 * 5. Legal rail — left zone (§5.1) + right zone (§5.2, F5: legal links +
 *    language toggle). JetBrains Mono throughout (§5).
 * ------------------------------------------------------------------ */

.f-legal-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	line-height: 1;
}

.f-copyright {
	color: var(--ekg-footer-rail-copy);
}

.f-sep {
	color: var(--ekg-footer-rail-sep);
}

/* Masthead — crisp --paper (§5.1). Plain un-linked text at launch (ruling 4);
   when M9 blesses 'about' the renderer emits .f-masthead-link, which lights up
   the §5.1 voice move: a 1px dotted --ekg-footer-rail-sep underline warming to
   --ekg-footer-toggle-active on hover. */
.f-masthead-text,
.f-masthead-link {
	color: var(--paper);
}

.f-masthead-link {
	text-decoration: none;
	border-block-end: 1px dotted var(--ekg-footer-rail-sep);
	transition: color 160ms ease, border-color 160ms ease;
}

.f-masthead-link:hover,
.f-masthead-link:focus-visible {
	color: var(--ekg-footer-toggle-active);
	border-color: var(--ekg-footer-toggle-active);
}

/* §5 legal-entity disclosure — the corporate-provenance line (Meta business
   verification + Apple App Store review). flex-basis:100% drops it onto its own
   full-width row of the legal rail, below the © / toggle row (the container is
   flex-wrap:wrap; the 14px row-gap does the spacing). --font-body (NOT the mono
   rail family) so the AR twin routes to the Arabic face; muted --ekg-footer-rail-
   copy; logical text-align:start keeps it correct in both LTR + RTL. */
.f-legal-entity {
	flex-basis: 100%;
	margin: 0;
	font-family: var(--font-body, 'Inter'), sans-serif;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ekg-footer-rail-copy);
	text-align: start;
}

/* §5.2 right zone — Privacy / Terms / Cookies + the language toggle, 22px gap,
   mono (the legal-rail family). Wraps so the rail never overflows once M9 lights
   the legal links (ship state = the toggle pill alone). */
.f-legal-right {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	line-height: 1;
}

/* Privacy / Terms / Cookies — mono 11px --ekg-footer-rail-link, hover --paper
   (§5.2). §5.4-gated: absent until M9 blesses, so inert at ship. */
.f-legal-link {
	color: var(--ekg-footer-rail-link);
	text-decoration: none;
	transition: color 160ms ease;
}

.f-legal-link:hover,
.f-legal-link:focus-visible {
	color: var(--paper);
}

/* §5.2 language toggle — a bordered pill: reads as an action, not a legal link
   (§5.3). 1px border, 2px radius, 4px 10px pad; active label = the warm peach
   --ekg-footer-toggle-active, inactive = --ekg-footer-rail-link. */
.f-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--ekg-footer-rail-toggle-border);
	border-radius: 2px;
	background: transparent;
	font-family: var(--font-mono, 'JetBrains Mono'), monospace;
	font-size: 11px;
	line-height: 1;
	color: var(--ekg-footer-rail-link);
	cursor: pointer;
	transition: border-color 160ms ease;
}

.f-lang-toggle:hover,
.f-lang-toggle:focus-visible {
	border-color: var(--ekg-footer-toggle-active);
}

.f-lang-toggle__label {
	color: var(--ekg-footer-rail-link); /* inactive */
	transition: color 160ms ease;
}

.f-lang-toggle__label.is-current {
	color: var(--ekg-footer-toggle-active); /* active = current URL language */
}

.f-lang-toggle__sep {
	color: var(--ekg-footer-rail-sep);
}

/* ------------------------------------------------------------------ *
 * 6. Responsive (§8)
 * ------------------------------------------------------------------ */

/* Single-column stack < 760px (§8). The columns restack in a reordered
   sequence (§8.1): Brand -> Stay in touch -> Wayfinding — Stay is promoted
   above Wayfinding (engagement is highest at the top of the footer on a phone,
   so the newsletter must not sit below 15+ category links). Desktop source
   order stays brand -> wayfinding -> stay for the 1.1/1.6/1.3 grid; CSS `order`
   does the mobile flip (logical, AR-cheap — no [dir=rtl] block). */
@media (max-width: 759px) {
	.footer-upper {
		padding-block: 48px 36px; /* §8.4 */
	}

	.footer-upper__container {
		grid-template-columns: 1fr;
		row-gap: 40px; /* §8.4 vertical gap between stacked sections */
	}

	/* §8.1 reorder. */
	.f-brand { order: 1; }
	.f-stay  { order: 2; }

	/* Wayfinding sits last on mobile; its two sub-groups also stack
	   (§4.2/§8.4 40px rhythm between them). */
	.f-wayfinding {
		order: 3;
		flex-direction: column;
		gap: 40px;
	}

	/* §8.2: the old mobile sub-category hide is GONE — the category column is now
	   a flat link list (q8tly_footer_cat_slate), rendering identically on mobile +
	   desktop, so there are no dead non-link titles to hide. Areas stay at all 6
	   governorates (already a tight list). */
}

/* Legal rail stacks vertically < 480px (§8.3). */
@media (max-width: 479px) {
	.footer-legal__container {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* §8.4 — below 360px the newsletter form stacks: input full-width, button
   full-width below it, 10px gap. Above 360 the button keeps its inline position
   (right of the input). The input regains its inline-end border once stacked. */
@media (max-width: 360px) {
	.f-form {
		flex-direction: column;
		gap: 10px;
	}

	.f-form__email {
		border-inline-end: 1px solid var(--rule);
	}

	.f-form__submit {
		inline-size: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Reduced motion (§10.1) — disable hover transitions
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.f-social__link,
	.f-cat-link,
	.f-area-link,
	.f-terminal-link,
	.f-stay-link,
	.f-form__submit,
	.f-form-fine__link,
	.f-masthead-link,
	.f-legal-link,
	.f-lang-toggle,
	.f-lang-toggle__label {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Print (§11.7) — keep the navigation, drop the ink-heavy + the
 *    interactive bits (saves toner). The newsletter form/deck/fine
 *    print are inert while the form ships dark (F4), but ship the
 *    rules per spec so print stays correct once the newsletter lights up.
 * ------------------------------------------------------------------ */

@media print {
	.footer-legal {
		display: none; /* ink legal rail — toner */
	}

	.footer-upper {
		border-top: 2px solid #000; /* the band gains a printed top rule */
	}

	.f-form,
	.f-social {
		display: none; /* interactive form + decorative social glyphs */
	}

	.f-stay-deck,
	.f-form-fine {
		display: none; /* newsletter deck + fine print */
	}
}