/* ==========================================================================
   Storyshine — Footer styles (footer.css)
   base.css se extract kiya gaya. Standalone chalta hai (base.css ke bina bhi).

   FONT: Footer sirf "Geist" use karta hai (--font-body).
   HTML <head> me ye add karo (CSS @import se fast hai):

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap" rel="stylesheet">

   Contents:
     1. Design tokens (footer ke liye zaroori)
     2. Reset & base elements
     3. Layout (.container)
     4. Icons (.icon, .icon--md)
     5. Footer
     6. Responsive (≤ 1024px, ≤ 760px)
   ========================================================================== */

/* 1. Font =================================================================== */
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* 2. Layout =============================================================== */
.ss-site-footer .container {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
}
/* 3. Footer =============================================================== */
.ss-site-footer {
	background: #fbf8f3 !important;
	color: #17130f !important;
	font-family: "Geist", sans-serif !important;
	padding: 56px 0 48px !important;
	border-top: 1px solid #efe7db !important;
}
.ss-site-footer .ss-site-footer__top {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 40px !important;
}
.ss-site-footer .ss-site-footer__brand {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}
.ss-site-footer .ss-site-footer__logo {
	align-self: flex-start !important;
	height: 36px !important;
	width: auto !important;
	mix-blend-mode: multiply !important;
}
.ss-site-footer .ss-site-footer__tagline {
	font-family: "Geist", sans-serif !important;
	font-size: 15px !important;
	color: #4a423a !important;
}
.ss-site-footer .ss-site-footer__nav {
	display: flex !important;
	gap: 28px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}
.ss-site-footer .ss-site-footer__nav a {
	font-family: "Geist", sans-serif !important;
	color: #17130f !important;
	text-decoration: none !important;
	transition: all 300ms ease 0ms !important;
}
.ss-site-footer .ss-site-footer__nav a:hover {
	color: #dd3324 !important;
}
.ss-site-footer .ss-site-footer__social {
	display: flex !important;
	gap: 10px !important;
}
.ss-site-footer .social-link {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 1px solid #e3dace !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #17130f !important;
	transition: all 300ms ease 0ms !important;
}
.ss-site-footer .social-link .bi {
	font-size: 18px !important;
}
.ss-site-footer .social-link:hover {
	color: #dd3324 !important;
	border-color: #dd3324 !important;
}
.ss-site-footer .ss-site-footer__bottom {
	display: flex !important;
	justify-content: space-between !important;
	gap: 24px !important;
	margin-top: 40px !important;
	padding-top: 28px !important;
	border-top: 1px solid #efe7db !important;
	font-size: 13px !important;
	color: #6b6157 !important;
}
.ss-site-footer .ss-site-footer__legal {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
}
.ss-site-footer .ss-site-footer__legal a, .ss-site-footer .ss-site-footer__bottom a {
	font-family: "Geist", sans-serif !important;
	color: #6b6157 !important;
	text-decoration: none !important;
	transition: all 300ms ease 0ms !important;
}
.ss-site-footer .ss-site-footer__legal a:hover, .ss-site-footer .ss-site-footer__bottom a:hover {
	color: #dd3324 !important;
}

/* 4. Responsive =========================================================== */
@media (max-width: 1024px) {
.ss-site-footer .container {
	padding: 0 28px !important;
}
}
@media (max-width: 760px) {
.ss-site-footer .container {
	padding: 0 20px !important;
}
.ss-site-footer .ss-site-footer__top,  .ss-site-footer .ss-site-footer__bottom {
	flex-direction: column !important;
	gap: 20px !important;
}
.ss-site-footer .ss-site-footer__nav {
	flex-wrap: wrap !important;
	gap: 16px !important;
}
}