/* Custom CSS to set header logo at 60% transparency */
#blog-logo {
  opacity: 0.6;
}

/* Custom CSS to remove text shadow from header elements */
.blog-title, .blog-description {
  text-shadow: none !important;
}

/* Custom CSS to change headline and subheadline colors */
.blog-title {
  color: #000000 !important; /* Classic black for headline */
}

.blog-description {
  color: #000000 !important; /* Classic black for subheadline */
}

/* ===== Header Slideshow Styles ===== */
/* Container for slideshow header to ensure proper positioning */
#site-head.withSlideshow {
  position: relative;
  background: transparent;
}

#site-head.withSlideshow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3); /* Light overlay for text readability */
  z-index: 0;
}

.header-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.header-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.header-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Keyframe animation for smooth crossfade */
@keyframes slideshowCycle {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}

/* Abstand nach oben und Schriftgröße für Überschriften in services.md*/
.services-header {
	margin-top: 0.5em;
	font-size: 1.25em; /* Increase font size for services header */
}

/* ===== Disclosure Widget Styles ===== */
.disclosure-widget {
	margin: 1em 0;
}

/* Style the <details> element */
.disclosure-widget details {
	background-color: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	margin-bottom: 0.5em;
	overflow: hidden;
	transition: all 0.3s ease;
}

.disclosure-widget details:hover {
	border-color: #ccc;
	background-color: #f5f5f5;
}

/* Style the <summary> element - this is the clickable header */
.disclosure-widget summary {
	padding: 0.75em 1em;
	cursor: pointer;
	font-weight: 600;
	color: #333;
	list-style: none; /* Remove default triangle */
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.3s ease;
}

.disclosure-widget summary:hover {
	background-color: #eee;
}

/* Remove default marker in WebKit browsers */
.disclosure-widget summary::-webkit-details-marker {
	display: none;
}

/* Custom chevron indicator */
.disclosure-widget summary::after {
	content: "\f078"; /* Font Awesome chevron-down */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.75em;
	color: #666;
	transition: transform 0.3s ease;
}

/* Rotate chevron when open - using class for JavaScript control */
.disclosure-widget details.is-open summary::after {
	transform: rotate(180deg);
}

/* Style the content wrapper */
.disclosure-widget .disclosure-content {
	padding: 0 1em 1em 1em;
	color: #555;
	line-height: 1.6;
}

/* Animate the opening of details */
.disclosure-widget details[open] {
	animation: disclosureFadeIn 0.3s ease;
}

/* Style the summary when the widget is open - darker shade to indicate it has been clicked */
.disclosure-widget details.is-open summary {
	background-color: #e8e8e8; /* Slightly darker shade when expanded */
}

/* ===== Header Menu Button Colors ===== */
a.btn.site-menu {
  background-color: #f2efe8 !important;
  color: #333333 !important;
}

a.btn.site-menu:hover {
  background-color: #f2efe8 !important;
  color: #333333 !important;
  box-shadow: 0 0 20px 10px rgba(51, 51, 51, 0.5);
}

/* Arrow color */
#header-arrow {
  color: #f2efe8 !important;
}

@keyframes disclosureFadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.disclosure-widget summary {
		padding: 0.6em 0.8em;
		font-size: 0.95em;
	}
	
	.disclosure-widget .disclosure-content {
		padding: 0 0.8em 0.8em 0.8em;
	}
}