/*
 * RahkarTheme — global footer.
 *
 * Loaded on every page (priority 40, theme.yml). The footer is below the fold
 * on first paint, so this file never blocks LCP.
 *
 * Markup: templates/_partials/footer.tpl (plain, hardcoded HTML).
 * The <footer id="footer"> sits OUTSIDE #wrapper > .container, so the footer
 * owns its own centered container (.rahkar-footer__inner) — without it the
 * content runs edge-to-edge and the RTL text gets clipped at the viewport edge.
 *
 * Layout:
 *   • .rahkar-footer__inner  centered, max-width = site wide-size, side padding.
 *   • .rahkar-footer__cols   4 equal columns ≥900px; single-column accordions
 *                            below (each <details> is tap-to-open on mobile and
 *                            forced-open + static on desktop via footer.js + CSS).
 *   • .rahkar-footer__brand  brand title + short description.
 *   • .rahkar-footer__bottom copyright row, divider above.
 *
 * RTL-first: logical properties throughout (no *_rtl.css twin).
 */

/* ── tokens (scoped so they can't leak) ───────────────────────────────────── */
.rahkar-site-footer {
	--rf-fg:       var(--wp--preset--color--text, #1a1d23);
	--rf-muted:    var(--wp--preset--color--text-muted, #5b6271);
	--rf-bg:       var(--wp--preset--color--surface, #f7f7f8);
	--rf-border:   var(--wp--preset--color--border, #e2e4e9);
	--rf-primary:  var(--wp--preset--color--primary, #0a66c2);
	--rf-gap:      clamp(20px, 3vw, 40px);

	background: var(--rf-bg);
	border-top: 1px solid var(--rf-border);
	color: var(--rf-fg);
}

/* Centered content column — mirrors the site's wide-size + comfortable side
   padding so nothing touches the viewport edge. */
.rahkar-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-block: clamp(28px, 4vw, 48px);
	padding-inline: clamp(16px, 4vw, 32px);
}

/* ── columns row ──────────────────────────────────────────────────────────── */
.rahkar-footer__cols {
	display: grid;
	grid-template-columns: 1fr;   /* mobile: stacked accordions */
	gap: 0;
}
@media (min-width: 900px) {
	.rahkar-footer__cols {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--rf-gap);
	}
}
.rahkar-footer__col { min-width: 0; }

/* ── accordion (native <details>/<summary>) ───────────────────────────────────
   Mobile: collapsed, tappable summary + chevron. Each row is bordered so the
   stack reads as a clean list. Desktop: footer.js sets [open]; the rules in the
   ≥900px block make the summary inert and hide the chevron → static column. */
.rahkar-footer__acc {
	border-bottom: 1px solid var(--rf-border);
}
.rahkar-footer__acc:first-of-type {
	border-top: 1px solid var(--rf-border);
}
.rahkar-footer__acc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	cursor: pointer;
	user-select: none;
	list-style: none;                                   /* Firefox marker */
}
.rahkar-footer__acc-summary::-webkit-details-marker { display: none; }  /* Chrome/Safari */

.rahkar-footer__title {
	margin: 0;
	font-size: 1rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1.4;
	color: var(--rf-fg);
}
.rahkar-footer__chev {
	flex-shrink: 0;
	color: var(--rf-muted);
	transition: transform .2s ease;
}
.rahkar-footer__acc[open] > .rahkar-footer__acc-summary .rahkar-footer__chev {
	transform: rotate(180deg);
}
/* expanded content spacing (mobile) */
.rahkar-footer__acc[open] > *:not(.rahkar-footer__acc-summary) {
	padding-bottom: 16px;
}

@media (min-width: 900px) {
	.rahkar-footer__acc,
	.rahkar-footer__acc:first-of-type { border: 0; }
	.rahkar-footer__acc-summary {
		padding: 0 0 12px;
		cursor: default;
		pointer-events: none;
	}
	.rahkar-footer__chev { display: none; }
	.rahkar-footer__acc[open] > *:not(.rahkar-footer__acc-summary) { padding-bottom: 0; }
}

/* ── link lists ───────────────────────────────────────────────────────────── */
.rahkar-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rahkar-footer__list li { line-height: 1.4; }
.rahkar-footer__list li + li { margin-top: 10px; }
.rahkar-footer__list a {
	color: var(--rf-muted);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color .15s ease;
}
.rahkar-footer__list a:hover,
.rahkar-footer__list a:focus-visible { color: var(--rf-primary); }

/* ── contact rows ─────────────────────────────────────────────────────────── */
.rahkar-footer__contact {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.rahkar-footer__contact li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--rf-muted);
}
.rahkar-footer__contact li + li { margin-top: 10px; }
.rahkar-footer__contact a { color: var(--rf-muted); text-decoration: none; }
.rahkar-footer__contact a:hover,
.rahkar-footer__contact a:focus-visible { color: var(--rf-primary); }
.rahkar-footer__icon { flex-shrink: 0; color: var(--rf-primary); }

/* ── social row ───────────────────────────────────────────────────────────── */
.rahkar-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rahkar-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--rf-border);
	border-radius: var(--wp--custom--radius--md, 8px);
	color: var(--rf-muted);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.rahkar-footer__social a:hover,
.rahkar-footer__social a:focus-visible {
	color: var(--rf-primary);
	border-color: var(--rf-primary);
	background: color-mix(in srgb, var(--rf-primary) 6%, transparent);
}

/* ── brand blurb ──────────────────────────────────────────────────────────── */
.rahkar-footer__brand {
	margin-top: var(--rf-gap);
	padding-top: var(--rf-gap);
	border-top: 1px solid var(--rf-border);
}
.rahkar-footer__brand-title {
	font-weight: var(--rh-fw-strong);
	line-height: 1.4;
	color: var(--rf-fg);
	margin-bottom: 8px;
}
.rahkar-footer__desc {
	margin: 0;
	max-width: 70ch;
	color: var(--rf-muted);
	font-size: 0.9rem;
	line-height: 1.85;
}

/* ── bottom bar ───────────────────────────────────────────────────────────── */
.rahkar-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 16px;
	margin-top: var(--rf-gap);
	padding-top: 16px;
	border-top: 1px solid var(--rf-border);
}
.rahkar-footer__copy,
.rahkar-footer__credit {
	margin: 0;
	font-size: 0.8rem;
	color: var(--rf-muted);
}