/* ==========================================================================
   Wealth Building Financial — /market-research/
   Loaded only on the market research page (see layouts/partials/headers.html).
   ========================================================================== */

/* Market Research Components */
.research-section {
    margin-bottom: 40px;
}

.research-section h2 {
    color: var(--color-text);
    margin-bottom: 30px;
    font-weight: 700;
    border-bottom: 3px solid var(--color-secondary);
    padding-bottom: 10px;
}

.research-reviewed {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.research-reviewed i {
    color: var(--color-success);
}

.report-item {
    padding: 30px;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.report-date {
    color: var(--color-muted-2);
    font-size: 14px;
    font-weight: 500;
}

.report-type {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--color-bg-light);
    color: var(--color-muted-3);
}

.report-type.featured {
    background: var(--gradient-primary);
    color: #fff;
}

.report-item h3 {
    color: var(--color-text);
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.report-item p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.report-tags {
    margin-bottom: 20px;
}

.tag {
    display: inline-block;
    background: var(--color-bg-light);
    color: var(--color-muted-3);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 5px;
    border: 1px solid var(--color-border);
}

.report-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-pages {
    color: var(--color-muted-2);
    font-size: 14px;
}

.sidebar {
    padding-left: 20px;
}

.market-summary,
.economic-calendar,
.newsletter-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
}

.market-summary h3,
.economic-calendar h3,
.newsletter-box h3 {
    color: var(--color-text);
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 18px;
}

/* The badge is wider now that it is legible, which squeezed "Economic
   Snapshot" into two lines in the narrow rail. Let the badge drop to its own
   line instead of breaking the heading. */
.market-summary h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.market-summary h3 > span:first-child,
.market-summary h3 .market-live-badge {
    flex: none;
}

/* The badge's resting state is the fallback state: the figures beside it are
   the hardcoded ones, shown because the live fetch did not land. At 9px grey
   on light grey that read as a decorative label, when what it actually says is
   "these numbers may be out of date" — the one caveat a visitor needs before
   taking a figure off this page. Amber says caution without claiming an error,
   and 11px is the floor at which a caps label is still readable. */
.market-live-badge {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.12);
    color: #a25a05;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --color-success measures 3.9:1 on this tint, which the amber state's own
   contrast fix made into the odd one out. */
.market-live-badge.is-live {
    background: rgba(16, 185, 129, 0.12);
    color: #0b6f4c;
}

.market-item {
    display: flex;
    /* The label and value share a row; the "why it matters" note wraps onto a
       full-width line below them. */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* A number on its own tells a visitor nothing. This line says what the
   indicator actually touches in their finances. */
.market-why {
    flex-basis: 100%;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--color-muted-2);
}

.market-item:last-child {
    border-bottom: none;
}

.market-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.market-value {
    font-weight: 600;
    text-align: right;
}

.market-value .market-number {
    display: block;
    margin: 0;
    color: var(--color-text);
    font-size: inherit;
    font-weight: 600;
}

.market-value span {
    display: block;
    margin: 2px 0 0;
    color: var(--color-muted-2);
    font-size: 11px;
    font-weight: 500;
}

.market-update {
    color: var(--color-muted-2);
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border-light);
}

.calendar-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.calendar-item:last-child {
    border-bottom: none;
}

.calendar-date {
    /* White on the lighter teal measured 3.40:1, and this is 12px text — the
       date is the whole point of the chip, so it has to clear 4.5:1. The dark
       teal takes it to 6.2:1 and reads as the same colour at this size. */
    background: var(--color-secondary-dark);
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    margin-right: 15px;
    min-width: 50px;
    text-align: center;
}

.calendar-event {
    flex: 1;
    min-width: 0;
}

.event-title {
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 3px;
}

/* A standalone link in the calendar row rather than one inside a sentence, so
   it does not get the inline exception from the touch-target minimum. At 11px
   it was a 15px-tall target; the padding is vertical only so the row's own
   rhythm is unchanged. */
.event-source {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
}

.event-source:hover,
.event-source:focus {
    color: var(--color-secondary);
    text-decoration: underline;
}

.research-tools {
    background: var(--color-surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    margin-top: 40px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.research-tools h2 {
    color: var(--color-text);
    margin-bottom: 30px;
    font-weight: 700;
    text-align: center;
}

.tool-item {
    text-align: center;
    padding: 30px 20px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    transition: var(--transition);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    min-height: 285px;
}

.tool-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

/* Direct child only. As a descendant selector this also caught the small
   external-link arrow inside .tool-link at the card's foot, blowing it up to
   48px beside a 14px label — an icon three times the size of the words it was
   marking. */
.tool-item > i {
    font-size: 3rem;
    color: var(--color-secondary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.tool-item h4 {
    color: var(--color-text);
    margin-bottom: 15px;
    font-weight: 600;
}

.tool-item p {
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    font-size: 14px;
}

.tool-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    padding: 10px 8px;
    min-height: 44px;
    line-height: 24px;
}

.tool-link:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

@media (max-width: 768px) {
    .sidebar {
        padding-left: 0;
        margin-top: 40px;
    }

    .report-header,
    .report-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .report-actions {
        gap: 15px;
    }

    .research-tools {
        padding: 25px 20px;
    }

    .report-item {
        padding: 24px 20px;
    }

    .tool-item {
        min-height: 0;
        margin-bottom: 25px;
    }
}