/* =========================================================================
   PhillyMatch brand & layout overrides
   Loaded AFTER the compiled theme bundles (custom.css / home.css) so that
   nothing in the vendor theme has to be rebuilt.  Everything site-specific
   that is not part of the purchased script lives here.
   ========================================================================= */

:root {
    --pm-accent: #c61d61;
    --pm-accent-hover: #a8174f;
    --pm-ink: #f4f4f7;
    --pm-ink-soft: #c9c9d2;
    --pm-ink-muted: #8f8f9c;
    --pm-surface: #1b1b23;
    --pm-surface-2: #23232d;
    --pm-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 1. Typography: one font everywhere ------------------------- */
body,
body.lw-public-master,
body.lw-login-register-page,
.credits-display-text,
.masthead h1,
.masthead h2,
.btn,
.btn.lw-special-btn,
.lw-search-section input,
.lw-search-section select,
.contact-section .card h4,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pm-font) !important;
}

/* The landing-page theme forces uppercase, letter-spaced buttons; undo that */
.btn {
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- 2. Brand lockup (mark + wordmark as live text) -------------- */
.pm-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none !important;
    color: var(--pm-ink) !important;
    line-height: 1;
    white-space: nowrap;
}
.pm-brand__mark {
    height: 42px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
.pm-brand__word {
    font-family: var(--pm-font);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    color: var(--pm-ink);
}
.pm-brand__word em {
    font-style: normal;
    color: var(--pm-accent);
}
.pm-brand--lg .pm-brand__mark { height: 64px; }
.pm-brand--lg .pm-brand__word { font-size: 2.15rem; }
.pm-brand--stack {
    flex-direction: column;
    gap: .5rem;
}
.pm-brand--stack .pm-brand__mark { height: 84px; }
.pm-brand--stack .pm-brand__word { font-size: 2rem; }
.pm-brand__tag {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
}

/* Sidebar brand (logged-in app) */
.sidebar .sidebar-brand .pm-brand__word { text-transform: none; letter-spacing: -.02em; }
.sidebar .sidebar-brand .pm-brand { padding: .25rem 0; }
.sidebar .sidebar-brand .pm-brand__mark { height: 40px; }
.sidebar .sidebar-brand .pm-brand__word { font-size: 1.35rem; }
.sidebar.toggled .sidebar-brand .pm-brand__word { display: none; }
.sidebar.toggled .sidebar-brand .pm-brand__mark { height: 34px; }

/* ---------- 3. Landing page ------------------------------------------- */
#mainNav .navbar-brand { padding: .6rem 0; }
@media (min-width: 992px) {
    #mainNav .nav-link {
        font-size: 1.05rem;
        font-weight: 600;
        padding: 1.6rem 1.1rem;
        color: rgba(255, 255, 255, .82);
    }
    #mainNav .nav-link:hover { color: #fff; }
}
#mainNav .nav-link.pm-nav-cta {
    color: #fff !important;
    background: var(--pm-accent);
    border-radius: 999px;
    padding: .55rem 1.25rem !important;
    margin: .9rem 0 0 .5rem;
    line-height: 1.2;
}
#mainNav .nav-link.pm-nav-cta:hover { background: var(--pm-accent-hover); }
@media (max-width: 991.98px) {
    #mainNav .nav-link.pm-nav-cta { display: inline-block; margin: .5rem 0 .75rem; }
}

.masthead .lw-main-text-block { max-width: 60rem; }
.masthead h1 {
    font-size: 2.4rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
    padding: 0;
    margin-bottom: 1.25rem;
}
.masthead h1 .pm-hl { color: #ffd166; -webkit-text-fill-color: #ffd166; }
.masthead .pm-hero-sub {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--pm-ink-soft);
    max-width: 44rem;
    margin: 0 auto 2rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
@media (min-width: 768px) {
    .masthead h1 { font-size: 3.4rem; }
    .masthead .pm-hero-sub { font-size: 1.3rem; }
}
@media (min-width: 992px) {
    .masthead h1 { font-size: 4rem; line-height: 1.08; }
}
.masthead .btn.lw-special-btn,
.pm-btn-primary {
    font-family: var(--pm-font) !important;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: .95rem 2.25rem;
    border-radius: 12px;
    background-color: var(--pm-accent);
    color: #fff !important;
    backdrop-filter: none;
    box-shadow: 0 10px 30px rgba(198, 29, 97, .35) !important;
    border: 0;
}
.masthead .btn.lw-special-btn:hover,
.pm-btn-primary:hover { background-color: var(--pm-accent-hover); }
.pm-btn-ghost {
    font-family: var(--pm-font) !important;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: .9rem 1.5rem;
    border-radius: 12px;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .35) !important;
    box-shadow: none !important;
}
.pm-btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.pm-hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.pm-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 2.25rem;
    margin-top: 3rem;
    padding: 0;
    list-style: none;
    font-size: .95rem;
    color: var(--pm-ink-soft);
}
.pm-trust li::before {
    content: "\2713";
    color: #7ee0a0;
    font-weight: 800;
    margin-right: .45rem;
}

/* Content sections */
.pm-section { padding: 5rem 0; background: var(--pm-surface); color: var(--pm-ink); }
.pm-section--alt { background: #15151c; }
.pm-section h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
    color: #fff;
}
.pm-section .pm-lead {
    color: var(--pm-ink-soft);
    font-size: 1.1rem;
    max-width: 44rem;
    margin: 0 auto 3rem;
}
.pm-step {
    background: var(--pm-surface-2);
    border-radius: 16px;
    padding: 1.75rem 1.6rem;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .06);
}
.pm-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--pm-accent);
    color: #fff;
    font-weight: 800;
    margin-bottom: 1rem;
}
.pm-step h3 { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.pm-step p { color: var(--pm-ink-soft); margin: 0; line-height: 1.55; }
.pm-feature { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.pm-feature__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(198, 29, 97, .15);
    color: var(--pm-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.pm-feature h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.pm-feature p { color: var(--pm-ink-soft); margin: 0; line-height: 1.55; }
.pm-illustration {
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    width: 100%;
    height: auto;
}

/* Contact cards */
.contact-section .card {
    background: var(--pm-surface-2);
    color: var(--pm-ink);
    border-radius: 14px;
    border-bottom: 3px solid var(--pm-accent);
}
.contact-section .card h4 { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--pm-ink-muted); }
.contact-section .card .small { font-size: 1rem; color: var(--pm-ink); }
.contact-section .card a { color: var(--pm-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-section .card i.fas { font-size: 1.6rem; }

/* Footer (landing + inner pages) */
.pm-footer {
    background: #101016;
    color: var(--pm-ink-muted);
    padding: 3rem 0 2.5rem;
    font-size: .9rem;
    text-align: center;
}
.pm-footer__links { margin: 0 0 .9rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.5rem; }
.pm-footer__links a { color: var(--pm-ink-soft); text-decoration: none; }
.pm-footer__links a:hover { color: #fff; text-decoration: underline; }
.pm-footer__legal { margin: 0; }

/* ---------- 4. Login / register / contact pages ------------------------ */
.lw-login-register-page .lw-logo-img-on-bg { display: none; }
.lw-login-register-page .card .pm-brand { margin-bottom: .25rem; }
.lw-login-register-page .card hr { border-color: rgba(255, 255, 255, .12); }
.lw-login-register-page .card h4 { font-weight: 700; color: var(--pm-ink); }
.lw-login-register-page .pm-form-note { color: var(--pm-ink-muted); font-size: .85rem; }
.lw-login-register-page .pm-auth-links { margin-top: 1.5rem; font-size: .85rem; }
.lw-login-register-page .pm-auth-links a { color: var(--pm-ink-soft); margin: 0 .5rem; }
.lw-login-register-page .form-check-label a { color: var(--pm-ink); text-decoration: underline; text-underline-offset: 2px; }
/* A soft vignette so form text stays readable over any illustration */
.lw-login-register-page .lw-page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .0) 45%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}
.lw-login-register-page .sticky-footer { color: var(--pm-ink-muted); }
/* The fixed right-hand card covers the centered footer on wide screens; the card carries the same links. */
@media (min-width: 767px) { .lw-login-register-page .sticky-footer { display: none; } }
.lw-login-register-page .btn-user { font-size: 1rem; padding: .7rem 1.25rem; font-weight: 700; }

/* ---------- 5. Logged-in app: light touch ------------------------------ */
.topbar .lw-premium-user-btn {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 700;
}
.lw-cookie-policy-container { font-family: var(--pm-font); }

/* ---------- 6. Information pages (About, How it works, Safety, Terms, Privacy) ---- */
body.pm-page {
    background: var(--pm-surface);
    color: var(--pm-ink-soft);
    padding-bottom: 0;
}
.pm-page #mainNav { background-color: rgba(20, 20, 28, .92); backdrop-filter: blur(6px); }
.pm-page__main { padding-top: 5.5rem; }
.pm-page__header {
    padding: 3.5rem 0 2.5rem;
    background: linear-gradient(180deg, #15151c 0%, var(--pm-surface) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pm-page__header h1 {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
}
.pm-page__intro { font-size: 1.15rem; color: var(--pm-ink-soft); max-width: 46rem; margin: .9rem 0 0; line-height: 1.55; }
@media (min-width: 768px) { .pm-page__header h1 { font-size: 3rem; } }

.pm-article {
    max-width: 46rem;
    padding: 2.5rem 0 4.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pm-ink-soft);
}
.pm-article h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 2.4rem 0 .8rem;
    letter-spacing: -.01em;
}
.pm-article h2:first-child { margin-top: 0; }
.pm-article h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 1.6rem 0 .5rem; }
.pm-article p { margin: 0 0 1rem; }
.pm-article ul, .pm-article ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.pm-article li { margin-bottom: .45rem; }
.pm-article a { color: #ff7fb0; text-decoration: underline; text-underline-offset: 3px; }
.pm-article a:hover { color: #fff; }
.pm-article .btn, .pm-article .btn:hover { text-decoration: none; }
.pm-article strong { color: #fff; }
.pm-article .pm-meta { color: var(--pm-ink-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.pm-article .pm-callout {
    background: var(--pm-surface-2);
    border-left: 4px solid var(--pm-accent);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin: 1.5rem 0;
}
.pm-article .pm-callout p:last-child { margin-bottom: 0; }
.pm-article .pm-refs { list-style: none; padding: 0; counter-reset: ref; }
.pm-article .pm-refs li {
    position: relative;
    padding-left: 2.4rem;
    font-size: .95rem;
    line-height: 1.55;
    margin-bottom: .8rem;
    color: var(--pm-ink-soft);
}
.pm-article .pm-refs li::before {
    counter-increment: ref;
    content: "[" counter(ref) "]";
    position: absolute;
    left: 0;
    color: var(--pm-ink-muted);
    font-weight: 700;
}
.pm-article .pm-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 640px) { .pm-article .pm-grid { grid-template-columns: 1fr 1fr; } }
.pm-article .pm-card { background: var(--pm-surface-2); border-radius: 14px; padding: 1.2rem 1.3rem; border: 1px solid rgba(255,255,255,.06); }
.pm-article .pm-card h3 { margin-top: 0; font-size: 1.05rem; }
.pm-article .pm-card p, .pm-article .pm-card ul { margin-bottom: 0; font-size: .98rem; }
.pm-article .pm-cta { text-align: center; margin: 3rem 0 0; }
.pm-article .pm-cta .btn { margin: .25rem; }
.pm-article .pm-founder { display: flex; gap: 1.25rem; align-items: flex-start; }
.pm-article .pm-founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Center the reading column on wide screens (header and article share the same measure) */
.pm-page__header h1,
.pm-page__header .pm-page__intro { max-width: 46rem; margin-left: auto; margin-right: auto; }
.pm-page__header { text-align: center; }
.pm-article { margin-left: auto; margin-right: auto; }