/* 
 * Udemy-like Accordion Design
 * Replicated the clean, minimal style of Udemy's course content accordion.
 * [LOCKED] - DO NOT MODIFY WITHOUT USER WARNING
 */

/* Section Heading */
h2.acme-section__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2d2f31 !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02rem !important;
}

/* Container */
.acme-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid #d1d7dc !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Ensure ID-specific styling matches the accordion base styles */
#acme-course-accordion,
.acme-faq-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid #d1d7dc !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Item Wrapper */
.acme-accordion__item {
    display: block !important;
    background: #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #d1d7dc !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    /* Explicitly forced to 0px */
    transition: background-color 150ms cubic-bezier(0, 0, 0.38, 0.9) !important;
}

.acme-accordion__item--hidden {
    display: none !important;
}

.acme-accordion__item:hover {
    border: none !important;
    border-bottom: 1px solid #d1d7dc !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Explicitly force first item to be square */
.acme-accordion__item:first-child,
.acme-accordion__item:first-child .acme-accordion__header,
.acme-accordion__item:first-child:hover,
.acme-accordion__item:first-child:focus,
.acme-accordion__item:first-child:active,
.acme-accordion__item:first-child .acme-accordion__header:hover,
.acme-accordion__item:first-child .acme-accordion__header:focus,
.acme-accordion__item:first-child .acme-accordion__header:active {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-radius: 0px !important;
}

.acme-accordion__item:last-child {
    border-bottom: 0 !important;
}

/* Accordion Header */
.acme-accordion__header {
    /* Layout & Box Model */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Left Align Content */
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 24px !important;
    /* Udemy Standard Layout padding */
    margin: 0 !important;
    gap: 12px !important;
    /* Space between Chevron and Title */

    /* Visuals */
    background-color: #f7f9fa !important;
    /* Udemy Light Gray Background */
    border: none !important;
    border-radius: 0px !important;
    /* Explicitly forced to 0px */
    /* Square corners */
    box-shadow: none !important;

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    /* Kept at 700, but using system font stack for better rendering */
    color: #2d2f31 !important;
    /* Udemy Dark Gray */
    text-align: left !important;
    line-height: 1.4 !important;

    /* Interaction */
    cursor: pointer !important;

    outline: none !important;
    transition: background-color 150ms cubic-bezier(0, 0, 0.38, 0.9) !important;
}

.acme-accordion__header:hover,
.acme-accordion__header:focus,
.acme-accordion__header:active {
    background-color: #e3e7ea !important;
    color: #2d2f31 !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0px !important;
    outline: none !important;
}

.acme-accordion__header:focus-visible {
    outline: 2px solid #1c1d1f !important;
    outline-offset: -2px !important;
}



/* Icon / Chevron */
.acme-accordion__icon {
    /* Reset any "Circle" or complex styles */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0px !important;
    /* Explicitly forced to 0px */
    padding: 0 !important;

    /* Positioning - Move to Left */
    order: -1 !important;
    margin-right: 0 !important;
    /* Handled by gap on parent */

    /* Color */
    color: #1c1d1f !important;
}

.acme-accordion__icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    /* Increased for visibility */
    fill: none !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.acme-accordion__item.is-open .acme-accordion__icon svg {
    transform: rotate(180deg) !important;
}


/* Title Text Wrapper (if exists) */
.acme-accordion__title {
    flex-grow: 1 !important;
    /* Take up space */
    font-weight: 700 !important;
    color: #1c1d1f !important;
}

/* Meta info (duration etc) on right */
.acme-accordion__header-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 400 !important;
    color: #6a6f73 !important;
    /* Udemy Light Text */
    font-size: 14px !important;
    margin-left: auto !important;
    line-height: 1.4 !important;
}

.acme-accordion__meta-item,
.acme-accordion__meta-separator {
    color: inherit !important;
}

/* Cleaned up redundant rules */

/* Explicitly force border on FAQ items to match Course */
.acme-faq-accordion .acme-accordion__item {
    border-bottom: 1px solid #d1d7dc !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

#acme-course-accordion .acme-accordion__body,
.acme-faq-accordion .acme-accordion__body {
    background-color: #ffffff !important;
    border-top: 0 solid transparent !important;
    /* Start with 0 width border */
    color: #1c1d1f !important;

    /* Smooth grid-based animation */
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease-in-out, opacity 0.2s ease !important;
    opacity: 0;

    /* Ensure no radius on content either */
    border-radius: 0px !important;
    padding: 0 !important;
}

#acme-course-accordion .acme-accordion__item.is-open .acme-accordion__body,
.acme-faq-accordion .acme-accordion__item.is-open .acme-accordion__body {
    grid-template-rows: 1fr;
    border-top: 1px solid #d1d7dc !important;
    opacity: 1;
}

#acme-course-accordion .acme-accordion__content,
.acme-faq-accordion .acme-accordion__content {
    overflow: hidden;
    display: block;
    padding: 0 !important;
    min-height: 0;
}

#acme-course-accordion .acme-accordion__content>*,
.acme-faq-accordion .acme-accordion__content>* {
    padding: 16px 24px !important;
}

/* Fallback padding when content wrapper is missing */
#acme-course-accordion .acme-accordion__body> :not(.acme-accordion__content),
.acme-faq-accordion .acme-accordion__body> :not(.acme-accordion__content) {
    padding: 16px 24px !important;
}

/* Curriculum List Styles (Udemy Replication) */
.acme-curriculum-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.acme-curriculum-item {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    gap: 16px !important;
}

.acme-curriculum-item__left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex: 1 !important;
}

.acme-curriculum-item__left .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: #6a6f73 !important;
    margin-top: 3px !important;
}

.acme-curriculum-item__title {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #2d2f31 !important;
    line-height: 1.4 !important;
}

.acme-curriculum-item__right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: nowrap !important;
}

.acme-curriculum-preview-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5624d0 !important;
    text-decoration: underline !important;
}

.acme-curriculum-preview-link:hover {
    color: #401b9c !important;
}

.acme-curriculum-duration {
    font-size: 14px !important;
    color: #6a6f73 !important;
    min-width: 40px !important;
    text-align: right !important;
}

.acme-curriculum-description {
    line-height: 1.6 !important;
    color: #2d2f31 !important;
}

/* 
 * Controls & Buttons Helper 
 * Removing border-radius for buttons associated with the accordion 
 */
.acme-expand-all-btn,
#acme-expand-all,
#acme-show-more-sections,
.acme-show-more-sections-wrapper .acme-btn {
    border-radius: 0px !important;
}

/* Add specialized styling for "Expand all" link style button */
.acme-expand-all-btn {
    background: transparent !important;
    border: none !important;
    color: var(--acme-blue-primary, #5624d0) !important;
    font-weight: 700 !important;
    padding: 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.acme-expand-all-btn:hover {
    color: var(--acme-blue-dark, #401b9c) !important;
}