/*
Site footer: about/social/copyright, three editable link columns
(Appearance > Menus), contact details from the Customizer, and an eNamad
trust seal (with the Telegram support link beside it). Columns collapse to
a single stack on mobile, 2-up on tablet, and the full 6-up row at 1024px+.
*/

.site-footer {
	background: var(--color-surface);
	border-top: 2px solid var(--color-border);
	margin-top: var(--space-8);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block: var(--space-7);
}

.site-footer__desc {
	color: var(--color-muted);
	font-size: var(--text-sm);
	margin-block: var(--space-3);
	max-width: 32ch;
}

.site-footer__heading {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-4);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__list a { 
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.site-footer__list a:hover {
	color: var(--color-ink);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.site-footer__contact a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-muted);
}

.site-footer__contact a:hover {
	color: var(--color-ink);
}

.site-footer__contact .icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-primary);
}

.site-footer__social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.site-footer__social .site-header__icon-btn {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

.site-footer__social .site-header__icon-btn:hover {
	background: #cad1ff69;
	color: var(--color-primary);
}

.site-footer__copyright {
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

.site-footer__enamad-col {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.site-footer__enamad {
	display: inline-block;
	line-height: 0;
}

.site-footer__enamad img,
.site-footer__zarinpal {
	width: 80px;
	height: auto;
}

/* Mobile (below the 640px tablet breakpoint where the quick-links/
   customer-service columns start showing anyway): those two link columns
   are hidden -- their links are already reachable from the off-canvas
   mobile nav -- and what's left (about, contact, eNamad) is centered
   instead of left-aligned, which reads better as a single narrow stack
   than a left-hung column would. */
@media (max-width: 639.98px) {
	.site-footer__grid {
		gap: var(--space-5);
		padding-block: 16px;
	}

	.site-footer__col--quick-links,
	.site-footer__col--customer-service {
		display: none;
	}

	.site-footer__about {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		text-align: center;
		justify-content: space-between;
	}

	.site-footer__heading {
		/* text-align: center; */
	}

	.site-footer__contact {
		/* align-items: center; */
	}

	.site-footer__enamad-col {
		/* justify-content: center; */
	}
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		/* about, quick-links, categories, customer-service, contact,
		   eNamad -- 6 columns, about gets extra room for its longer
		   description text. */
		grid-template-columns: 1.3fr repeat(4, 1fr);
	}

	.site-footer__enamad-col {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* TEMP: Peyda font feature preview (footer.php, admin-only) -- delete this
   whole block along with the .font-feature-demo markup once the features
   to actually use have been decided. */

.font-feature-demo {
	padding-block: var(--space-6);
	border-top: 1px dashed var(--color-border);
}

.font-feature-demo__title {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-muted);
	margin-block-end: var(--space-4);
}

.font-feature-demo__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-lg);
}

.font-feature-demo__label {
	flex-basis: 100%;
	font-size: var(--text-xs);
	font-family: monospace;
	color: var(--color-muted);
}

.font-feature-demo__off {
	color: var(--color-muted);
}

.font-feature-demo__arrow {
	color: var(--color-primary);
}

.font-feature-demo__on {
	font-weight: var(--font-semibold);
	color: var(--color-ink);
}

.font-feature-demo__on--dlig {
	font-feature-settings: 'dlig' 1;
}

.font-feature-demo__on--swsh {
	font-feature-settings: 'swsh' 1;
}

.font-feature-demo__on--ss01 {
	font-feature-settings: 'ss01';
}

.font-feature-demo__on--ss02 {
	font-feature-settings: 'set01' 1;
}

.font-feature-demo__on--ss03 {
	font-feature-settings: 'ss03' 1;
}

.font-feature-demo__weights {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.font-feature-demo__w100 { font-weight: 100; }
.font-feature-demo__w300 { font-weight: 300; }
.font-feature-demo__w400 { font-weight: 400; }
.font-feature-demo__w500 { font-weight: 500; }
.font-feature-demo__w600 { font-weight: 600; }
.font-feature-demo__w700 { font-weight: 700; }
.font-feature-demo__w900 { font-weight: 900; }

/* Telegram support link -- inside the eNamad column (footer.php), beside
   the trust-seal badges, both on mobile and desktop. Used to be a
   sitewide fixed bottom-corner button; not fixed/floating anymore. */

.site-footer__telegram {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--transition-fast);
	margin-right: auto;
}

.site-footer__telegram:hover {
	background: var(--color-primary-hover);
	color: #fff;
}

.site-footer__telegram .icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

@media (max-width: 1023.98px) {
	.site-footer__desc{
		display: none;
	}

	.site-footer__heading{
		display: none;
	}

	.site-footer__copyright {
		display: none;
	}

	.site-footer__social {
    margin: 0;
}


}