/* Houten Diagram Styles */
.highlight-point {
    stroke-width: 3;
    cursor: pointer;
    transition: all 0.3s ease;
}

.highlight-point:hover {
    stroke-width: 4;
}

.connector-line {
    stroke-width: 2;
    stroke-dasharray: 5,5;
    opacity: 0.8;
}

.explanation-box {
    fill: white;
    stroke-width: 3;
    rx: 8;
    ry: 8;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}

.explanation-text {
    font-size: 10px;
    fill: #2c3e50;
    font-weight: 600;
}

.explanation-description {
    font-size: 9px;
    fill: #34495e;
    font-weight: normal;
}

.image-background {
    filter: brightness(1.05) contrast(1.02);
}

.highlight-group {
    opacity: 1;
}

/* Ensure the diagram container is properly constrained */
#houten-design-diagram {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Mobile-specific adjustments for diagram only */
@media (max-width: 768px) {
    /* Diagram container specific adjustments */
    #houten-design-diagram {
        max-height: 70vh; /* Limit height to 70% of viewport */
    }
    
    /* Diagram-specific elements */
    #houten-design-diagram .highlight-point {
        stroke-width: 2 !important;
    }
    
    #houten-design-diagram .connector-line {
        stroke-width: 1.5 !important;
        stroke-dasharray: 3,3 !important;
    }
    
    #houten-design-diagram .explanation-box {
        stroke-width: 2 !important;
        rx: 4 !important;
        ry: 4 !important;
    }
}

@media (max-width: 480px) {
    #houten-design-diagram {
        max-height: 60vh;
    }
    
    #houten-design-diagram .connector-line {
        stroke-width: 1 !important;
        stroke-dasharray: 2,2 !important;
    }
    
    #houten-design-diagram .highlight-point {
        stroke-width: 1.5 !important;
    }
}