* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
	}
	.video-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	.video-thumbnail-container:hover .video-overlay {
		opacity: 1;
	}
	.play-button {
		width: 80px;
		height: 80px;
		background: rgba(234, 179, 8, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(1);
		transition: transform 0.3s ease;
		pointer-events: auto;
		cursor: pointer;
	}
	.video-thumbnail-container:hover .play-button {
		transform: scale(1.1);
	}
	.aspect-video {
		aspect-ratio: 16 / 9;
	}
	.video-controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
		padding: 20px;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.html5-video-player:hover .video-controls {
		opacity: 1;
	}
	.progress-bar {
		height: 5px;
		background: rgba(255,255,255,0.3);
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
	}
	.progress-bar-fill {
		height: 100%;
		background: #eab308;
		width: 0%;
		transition: width 0.1s linear;
	}
	.control-button {
		background: none;
		border: none;
		color: white;
		cursor: pointer;
		padding: 8px;
		transition: color 0.2s;
	}
	.control-button:hover {
		color: #eab308;
	}
	video::-webkit-media-controls {
		display: none !important;
	}
	video::-webkit-media-controls-enclosure {
		display: none !important;
	}

/* Submenu links look consistent */
.submenu-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  line-height:1.2;
}
.submenu-link:hover,
.submenu-link:focus{
  outline: none;
  background: rgba(250, 204, 21, 0.15); /* yellow-ish */
  color: #facc15; /* Tailwind yellow-400 */
}

/* Desktop: open submenu on hover and on keyboard focus */
@media (min-width: 768px){
	li.group::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		top:100%;
		height:0.5em;          /* size of the gap you want visually */
	}
  li.group:hover > .submenu,
  li.group:focus-within > .submenu{
    display:block;
  }
}

/* Rotate chevron when submenu is open (we toggle .is-open in JS for mobile) */
.submenu-parent-open .submenu-chevron{
  transform: rotate(180deg);
}

section ul{
	list-style: disc;
	list-style-position: inside;
	padding-left: 0.75em;
}