/* ---- Learn section (/learn/, /learn/<course>/, /learn/bundle/) ----------

   Loaded by base.njk only where class="ee-learn" appears (the <main> of the
   three templates in src/learn/). The gray header band is the one /blog/ and
   /services/ use (ee-blog-index.css); this file adds the price and buy link
   to it and lays out everything under it.

   Sizes are in px, as in the header band, because body resolves to 28.8px
   sitewide and rem or em would inherit that. Buttons are the site's
   .round-btn classes (components/ee-btn.css) and keep their own focus
   indicators; links here get the 3px brand blue outline the breadcrumb and
   category links use. */

.ee-learn {
    --learn-border: #C9CDDA;
    color: var(--ee-black);
    font-family: 'Lato', sans-serif;
}

.ee-learn p,
.ee-learn li {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ee-black);
}

.ee-learn h2 {
    margin: 0 0 16px;
    font-family: 'Lato', sans-serif;
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ee-black);
    text-align: start;
    text-wrap: balance;
}

.ee-learn h3 {
    margin: 0 0 8px;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ee-black);
}

/* Links in text: brand blue and underlined, as the style guide asks. */
.ee-learn-wrap a:not(.round-btn),
.ee-learn .archive-description a:not(.round-btn) {
    color: var(--ee-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.ee-learn-wrap a:not(.round-btn):hover,
.ee-learn .archive-description a:not(.round-btn):hover {
    text-decoration-thickness: 2px;
}

.ee-learn a:not(.round-btn):focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The column under the header band: the band's own 1240px, so the content
   lines up with the title above it. */
.ee-learn-wrap {
    max-width: 1240px;
    margin-inline: auto;
    padding: 48px 20px 72px;
}

.ee-learn-wrap > section + section {
    margin-top: 72px;
}

.ee-learn ul,
.ee-learn ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}

/* The legacy theme leaves paragraphs here with no space under them. */
.ee-learn-wrap p {
    margin: 0 0 16px;
}

.ee-learn li + li {
    margin-top: 6px;
}

.ee-learn li::marker {
    color: var(--ee-blue);
    font-weight: 700;
}

/* ---- Price, access and the buy link (components/learn-buy.njk) ---------- */

.ee-learn-price,
.ee-learn-price-line,
.ee-learn-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

.ee-learn .ee-learn-price-amount {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ee-black);
}

.ee-learn .ee-learn-price-terms,
.ee-learn .ee-learn-access,
.ee-learn .ee-learn-price-line span + span,
.ee-learn .ee-learn-card-price span + span {
    font-size: 16px;
    font-weight: 700;
    color: var(--ee-dark-gray);
}

.ee-learn .ee-learn-access {
    margin: 4px 0 20px;
}

/* The certificate line (courses with `certificate`) sits right under the
   access line, so the gap comes after the pair. */
.ee-learn .ee-learn-access:has(+ .ee-learn-access) {
    margin-bottom: 0;
}

/* 15px and dark gray (7.4:1 on white, 6.4:1 on the band's gray). */
.ee-learn .ee-learn-note {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ee-dark-gray);
}

/* A long course name wraps inside the button instead of widening it. */
.ee-learn .round-btn {
    white-space: normal;
}

/* ---- Header band additions ---------------------------------------------- */

.ee-learn .ee-learn-signin {
    margin-top: 16px;
    font-size: 17px;
}

/* The course's (or bundle's) card image from Thinkific, under the title and
   its yellow bar in the band's left column, which is otherwise empty on wide
   screens. The column becomes a flex column so the image can follow the bar,
   which is the column's ::after. */
.ee-learn .category-masthead-title:has(.ee-learn-masthead-image) {
    display: flex;
    flex-direction: column;
}

.ee-learn .ee-learn-masthead-image {
    order: 1;
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 28px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.ee-learn-masthead-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 24px;
}

/* ---- Bundle feature on /learn/ ------------------------------------------ */

/* A white box with a brand blue edge, so it reads as one offer apart from the
   course cards that follow. */
.ee-learn-bundle {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 56px;
    padding: 32px 28px;
    border: 2px solid var(--ee-blue);
    border-radius: 14px;
    background: #fff;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.ee-learn-bundle .ee-learn-checklist {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .ee-learn-bundle {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        align-items: center;
        padding: 40px 48px;
    }

    .ee-learn-bundle .ee-learn-buy {
        padding-left: 40px;
        border-left: 1px solid var(--learn-border);
    }
}

.ee-learn-bundle-text p {
    max-width: 62ch;
}

/* ---- Course cards on /learn/ -------------------------------------------- */

/* role="list" in the markup is deliberate: with the bullets removed, Safari
   stops announcing the list and how many items it has. */
.ee-learn .ee-learn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    /* Every card the same height, in every row, not only within one row. */
    grid-auto-rows: 1fr;
    gap: 28px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.ee-learn .ee-learn-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--learn-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.ee-learn-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg-light-gray);
}

.ee-learn-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 24px;
}

.ee-learn-card-body h3 a {
    text-decoration: none !important;
}

.ee-learn-card-body h3 a:hover {
    text-decoration: underline !important;
}

.ee-learn .ee-learn-card-body > p {
    margin: 0 0 16px;
    font-size: 17px;
}

/* Price and the two links sit at the bottom of every card, so they line up
   across a row whatever the length of the summary above. The selector names
   .ee-learn-card-body so it outranks the `> p` rule above, which otherwise
   reset this margin-top to 0 and left the prices at different heights. */
.ee-learn .ee-learn-card-body > .ee-learn-card-price {
    margin-top: auto;
    margin-bottom: 16px;
}

.ee-learn .ee-learn-card-price .ee-learn-price-amount {
    font-size: 28px;
}

.ee-learn-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

/* Links that stand alone rather than in a sentence: 24px tall at least
   (WCAG 2.5.8), from the line height alone. Links inside a sentence are
   exempt. */
.ee-learn .ee-learn-more,
.ee-learn .ee-learn-back a,
.ee-learn .ee-learn-crosssell p:last-child a {
    display: inline-block;
    min-height: 24px;
    font-size: 18px;
    line-height: 1.5;
}

.ee-learn-courses > .ee-learn-note {
    margin-top: 20px;
}

/* ---- Frequently asked questions ----------------------------------------- */

/* Native <details>, so they open with Enter or Space and screen readers
   announce them as expanded or collapsed with no script. The marker is a
   chevron drawn with two borders, so nothing is read out. */
.ee-learn-faq {
    max-width: 800px;
}

.ee-learn-faq details {
    border-top: 1px solid var(--learn-border);
}

.ee-learn-faq details:last-of-type {
    border-bottom: 1px solid var(--learn-border);
}

.ee-learn-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 14px 4px;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ee-black);
    cursor: pointer;
    list-style: none;
}

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

.ee-learn-faq summary::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    margin-right: 6px;
    border-right: 3px solid var(--ee-blue);
    border-bottom: 3px solid var(--ee-blue);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 150ms ease;
}

.ee-learn-faq details[open] > summary::after {
    transform: translateY(25%) rotate(-135deg);
}

.ee-learn-faq summary:hover {
    color: var(--ee-blue);
}

.ee-learn-faq summary:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.ee-learn-faq details > div {
    padding: 0 4px 12px;
}

.ee-learn-faq details p {
    max-width: 62ch;
}

/* ---- Course and bundle pages -------------------------------------------- */

/* One column on phones, in reading order: what the course covers, then the
   price, then the bundle. From 960px the price and the bundle move to a
   column on the right, beside the course content. */
.ee-learn-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

@media (min-width: 960px) {
    .ee-learn-detail {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 48px 72px;
        align-items: start;
    }

    /* The price stays in view while the course content scrolls past. */
    .ee-learn-side {
        position: sticky;
        top: 24px;
    }
}

.ee-learn-detail-main {
    max-width: 720px;
}

.ee-learn-detail-main > h2:not(:first-child) {
    margin-top: 48px;
}

.ee-learn-detail-main p {
    max-width: 62ch;
}

/* A full curriculum (course.njk): each chapter is a heading with its
   lessons listed under it. The chapter list keeps its order for screen
   readers but drops the numbers, which the headings make redundant. */
.ee-learn-curriculum {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-learn-curriculum > li + li {
    margin-top: 28px;
}

.ee-learn .ee-learn-curriculum h3 {
    font-size: 20px;
}

.ee-learn-lessons {
    margin: 0;
    padding-left: 1.25em;
}

.ee-learn .ee-learn-lessons li {
    margin: 0 0 4px;
    line-height: 1.5;
}

.ee-learn-side {
    display: grid;
    gap: 28px;
}

.ee-learn-panel {
    padding: 28px;
    border: 2px solid var(--ee-blue);
    border-radius: 14px;
    background: #fff;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.05);
}

.ee-learn-panel h2,
.ee-learn-crosssell h2 {
    font-size: 22px;
    margin-bottom: 12px;
}

.ee-learn-crosssell {
    padding: 28px;
    border-radius: 14px;
    background: var(--bg-light-gray);
}

.ee-learn-crosssell p:last-child {
    margin-bottom: 0;
}

/* Under both columns, not in the right one. */
.ee-learn .ee-learn-back {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 18px;
}

/* The bundle's course list: numbered, with each title as a link. */
.ee-learn-included > li + li {
    margin-top: 20px;
}

.ee-learn-included h3 {
    margin-bottom: 4px;
}

.ee-learn-included p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ee-learn-faq summary::after {
        transition: none;
    }
}

@media (forced-colors: active) {
    .ee-learn-faq summary::after {
        border-color: CanvasText;
    }
}