/* Mobile menu chevron fix */
.mobile-menu svg.text-gray-400 {
    color: #ffffff !important;
    opacity: 0.8;
}

.mobile-menu svg.text-gray-400:hover {
    opacity: 1;
    color: var(--color-sky-light-blue) !important;
}

.mobile-menu button[data-submenu-idx] {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
}

.mobile-menu button[data-submenu-idx]:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu button[data-submenu-idx]:active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Make sure the chevrons are clickable */
.mobile-menu svg {
    pointer-events: none;
}

.mobile-menu button[data-submenu-idx] {
    pointer-events: auto;
}

/* Fix for persistent hover state */
.mobile-menu button[data-submenu-idx]:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure submenu visibility */
.mobile-submenu:not(.hidden) {
    display: block !important;
}

/* Improve touch targets */
.mobile-menu button[data-submenu-idx] {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Responsive video embed hardening --- */
.video-embed > div {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 */
    overflow: hidden !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0 !important;
}
.video-embed iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
}

/* Universal video container fixes to eliminate white space */
.youtube-facade,
.youtube-embed,
.lazy-youtube,
.video-embed {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    overflow: hidden !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0 !important;
}

.youtube-facade iframe,
.youtube-embed iframe,
.lazy-youtube iframe,
.video-embed iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
}

/* Remove any extra spacing from video containers */
.youtube-facade + *,
.youtube-embed + *,
.lazy-youtube + *,
.video-embed + * {
    margin-top: 1rem !important;
}

/* Ensure video containers don't have extra bottom margin */
.youtube-facade,
.youtube-embed,
.lazy-youtube,
.video-embed {
    margin-bottom: 1rem !important;
}

/* Fix for any wrapper divs around videos */
.relative.w-full[style*="padding-bottom: 56.25%"] {
    margin-bottom: 1rem !important;
}

.relative.w-full[style*="padding-bottom: 56.25%"] .youtube-facade,
.relative.w-full[style*="padding-bottom: 56.25%"] .youtube-embed,
.relative.w-full[style*="padding-bottom: 56.25%"] .lazy-youtube,
.relative.w-full[style*="padding-bottom: 56.25%"] .video-embed {
    margin-bottom: 0 !important;
}

/* --- Homepage image sizing safety --- */
.content-grid img,
.content-grid-2-left img,
.content-grid-2-right img {
    max-width: 420px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}
.card-embedded-image img {
    width: 100% !important;
    height: 192px !important; /* h-48 */
    object-fit: cover !important;
}

@media (max-width: 768px) {
  .content-grid img,
  .content-grid-2-left img,
  .content-grid-2-right img {
      max-width: 100% !important;
  }
}

/* Brave browser specific chevron fixes */
@supports (-webkit-appearance: none) {
    .mobile-menu svg {
        width: 1rem !important;
        height: 1rem !important;
        min-width: 1rem !important;
        min-height: 1rem !important;
        max-width: 1rem !important;
        max-height: 1rem !important;
        flex-shrink: 0 !important;
    }
    
    .navbar-menu svg {
        width: 0.75rem !important;
        height: 0.75rem !important;
        min-width: 0.75rem !important;
        min-height: 0.75rem !important;
        max-width: 0.75rem !important;
        max-height: 0.75rem !important;
        flex-shrink: 0 !important;
    }
}

/* Force consistent chevron sizing across all browsers */
.mobile-menu svg,
.navbar-menu svg {
    flex-shrink: 0 !important;
    display: block !important;
}

.mobile-menu svg {
    width: 1rem !important;
    height: 1rem !important;
}

.navbar-menu svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
}