/*
 * 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); }

/* Rows whose value wraps to two lines (working hours, address): the icon must
   sit on the FIRST line, not float in the vertical middle of the block. */
.rahkar-footer__contact--block { align-items: flex-start; }
.rahkar-footer__contact--block .rahkar-footer__icon { margin-top: 3px; }

/* ── 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;
}
/* Founder note. One desktop row, three parts — in RTL the flex order puts them
   right → left: portrait, then title+blurb, then the trust seals hard against
   the inline-end (left) edge, top-aligned with the text. `flex:1` on the middle
   part is what pushes the seals over; no auto margins needed. Wraps to a
   stacked block on narrow screens (the photo keeps its own size, it isn't a
   layout column). */
.rahkar-footer__brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(14px, 2.5vw, 24px);
}
.rahkar-footer__brand-main {
	flex: 1 1 340px;
	min-width: 0;
}
.rahkar-footer__ceo {
	flex: none;
	width: clamp(72px, 9vw, 120px);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--rf-border);
	background: var(--wp--preset--color--base, #fff);
}

.rahkar-footer__desc {
	flex: 1 1 320px;
	margin: 0;
	max-width: 70ch;
	color: var(--rf-muted);
	font-size: 0.9rem;
	line-height: 1.85;
}
.rahkar-footer__desc p { margin: 0; }
.rahkar-footer__desc p + p { margin-top: 10px; }

/* ── trust seals (enamad / samandehi) ─────────────────────────────────────── */
.rahkar-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	flex: none;
	/* Only when the row has wrapped (mobile) do the seals need their own gap;
	   inside the desktop row they sit level with the text, so no top margin. */
	margin-top: var(--rf-gap);
}
@media (min-width: 900px) {
	.rahkar-footer__trust { margin-top: 0; }
}
.rahkar-footer__trust img {
	width: 96px;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 6px;
	border: 1px solid var(--rf-border);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--base, #fff);
	cursor: pointer;
}

/* ── 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);
}
.rahkar-footer__credit a {
	color: var(--rf-muted);
	text-decoration: none;
	transition: color .15s ease;
}
.rahkar-footer__credit a:hover,
.rahkar-footer__credit a:focus-visible { color: var(--rf-primary); }

/* =============================================================================
 *  felorshop preset — a fundamentally different DESKTOP shell.
 *
 *  Every other preset (gunesh, arama) is a full-bleed bar: colored background
 *  edge-to-edge, content boxed inside it via .rahkar-footer__inner. This one
 *  inverts that — the COLORED PANEL ITSELF is boxed (inset from the viewport
 *  like the rest of the page), sitting on the page's own background, pink
 *  rather than the shared neutral surface tone.
 *
 *  Scoped entirely under .rahkar-site-footer--felorshop so gunesh/arama (still
 *  live shops on this same theme) are byte-for-byte unaffected.
 *
 *  Mobile keeps the ordinary full-bleed bar — there is no viewport room for an
 *  inset panel below ~900px, and full-bleed is the natural mobile treatment
 *  anyway. Only the color changes there; the desktop "not full width" request
 *  is a desktop-only distinction by nature.
 * ========================================================================== */
.rahkar-site-footer--felorshop {
	/* Pink everywhere (mobile + desktop); light text/borders instead of the
	   dark-on-neutral tokens the other presets use, so everything stays
	   readable on a saturated background. --rf-primary is reused here as
	   "the accent that must contrast with --rf-bg", not literally the site's
	   brand primary — the pale secondary reads as a soft highlight against the
	   solid primary-pink background instead of disappearing into it. */
	--rf-bg: var(--wp--preset--color--primary, #cb6686);
	--rf-fg: var(--wp--preset--color--base, #fff);
	--rf-muted: rgba(255, 255, 255, 0.82);
	--rf-border: rgba(255, 255, 255, 0.28);
	--rf-primary: var(--wp--preset--color--secondary, #fdebe7);
	border-top: 0;
	background: transparent;         /* the page's own background shows outside the panel */
	padding-block: clamp(20px, 3vw, 36px);
}
.rahkar-site-footer--felorshop .rahkar-footer__inner {
	background: var(--rf-bg);
	padding-block: clamp(28px, 4vw, 44px);
}
@media (min-width: 900px) {
	/* Inset from the viewport by the same gutter the header/content use, so
	   the panel's edges line up with everything else on the page instead of
	   picking a new margin. Rounded corners are desktop-only too — at true
	   full mobile width there is no gap outside the radius, so rounding there
	   would just clip pink off the corners onto the page background behind. */
	.rahkar-site-footer--felorshop .rahkar-footer__inner {
		max-width: calc(var(--wp--style--global--wide-size, 1676px) - 2 * var(--rh-gutter, 28px));
		padding-inline: clamp(24px, 3vw, 48px);
		border-radius: var(--wp--custom--radius--lg, 0.75rem);
	}
}
/* Mobile: a full-bleed green bar from the last section down to the screen
   edge. The outer padding showed as white strips above/below the green;
   the bar now also runs on under the mobile dock (--rh-bnav-h, set in
   bottom-nav.css) instead of leaving the body's dock padding as a white band.
   Rules: no hairline above the first row or below the last one, only the
   single divider above the copyright. */
@media (max-width: 899px) {
	.rahkar-site-footer--felorshop {
		padding-block: 0;
		margin-bottom: calc(-1 * var(--rh-bnav-h, 0px));
	}
	.rahkar-site-footer--felorshop .rahkar-footer__inner {
		padding-block: 8px calc(24px + var(--rh-bnav-h, 0px));
	}
	.rahkar-site-footer--felorshop .rahkar-footer__acc:first-of-type {
		border-top: 0;
	}
	.rahkar-site-footer--felorshop .rahkar-footer__cols > .rahkar-footer__acc:last-child {
		border-bottom: 0;
	}
	.rahkar-site-footer--felorshop .rahkar-footer__bottom {
		margin-top: 0;
		padding-top: 20px;
	}
}
/* Icons/hairlines that key off --rf-fg directly (not --rf-muted/--rf-border)
   would otherwise stay the dark defaults baked into their own rules. */
.rahkar-site-footer--felorshop .rahkar-footer__acc,
.rahkar-site-footer--felorshop .rahkar-footer__acc:first-of-type {
	border-color: var(--rf-border);
}
.rahkar-site-footer--felorshop .rahkar-footer__social a {
	border-color: var(--rf-border);
	color: var(--rf-fg);
}
.rahkar-site-footer--felorshop .rahkar-footer__bottom {
	border-color: var(--rf-border);
}
/* eNamad seal inside the «ارتباط با ما» column, under the social icons,
   a size down from the shared full-row seal. */
.rahkar-site-footer--felorshop .rahkar-footer__trust {
	margin-top: 16px;
}
.rahkar-site-footer--felorshop .rahkar-footer__trust img {
	width: 72px;
	padding: 4px;
}