/**
 * components/footer.css — MJC Fintech Site Footer
 *
 * Figma reference: node 110:1300
 *
 * Structure:
 *   Row 1: 4-column layout (Brand, Quick Links, Services, Contact Us)
 *   Row 2: Copyright bar with top border
 *
 * @package MJC_Fintech_Child
 */

/* =====================================================
   BASE FOOTER
   ===================================================== */

.mjc-footer {
	background-color: #0a1628;
	padding: 96px 0 0;
	width: 100%;
	color: #d1d5dc;
}

/* =====================================================
   FOOTER CONTAINER (Centers content)
   ===================================================== */

.mjc-footer__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 64px;
}

/* =====================================================
   ROW 1 — FOOTER INNER (4 COLUMNS, Centered)
   ===================================================== */

.mjc-footer__inner {
	display:      grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap:          64px;
	max-width:    1152px;
	margin:       0 auto 64px auto;
	width:        100%;
}
/* =====================================================
   COLUMN 1 — BRAND & SOCIAL
   ===================================================== */

.mjc-footer__brand {
    width: 216px;
}

.mjc-footer__logo {
    margin-bottom: 20px; /* Reduced from 96px to fit new info */
}

.mjc-footer__logo img {
    width:        84px; /* Matches your HTML width */
    height:       auto;
    object-fit:   contain;
    display:      block;
}

.mjc-footer__tagline {
    font-family:   var(--font-body);
    font-size:     14px;
    line-height:   1.6;
    color:         #d1d5dc;
    width:         100%;
    margin:        0 0 20px 0;
}

/* New styling for Address and CIN */
.mjc-footer__details {
    font-family:   var(--font-body);
    font-size:     12px;
    line-height:   1.5;
    color:         #a1a7b0;
    margin-bottom: 24px;
}

.mjc-footer__details p {
    margin: 0 0 8px 0;
}

.mjc-footer__cin {
    display: block;
    font-weight: 600;
    color: #e8f4f8;
    margin-top: 4px;
}

.mjc-footer__social {
    display:       flex;
    gap:           12px;
    align-items:   center;
    margin-top:    24px;
}

.mjc-footer__social-link {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.1);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.3s ease;
    flex-shrink:   0;
}

.mjc-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mjc-footer__social-link svg {
    width:  18px;
    height: 18px;
    fill:   #e8f4f8;
}

/* =====================================================
   COLUMNS 2, 3, 4 — LINK SECTIONS
   ===================================================== */

.mjc-footer__column {
	display: flex;
	flex-direction: column;
}

.mjc-footer__col-heading {
	font-family:   var(--font-heading);
	font-size:     16px;
	font-weight:   700;
	color:         #e8f4f8;
	margin:        0 0 32px 0;
	padding:       0;
	line-height:   24px;
}

.mjc-footer__list {
	list-style:    none;
	padding:       0;
	margin:        0;
	display:       flex;
	flex-direction: column;
	gap:           16px;
}

.mjc-footer__list a,
.mjc-footer__contact-link {
	font-family:      var(--font-body);
	font-size:        14px;
	color:            #99a1af;
	text-decoration:  none;
	line-height:      21px;
	transition:       color var(--transition-fast);
	display:          flex;
	align-items:      center;
	gap:              8px;
}

.mjc-footer__list a:hover,
.mjc-footer__contact-link:hover {
	color: #2bbfce;
}

.mjc-footer__list a:focus-visible,
.mjc-footer__contact-link:focus-visible {
	outline:       2px solid var(--color-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Contact Item Icon */
.mjc-footer__contact-icon {
	width:        16px;
	height:       16px;
	fill:         #99a1af;
	flex-shrink:  0;
}

.mjc-footer__contact-link:hover .mjc-footer__contact-icon {
	fill: #2bbfce;
}

/* =====================================================
   ROW 2 — COPYRIGHT BAR (Full-width)
   ===================================================== */

.mjc-footer__bottom {
	border-top:    1px solid #1e2939;
	padding:       32px 64px;
	text-align:    center;
	max-width:     100%;
}

.mjc-footer__copyright {
	font-family:   var(--font-body);
	font-size:     12px;
	color:         #99a1af;
	line-height:   18px;
	margin:        0;
	padding:       0;
}

.mjc-footer__copyright a {
	color:         #99a1af;
	text-decoration: none;
	transition:    color var(--transition-fast);
}

.mjc-footer__copyright a:hover {
	color: #2bbfce;
}

.mjc-footer__copyright a:focus-visible {
	outline:       2px solid var(--color-teal);
	outline-offset: 2px;
}

/* =====================================================
   RESPONSIVE — TABLET (1024px and below)
   ===================================================== */

@media (max-width: 1024px) {
	.mjc-footer__container {
		padding: 0 40px;
	}

	.mjc-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap:                   48px;
	}

	.mjc-footer__brand {
		width: 100%;
	}

	.mjc-footer__tagline {
		width: 100%;
	}

	.mjc-footer__bottom {
		padding: 32px 40px;
	}
}

/* =====================================================
   RESPONSIVE — MOBILE (768px and below)
   ===================================================== */

@media (max-width: 768px) {
	.mjc-footer__container {
		padding: 0 24px;
	}

	.mjc-footer__inner {
		grid-template-columns: 1fr;
		gap:                   40px;
	}

	.mjc-footer__brand,
	.mjc-footer__column {
		width: 100%;
	}

	.mjc-footer__tagline {
		width: 100%;
	}

	.mjc-footer__logo {
		margin-bottom: 24px;
	}

	.mjc-footer__tagline {
		margin-bottom: 24px;
	}

	.mjc-footer__col-heading {
		font-size: 14px;
		margin-bottom: 24px;
	}

	.mjc-footer__list {
		gap: 12px;
	}

	.mjc-footer__list a,
	.mjc-footer__contact-link {
		font-size: 13px;
	}

	.mjc-footer__bottom {
		padding: 32px 24px;
	}
}