/*    17. FOOTER
   ------------------------------------------- */
.site-footer {
	background: var(--color-bg-dark);
	position: relative;
}

/* Full-width footer accent bar. NOTE: it must NOT reuse the hero's
   `gradient-shift` keyframes — those do scale(1.1) rotate(2deg), which makes
   this full-width bar grow and tilt past the right edge of the screen
   (horizontal overflow at every breakpoint). A background-position shimmer
   keeps the moving-gradient effect without any layout/transform overflow. */
.footer-accent-line {
	height: 3px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-purple-light), var(--color-accent));
	background-size: 200% 100%;
	animation: footer-accent-flow 5s linear infinite alternate;
	will-change: background-position;
}

@keyframes footer-accent-flow {
	0% { background-position: 0% 0; }
	100% { background-position: 100% 0; }
}

.footer-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
}

.footer-logo {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 800;
	color: var(--color-text-primary);
}

.footer-logo:hover {
	color: var(--color-text-primary);
}

.footer-tagline {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-accent);
	margin-top: var(--space-sm);
}

.footer-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
	line-height: 1.7;
	max-width: 300px;
}

.footer-heading {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: var(--space-lg);
}

#footer-menu {
	list-style: none;
}

#footer-menu .menu-item a {
	padding: 6px 0;
	display: inline-block;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
}

#footer-menu .menu-item a:hover {
	color: var(--color-accent);
	padding-left: 4px;
}

/* Custom quick links list (footer "Quick Links" column) */
.footer-quick-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-quick-list li {
	margin: 0;
}

.footer-quick-list li a {
	display: inline-block;
	padding: 6px 0;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
}

.footer-quick-list li a:hover {
	color: var(--color-accent);
	padding-left: 4px;
}

/* Footer quick-links column renders a WP menu too — reuse footer menu styles */
.footer-quick-links #menu-quick-links,
.footer-quick-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-quick-links .menu-item a {
	display: inline-block;
	padding: 6px 0;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	transition: all var(--transition-fast);
}

.footer-quick-links .menu-item a:hover {
	color: var(--color-accent);
	padding-left: 4px;
}

.footer-contact-list li {
	margin-bottom: var(--space-sm);
}

.footer-contact-list a {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.footer-contact-list a:hover {
	color: var(--color-accent);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: var(--space-lg) 0;
}

.footer-bottom-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-xl);
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--space-sm);
}

.footer-contact-list li svg {
	flex-shrink: 0;
	color: var(--color-accent);
	opacity: 0.7;
}

.footer-contact-list a {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	transition: color var(--transition-fast);
}

.footer-contact-list a:hover {
	color: var(--color-accent);
}

/* Waktu Operasi — full-width strip at the bottom of the footer columns */
.footer-hours {
	grid-column: 1 / -1;
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-hours .footer-heading {
	text-align: center;
}

.footer-hours-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	margin: 0;
	padding: 0;
}

.footer-hours-list li {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.footer-hours-day {
	color: var(--color-text-muted);
}

.footer-hours-time {
	color: var(--color-text-primary);
	font-weight: 600;
}

.footer-social {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 50%;
	color: var(--color-text-muted);
	transition: all var(--transition-fast);
}

.footer-social-link:hover {
	background: rgba(255, 210, 30, 0.1);
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: translateY(-2px);
}

.footer-bottom p {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}

.footer-made-with {
	margin-top: var(--space-xs);
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.2);
}

.footer-heart {
	color: #ef4444;
	display: inline-block;
	animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}


/* -------------------------------------------
   17b. HEADER / FOOTER — ADMIN LAYOUTS
   (managed under Appearance → Header & Footer)
   ------------------------------------------- */

/* Static header (sticky disabled) */
body.binaweb-header-static .site-header {
	position: relative;
	top: auto;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

body.binaweb-header-static .site-main {
	padding-top: 0;
}

/* Inline header layout — nav sits on the same row as branding */
body.binaweb-header-inline .header-top {
	padding: var(--space-sm) 0;
}

body.binaweb-header-inline .header-top .header-container {
	justify-content: space-between;
	gap: var(--space-xl);
}

body.binaweb-header-inline .main-navigation {
	margin: 0;
}

body.binaweb-header-inline .header-bottom {
	display: none;
}

/* Footer column grid — driven by the "Footer Columns" setting.
   Only applies on desktop; tablet/mobile keep their own responsive layouts. */
@media (min-width: 1025px) {
	body.binaweb-footer-cols-1 .footer-container {
		grid-template-columns: 1fr;
	}

	body.binaweb-footer-cols-2 .footer-container {
		grid-template-columns: 1.4fr 1fr;
	}

	body.binaweb-footer-cols-3 .footer-container {
		grid-template-columns: 2fr 1fr 1fr;
	}

	body.binaweb-footer-cols-4 .footer-container {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}