/* ============================================
   AURELIUS SITE - ARTICLE PAGES
   Lesson pages, guides and the history index. Uses the palette and
   fonts from styles.css; layout builds on .legal-page / .legal-content.
   ============================================ */

.article-page { padding-top: 110px; }
.article { max-width: 820px; }
.article-title { margin-bottom: 12px; line-height: 1.15; }

.article h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 30px);
    color: var(--deep-crimson);
    margin: 44px 0 14px;
    line-height: 1.25;
    scroll-margin-top: 90px;
}
.article h3 { font-family: var(--font-display); font-size: 21px; color: var(--deep-navy); margin: 28px 0 10px; }
.article p, .article li, .article dd { font-size: 17px; line-height: 1.75; color: var(--dark-stone); }
.article p { margin-bottom: 16px; }
.article ul, .article ol { margin: 0 0 18px 22px; }
.article li { margin-bottom: 8px; }
.article a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--imperial-red); }

.article-crumbs { font-size: 14px; color: var(--stone); margin-bottom: 18px; }
.article-crumbs a { color: var(--stone); text-decoration: none; }
.article-crumbs a:hover { color: var(--crimson); text-decoration: underline; }
.article-kicker { font-size: 13px !important; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bronze) !important; margin-bottom: 8px !important; }
.article-meta { font-size: 14px !important; color: var(--stone) !important; margin-bottom: 26px !important; }
.article-lead { font-family: var(--font-display); font-size: 21px !important; line-height: 1.6 !important; color: var(--deep-navy) !important; margin: 22px 0 8px !important; }
.article-previously a { font-size: 15px; color: var(--stone); font-style: italic; text-decoration: none; }
.article-previously a:hover { text-decoration: underline; }
.article-disclosure { font-size: 14px !important; color: var(--stone) !important; border-left: 3px solid var(--gold); padding-left: 12px; }
.article-note { font-size: 14px !important; color: var(--stone) !important; }

.article-answer {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.14), rgba(232, 220, 196, 0.35));
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 14px;
    padding: 20px 24px 6px;
    margin: 0 0 28px;
}
.article-answer-label { font-size: 13px !important; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark-gold) !important; margin-bottom: 8px !important; }
.article-answer ul { margin-left: 18px; }

.article-figure { margin: 26px 0; }
.article-figure img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 12px; background: var(--parchment); display: block; }
.article-figure figcaption { font-size: 14px; line-height: 1.55; color: var(--stone); margin-top: 10px; }
.article-credit { display: block; margin-top: 4px; font-size: 13px; }
.article-credit a { color: var(--stone) !important; }

.article-quote {
    margin: 10px 0 12px;
    padding: 20px 24px;
    border-left: 4px solid var(--gold);
    background: var(--marble);
    border-radius: 0 12px 12px 0;
}
.article-quote p { font-family: var(--font-display); font-size: 19px !important; font-style: italic; color: var(--deep-navy) !important; margin-bottom: 10px !important; }
.article-quote cite { font-size: 14px; font-style: normal; color: var(--stone); }

.article-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.article-columns dl { margin-bottom: 10px; }
.article-columns dt { font-weight: 600; color: var(--deep-navy); margin-top: 12px; }
.article-columns dd { font-size: 15px !important; line-height: 1.6 !important; }

.article-quiz { background: var(--deep-navy); border-radius: 14px; padding: 6px 26px 18px; margin: 40px 0; }
.article-quiz h2 { color: var(--gold) !important; margin-top: 20px !important; }
.article-quiz p, .article-quiz li, .article-quiz summary { color: var(--parchment) !important; }
.article-quiz-q { font-size: 19px !important; font-weight: 600; color: var(--ivory) !important; }
.article-quiz ol { margin-left: 26px; }
.article-quiz summary { cursor: pointer; font-weight: 600; color: var(--gold) !important; margin: 8px 0; }
.article-quiz-more { font-size: 14px !important; opacity: 0.8; }

.article-faq details { border-bottom: 1px solid var(--dark-marble); padding: 14px 0; }
.article-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--deep-navy); }
.article-faq details p { margin: 10px 0 0; }

.article-cta {
    margin: 46px 0 30px;
    padding: 30px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--deep-crimson), var(--crimson));
    color: var(--ivory);
}
.article-cta p { color: var(--parchment) !important; }
.article-cta-kicker { font-size: 13px !important; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold) !important; margin-bottom: 6px !important; }
.article-cta-title { font-family: var(--font-display); font-size: 23px !important; line-height: 1.4 !important; color: var(--ivory) !important; }
.article-cta .hero-cta { margin-top: 18px; flex-wrap: wrap; }
.article-cta .cta-button { text-decoration: none; }

.article-table { overflow-x: auto; margin: 18px 0 26px; }
.article-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.article-table th, .article-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--dark-marble); line-height: 1.5; }
.article-table thead th { background: var(--deep-navy); color: var(--ivory); font-weight: 600; }
.article-table tbody th { color: var(--deep-navy); font-weight: 600; background: rgba(232, 220, 196, 0.35); }

.article-sources li { font-size: 15px !important; }
.article-links li { font-size: 16px !important; }

.article-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--dark-marble); }
.article-pager a { display: flex; flex-direction: column; max-width: 48%; text-decoration: none !important; font-weight: 600; color: var(--deep-navy) !important; }
.article-pager a[rel="next"] { text-align: right; margin-left: auto; }
.article-pager a span { font-size: 13px; font-weight: 500; color: var(--stone); }

.history-list { list-style: none; margin: 0 0 10px !important; padding: 0; }
.history-list li { margin: 0; border-bottom: 1px solid var(--dark-marble); }
.history-list a { display: grid; gap: 2px; padding: 16px 4px; text-decoration: none !important; }
.history-list a:hover .history-title { color: var(--crimson); }
.history-date { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--bronze); }
.history-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--deep-navy); }
.history-hook { font-size: 15px; line-height: 1.55; color: var(--stone); }

/* Quiz pages */
.quiz-start { font-size: 16px !important; color: var(--stone) !important; margin: 0 0 4px !important; }
.quiz-progress {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
    margin: 22px 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-navy);
}
.quiz-progress[hidden] { display: none; }
.quiz-progress-score { color: #3f7d3f; }
.quiz-bar { flex-basis: 100%; height: 8px; border-radius: 99px; background: var(--dark-marble); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--copper)); border-radius: 99px; transition: width 0.3s ease; }
.quiz-list.is-stepper .quiz-q { display: none; }
.quiz-list.is-stepper .quiz-q.is-current { display: block; }
.quiz-list.is-stepper .quiz-q { padding: 24px 22px 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); }
.quiz-list.is-stepper .quiz-text { font-size: 21px !important; }
.quiz-list.is-stepper .quiz-options button { padding: 15px 16px; font-size: 17px; }
.quiz-next, .quiz-review, .quiz-showall {
    margin: 10px 0 6px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--deep-navy);
    color: var(--gold);
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
.quiz-next[hidden], .quiz-showall[hidden] { display: none; }
.quiz-showall { background: none; color: var(--stone); text-decoration: underline; padding: 6px 0; font-weight: 500; font-size: 15px; }
.quiz-review { background: rgba(255, 255, 255, 0.12); color: var(--ivory); }
.quiz-verdict { font-size: 18px !important; color: var(--ivory) !important; }
.quiz-list { list-style: none; margin: 0 !important; padding: 0; }
.quiz-q { margin: 0 0 22px !important; padding: 20px 20px 10px; border: 1px solid var(--dark-marble); border-radius: 14px; background: #fff; }
.quiz-meta { font-size: 12px !important; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bronze) !important; margin-bottom: 6px !important; }
.quiz-text { font-size: 18px !important; font-weight: 600; color: var(--deep-navy) !important; line-height: 1.5 !important; }
.quiz-n { color: var(--crimson); margin-right: 4px; }
.quiz-options { list-style: none; margin: 0 0 8px !important; padding: 0; display: grid; gap: 8px; }
.quiz-options li { margin: 0 !important; }
.quiz-options button {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--warm-parchment);
    border-radius: 10px;
    background: var(--ivory);
    font: inherit;
    font-size: 16px;
    color: var(--dark-stone);
    cursor: pointer;
}
.quiz-options button:hover:not(:disabled) { border-color: var(--gold); background: #fffdf3; }
.quiz-options button:disabled { cursor: default; }
.quiz-options button.is-correct { background: #e6f2e6; border-color: #3f7d3f; color: #1f4d1f; font-weight: 600; }
.quiz-options button.is-wrong { background: #f8e3e3; border-color: var(--imperial-red); color: var(--deep-crimson); }
.quiz-options-static { list-style: upper-alpha; padding-left: 22px; display: block; }
.quiz-options-static li { font-size: 16px !important; margin-bottom: 4px !important; }
.quiz-answer summary { cursor: pointer; font-weight: 600; color: var(--crimson); padding: 6px 0; }
.quiz-answer p { font-size: 16px !important; margin: 6px 0 8px !important; }
.quiz-result { margin: 26px 0; padding: 24px; border-radius: 14px; background: linear-gradient(135deg, var(--deep-crimson), var(--crimson)); }
.quiz-result p { color: var(--parchment) !important; }
.quiz-final { font-family: var(--font-display); font-size: 26px !important; color: var(--ivory) !important; }
.quiz-more { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-more li { margin: 0 !important; }
.quiz-more a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--dark-marble); border-radius: 12px; text-decoration: none !important; }
.quiz-more a:hover { border-color: var(--gold); }
.quiz-more strong { display: block; color: var(--deep-navy); }
.quiz-more span { display: block; font-size: 14px; line-height: 1.45; color: var(--stone); margin-top: 4px; }
@media (max-width: 768px) {
    .quiz-more { grid-template-columns: 1fr; }
    .quiz-q { padding: 16px 14px 6px; }
}

/* Mobile menu: script.js toggles .active on the toggle and on .nav-links; styles.css hid the links on phones but never
   showed them again, so the menu did nothing. */
.mobile-menu-toggle { position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; }
.mobile-menu-toggle:focus { outline: none; }
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
    .nav-links.active {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 8px 20px 20px;
        background: var(--deep-navy);
        border-top: 1px solid rgba(201, 169, 97, 0.25);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    }
    .nav-links.active a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .nav-links.active a.cta-button-nav { margin-top: 14px; padding: 14px 20px; text-align: center; border-bottom: 0; }
}

/* Floating download button */
.sticky-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    padding: 12px 40px 12px 12px;
    background: var(--deep-navy);
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta[hidden] { display: none; }
.sticky-cta img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.sticky-cta-text { display: flex; flex-direction: column; min-width: 0; margin-right: 4px; }
.sticky-cta-text strong { font-size: 14px; color: var(--ivory); white-space: nowrap; }
.sticky-cta-text span { font-size: 12px; line-height: 1.35; color: var(--parchment); }
.sticky-cta-btn {
    flex: none;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: var(--gold);
    color: var(--dark-navy) !important;
}
.sticky-cta-btn:hover { background: var(--accent-gold); }
.sticky-cta-android { background: transparent; color: var(--gold) !important; border: 1px solid var(--gold); }
.sticky-cta-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    background: none;
    color: var(--parchment);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
/* On a phone, only the button for that phone's store */
.sticky-cta.is-ios .sticky-cta-android,
.sticky-cta.is-android .sticky-cta-ios { display: none; }
.sticky-cta.is-android .sticky-cta-android { background: var(--gold); color: var(--dark-navy) !important; border: 0; }

@media (max-width: 768px) {
    .sticky-cta {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        border-width: 1px 0 0;
        padding: 10px 44px 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .sticky-cta-text strong { font-size: 14px; white-space: normal; line-height: 1.3; }
    .sticky-cta-text span { font-size: 11px; }
    .sticky-cta:not(.is-ios):not(.is-android) .sticky-cta-android { display: none; }
    .footer { padding-bottom: 90px; }
}

@media (max-width: 768px) {
    .article-page { padding-top: 90px; }
    .article-columns { grid-template-columns: 1fr; }
    .article-lead { font-size: 19px !important; }
    .article-quiz, .article-cta { padding-left: 18px; padding-right: 18px; }
}