/* ============================================================
   FOOTER
   Anchor Uptime Theme
   ============================================================ */

.site-footer {
	border-top: 1px solid var(--border);
	padding:    64px 40px 40px;
}

.footer-inner {
	max-width: var(--container);
	margin:    0 auto;
}

/* ── Top grid ── */
.footer-top {
	display:               grid;
	grid-template-columns: 220px 1fr 1fr 1fr;
	gap:                   40px;
	padding-bottom:        48px;
	border-bottom:         1px solid var(--border);
}

/* ── Brand column ── */
.footer-logo {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	text-decoration: none;
	color:           var(--text);
	font-family:     var(--display);
	font-size:       15px;
	font-weight:     700;
	margin-bottom:   12px;
}

.footer-logo-mark {
	width:          26px;
	height:         26px;
	display:        flex;
	align-items:    center;
	justify-content: center;
	flex-shrink:    0;
}

.footer-tagline {
	font-size:   12px;
	color:       var(--muted);
	line-height: 1.75;
	max-width:   180px;
}

.footer-maker {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	font-family:     var(--mono);
	font-size:       10px;
	letter-spacing:  .3px;
	color:           var(--faint);
	text-decoration: none;
	margin-top:      14px;
	transition:      color .2s;
}

.footer-maker:hover {
	color: var(--muted);
}

/* Social icons */
.footer-social {
	display:    flex;
	gap:        7px;
	margin-top: 14px;
}

.footer-social a {
	width:          30px;
	height:         30px;
	border-radius:  100px;
	background:     var(--bg2);
	border:         1px solid var(--border);
	display:        flex;
	align-items:    center;
	justify-content: center;
	color:          var(--faint);
	transition:     all .2s;
	text-decoration: none;
}

.footer-social a:hover {
	border-color: var(--border2);
	color:        var(--muted);
}

/* ── Link columns ── */
.footer-col__title {
	font-family:    var(--mono);
	font-size:      10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--indigo);
	margin-bottom:  16px;
	/* Visually h5-level but using h2 for landmark — override size */
	font-weight: 500;
}

.footer-col ul {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        10px;
}

.footer-col ul li a {
	font-size:       13px;
	color:           var(--faint);
	text-decoration: none;
	transition:      color .2s;
}

.footer-col ul li a:hover {
	color: var(--muted);
}

/* ── Bottom bar ── */
.footer-bottom {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             12px;
	padding-top:     28px;
}

.footer-copy {
	font-family: var(--mono);
	font-size:   11px;
	color:       var(--faint);
}

.footer-bottom-links {
	display: flex;
	gap:     20px;
}

.footer-bottom-links a {
	font-size:       12px;
	color:           var(--faint);
	text-decoration: none;
	transition:      color .2s;
}

.footer-bottom-links a:hover {
	color: var(--muted);
}

/* ── Status chip ── */
.footer-status {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-family:     var(--mono);
	font-size:       10px;
	letter-spacing:  .3px;
	color:           var(--green);
	background:      rgba(34, 197, 94, .06);
	border:          1px solid rgba(34, 197, 94, .15);
	border-radius:   100px;
	padding:         4px 12px;
	text-decoration: none;
	transition:      background .2s;
}

.footer-status:hover {
	background: rgba(34, 197, 94, .1);
}

.status-dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--green);
	animation:     blink 2s infinite;
	flex-shrink:   0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.site-footer { padding: 48px 20px 32px; }

	.footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-bottom {
		flex-direction: column;
		align-items:    flex-start;
	}
}

@media (max-width: 380px) {
	.footer-top {
		grid-template-columns: 1fr;
	}
}