/*
 * 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.
 *
 * Built entirely from native core blocks (Group + Heading + List +
 * Social Icons) so the whole footer is editable in the site editor.
 *
 * Layout:
 *   - Top row: 4 equal-width columns on desktop (≥ 900px) via
 *     grid-template-columns: repeat(4, 1fr). On mobile they stack into a
 *     single column, each banded by a top border.
 *   - Mobile accordion: each column collapses under its heading. Driven by
 *     assets/js/footer.js as a progressive enhancement — the collapse rules
 *     are all scoped to `.rahkar-footer--js` (the class footer.js adds), so
 *     without JS (and inside the site-editor canvas) every column stays open
 *     and editable. No <details> is used because it can't wrap editable
 *     core blocks.
 *   - 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.
 */

/* ----------------------------------------------------------------------
 *  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
 * ----------------------------------------------------------------------
 *  Editable native blocks (Heading + List), so each column is a plain
 *  Group — no <details>/JS accordion. To keep this fully editable in the
 *  site editor, the columns are always-open.
 *  Mobile: single column, banded by a top border per column so the
 *  stacked sections still read as discrete groups.
 *  Desktop (≥ 900px): 4 equal columns, normal gap, no banding borders.
 */
.rahkar-footer__cols {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 0;
}

.rahkar-footer__col {
	min-width: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--rf-border);
}
.rahkar-footer__col:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 900px) {
	.rahkar-footer__cols {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--rf-gap);
	}
	/* Static columns on desktop — drop the mobile banding. */
	.rahkar-footer__col,
	.rahkar-footer__col:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* ----------------------------------------------------------------------
 *  Column title — core Heading block, kept at footer scale (not the
 *  theme's default h3 size).
 * ---------------------------------------------------------------------- */
.rahkar-footer__title {
	font-weight: var(--wp--custom--fw--strong);
	color: var(--rf-fg);
	margin: 0 0 0.85rem;
	font-size: 1rem;
	line-height: 1.4;
}

/* ----------------------------------------------------------------------
 *  Mobile accordion (progressive enhancement)
 * ----------------------------------------------------------------------
 *  Active ONLY under .rahkar-footer--js (added by footer.js) and ONLY on
 *  mobile. Without JS — including the site-editor canvas — none of this
 *  applies, so the columns stay open and editable. The heading is the
 *  tappable summary; footer.js toggles .is-open on the column.
 */
@media (max-width: 899px) {
	.rahkar-footer--js .rahkar-footer__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin: 0;
		padding: 0.9rem 0;
		cursor: pointer;
		user-select: none;
	}
	/* CSS chevron — rotates when the column is open. */
	.rahkar-footer--js .rahkar-footer__title::after {
		content: "";
		flex: 0 0 auto;
		width: 0.55em;
		height: 0.55em;
		margin-bottom: 0.18em;
		border-right: 2px solid var(--rf-fg-muted);
		border-bottom: 2px solid var(--rf-fg-muted);
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.rahkar-footer--js .rahkar-footer__col.is-open > .rahkar-footer__title::after {
		transform: rotate(-135deg);
		margin-top: 0.18em;
		margin-bottom: 0;
	}
	/* The heading carries the top padding now, so drop the column's. */
	.rahkar-footer--js .rahkar-footer__col {
		padding-top: 0;
	}
	/* Collapsed: hide everything but the heading. !important because the
	   list / social row set their own display (see the hidden-vs-display
	   gotcha) and would otherwise win. */
	.rahkar-footer--js .rahkar-footer__col:not(.is-open) > *:not(.rahkar-footer__title) {
		display: none !important;
	}
	/* Open: breathing room under the heading. */
	.rahkar-footer--js .rahkar-footer__col.is-open > *:not(.rahkar-footer__title) {
		margin-bottom: 0.9rem;
	}
}

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

/* ----------------------------------------------------------------------
 *  Social row — core Social Icons block (is-style-logos-only).
 * ----------------------------------------------------------------------
 *  Core supplies the flex layout + icon sizing; we only theme the chrome:
 *  outlined 36px squares that adopt the brand blue on hover, matching the
 *  rest of the footer. Targeting the core classes keeps the markup fully
 *  editable in the site editor while the look stays on-brand.
 */
.rahkar-footer__social {
	margin: 0;
	--wp--style--block-gap: 0; /* spacing handled by the link box gap below */
	gap: 0.5rem;
}
.rahkar-footer__social .wp-social-link {
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	border: 1px solid var(--rf-border);
	background: transparent;
	color: var(--rf-fg-muted);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.rahkar-footer__social .wp-social-link a {
	color: inherit;
	padding: 8px;
}
.rahkar-footer__social .wp-social-link:hover,
.rahkar-footer__social .wp-social-link:focus-within {
	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: var(--wp--custom--fw--strong);
	color: var(--rf-fg);
	margin: 0 0 0.5rem;
	line-height: 1.4;
}
/* Brand description — a plain editable core Paragraph (the old in-place
 * `.rh-fade` "بیشتر/کمتر" expand wrapper was dropped so the text is fully
 * editable in the site editor). Keep the copy short; only footer-context
 * typography lives 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: var(--wp--custom--fw--base);
}