/* ==========================================================================
   TGF dark page section
   Shared by the leaderboard/stats boards and the info shortcodes: every TGF
   component renders light text for a dark surface, so pages that stack them
   wrap their content in <div class="tgf-dark"> to supply that surface.
   ========================================================================== */

/* Pages built around a .tgf-dark band carry their own headings — hide the
   theme's white post-title band there (no-op where :has() is unsupported). */
body:has(.tgf-dark) .fl-post-header { display: none; }

/* The theme wraps content in `.fl-content` with a 40px vertical margin, which
   shows as a white strip under the navbar and above the footer on either side
   of a full-bleed dark band. Collapse it on those pages only, so the band runs
   edge to edge. */
body:has(.tgf-dark) .fl-content,
body:has(.tgf-dark) .fl-content-full > .row > .fl-content {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- Dark full-bleed page section ----
   Wrap shortcode stacks in <div class="tgf-dark"> on light-themed pages:
   breaks out of the theme container to paint edge-to-edge dark, then pads
   content back to the original column. */
.tgf-dark {
    background: #14171c;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 40px calc(50vw - 50%) 56px;
    color: #f4f5f7;
}
/* Prose written directly into the page. Deliberately child-only (`>`) so the
   shortcode components keep their own text colours — a descendant selector
   here would outrank component rules like .tgf-step__title and repaint them. */
/* Base ink. h2/h3/h4 override this below with the brand palette. */
.tgf-dark > h1, .tgf-dark > h5, .tgf-dark > h6,
.tgf-dark > p, .tgf-dark > ul, .tgf-dark > ol, .tgf-dark > blockquote,
.tgf-dark h1.tgf-dark__heading, .tgf-dark h2.tgf-dark__heading {
    color: #f4f5f7;
}
.tgf-dark > h1, .tgf-dark > h2, .tgf-dark > h3,
.tgf-dark h1.tgf-dark__heading, .tgf-dark h2.tgf-dark__heading {
    text-align: center;
}
.tgf-dark > ul li, .tgf-dark > ol li { color: inherit; }
.tgf-dark > p strong, .tgf-dark > ul strong, .tgf-dark > ol strong { color: #fff; }
.tgf-dark > p a, .tgf-dark > ul a, .tgf-dark > ol a {
    color: var(--tgf-lb-accent, #F15F51);
    text-decoration: underline;
}
.tgf-dark > p a:hover, .tgf-dark > ul a:hover, .tgf-dark > ol a:hover { color: #fff; }
/* ---- Section headings ----
   Flat white headings make a long page feel dead, so they carry the logo
   palette: an h2 gets a coral→teal rule beneath it, and h3 section headings
   cycle coral / teal / orange / yellow — the same rotation the process-step
   numbers already use on these pages, so it reads as deliberate. Every one of
   these hues clears 5:1 against #14171c at heading sizes. */
.tgf-dark > h2 {
    margin: 52px 0 8px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.tgf-dark > h2::after {
    content: '';
    display: block;
    width: 84px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #F15F51, #F8AA4A 45%, #60C7CB);
}

.tgf-dark > h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: left;
    color: #F15F51;
}
/* Accent bar takes the heading's own colour. */
.tgf-dark > h3::before {
    content: '';
    flex: none;
    width: 6px;
    align-self: stretch;
    min-height: 1.15em;
    border-radius: 999px;
    background: currentColor;
}
.tgf-dark > h3:nth-of-type(4n+1) { color: #F15F51; }  /* coral  */
.tgf-dark > h3:nth-of-type(4n+2) { color: #60C7CB; }  /* teal   */
.tgf-dark > h3:nth-of-type(4n+3) { color: #F8AA4A; }  /* orange */
.tgf-dark > h3:nth-of-type(4n+4) { color: #FBCC0A; }  /* yellow */

/* Sub-headings sit under an h3, so they stay quieter — warm white with a
   coral marker rather than competing for the same colour. */
.tgf-dark > h4 {
    margin: 30px 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    border-left: 4px solid #F15F51;
    padding-left: 12px;
}

.tgf-dark > h2:first-child, .tgf-dark > h3:first-child { margin-top: 0; }

@media (max-width: 600px) {
    .tgf-dark > h2 { font-size: 25px; }
    .tgf-dark > h3 { font-size: 19px; gap: 10px; }
}
.tgf-dark__heading {
    margin: 40px 0 6px;
    font-size: 30px;
    font-weight: 800;
}
.tgf-dark__heading:first-child { margin-top: 0; }
.tgf-dark__sub {
    color: rgba(244, 245, 247, 0.65);
    text-align: center;
    margin: 0 0 8px;
    font-size: 14px;
}

/* Section-header banner. Placeholder brand-glow background — swap by setting
   a background-image on .tgf-dark__banner (it sits above the gradients). */
.tgf-dark__banner {
    background:
        radial-gradient(640px 220px at 12% 15%, rgba(241, 95, 81, .28), transparent 65%),
        radial-gradient(640px 220px at 88% 85%, rgba(96, 199, 203, .20), transparent 65%),
        #1d2127;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 34px 20px 30px;
    margin: 44px 0 22px;
    text-align: center;
}
.tgf-dark__banner:first-child { margin-top: 0; }
.tgf-dark__banner .tgf-dark__heading { margin: 0 0 6px; }
.tgf-dark__banner .tgf-dark__sub { margin: 0; }

/* If a dark band ends up inside a Beaver Builder layout, the row's padding and
   the module's margin paint as white strips above and below it. Scoped with
   :has() to only the row/module that actually wraps a band, so other rows on
   the same page keep their spacing. */
.fl-row-content-wrap:has(> .fl-row-content .tgf-dark),
.fl-row-content-wrap:has(.tgf-dark) {
    padding-top: 0;
    padding-bottom: 0;
}
.fl-module-content:has(.tgf-dark) {
    margin-top: 0;
    margin-bottom: 0;
}