/**
 * Shared styling for the membership pages.
 *
 * These are the pieces Elementor can't express on its own: the hero mascot spotlight,
 * the brand gradient hairline, and the member logo wall built on a Loop Grid. Add the
 * class named in each block to the relevant Elementor element.
 *
 * Everything else on these pages (headings, body copy, buttons, icon boxes, the FAQ
 * accordion) uses native Elementor widgets and the site's global kit — including the
 * global button style, which is deliberately not overridden here.
 */

/* Visually hidden, still read by screen readers. */
.mautic-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * Hero mascot spotlight
 * Add to an HTML widget in the hero's second column. See the block in
 * elementor-templates/README.md.
 * ------------------------------------------------------------------------ */

.mautic-spotlight {
    position: relative;
    width: 360px;
    max-width: 100%;
    height: 380px;
    margin: 0 auto;
}

.mautic-spotlight__beam,
.mautic-spotlight__pool {
    position: absolute;
    pointer-events: none;
}

.mautic-spotlight__beam {
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.04) 100%
    );
    clip-path: polygon(40% 0%, 60% 0%, 100% 96%, 0% 96%);
}

.mautic-spotlight__pool {
    bottom: 8px;
    left: 2%;
    width: 96%;
    height: 44px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0) 70%
    );
}

.mautic-spotlight__figure {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    max-width: 70%;
    height: auto;
}

@media (max-width: 767px) {
    .mautic-spotlight {
        height: 300px;
    }

    .mautic-spotlight__figure {
        width: 190px;
    }
}

/* ---------------------------------------------------------------------------
 * Link colours on the membership page's coloured bands.
 *
 * The kit's global link colour is Green Teal #00B49C. It is fine on white but
 * fails WCAG AA on both new backgrounds: 2.35:1 on the Dusky Blue hero and
 * 2.32:1 on Pale Cyan. Add the matching class to any container that sits on a
 * coloured band and its links are corrected.
 * ------------------------------------------------------------------------ */

.mautic-on-dark a,
.mautic-on-dark a:hover,
.mautic-on-dark a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.mautic-on-dark a:hover,
.mautic-on-dark a:focus {
    text-decoration-thickness: 2px;
}

/* #00796b on #E5F4F3 is 4.70:1. */
.mautic-on-light a,
.mautic-on-light a:hover,
.mautic-on-light a:focus {
    color: #00796b;
    text-decoration: underline;
}

.mautic-on-dark a:focus-visible,
.mautic-on-light a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Hero kicker pill
 * Wrap the kicker text in <span class="mautic-kicker"> inside a Text Editor.
 * ------------------------------------------------------------------------ */

/*
 * The pill is a veil over whatever band it sits on, so its opacity decides the
 * label's contrast. At 0.14 white text reads 4.46:1 on the Dusky Blue hero and
 * 4.21:1 on the #00796B individual hero — both under the 4.5:1 the 13px label
 * needs. At 0.06 they are 5.36:1 and 4.76:1.
 *
 * The colour is set here rather than left to the Text Editor widget: the pill
 * only has a known contrast against white ink, and a template that pairs it
 * with the teal used elsewhere in the design lands at 1.19:1.
 */
.mautic-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Brand gradient hairline
 * Add to an empty Elementor container, full width, 6px min-height.
 * Decorative only — never place copy on top of it.
 * ------------------------------------------------------------------------ */

.mautic-hairline {
    background-image: linear-gradient(90deg, #4e5e9d 0%, #00b49c 55%, #fdb933 100%);
    min-height: 6px;
}

/* ---------------------------------------------------------------------------
 * Member logo wall
 * Add to an Elementor Loop Grid pointed at the member post type.
 * The loop template should contain a single Featured Image widget.
 *
 * Loop Grid is CSS grid with 1fr columns, so leftover logos stay left.
 * Flex wrap + a percent width (same gap lesson as the 31% benefit cards)
 * centers an incomplete last row. These widths replace the widget's
 * Columns control: 4 desktop / 3 tablet / 2 mobile.
 * ------------------------------------------------------------------------ */

.mautic-logowall .elementor-loop-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.mautic-logowall .e-loop-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10.8px;
    min-height: 88px;
    padding: 12px 16px;
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: 23.5% !important;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .mautic-logowall .e-loop-item {
        width: 31% !important;
    }
}

@media (max-width: 767px) {
    .mautic-logowall .e-loop-item {
        width: 47% !important;
    }
}

.mautic-logowall .e-loop-item img {
    width: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Tier pill — used under testimonial attributions.
 * Add to a Text Editor widget, or wrap inline with <span class="mautic-tierpill">.
 * #00796b on #e5f4f3 is 4.70:1.
 * ------------------------------------------------------------------------ */

.mautic-tierpill {
    display: inline-block;
    background: #e5f4f3;
    color: #00796b;
    border-radius: 100px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Anchor scroll offset — the membership pages are long, so give in-page anchor
 * targets a predictable offset under the sticky header.
 *
 * Targeted by class rather than by ID: this stylesheet loads site-wide, and
 * #tiers / #sign-up / #participatory are generic enough that another page
 * could reasonably use them. Add `mautic-anchor` to any container that carries
 * an anchor ID. The tiers widget applies it to its own root.
 * ------------------------------------------------------------------------ */

.mautic-anchor {
    scroll-margin-top: 100px;
}