/*
    Shared banner at the top of every fund, ETF and strategy page.

    Two panels side by side: a pale blue title panel (compass watermark, blue
    accent mark, gold section tabs) and a tan "Current Materials" panel.
    Markup lives in the strategies-siteRebrand and etfs-siteRebrand presets.
*/

.fund-header
{
    padding: 0px 20px;
    background: var(--sgi-white);
}

.fund-header-container
{
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* ---------- Title panel ---------- */

.fund-header-panel
{
    position: relative;
    overflow: hidden;
    flex: 55 1 0;
    box-sizing: border-box;
    padding: 50px 35px 22px 35px;
    background-color: var(--sgi-brand-paleblue);
}

/* Compass watermark, bleeding off the top and bottom of the panel. */
.fund-header-panel::after
{
    content: "";
    position: absolute;
    top: -15%;
    bottom: -15%;
    right: 0;
    left: 0;
    background-image: url("./images/sgi-compass.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: .14;
    pointer-events: none;
}

/* Angled accent mark, flush with the top edge of the panel. */
.fund-header-panel::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 35px;
    width: 24px;
    height: 26px;
    background-color: var(--sgi-brand-lightblue);
    transform: skewX(-18deg);
}

/* Keep the real content above both decorations. */
.fund-header-panel > *
{
    position: relative;
    z-index: 1;
}

/*
    Prefixed with .sgi-rebrand so these beat the generic ".sgi-rebrand h1 / h2"
    rules in siteRebrand-sgiStyles, which are more specific than a bare class.
*/
.sgi-rebrand .fund-header-title
{
    font-family: var(--sgi-brand-sans);
    font-size: 2.6em;
    font-weight: 600;
    line-height: 1.15;
    color: var(--sgi-brand-navy);
}

.fund-header-date
{
    font-family: var(--sgi-brand-sans);
    font-size: 1.3em;
    font-weight: 400;
    color: var(--sgi-brand-blue);
}

/* ---------- Section tabs ---------- */

.fund-header-tabs > a > div
{
    box-sizing: border-box;
    width: 155px;
    padding: 9px 6px;
    display: flex;
    justify-content: center;
    background-color: var(--sgi-brand-gold);
    font-family: var(--sgi-brand-sans);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sgi-white);
}

.fund-header-tabs > a > div > b { font-weight: 600; }
.fund-header-tabs > a:hover > div { background-color: #b8933f; }

/*
    Narrow layouts move the tabs out of the banner into their own full-width
    row. The presets decide when that row is shown; it is display:none until
    then, so these can stay outside a media query.
*/
.fund-header-tabs-mobile
{
    gap: 10px;
    padding: 0px 20px;
}

.fund-header-tabs-mobile > a > div
{
    box-sizing: border-box;
    width: 150px;
    padding: 10px 6px;
    display: flex;
    justify-content: center;
    background-color: var(--sgi-brand-gold);
    font-family: var(--sgi-brand-sans);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sgi-white);
}

.fund-header-tabs-mobile > a > div > b { font-weight: 600; }
.fund-header-tabs-mobile > a:hover > div { background-color: #b8933f; }

/* ---------- Current materials panel ---------- */

.fund-header-materials
{
    flex: 45 1 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    background-color: var(--sgi-brand-tan);
}

.sgi-rebrand .fund-header-materials h2
{
    font-family: var(--sgi-brand-sans);
    font-size: .95em;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--sgi-brand-navy);
    text-align: center;
}

.fund-header-materials .green-button
{
    box-sizing: border-box;
    width: 260px;
    padding: 9px 6px;
    display: flex;
    justify-content: center;
    font-family: var(--sgi-brand-sans);
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .04em;
    background-color: var(--sgi-brand-lightblue);
}

.fund-header-materials .materials-button-secondary { background-color: var(--sgi-brand-navy); }

.fund-header-materials .green-button:hover              { background-color: #3a89aa; }
.fund-header-materials .materials-button-secondary:hover{ background-color: #244964; }

.fund-header-materials a,
.fund-header-materials .green-button,
.fund-header-materials .green-button div { color: var(--sgi-white) !important; }

.fund-header-tabs a,
.fund-header-tabs-mobile a,
.fund-header-materials a,
.fund-header-materials-mobile a { text-decoration: none; }

/* Full-width copy of the materials panel, shown once the banner stops fitting. */
.fund-header-materials-mobile .green-button
{
    box-sizing: border-box;
    padding: 10px 6px;
    display: flex;
    justify-content: center;
    font-family: var(--sgi-brand-sans);
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .04em;
    background-color: var(--sgi-brand-lightblue);
}

.fund-header-materials-mobile .materials-button-secondary { background-color: var(--sgi-brand-navy); }

.fund-header-materials-mobile a,
.fund-header-materials-mobile .green-button,
.fund-header-materials-mobile .green-button div { color: var(--sgi-white) !important; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px)
{
    .sgi-rebrand .fund-header-title { font-size: 2.1em; }
    .fund-header-materials .green-button { width: 100%; max-width: 260px; }
}

@media (max-width: 1000px)
{
    .fund-header-panel { padding: 40px 25px 20px 25px; }
    .fund-header-panel::before { left: 25px; }
    .sgi-rebrand .fund-header-title { font-size: 1.9em; }
    .fund-header-date { font-size: 1.15em; }
    .fund-header-tabs > a > div { width: 135px; font-size: .78em; }
}

@media (max-width: 900px)
{
    .sgi-rebrand .fund-header-title { font-size: 1.65em; }
    .fund-header-tabs > a > div { width: 118px; padding: 8px 4px; font-size: .72em; }
    .fund-header-materials { padding: 30px 15px; }
    .fund-header-materials .green-button { font-size: .78em; }
}

@media (max-width: 770px)
{
    .sgi-rebrand .fund-header-title { font-size: 1.4em; }
    .fund-header-date { font-size: 1em; }
    .fund-header-tabs > a > div { width: 100px; font-size: .65em; letter-spacing: 0; }
    .fund-header-materials .green-button { font-size: .72em; }
}

/*
    Below this width the two panels stop fitting side by side. The tabs and the
    materials panel are re-emitted as separate full-width blocks by the presets,
    so here we just collapse the banner down to the title panel.
*/
@media (max-width: 570px)
{
    .fund-header { padding: 0px; }

    .fund-header-panel
    {
        flex: 1 1 100%;
        padding: 40px 20px 40px 20px;
    }
    .fund-header-panel::before { left: 20px; }
    .sgi-rebrand .fund-header-title { font-size: 1.6em; }
    .fund-header-date { font-size: 1.05em; }

    .fund-header-materials { display: none; }

    /* Share the row evenly rather than letting three fixed-width tabs overflow. */
    .fund-header-tabs-mobile { gap: 8px; }
    .fund-header-tabs-mobile > a { flex: 1 1 0; min-width: 0; }
}