/**
 * Footer Styles
 *
 * Styling für den Footer basierend auf Figma Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* Footer Container */
.hs-footer {
	background-color: #111827 !important; /* bg-gray-900 */
	color: #ffffff !important; /* text-white */
	padding-top: 2rem !important; /* py-8 = 32px */
	padding-bottom: 2rem !important;
}

@media (min-width: 768px) {
	.hs-footer {
		padding-top: 3rem !important; /* md:py-12 = 48px */
		padding-bottom: 3rem !important;
	}
}

.hs-footer-container {
	max-width: 72rem !important; /* max-w-6xl = 1152px */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important; /* px-4 = 16px */
	padding-right: 1rem !important;
}

@media (min-width: 640px) {
	.hs-footer-container {
		padding-left: 1.5rem !important; /* sm:px-6 = 24px */
		padding-right: 1.5rem !important;
	}
}

/* Footer Columns */
.hs-footer-columns {
	margin-bottom: 1.5rem !important; /* mb-6 = 24px */
	gap: 1.5rem !important; /* gap-6 = 24px */
	max-width: 72rem !important; /* max-w-6xl = 1152px - same as other patterns */
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (min-width: 768px) {
	.hs-footer-columns {
		margin-bottom: 2rem !important; /* md:mb-8 = 32px */
		gap: 2rem !important; /* md:gap-8 = 32px */
	}
}

/* Brand Column - spans 2 columns on mobile, 1 on desktop */
.hs-footer-brand {
	grid-column: span 2 !important;
}

@media (min-width: 768px) {
	.hs-footer-brand {
		grid-column: span 1 !important;
	}
}

/* Footer Brand Content */
.hs-footer-brand-content {
	display: flex !important;
	align-items: center !important;
	margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* Footer Logo Icon */
.hs-footer-logo-icon {
	width: 2rem !important; /* w-8 = 32px */
	height: 2rem !important; /* h-8 = 32px */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
	padding: 0.25rem !important;
	border-radius: 12px;
}

.hs-footer-logo-icon img,
.hs-footer-logo-icon svg {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Footer Brand Name */
.hs-footer-brand-name {
	font-size: 1rem !important; /* text-base = 16px */
	line-height: 1.5rem !important;
	color: #ffffff !important;
	margin: 0 !important;
}

/* Footer Tagline */
.hs-footer-tagline {
	font-size: 0.75rem !important; /* text-xs = 12px */
	line-height: 1.25rem !important;
	color: #9ca3af !important; /* text-gray-400 */
	margin: 0 !important;
}

/* Footer Section Title */
.hs-footer-section-title {
	font-size: 0.95rem !important; /* text-xs = 12px */
	line-height: 1rem !important;
	color: #9ca3af !important; /* text-gray-400 */
	margin-bottom: 0.75rem !important; /* mb-3 = 12px */
	margin-top: 0 !important;
	font-weight: 400 !important;
}

/* Footer Links Column - Force navigation to show as list, not burger menu */
.hs-footer-links .wp-block-navigation {
	display: block !important;
	position: relative !important;
}

/* Make sure the navigation is always visible - override any hidden states */
.hs-footer-links .wp-block-navigation {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Class-based visibility for footer navigation (prevents mutation observer loops) */
.hs-footer-links .hs-footer-nav-visible {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Override any data attributes or classes that might hide content */
.hs-footer-links .wp-block-navigation[data-wp-class--is-menu-open="false"] .wp-block-navigation__responsive-container-content,
.hs-footer-links .wp-block-navigation:not([data-wp-class--is-menu-open="true"]) .wp-block-navigation__responsive-container-content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Hide all responsive navigation elements (burger menu) - very aggressive */
.hs-footer-links .wp-block-navigation__responsive-container-open,
.hs-footer-links .wp-block-navigation__responsive-container-close,
.hs-footer-links button.wp-block-navigation__responsive-container-open,
.hs-footer-links button.wp-block-navigation__responsive-container-close,
.hs-footer-links .wp-block-navigation__responsive-close {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Show responsive container but make it behave like a normal block */
.hs-footer-links .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Show responsive dialog but make it behave like a normal block */
.hs-footer-links .wp-block-navigation__responsive-dialog {
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* Force responsive container content to always be visible and show links directly */
.hs-footer-links .wp-block-navigation__responsive-container-content {
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	border: none !important;
	box-shadow: none !important;
}

/* Navigation container - make sure it's visible */
.hs-footer-links .wp-block-navigation__container,
.hs-footer-links .wp-block-navigation__container ul,
.hs-footer-links .wp-block-pages-list {
	display: flex !important;
	flex-direction: column !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0.375rem !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.hs-footer-links .wp-block-navigation__container ul {
	display: flex !important;
	flex-direction: column !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0.375rem !important;
}

.hs-footer-links .wp-block-navigation__container li,
.hs-footer-links .wp-block-navigation li,
.hs-footer-links .wp-block-pages-list__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.hs-footer-links .wp-block-navigation a,
.hs-footer-links .wp-block-navigation .wp-block-navigation-item__content,
.hs-footer-links .wp-block-pages-list__item__link,
.hs-footer-links .wp-block-pages-list__item__link {
	font-size: 0.85rem !important; /* text-xs = 12px */
	line-height: 1rem !important;
	color: #ffffff !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.hs-footer-links .wp-block-navigation a:hover,
.hs-footer-links .wp-block-navigation .wp-block-navigation-item__content:hover,
.hs-footer-links .wp-block-pages-list__item__link:hover {
	color: #fb923c !important; /* hover:text-orange-400 */
}

/* Footer Contact Items */
.hs-footer-contact-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.375rem !important; /* space-y-1.5 = 6px */
}

/* Footer Hours Items */
.hs-footer-hours-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.375rem !important; /* space-y-1.5 = 6px */
}

/* Footer Item */
.hs-footer-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.375rem !important;
}

/* Footer Link */
.hs-footer-link {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important; /* gap-2 = 8px */
	font-size: 0.85rem !important; /* text-xs = 12px */
	line-height: 1rem !important;
	color: #ffffff !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.hs-footer-link:hover {
	color: #fb923c !important; /* hover:text-orange-400 */
}

/* Footer Icon */
.hs-footer-icon {
	width: 0.75rem !important; /* w-3 = 12px */
	height: 0.75rem !important; /* h-3 = 12px */
	color: #9ca3af !important; /* text-gray-400 */
	flex-shrink: 0 !important;
}

/* Footer Text */
.hs-footer-text {
	word-break: break-all !important; /* break-all for email */
	color: #ffffff !important;
}

/* Footer Item Text (for hours without icon) */
.hs-footer-item-text {
	font-size: 0.85rem !important; /* text-xs = 12px */
	line-height: 1rem !important;
	color: #ffffff !important;
}

/* Footer Divider */
.hs-footer-divider {
	border-color: #1f2937 !important; /* border-gray-800 */
	border-width: 1px 0 0 0 !important;
	margin-top: 1.5rem !important; /* pt-6 = 24px */
	margin-bottom: 0 !important;
}

@media (min-width: 768px) {
	.hs-footer-divider {
		margin-top: 2rem !important; /* md:pt-8 = 32px */
	}
}

/* Footer Copyright */
.hs-footer-copyright {
	text-align: center !important;
	font-size: 0.75rem !important; /* text-xs = 12px */
	line-height: 1rem !important;
	color: #9ca3af !important; /* text-gray-400 */
	margin-top: 1.5rem !important; /* pt-6 = 24px */
	margin-bottom: 0 !important;
}

@media (min-width: 768px) {
	.hs-footer-copyright {
		font-size: 0.875rem !important; /* md:text-sm = 14px */
		line-height: 1.25rem !important;
		margin-top: 2rem !important; /* md:pt-8 = 32px */
	}
}

/* Responsive Grid */
@media (min-width: 768px) {
	.hs-footer-columns {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* md:grid-cols-4 */
	}
}