/**
 * Mobile-only Category Description Read More Styles
 */

/* Only applyh these styles on mobile devices */
@media only screen and (max-width: 767px) {
    .category-description-container {
        position: relative;
        margin-bottom: 20px;
    }
    
    /* Basic collapsed state */
    .category-description-content {
        overflow: hidden;
        max-height: 4.5em; /* Approximately 3 lines of text */
        line-height: 1.5em;
    }
    
    /* Expanded state */
    .category-description-content.expanded {
        max-height: none;
    }
    
    /* Read more link */
    .read-more-link {
        text-align: left;
        margin-top: 0px;
        cursor: pointer;
        display: inline-block; /* Changed from block to inline-block */
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove tap highlight on iOS */
        padding: 0 10px; /* Add 10px padding on left and right */
        margin-left: -10px; /* Offset the padding to maintain alignment */
    }
    
    .read-more-link span {
        color: #000;
        font-weight: 400;
        text-decoration: underline;
        font-size: .9em;
        display: inline-block;
        padding-top: 0px;
        padding-bottom: 6px;
    }
    
    .read-more-link span:hover {
        color: #000;
    }
    
    .read-more-link.hidden {
        display: none;
    }
}

/* On desktop, ensure normal display without truncation */
@media only screen and (min-width: 768px) {
    .category-description-content {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .read-more-link {
        display: none !important;
    }
}

/* Styles for Category Description Read More */

@media (max-width: 768px) {
    .category-description-container .category-description-content {
        position: relative;
        overflow: hidden;
        transition: max-height 0.25s ease-out; /* Slightly smoother transition */
        max-height: 39px; /* Approx 2 lines based on 1.5 line-height */
        line-height: 1.5; /* Ensure consistent line height */
        margin-bottom: 0; /* Remove bottom margin when collapsed */
    }

    .category-description-container .category-description-content.expanded {
        max-height: 1000px; /* Adjust if needed, large enough for content */
        /* Add back margin/padding when expanded if needed */
        /* margin-bottom: 1em; */
    }

    .category-description-container .read-more-link {
        display: block; /* Ensure it's visible */
        padding: 0px 7px 7px 10px;
        cursor: pointer;
        position: relative;
        /* margin-top: -3px; /* Adjust as needed based on line-height */
        text-align: left;
        background: #fff; /* Match page background */
        z-index: 1; /* Ensure it's above content fade if used */
    }

    .category-description-container .read-more-link.hidden {
        display: none;
    }

    .category-description-container .read-more-link span {
        color: #111111; /* Link color */
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 400; /* Semi-bold */
    }
}

/* Styles for non-mobile - ensure it's fully visible */
@media (min-width: 769px) {
     .category-description-container .category-description-content {
         max-height: none !important; /* Ensure full height */
         overflow: visible !important;
     }
     .category-description-container .read-more-link {
         display: none !important; /* Hide link on desktop */
     }
}