/*
 * RahkarTheme — footer styles.
 *
 * Loaded on EVERY page (the footer is global) but the footer itself is
 * below the fold on first paint, so this file is non-critical and never
 * blocks LCP.
 *
 * Layout:
 *   - Top row: 4 equal-width columns on desktop (≥ 900px) via
 *     grid-template-columns: repeat(4, 1fr). Below 900px collapses to
 *     auto-fit so columns reflow gracefully.
 *   - Brand row: 75% / 25% split on desktop, stacks on mobile. Bound by
 *     border-tops so the layout reads as three banded rows.
 *   - Bottom bar: copyright row with a divider.
 *
 * The brand description's "بیشتر/کمتر" toggle uses the shared in-place
 * .rh-fade expand component (assets/css/fade-block.css). A modal lived
 * here previously and was removed; the in-place pattern is consistent
 * with the rest of the site and saves a chunk of footer JS + CSS.
 */

/* ----------------------------------------------------------------------
 *  Tokens — scoped to .rahkar-site-footer so they cannot leak.
 * ---------------------------------------------------------------------- */
.rahkar-site-footer {
	--rf-fg:        var(--wp--preset--color--text, #1a1d23);
	--rf-fg-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, 36px);
	--rf-col-min:   180px;
}

/* ----------------------------------------------------------------------
 *  Columns row
 * ----------------------------------------------------------------------
 *  Mobile: single column, no gap — each <details> has its own border so
 *  accordions stack as a clean list.
 *  Desktop (≥ 900px): 4 equal columns, normal gap. JS adds [open] to
 *  every <details> on desktop so all content shows, then this stylesheet
 *  hides the chevron and disables the click affordance via [open]+desktop
 *  rules below.
 */
.rahkar-footer__cols {
	display: grid !important;
	grid-template-columns: 1fr;
	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 by default, tappable summary with chevron.
 *  Desktop: JS toggles [open] on; CSS strips the affordance so it reads
 *  as a 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: 0.75rem;
	padding: 1rem 0;
	cursor: pointer;
	user-select: none;
	list-style: none; /* Firefox marker */
}
.rahkar-footer__acc-summary::-webkit-details-marker { display: none; } /* Safari/Chrome */
.rahkar-footer__acc-summary::marker { display: none; }

.rahkar-footer__title {
	font-weight: 700;
	color: var(--rf-fg);
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.rahkar-footer__acc-chev {
	flex-shrink: 0;
	color: var(--rf-fg-muted);
	transition: transform .2s ease;
}
.rahkar-footer__acc[open] > .rahkar-footer__acc-summary .rahkar-footer__acc-chev {
	transform: rotate(180deg);
}

/* Spacing of expanded content on mobile */
.rahkar-footer__acc[open] > *:not(.rahkar-footer__acc-summary) {
	padding-bottom: 1rem;
}
.rahkar-footer__acc[open] > * + * {
	margin-top: 0.5rem;
}

/* Desktop: render as static column, not an accordion */
@media (min-width: 900px) {
	.rahkar-footer__acc,
	.rahkar-footer__acc:first-of-type {
		border: 0;
	}
	.rahkar-footer__acc-summary {
		padding: 0 0 0.5rem;
		cursor: default;
		pointer-events: none;
	}
	.rahkar-footer__acc-chev {
		display: none;
	}
	.rahkar-footer__acc[open] > *:not(.rahkar-footer__acc-summary) {
		padding-bottom: 0;
	}
}

/* ----------------------------------------------------------------------
 *  Link lists
 * ---------------------------------------------------------------------- */
.rahkar-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rahkar-footer__list li {
	margin: 0;
	line-height: 1.4;
}
.rahkar-footer__list li + li {
	margin-top: 0.55rem;
}
.rahkar-footer__list a {
	color: var(--rf-fg-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);
	text-decoration: none;
}

/* ----------------------------------------------------------------------
 *  Contact rows
 * ---------------------------------------------------------------------- */
.rahkar-footer__contact {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
.rahkar-footer__contact li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	color: var(--rf-fg-muted);
	line-height: 1.5;
}
.rahkar-footer__contact li + li {
	margin-top: 0.55rem;
}
.rahkar-footer__contact a {
	color: var(--rf-fg-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;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.rahkar-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	border: 1px solid var(--rf-border);
	color: var(--rf-fg-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 row — 75% / 25% split on desktop. Top border bands the section.
 * ---------------------------------------------------------------------- */
.rahkar-footer__brand-row {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--rf-gap);
	margin-top: var(--rf-gap);
	padding-top: var(--rf-gap);
	border-top: 1px solid var(--rf-border);
	align-items: start;
}

@media (min-width: 900px) {
	.rahkar-footer__brand-row {
		grid-template-columns: 3fr 1fr;
	}
}

.rahkar-footer__brand {
	min-width: 0;
}
.rahkar-footer__brand-title {
	display: block;
	font-weight: 700;
	color: var(--rf-fg);
	margin: 0 0 0.5rem;
	line-height: 1.4;
}
/* The clamp + fade + "بیشتر" toggle are provided by the shared
 * `.rh-fade--modal` component (see assets/css/fade-block.css). The
 * footer-about block is wrapped in `.rh-fade` in parts/footer.html.
 * Only the footer-context typography overrides live here. */
.rahkar-footer__desc {
	color: var(--rf-fg-muted);
	line-height: 1.85;
	margin: 0 0 0.85rem !important;
	max-width: 70ch;
}

/* ----------------------------------------------------------------------
 *  Trust badges column (inside brand row, 25%).
 * ---------------------------------------------------------------------- */
.rahkar-footer__trust {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: flex-start;
}
@media (min-width: 900px) {
	.rahkar-footer__trust {
		justify-content: flex-end;
	}
}
.rahkar-footer__trust:empty::before {
	content: "";
	display: block;
	width: 100%;
	min-height: 1px;
}
.rahkar-footer__trust img,
.rahkar-footer__trust a img {
	height: 72px;
	width: auto;
	opacity: 0.92;
	transition: opacity .15s ease;
}
.rahkar-footer__trust a:hover img,
.rahkar-footer__trust a:focus-visible img {
	opacity: 1;
}

/* ----------------------------------------------------------------------
 *  Bottom bar — divider above, smaller type.
 * ---------------------------------------------------------------------- */
.rahkar-footer__bottom {
	border-top: 1px solid var(--rf-border);
	padding-top: 1rem;
	margin-top: var(--rf-gap);
	gap: 0.5rem 1rem;
}
.rahkar-footer__bottom .wp-block-site-title {
	font-weight: 400;
}

/* Footer-about's "Read more" modal was replaced by the shared in-place
 * .rh-fade expand pattern (see assets/css/fade-block.css). The full
 * .rh-fm modal CSS + JS + markup that used to live across three files
 * are gone — net win for both bundle size and UX consistency. */