/*
 * Topics highlight banner.
 *
 * Own styles, not the block-editor ones: block-editor-style.css is enqueued
 * only for `page` and `annual_report`, and wp-block-cover's markup is not what
 * this renders. Loaded only on a Topics page that actually shows a banner.
 *
 * The root font-size is 62.5% (bootstrap.css:290), so 1rem = 10px here.
 */

.cpac-tb {
    position: relative;
    overflow: hidden;
    padding: 6.4rem 0;
    background: linear-gradient(180deg, var(--cpac-tb-from, #593D98) 0%, var(--cpac-tb-to, #0067B1) 100%);
    color: #fff;
}

.cpac-tb__inner {
    position: relative;
    z-index: 1;
    max-width: 1128px;          /* the theme's own content width */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------------------------------------------------------- orange rule -- */
/*
 * The annual report inserts Solid-Orange-Bar.png (210x9) and hand-sizes it to
 * 152px. Same mark, drawn rather than uploaded: sharp at any density, takes the
 * brand colour, and scales with the type it sits above.
 */
.cpac-tb__rule {
    display: block;
    width: 15.2rem;
    height: .65rem;             /* 210x9 PNG shown at 152px wide = 6.5px tall */
    border-radius: .33rem;
    background: #F7A356;
    margin: 3.2rem 0 0;
}

/*
 * Standalone, for [cpac_rule] above a heading in page content — the same mark
 * the annual report uses above "Leadership message" and "Highlights".
 * Colour is inherited-safe: it sits on light and dark grounds alike.
 */
/* Standalone, for [orange_line] above a heading in page content. */
.cpac-tb__rule--standalone {
    margin: 3.2rem 0 0;
}

#content .cpac-tb__rule--standalone {
    margin: 3.2rem 0 0;
}

/* ------------------------------------------------------------- headings -- */

.cpac-tb__heading {
    /*
     * The rule carries no bottom margin, so the gap below it is the heading's
     * to provide - the same way a heading in page content does. That lets both
     * placements of the rule use identical margins.
     */
    margin: 2rem 0 3.2rem;
    color: #fff;
    font-size: 2.8rem;
    line-height: 1.25;
    font-weight: 700;
}

/* ---------------------------------------------------------------- stats -- */

.cpac-tb__stats {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2.4rem;
    margin: 0 0 3.2rem;
    padding: 0;
    list-style: none;
}

.cpac-tb__stat {
    -ms-flex: 1 1 22rem;
        flex: 1 1 22rem;
    position: relative;
    min-width: 0;
    margin: 4rem 0 0;           /* room for the icon badge to overhang */
    padding: 5.2rem 2rem 2.8rem;
    border: 1px solid rgba(255, 255, 255, .45);
    text-align: center;
}

.cpac-tb__icon {
    position: absolute;
    top: -3.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    background: #fff;
    color: #0067B1;
    font-size: 3rem;
}

.cpac-tb__figure {
    display: block;
    font-size: 4.8rem;
    line-height: 1.05;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cpac-tb__label {
    display: block;
    margin-top: .8rem;
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* --------------------------------------------------- legacy CSS guards -- */
/*
 * main.css:217 sets `#content ul { color:#555; font-size:1.357em; font-weight:300;
 * list-style:disc; margin-left:20px }` at specificity (1,0,1), which beats a bare
 * class and turns the figures grey, shrinks them, and puts a bullet beside every
 * tile. Anchoring under #content gives (1,1,0) and wins on specificity rather
 * than with !important, so anything set on the block itself still applies.
 * Same technique as the .cpac-blocks baseline.
 */
#content .cpac-tb__stats {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

#content .cpac-tb__stats .cpac-tb__stat {
    margin-bottom: 0;
    color: inherit;
}

/* ----------------------------------------------------------------- body -- */

.cpac-tb__body {
    max-width: 82rem;
    font-size: 1.6rem;
    line-height: 1.6;
}

.cpac-tb__body p        { margin: 0 0 1.6rem; color: inherit; }
.cpac-tb__body p:last-child { margin-bottom: 0; }
.cpac-tb__body a        { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------- corner decoration -- */
/*
 * Replaces Blue-Lines.gif and Green-Lines.gif (33 + 34 KB of raster frames for
 * a few rounded bars). The vector source was already in the repo — the CSS had
 * these same SVGs commented out above the GIFs. Inline here so the strokes can
 * be animated: they already extend past the viewBox, so translating them gives
 * the sweep in and out without redrawing anything.
 */
.cpac-tb__decor {
    position: absolute;
    z-index: 0;
    display: none;
    pointer-events: none;
}

.cpac-tb--decorated .cpac-tb__decor { display: block; }

.cpac-tb__decor svg { display: block; width: 100%; height: auto; overflow: hidden; }

.cpac-tb__decor path {
    stroke-width: 10;
    stroke-linecap: round;
}

.cpac-tb__decor--tl {
    top: 5%;
    left: 0;
    width: 10.2rem;
}

.cpac-tb__decor--tl path {
    stroke: #0067B1;
    animation: cpac-tb-sweep-l 5.3s ease-in-out infinite;
}

.cpac-tb__decor--br {
    right: 0;
    bottom: 10%;
    width: 11.7rem;
}

.cpac-tb__decor--br path {
    stroke: #14988A;
    animation: cpac-tb-sweep-r 7s ease-in-out infinite;
}

/* Staggered, so the bars arrive one after another as they do in the GIFs. */
.cpac-tb__decor path:nth-child(1) { animation-delay: 0s; }
.cpac-tb__decor path:nth-child(2) { animation-delay: .35s; }
.cpac-tb__decor path:nth-child(3) { animation-delay: .7s; }
.cpac-tb__decor path:nth-child(4) { animation-delay: 1.05s; }
.cpac-tb__decor path:nth-child(5) { animation-delay: 1.4s; }
.cpac-tb__decor path:nth-child(6) { animation-delay: 1.75s; }

@keyframes cpac-tb-sweep-l {
    0%          { transform: translateX(-100%); }
    18%, 62%    { transform: translateX(0); }
    82%, 100%   { transform: translateX(-100%); }
}

@keyframes cpac-tb-sweep-r {
    0%          { transform: translateX(100%); }
    18%, 62%    { transform: translateX(0); }
    82%, 100%   { transform: translateX(100%); }
}

/*
 * The GIFs loop forever with no way to stop them, which is a real problem for
 * vestibular sensitivity. Vector lets us honour the setting.
 */
@media (prefers-reduced-motion: reduce) {
    .cpac-tb__decor path { animation: none; transform: none; }
}

/* ----------------------------------------------------------------- small -- */

@media (max-width: 782px) {
    .cpac-tb            { padding: 4.8rem 0; }
    .cpac-tb__heading   { font-size: 2.4rem; }
    .cpac-tb__figure    { font-size: 3.8rem; }
    .cpac-tb__stat      { -ms-flex-preferred-size: 100%; flex-basis: 100%; }
    .cpac-tb__decor     { opacity: .55; }
}