/**
 * Puppy Parents Shortcode Styles - WCAG Compliant Version
 * 
 * Provides visual styling for the [puppy-parents] shortcode output
 * Updated for WCAG 2.1 AA compliance
 */

/* Main container with flexbox layout */
.puppy-parents-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Link styling with focus indicators - inherits colors from WordPress customizer */
.puppy-parents-link {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    padding: 4px; /* Add padding for larger touch target */
    margin: -4px; /* Negative margin to maintain visual spacing */
    min-height: 44px; /* Ensure minimum target size */
    min-width: 44px; /* Ensure minimum target size */
}

/* Focus indicator for keyboard navigation */
.puppy-parents-link:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Hover state inherits from WordPress customizer */

/* Image container with accessible size */
.puppy-parents-image-container {
    width: 44px; /* Increased to meet WCAG target size */
    height: 44px; /* Increased to meet WCAG target size */
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border-radius: 4px; /* Slightly larger radius for bigger container */
}

/* Focus indicator for image container */
.puppy-parents-link:focus .puppy-parents-image-container {
    box-shadow: 0 0 0 2px #005fcc;
}

/* Image styling with fallback background */
.puppy-parents-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: #f5f5f5; /* Fallback if image fails to load */
}

/* Parent name styling with accessible contrast */
.puppy-parents-name {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Hover and focus effects for better accessibility - removed explicit underline since WordPress customizer handles this */

.puppy-parents-link:hover .puppy-parents-image-container,
.puppy-parents-link:focus .puppy-parents-image-container {
    opacity: 0.9;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .puppy-parents-link {
        border: 1px solid;
    }
    
    .puppy-parents-link:focus {
        outline: 3px solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .puppy-parents-link:hover .puppy-parents-image-container,
    .puppy-parents-link:focus .puppy-parents-image-container {
        transition: none;
        opacity: 1; /* Remove opacity change for users who prefer reduced motion */
    }
}