/* ======================================================
   MONEY & FINANCE
   Loaded after main.css on Money & Finance pages.

   Category colour:
   #14766f

   Soft category colour:
   #e5f4f1
   ====================================================== */


/* ------------------------------------------------------
   CATEGORY VARIABLES
   ------------------------------------------------------ */

.money-finance-page {
    --money-color: #14766f;
    --money-dark: #0d554f;
    --money-deep: #083f3b;
    --money-soft: #e5f4f1;
    --money-pale: #f3faf8;
}


/* ======================================================
   HERO
   ====================================================== */

.money-finance-page .topic-hero {
    min-height: 415px;
}

.money-finance-page .topic-hero-inner {
    padding-top: 58px;
    padding-bottom: 58px;
}

.money-finance-page .topic-hero-content {
    max-width: 800px;
}

.money-finance-page .topic-hero h1 {
    font-size: clamp(46px, 5.2vw, 66px);
    line-height: 1.01;
}

.money-finance-page .topic-hero h1 span {
    color: #8fd0c8;
}

.money-finance-page .topic-hero-media picture,
.money-finance-page .topic-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.money-finance-page .topic-hero-media img {
    object-fit: cover;
    object-position: center center;
}

.money-finance-page .topic-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 49, 46, 0.91) 0%,
            rgba(7, 64, 59, 0.78) 43%,
            rgba(7, 64, 59, 0.39) 72%,
            rgba(7, 64, 59, 0.16) 100%
        );
}

.money-finance-page .topic-kicker {
    display: inline-block;
    width: fit-content;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--money-color);
    color: #fff;
}


/* ======================================================
   CATEGORY INTRO
   ====================================================== */

.money-finance-page .topic-intro-item {
    border-top-color: var(--money-color);
}

.money-finance-page .topic-intro-icon {
    background: var(--money-soft);
    color: var(--money-color);
}

.money-finance-page .topic-intro-item h2 {
    color: var(--money-deep);
}


/* ======================================================
   QUESTIONS
   ====================================================== */

.money-finance-page .topic-questions {
    padding-top: 66px;
    padding-bottom: 70px;
}

.money-finance-page .topic-section-heading .section-kicker {
    color: var(--money-color);
}

.money-finance-page .topic-question-card {
    min-height: 275px;
    border-top-color: var(--money-color);
}

.money-finance-page .topic-question-mark {
    background: var(--money-soft);
    color: var(--money-color);
}

.money-finance-page .topic-question-label {
    color: var(--money-color);
}

.money-finance-page .topic-question-body h3 a {
    color: inherit;
    text-decoration: none;
}

.money-finance-page .topic-question-body h3 a:hover,
.money-finance-page .topic-question-body h3 a:focus-visible {
    color: var(--money-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.money-finance-page .topic-question-link {
    color: var(--money-color);
}

.money-finance-page .topic-question-link:hover,
.money-finance-page .topic-question-link:focus-visible {
    color: var(--money-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ======================================================
   FOCUS
   ====================================================== */

.money-finance-page .topic-question-card a:focus-visible {
    outline: 3px solid rgba(20, 118, 111, 0.30);
    outline-offset: 4px;
    border-radius: 3px;
}


/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 900px) {

    .money-finance-page .topic-hero {
        min-height: 405px;
    }

    .money-finance-page .topic-hero h1 {
        font-size: clamp(43px, 7vw, 57px);
    }

}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 760px) {

    .money-finance-page .topic-hero {
        min-height: 0;
    }

    .money-finance-page .topic-hero-inner {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    .money-finance-page .topic-hero-content {
        max-width: 100%;
    }

    .money-finance-page .topic-hero h1 {
        font-size: clamp(39px, 9.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .money-finance-page .topic-hero-desktop-break {
        display: none;
    }

    .money-finance-page .topic-hero-content > p:last-child {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .money-finance-page .topic-hero-media img {
        object-position: center center;
    }

    .money-finance-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 49, 46, 0.88) 0%,
                rgba(7, 64, 59, 0.68) 56%,
                rgba(7, 64, 59, 0.28) 100%
            );
    }

    .money-finance-page .topic-question-card {
        min-height: 0;
    }

    .money-finance-page .topic-questions {
        padding-top: 48px;
        padding-bottom: 52px;
    }

}


/* ======================================================
   SMALL MOBILE
   ====================================================== */

@media (max-width: 520px) {

    .money-finance-page .topic-hero-inner {
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .money-finance-page .topic-hero h1 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .money-finance-page .topic-hero-content > p:last-child {
        font-size: 16px;
        line-height: 1.48;
    }

    .money-finance-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 49, 46, 0.91) 0%,
                rgba(7, 64, 59, 0.72) 58%,
                rgba(7, 64, 59, 0.27) 100%
            );
    }

}