/**
 * eJobs AI Summary - Frontend Styles
 *
 * Matches the Table of Contents (.auto-toc-wrapper) styling.
 * Standalone - no theme dependencies.
 */

/* Wrapper - matches .auto-toc-wrapper */
.eas-wrapper {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 0 0 30px 0;
}

/* Accordion details/summary reset */
.eas-accordion {
    margin: 0;
    padding: 0;
}

/* Header - matches .auto-toc-title */
.eas-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Remove default marker in webkit/blink */
.eas-header::-webkit-details-marker {
    display: none;
}

/* Icon */
.eas-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

/* Title */
.eas-title {
    flex: 0 0 auto;
    margin-left: 14px;
}

/* Chevron */
.eas-chevron {
    margin-left: auto;
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.eas-chevron::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.eas-accordion[open] .eas-chevron::after {
    transform: translate(-50%, -30%) rotate(-135deg);
}

/* Content area */
.eas-content {
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #e9ecef;
}

/* List - inherits article body text */
.eas-wrapper .eas-list {
    font-size: inherit;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    list-style: none;
    color: inherit !important;
}

.eas-list li {
    position: relative;
    padding: 2px 0 2px 14px;
    margin-bottom: 6px;
}

/* Self-contained bullet — independent of theme context */
.eas-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
}

.eas-list li:last-child {
    margin-bottom: 0;
}

/* Loading placeholder — visible while AJAX fetch is in progress so the skeleton
   animation plays. JS removes it on error or replaces it with real content. */
.eas-wrapper.eas-loading {
    display: block;
}

/* Loading skeleton */
.eas-loading .eas-skeleton {
    padding-top: 10px;
}

.eas-skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
    background-size: 200% 100%;
    animation: eas-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

.eas-skeleton-line:nth-child(1) { width: 95%; }
.eas-skeleton-line:nth-child(2) { width: 80%; }
.eas-skeleton-line:nth-child(3) { width: 88%; }

@keyframes eas-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Transition for smooth open/close */
.eas-content {
    overflow: hidden;
}

/* Fade-in when lazy-generated content is injected */
@keyframes eas-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eas-fadein {
    animation: eas-fadein 0.4s ease;
}

/* Accessibility: respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    .eas-skeleton-line {
        animation: none;
    }
    .eas-fadein {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .eas-wrapper {
        padding: 15px 18px;
        margin: 0 0 20px 0;
        border-radius: 6px;
    }
}