/* Adopt a Wolfram eTextbook for Your Course series-specific styles

   developer:   yhechler
   requires:    framework
   ========================================================================== */

:root {
    --color-secondary: #dd1100;
    --separator: #dfdfdf;
}

.series .gridular{
    padding-top: 3rem;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion-item h3 {
    border-top: 1px solid #ccc;
    color: #3a8787;
    font-size: 1.313rem;
    font-weight: 600;
    margin: 1.5rem 0 -0.4rem 0;
    padding: 1.2rem 0 1.5rem 0;
}

h3.accordion-toggle:hover {
    color: #3b7978;
}

.accordion-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    user-select: none;
}

.accordion-content {
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    padding: 0 1.3rem;
    transition:
        max-height 0.45s ease,
        padding-top 0.45s ease,
        padding-bottom 0.45s ease;
}

.accordion-content.highlight span {
    color: #3b7978;
    margin-bottom: 15px;
}

.accordion-content.highlight ul {
    margin: 0.9375rem 0 1.6875rem 0;
}

.accordion-item.active > .accordion-content {
    border-bottom: 1px solid #ccc;
    max-height: none;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.accordion-item .accordion-content h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 1rem 0;
}

.accordion-item .accordion-content h4.orange {
    border-top: 1px solid #dcdcdc;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    padding: 2rem 0 0;
}

.accordion-item .row-flex {
    gap: 2rem;
    margin: 0 auto;
}

.accordion-item .column {
    flex: 1;
}

.accordion-item .column > img {
    height: auto;
    max-width: 25rem;
}

.accordion-item .column span {
    color: #222222;
    font-size: 1.25rem;
    font-weight: 600;
}

.accordion-item .column p {
    color: #555;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Icon Toggle (open/close icons)
   ========================================================================== */

.icon-open {
    display: inline-flex;
    opacity: 1;
}

.icon-close {
    display: none;
    opacity: 0;
}

.accordion-item.active .icon-open {
    display: none;
    opacity: 0;
}

.accordion-item.active .icon-close {
    display: inline-block;
    opacity: 1;
}

.icon-toggle {
    display: inline-block;
    height: 6px;
    position: relative;
    width: 10px;
}

.icon-toggle img {
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.2s ease;
}

#adopt-a-wolfram-etextbook-for-your-course .icon-open:hover {
    content: url("/series/etextbooks/img/close-teal-hover.svg");
}

#adopt-a-wolfram-etextbook-for-your-course .icon-close:hover {
    content: url("/series/etextbooks/img/open-teal-hover.svg");
}

/* ==========================================================================
   Adopt a Wolfram eTextbook — section-specific overrides
   ========================================================================== */

#adopt-a-wolfram-etextbook-for-your-course > .accordion-content {
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0;
}

#adopt-a-wolfram-etextbook-for-your-course.active > .accordion-content {
    border-bottom: 1px solid #ccc;
    border-top: none;
    margin: 0 0 20px 0;
    padding: 0;
}

#adopt-a-wolfram-etextbook-for-your-course.active > .accordion-content h4:first-child {
    margin: 0 0 .75rem 0;
    padding: 0;
}

/* ==========================================================================
   Red Square List
   ========================================================================== */

.red-square-list {
    list-style: none;
    padding-left: 1.5rem;
}

.red-square-list li {
    position: relative;
}

.red-square-list li::before {
    background-color: #df6430;
    content: "";
    height: 0.375rem;
    left: -1rem;
    position: absolute;
    top: 0.375em;
    width: 0.4rem;
}

.red-square-list li + li {
    margin-top: 0.375rem;
}

/* ==========================================================================
   Flex Container (text + image, 600px breakpoint)
   ========================================================================== */

.flex-container-600 {
    align-items: stretch;
    display: flex;
    gap: 2rem;
}

.flex-container-600 > div:first-child {
    flex: 0 1 637px;
    max-width: 637px;
    min-width: 0;
}

.flex-container-600 .image-container {
    display: flex;
    flex: 1 1 330px;
    max-width: 330px;
}

.flex-container-600 .image-container img {
    height: auto;
    width: 100%;
}

/* ==========================================================================
   FAQ Items
   ========================================================================== */

.faq-item {
    border-bottom: 1px solid var(--separator);
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
}

.faq-item:last-of-type {
    border-bottom: none;
}

.faq-item.margin-b-0__600 {
    /* margin-bottom: 0; */
}

.faq-item.border-b-n-1200 {
    border-bottom: none;
}

.faq-item summary {
    color: #222;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3rem;
    list-style: none;
    padding-right: 2rem;
    position: relative;
}

.faq-item summary:hover {
    color: #df6430;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    background-image: url("/series/etextbooks/img/open-orange.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 6px;
    position: absolute;
    right: 0px;
    top: 8px;
    width: 10px;
}

.faq-item[open] summary::after {
    background-image: url("/series/etextbooks/img/close-orange.svg");
}

.faq-answer {
    color: #222;
    margin-top: 0.75rem;
}

/* ==========================================================================
   Questions (FAQ grid)
   ========================================================================== */

.questions {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.questions > div > div:not(:last-of-type) {
    margin-bottom: 1.5rem;
}

.questions h4,
.questions p {
    font-size: 1rem;
    line-height: 1.5;
}

.questions h4 {
    color: rgb(34, 34, 34);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.questions p {
    color: rgb(85, 85, 85);
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width: 1200px) {
    .flex-container-600 .image-container{  
        max-width: 280px; 
   }
}

@media (max-width: 900px) {
    .flex-container-600 > div:first-child {
        flex: 1 1 50%;
        max-width: 50%;
    }

    .flex-container-600 .image-container {
        flex: 1 1 50%;
        max-width: 50%;
    }

    .flex-container-600 .image-container img {
        height: auto;
        max-height: 230px;
        /* max-width: 100%; */
        /* object-fit: cover; */
        width: auto;
    }
}

@media (max-width: 600px) {
    .questions {
        grid-template-columns: 1fr;
    }

    .flex-container-600 {
        flex-direction: column;
    }

    .flex-container-600 > div:first-child {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .flex-container-600 .image-container {
        flex: 1 1 auto;
        max-width: 360px;
        width: 100%;
    }
    .faq-item, .faq-item.border-b__600 {
        border-bottom: 1px solid var(--separator);
    }

}

@media (max-width: 320px) {
}