/*
 * FMMSC Public Design Standard v5.3
 * Public-only guardrail: black / white + navy / gold, full-width page shell.
 * Loaded after page CSS so legacy public styles cannot reintroduce cream,
 * unrelated status colors, or centered page containers.
 */

body.public-site:not(.member-pwa-context) {
    margin: 0;
    background: #ffffff;
    color: #07182d;
}

body.public-site:not(.member-pwa-context) > main {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: clip;
}

body.public-site:not(.member-pwa-context) .site-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--fm-page-gutter, clamp(16px, 3vw, 56px));
}

/* Public surfaces: no cream / beige / unrelated gray fills. */
body.public-site:not(.member-pwa-context) .content-public-section,
body.public-site:not(.member-pwa-context) .sponsor-public-section,
body.public-site:not(.member-pwa-context) .member-register-page,
body.public-site:not(.member-pwa-context) .history-public-section,
body.public-site:not(.member-pwa-context) .ph-current-sponsors,
body.public-site:not(.member-pwa-context) .ph-current-partners,
body.public-site:not(.member-pwa-context) .ph27-current-proof,
body.public-site:not(.member-pwa-context) .ph27-story,
body.public-site:not(.member-pwa-context) .ph27-experience,
body.public-site:not(.member-pwa-context) .ph27-digital,
body.public-site:not(.member-pwa-context) .ph27-impact,
body.public-site:not(.member-pwa-context) .ph27-brand-fit,
body.public-site:not(.member-pwa-context) .ph27-packages {
    background: #ffffff;
    color: #07182d;
}

/* Dark public surfaces use one navy only. */
body.public-site:not(.member-pwa-context) .content-public-hero,
body.public-site:not(.member-pwa-context) .gallery-public-section,
body.public-site:not(.member-pwa-context) .match-media-page,
body.public-site:not(.member-pwa-context) .ph-current-hero,
body.public-site:not(.member-pwa-context) .ph27-hero,
body.public-site:not(.member-pwa-context) .ph27-snapshot,
body.public-site:not(.member-pwa-context) .ph27-final,
body.public-site:not(.member-pwa-context) .v4-hero,
body.public-site:not(.member-pwa-context) .v4-conversion,
body.public-site:not(.member-pwa-context) .v4-benefits,
body.public-site:not(.member-pwa-context) .v4-story,
body.public-site:not(.member-pwa-context) .v4-final-cta {
    background-color: #07182d;
    color: #ffffff;
}

/* Light homepage sections stay white; the formula remains the intentional gold band. */
body.public-home-v5 .v4-onboarding,
body.public-home-v5 .v4-about,
body.public-home-v5 .v4-proof,
body.public-home-v5 .v4-faq,
body.public-home-v5 .v4-sponsor {
    background: #ffffff;
    color: #07182d;
}

body.public-home-v5 .v4-community-formula {
    background: #d59816;
    color: #07182d;
}

/* Generic light cards. */
body.public-site:not(.member-pwa-context) .content-public-empty,
body.public-site:not(.member-pwa-context) .contact-public-card,
body.public-site:not(.member-pwa-context) .partner-public-card,
body.public-site:not(.member-pwa-context) .member-form-card,
body.public-site:not(.member-pwa-context) .member-register-info,
body.public-site:not(.member-pwa-context) .ph-current-card,
body.public-site:not(.member-pwa-context) .ph27-family-grid article,
body.public-site:not(.member-pwa-context) .ph27-digital-grid article,
body.public-site:not(.member-pwa-context) .ph27-brand-grid article,
body.public-site:not(.member-pwa-context) .ph27-package-grid article:not(.is-featured),
body.public-site:not(.member-pwa-context) .ph27-benefits > div,
body.public-site:not(.member-pwa-context) .ph27-jersey-opportunity,
body.public-site:not(.member-pwa-context) .ph27-audience-card {
    background: #ffffff;
    color: #07182d;
    border-color: rgba(7, 24, 45, 0.14);
}

/* Gold is the only highlight/status color in public marketing surfaces. */
body.public-site:not(.member-pwa-context) .partner-public-benefit,
body.public-site:not(.member-pwa-context) .partner-public-meta span,
body.public-site:not(.member-pwa-context) .ph-current-meta span,
body.public-site:not(.member-pwa-context) .ph27-benefit-cloud span,
body.public-site:not(.member-pwa-context) .ph27-current-logo-grid.is-sponsor a,
body.public-site:not(.member-pwa-context) .schedule-badge {
    background: rgba(213, 152, 22, 0.10);
    border-color: rgba(213, 152, 22, 0.32);
    color: #07182d;
}

body.public-site:not(.member-pwa-context) .partner-public-contact > div,
body.public-site:not(.member-pwa-context) .ph-proof-strip-copy,
body.public-site:not(.member-pwa-context) .ph-empty-card.is-light,
body.public-site:not(.member-pwa-context) .ph27-current-logo-grid a,
body.public-site:not(.member-pwa-context) .ph27-bar {
    background: #ffffff;
    border-color: rgba(7, 24, 45, 0.14);
    color: #07182d;
}

/* Muted copy remains navy with opacity, never a separate gray hue. */
body.public-site:not(.member-pwa-context) :where(
    .content-public-empty p,
    .partner-public-description,
    .partner-public-contact span,
    .contact-public-card p,
    .history-toolbar-copy p,
    .history-match-copy p,
    .ph-current-card-body p,
    .ph27-story p,
    .ph27-digital p,
    .ph27-impact p
) {
    color: rgba(7, 24, 45, 0.66);
}

/* Public gallery/media stays navy, with white/gold content only. */
body.public-site:not(.member-pwa-context) .gallery-match-card,
body.public-site:not(.member-pwa-context) .match-media-photo-card,
body.public-site:not(.member-pwa-context) .match-media-video-card,
body.public-site:not(.member-pwa-context) .match-media-video-error {
    background: #07182d;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

body.public-site:not(.member-pwa-context) .gallery-match-date,
body.public-site:not(.member-pwa-context) .match-media-tabs button {
    background: transparent;
}

/* Collaboration: Sponsor and Partner remain separate, but both share the same palette. */
body.public-site:not(.member-pwa-context) .ph-current-card-visual,
body.public-site:not(.member-pwa-context) .ph-current-card-visual.is-logo-only,
body.public-site:not(.member-pwa-context) .ph27-hero-visual,
body.public-site:not(.member-pwa-context) .ph27-package-grid article.is-featured,
body.public-site:not(.member-pwa-context) .ph27-quote-grid blockquote {
    background: #07182d;
    color: #ffffff;
}

body.public-site:not(.member-pwa-context) .ph-next-bridge,
body.public-site:not(.member-pwa-context) .ph27-roadmap {
    background: #d59816;
    color: #07182d;
}

/* Borders and shadows derive from navy only. */
body.public-site:not(.member-pwa-context) :where(
    .content-public-empty,
    .contact-public-card,
    .partner-public-card,
    .history-match-card,
    .member-form-card,
    .ph-current-card
) {
    border-color: rgba(7, 24, 45, 0.14);
    box-shadow: 0 16px 44px rgba(7, 24, 45, 0.07);
}

/* Global public links/actions. */
body.public-site:not(.member-pwa-context) :where(
    .section-label,
    .content-public-kicker,
    .ph-kicker,
    .ph27-kicker,
    .gallery-match-code,
    .match-media-panel-head span
) {
    color: #d59816;
}

/* Standalone public registration / onboarding pages opt in with this body class. */
body.fmmsc-public-standalone {
    margin: 0;
    background: #ffffff;
    color: #07182d;
}

body.fmmsc-public-standalone :where(
    .match-register-main,
    .member-onboarding-shell,
    .fmmsc-verify-shell
) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

body.fmmsc-public-standalone :where(
    .match-hero,
    .slot-section,
    .public-registration-roster,
    .public-waitlist-panel,
    .member-match-status-card,
    .member-onboarding-card,
    .fmmsc-verify-panel
) {
    background-color: #ffffff;
    border-color: rgba(7, 24, 45, 0.14);
    color: #07182d;
}

body.fmmsc-public-standalone :where(
    .role-slot-card,
    .registration-mode-tabs,
    .member-password-tip,
    .member-onboarding-note
) {
    background: rgba(213, 152, 22, 0.10);
    border-color: rgba(213, 152, 22, 0.30);
    color: #07182d;
}

body.fmmsc-public-standalone :where(
    .is-success,
    .is-open,
    .is-warning,
    .is-waitlist,
    .status-pill
) {
    color: #07182d;
    background: rgba(213, 152, 22, 0.10);
    border-color: rgba(213, 152, 22, 0.30);
}

@media (max-width: 620px) {
    body.public-site:not(.member-pwa-context) .site-container {
        padding-inline: 16px;
    }
}

/* Homepage internal surfaces follow the same four-color rule. */
body.public-home-v5 :where(
    .v4-partner-card,
    .v4-partner-empty,
    .v4-testimonial-card,
    .v4-proof-card,
    .v4-onboarding-card,
    .v4-about-card,
    .v4-faq-item
) {
    background: #ffffff;
    color: #07182d;
    border-color: rgba(7, 24, 45, 0.14);
}

body.public-home-v5 .v4-partner-card img {
    background: #ffffff;
}

body.public-home-v5 :where(
    .schedule-registration-state.is-waiting,
    .schedule-registration-state.is-closed,
    .schedule-registration-state.is-open
) {
    color: #07182d;
    background: rgba(213, 152, 22, 0.10);
    border-color: rgba(213, 152, 22, 0.30);
}

body.public-home-v5 :where(
    .v4-partner-card span,
    .v4-partner-empty span,
    .v4-proof-card p,
    .v4-onboarding-card p,
    .v4-about-card p,
    .v4-faq-item p
) {
    color: rgba(7, 24, 45, 0.66);
}

/* History uses navy/gold/white only. */
body.public-site:not(.member-pwa-context) :where(
    .history-toolbar,
    .history-match-card,
    .history-empty
) {
    background: #ffffff;
    color: #07182d;
    border-color: rgba(7, 24, 45, 0.14);
}

body.public-site:not(.member-pwa-context) :where(
    .history-match-date,
    .history-status,
    .history-filter a.is-active
) {
    background: rgba(213, 152, 22, 0.10);
    color: #07182d;
    border-color: rgba(213, 152, 22, 0.30);
}

/* Public forms: neutral surfaces are white; accents are gold. */
body.public-site:not(.member-pwa-context) :where(
    .member-register-info,
    .member-form-card,
    .member-benefit,
    .member-register-pwa
) {
    background: #ffffff;
    color: #07182d;
    border-color: rgba(7, 24, 45, 0.14);
}

body.public-site:not(.member-pwa-context) :where(
    .member-password-tip,
    .member-alert,
    .member-role-option.is-selected
) {
    background: rgba(213, 152, 22, 0.10);
    color: #07182d;
    border-color: rgba(213, 152, 22, 0.30);
}

/* ======================================================================
   FMMSC Public Section Rhythm v5.3.2
   Split-spacing model:
   - every top-level section owns half of the visual gap above and below;
   - two adjacent sections therefore add up to exactly one section gap;
   - content never touches a section boundary;
   - compact strips/bands use the same 50/50 rule at a smaller scale.
   This avoids both doubled whitespace and zero-footer clipping.
   ====================================================================== */
body.public-site:not(.member-pwa-context) {
    --fm-section-half-space: clamp(32px, 3.1vw, 44px);
    --fm-section-half-space-compact: clamp(12px, 1.5vw, 18px);
}

body.public-site:not(.member-pwa-context) main > section {
    margin-block: 0;
    padding-top: var(--fm-section-half-space);
    padding-bottom: var(--fm-section-half-space);
}

/* Intentional strips/bands remain tighter, but still breathe on BOTH sides. */
body.public-site:not(.member-pwa-context) main > :where(
    .v4-community-formula,
    .ph-proof-strip,
    .ph-next-bridge
) {
    padding-top: var(--fm-section-half-space-compact);
    padding-bottom: var(--fm-section-half-space-compact);
}

/* Hero/page-opening sections keep their page-specific top treatment.
   Only their footer half-gap is standardized here. */
body.public-site:not(.member-pwa-context) main > section:first-child {
    padding-bottom: var(--fm-section-half-space);
}

@media (max-width: 760px) {
    body.public-site:not(.member-pwa-context) {
        --fm-section-half-space: 24px;
        --fm-section-half-space-compact: 11px;
    }
}


/* Schedule v5.4: last-layer guardrail so legacy container/status rules cannot re-center or tint /jadwal. */
body.public-schedule-v5 .public-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--fm-page-gutter, clamp(22px, 3.4vw, 64px));
}

body.public-schedule-v5 .schedule-status {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d59816;
}

@media (max-width: 620px) {
    body.public-schedule-v5 .public-container {
        padding-inline: 18px;
    }
}


/* ======================================================================
   FMMSC Public Typography & Control Standard v5.4.3
   One sans-serif voice across every public marketing page. Member/Admin
   surfaces remain outside this guard. Public controls use a softened
   radius so CTAs do not read as rigid rectangular blocks.
   ====================================================================== */
body.public-site:not(.member-pwa-context) {
    font-family: var(--fm-font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

body.public-site:not(.member-pwa-context) :where(
    h1, h2, h3, h4, h5, h6,
    p, a, button, input, select, textarea, label,
    dt, dd, li, strong, small, span
) {
    font-family: inherit;
}

body.public-site:not(.member-pwa-context) :where(
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .public-button,
    .header-member-cta,
    .nav-member-cta
) {
    border-radius: 12px;
}