/* /Layout/MainLayout.razor.rz.scp.css */
/* AD-547: the stock Blazor sidebar layout was replaced wholesale by a public
   landing-page shell - a full-width header (see NavMenu.razor.css) over a
   centred content column. */

.site-main[b-g21zd934c9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

@media (max-width: 640.98px) {
    .site-main[b-g21zd934c9] {
        padding: 1.75rem 1rem 3rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* AD-547: replaces the stock Blazor sidebar nav with a top header bar.

   The header is a 3-column grid (1fr / auto / 1fr) rather than a flex row with
   space-between: space-between would centre the nav only by accident of the
   brand's width, and the brand is wider than the toggler. With 1fr on both
   flanks the nav sits on the viewport centre regardless.

   Colours come from the app icon itself - #181A22 is its background layer and
   #5E2EC2 the ring in its artwork - so the header matches the installed app. */

.site-header[b-tl7zv961qd] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #181A22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand[b-tl7zv961qd] {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover[b-tl7zv961qd] {
    color: #fff;
    text-decoration: none;
}

.brand img[b-tl7zv961qd] {
    display: block;
    width: 32px;
    height: 32px;
}

.site-nav[b-tl7zv961qd] {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-nav[b-tl7zv961qd]  .nav-link {
    display: block;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    color: #d7d7d7;
    font-size: 0.95rem;
    text-decoration: none;
}

.site-nav[b-tl7zv961qd]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.site-nav[b-tl7zv961qd]  .nav-link.active {
    background-color: #5E2EC2;
    color: #fff;
}

/* AD-623: the language switcher and the toggler share column 3, balancing the
   brand in column 1 so the nav in column 2 stays centred. They are wrapped rather
   than placed individually because two grid children cannot hold the same cell. */
.header-actions[b-tl7zv961qd] {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language-switcher[b-tl7zv961qd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.language-option[b-tl7zv961qd] {
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    border-radius: 3px;
    color: #d7d7d7;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.language-option:hover[b-tl7zv961qd] {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.language-option.active[b-tl7zv961qd] {
    background-color: #5E2EC2;
    color: #fff;
}

/* Hidden on wide viewports, where the nav is always open. */
.nav-toggler[b-tl7zv961qd] {
    display: none;
    padding: 0.4rem 0.6rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
}

.nav-toggler-icon[b-tl7zv961qd] {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.85%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-size: cover;
}

@media (max-width: 640.98px) {
    .site-header[b-tl7zv961qd] {
        grid-template-columns: 1fr auto;
        row-gap: 0.5rem;
    }

    .header-actions[b-tl7zv961qd] {
        grid-column: 2;
    }

    .nav-toggler[b-tl7zv961qd] {
        display: block;
    }

    /* Second row, full width - the two links stack instead of crowding the brand. */
    .site-nav[b-tl7zv961qd] {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav.collapsed[b-tl7zv961qd] {
        display: none;
    }
}

/* AD-623: the language switcher added ~84px to the header's top row, which the brand and the
   toggler already shared. At the stock sizes that row needs 357px, so it overflowed every
   viewport narrower than that - a 320px phone pushed the toggler off-screen, and 360px cleared it
   by 3px, close enough that a larger system font would have broken it too.

   Tightening the row rather than restructuring it: the brand keeps its wordmark, and all three
   controls stay reachable without opening the menu. */
@media (max-width: 400px) {
    .site-header[b-tl7zv961qd] {
        padding: 0.75rem;
        column-gap: 0.5rem;
    }

    .brand[b-tl7zv961qd] {
        font-size: 1rem;
        gap: 0.5rem;
    }

    .brand img[b-tl7zv961qd] {
        width: 28px;
        height: 28px;
    }

    .header-actions[b-tl7zv961qd] {
        gap: 0.35rem;
    }

    .language-switcher[b-tl7zv961qd] {
        gap: 0.15rem;
        padding: 0.1rem;
    }

    .language-option[b-tl7zv961qd] {
        padding: 0.2rem 0.35rem;
        font-size: 0.7rem;
    }

    .nav-toggler[b-tl7zv961qd] {
        padding: 0.3rem 0.45rem;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
.contact[b-4krdd1mq2j] {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 0;
}

.contact h1[b-4krdd1mq2j] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.contact p[b-4krdd1mq2j] {
    font-size: 1.05rem;
    line-height: 1.6;
}
/* /Pages/ForClubs.razor.rz.scp.css */
/* AD-612: the "Are you a club?" pitch page.

   Follows Contact.razor.css - a centred reading column with muted secondary text -
   widened to 720px because the five numbered steps run considerably longer than
   Contact's three lines. Badge sizing is not repeated here; those rules moved to
   css/app.css when this page became the second consumer. */

.for-clubs[b-dnxfa7m7g3] {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 0;
}

.for-clubs h1[b-dnxfa7m7g3] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.for-clubs h2[b-dnxfa7m7g3] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2.25rem 0 1rem;
}

.for-clubs p[b-dnxfa7m7g3] {
    font-size: 1.05rem;
    line-height: 1.6;
}

.for-clubs .lead[b-dnxfa7m7g3] {
    font-size: 1.25rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.for-clubs .steps[b-dnxfa7m7g3] {
    font-size: 1.05rem;
    line-height: 1.6;
    padding-left: 1.5rem;
}

.for-clubs .steps li[b-dnxfa7m7g3] {
    margin-bottom: 1.1rem;
}

/* The badges sit inside step 1, so they line up with the step's text instead of
   centring on the page the way they do on Home. */
.for-clubs .steps .badges[b-dnxfa7m7g3] {
    justify-content: flex-start;
    margin-top: 0.5rem;
}

/* Google's asset bakes in the same 41-of-250px clear-space border used for the height match
   in app.css - invisible once centred (Home.razor), but it visually indents the Google mark
   relative to Apple's flush-left artwork once left-aligned here. Pull it back by the same
   scaled amount so both marks share a left edge, stacked or side by side (AD-769). */
.for-clubs .steps .badges .badge-link-googleplay[b-dnxfa7m7g3] {
    margin-left: calc(-71px * 41 / 250);
}

.for-clubs .note[b-dnxfa7m7g3] {
    color: #6c757d;
    margin-top: 1.75rem;
}

.for-clubs .cta[b-dnxfa7m7g3] {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

@media (max-width: 640.98px) {
    .for-clubs h1[b-dnxfa7m7g3] {
        font-size: 1.75rem;
    }

    .for-clubs h2[b-dnxfa7m7g3] {
        font-size: 1.25rem;
    }

    .for-clubs .lead[b-dnxfa7m7g3] {
        font-size: 1.1rem;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* AD-547 landing page: two stacked download sections.
   AD-620 removed the hero image that used to sit under them - it was still a placeholder card
   reading "App screens artwork", which is worse on a public page than no image at all. The .hero
   and .hero img rules went with it; see fight-web-hero-artwork-brief.md to restore them. */

.download[b-m4jqmu6eo4] {
    text-align: center;
    padding: 2.5rem 0;
}

.download h1[b-m4jqmu6eo4],
.download h2[b-m4jqmu6eo4] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.download .lead[b-m4jqmu6eo4] {
    font-size: 1.25rem;
    color: #6c757d;
    margin: 0 0 1.5rem;
}

/* AD-612: .badges and the two .badge-* rules moved to css/app.css when ForClubs.razor
   became a second consumer - scoped CSS only ever matches this component's markup. */

/* #926: under the Manager badges, the way to the offer. */
.download .offer-link[b-m4jqmu6eo4] {
    font-size: 1.05rem;
    margin: 1.25rem 0 0;
}

.legal-links[b-m4jqmu6eo4] {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}

@media (max-width: 640.98px) {
    .download h1[b-m4jqmu6eo4],
    .download h2[b-m4jqmu6eo4] {
        font-size: 1.75rem;
    }

    .download .lead[b-m4jqmu6eo4] {
        font-size: 1.1rem;
    }
}
/* /Pages/Offer.razor.rz.scp.css */
/* #926: the offer page. ForClubs.razor.css's reading column (720px, muted lead), plus the feature table. */

.offer[b-18dyf8zgit] {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 0;
}

.offer h1[b-18dyf8zgit] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.offer h2[b-18dyf8zgit] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2.25rem 0 1rem;
}

.offer p[b-18dyf8zgit],
.offer ul[b-18dyf8zgit] {
    font-size: 1.05rem;
    line-height: 1.6;
}

.offer ul[b-18dyf8zgit] {
    padding-left: 1.5rem;
}

.offer .lead[b-18dyf8zgit] {
    font-size: 1.25rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.offer .features[b-18dyf8zgit] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
}

.offer .features th[b-18dyf8zgit],
.offer .features td[b-18dyf8zgit] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.offer .features thead th[b-18dyf8zgit] {
    border-bottom-width: 2px;
}

.offer .features tbody th[b-18dyf8zgit] {
    font-weight: 600;
    width: 35%;
}

.offer .cta[b-18dyf8zgit] {
    margin-top: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

@media (max-width: 640.98px) {
    .offer h1[b-18dyf8zgit] {
        font-size: 1.75rem;
    }

    .offer h2[b-18dyf8zgit] {
        font-size: 1.25rem;
    }

    .offer .lead[b-18dyf8zgit] {
        font-size: 1.1rem;
    }

    .offer .features th[b-18dyf8zgit],
    .offer .features td[b-18dyf8zgit] {
        padding: 0.5rem 0.4rem;
    }
}