/* ==========================================================================
   LiveTelePro — Layout: header, footer, grids
   ========================================================================== */

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--glass-border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	height: 76px;
}

.site-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-xl);
	color: var(--color-text);
}

.main-navigation .nav-menu {
	display: flex;
	gap: var(--space-8);
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation .nav-menu a {
	color: var(--color-text);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-sm);
}
.main-navigation .nav-menu a:hover { color: var(--color-primary); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle {
	width: 40px; height: 40px;
	border-radius: var(--radius-full);
	border: 1px solid var(--glass-border);
	background: var(--color-surface);
	display: grid; place-items: center;
}
.theme-toggle-icon {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--gradient-primary);
}

.mobile-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	width: 40px; height: 40px;
	background: transparent;
	border: 0;
	align-items: center;
	justify-content: center;
}
.mobile-nav-toggle span {
	width: 22px; height: 2px;
	background: var(--color-text);
	border-radius: 2px;
}

.breadcrumbs { margin: var(--space-4) 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: var(--space-2); }

/* ---------- Grids ---------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-8);
	margin-block: var(--space-8);
}
.card-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.page-header { margin-block: var(--space-8); }
.page-title { font-size: var(--fs-3xl); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-bg-elevated);
	border-top: 1px solid var(--glass-border);
	margin-top: var(--space-24);
	padding-block: var(--space-16) var(--space-8);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
	gap: var(--space-8);
	padding-bottom: var(--space-12);
}

.footer-brand p { max-width: 32ch; }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social-icon {
	width: 36px; height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--glass-border);
}

.footer-widget-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.footer-menu, .footer-legal-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-legal-menu { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }

.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newsletter-form input { flex: 1; min-width: 160px; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--color-surface); color: var(--color-text); }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--glass-border);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

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

@media (max-width: 782px) {
	.main-navigation { position: fixed; inset: 76px 0 0 0; background: var(--color-bg); padding: var(--space-6); transform: translateY(-120%); transition: transform var(--transition-slow); z-index: 400; }
	.main-navigation.is-open { transform: translateY(0); }
	.main-navigation .nav-menu { flex-direction: column; gap: var(--space-4); }
	.mobile-nav-toggle { display: flex; }
	.header-actions .btn { display: none; }
	.footer-top { grid-template-columns: 1fr; }
}