/**
 * WoodMart Short Description Plugin Styles
 * Version: 1.2.0
 * Enhanced with modern CSS improvements
 */

/* ============================================
   BASE STYLES
   ============================================ */

.wmsd-custom-short-desc {
    margin-bottom: 1.5em;
    line-height: 1.6;
    color: inherit;
    position: relative;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure proper spacing with adjacent elements */
.wmsd-custom-short-desc + * {
    margin-top: 1.5em;
}

/* ============================================
   READ MORE/LESS LINKS
   ============================================ */

.wmsd-read-more-link,
.wmsd-read-less-link {
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    /* Better touch targets for mobile */
    padding: 0.25em 0.5em;
    margin: -0.25em -0.5em;
    border-radius: 3px;
    
    /* Smooth transitions */
    transition: color 0.2s ease, 
                background-color 0.2s ease, 
                transform 0.1s ease;
    
    /* Prevent layout shift */
    will-change: transform;
}

/* Underline effect using pseudo-element */
.wmsd-read-more-link::after,
.wmsd-read-less-link::after {
    content: '';
    position: absolute;
    bottom: 0.25em;
    left: 0.5em;
    right: 0.5em;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

/* Hover state */
.wmsd-read-more-link:hover,
.wmsd-read-less-link:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.wmsd-read-more-link:hover::after,
.wmsd-read-less-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Active state */
.wmsd-read-more-link:active,
.wmsd-read-less-link:active {
    transform: translateY(0);
}

/* Focus state - improved for accessibility */
.wmsd-read-more-link:focus,
.wmsd-read-less-link:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
    /* Remove default browser outline */
    outline-style: solid;
}

/* Focus visible (only keyboard navigation) */
.wmsd-read-more-link:focus:not(:focus-visible),
.wmsd-read-less-link:focus:not(:focus-visible) {
    outline: none;
}

.wmsd-read-more-link:focus-visible,
.wmsd-read-less-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Optional icon support (if you add icons later) */
.wmsd-read-more-link .icon,
.wmsd-read-less-link .icon {
    display: inline-block;
    margin-left: 0.25em;
    transition: transform 0.3s ease;
}

.wmsd-read-more-link:hover .icon {
    transform: translateX(3px);
}

.wmsd-read-less-link:hover .icon {
    transform: translateX(-3px);
}

/* ============================================
   CONTENT CONTAINERS (EXPAND BEHAVIOR)
   ============================================ */

.wmsd-short-content,
.wmsd-full-content {
    /* Smooth opacity transition */
    transition: opacity 0.3s ease;
}

/* Full content specific styles */
.wmsd-full-content {
    animation: wmsdFadeIn 0.3s ease forwards;
}

/* Hidden state */
.wmsd-full-content[style*="display: none"],
.wmsd-full-content[aria-hidden="true"] {
    /* Ensure proper hiding */
    visibility: hidden;
}

/* Visible state */
.wmsd-full-content:not([style*="display: none"]),
.wmsd-full-content[aria-hidden="false"] {
    visibility: visible;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes wmsdFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wmsdFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ============================================
   LOADING STATE
   ============================================ */

.wmsd-custom-short-desc.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

/* Optional loading spinner */
.wmsd-custom-short-desc.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wmsdSpin 0.6s linear infinite;
}

@keyframes wmsdSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Small tablets and large phones */
@media screen and (max-width: 768px) {
    .wmsd-custom-short-desc {
        font-size: 0.95em;
        margin-bottom: 1.25em;
    }
    
    /* Larger touch targets on mobile */
    .wmsd-read-more-link,
    .wmsd-read-less-link {
        padding: 0.35em 0.6em;
        margin: -0.35em -0.6em;
        min-height: 44px; /* iOS recommended minimum */
        display: inline-flex;
        align-items: center;
    }
}

/* Mobile phones */
@media screen and (max-width: 480px) {
    .wmsd-custom-short-desc {
        font-size: 0.9em;
        line-height: 1.5;
    }
}

/* Landscape mobile optimization */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .wmsd-custom-short-desc {
        margin-bottom: 1em;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide interactive elements */
    .wmsd-read-more-link,
    .wmsd-read-less-link {
        display: none !important;
    }
    
    /* Always show full content */
    .wmsd-full-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hide short content */
    .wmsd-short-content {
        display: none !important;
    }
    
    /* Remove animations for print */
    .wmsd-custom-short-desc * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wmsd-read-more-link,
    .wmsd-read-less-link {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
    
    .wmsd-read-more-link:focus,
    .wmsd-read-less-link:focus {
        outline-width: 3px;
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wmsd-read-more-link,
    .wmsd-read-less-link,
    .wmsd-short-content,
    .wmsd-full-content,
    .wmsd-read-more-link::after,
    .wmsd-read-less-link::after,
    .wmsd-read-more-link .icon,
    .wmsd-read-less-link .icon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Instant visibility changes */
    .wmsd-full-content {
        animation: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wmsd-custom-short-desc.loading::after {
        border-color: rgba(255, 255, 255, 0.2);
        border-top-color: currentColor;
    }
    
    .wmsd-read-more-link:focus-visible,
    .wmsd-read-less-link:focus-visible {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* ============================================
   THEME COMPATIBILITY
   ============================================ */

/* Reset potential theme conflicts */
.wmsd-custom-short-desc p:last-child {
    margin-bottom: 0;
}

.wmsd-custom-short-desc a.wmsd-read-more-link,
.wmsd-custom-short-desc a.wmsd-read-less-link {
    /* Override aggressive theme link styles */
    box-shadow: none;
    border: none;
    background-image: none;
}

/* Ensure links don't inherit unwanted button styles */
.wmsd-read-more-link:not(.button),
.wmsd-read-less-link:not(.button) {
    padding: 0.25em 0.5em;
    background: transparent;
    border-radius: 3px;
}

/* ============================================
   UTILITY CLASSES (OPTIONAL)
   ============================================ */

/* Compact version (can be added via filter) */
.wmsd-custom-short-desc.wmsd-compact {
    margin-bottom: 1em;
    font-size: 0.9em;
}

/* Expanded version (more spacing) */
.wmsd-custom-short-desc.wmsd-expanded {
    margin-bottom: 2em;
    line-height: 1.8;
}

/* Center aligned version */
.wmsd-custom-short-desc.wmsd-center {
    text-align: center;
}



/* ============================================
   BROWSER-SPECIFIC FIXES
   ============================================ */

/* Safari-specific fixes */
@supports (-webkit-hyphens: none) {
    .wmsd-custom-short-desc {
        /* Fix Safari font rendering */
        -webkit-text-size-adjust: 100%;
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    .wmsd-read-more-link:focus,
    .wmsd-read-less-link:focus {
        /* Better outline in Firefox */
        outline-offset: 2px;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animated elements */
.wmsd-read-more-link,
.wmsd-read-less-link,
.wmsd-full-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Optimize rendering */
.wmsd-custom-short-desc {
    contain: layout style;
}