@charset "UTF-8";
/* Responsive overrides for 2-solstice. Load after style.css and fanatically.css. */

/* ===== from style.css ===== */

/* responsive */
@media (max-width: 640px) {
    header { padding: 3.5rem 0 2rem; }
    .about-panel, .two-col { grid-template-columns: 1fr; }
    .site-table th:nth-child(3),
    .fl-table th:nth-child(3),
    .site-table td:nth-child(3),
    .fl-table td:nth-child(3) { display: none; }
    footer { grid-template-columns: 1fr; }
    .footer-info { text-align: left; }
    .wrapper { padding-left: 0.75rem; padding-right: 0.75rem; }
    .site-panel,
    .content-card { padding: 1.6rem 0.9rem; }
    .site-stats,
    .stats-row { gap: 0.6rem; }
    img.skin { max-width: 80% !important; width: 80% !important; }

    /* Fix: section-header title overflowing off-screen on mobile.
     *       white-space:nowrap is needed on desktop so ::after fills the remaining
     *       space, but on small screens we drop the decorative line and let the
     *       heading wrap naturally instead. */
    .site-section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .site-section-header::after { display: none; }
    .site-section-header h2 {
        font-size: 1.25rem;
        overflow-wrap: break-word;
        white-space: normal;
        word-break: break-word;
    }

    /* Fix: .site-name uses clamp(3.8rem, 10vw, 7rem); the 3.8rem floor
     *       (≈ 61 px) overrides the 10vw scale-down below ~380 px viewports,
     *       pushing "Solstice" past the right edge of the screen.
     *       Lower the floor so the vw value can do its job on narrow phones. */
    .site-name {
        font-size: clamp(1.8rem, 9vw, 3.8rem);
        line-height: 1;
    }
}

/* ===== from fanatically.css ===== */

/* -- collective stats: mobile alignment --
   Template uses minmax(0,1fr) so the button columns can shrink below their
   image width instead of overflowing the panel. */
.collective-stats .stats-extra
{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collective-stats img
{
    height: auto;
    max-width: 100%;
}

@media (max-width: 560px)
{
    .collective-stats
    {
        padding: 1.2rem 1rem;
    }

    .collective-stats .stats-list
    {
        align-items: stretch;
        flex-direction: column;
        gap: 0.7rem;
    }

    .collective-stats .stats-list li
    {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.15rem;
        text-align: center;
    }

    .collective-stats .stat-extra
    {
        flex-basis: 100%;
    }

    .collective-stats .stats-extra
    {
        gap: 1rem 0.8rem;
    }

    .collective-stats .stats-extra img
    {
        max-width: 100%;
    }
}

/* ===== from fanatically.css ===== */

/* -----------------------------------------
   Mobile fixes
----------------------------------------- */
@media (max-width: 640px)
{
    /* Fix: owned-listing flex row has a 160px image + 1.5rem gap, which
       leaves barely ~100 px for text on a typical phone. Stack vertically
       instead so both columns get the full width. */
    .fan-owned-listings-page .owned-listing-item,
    .fan-owned-page .owned-listing-item
    {
        flex-direction: column !important;
        gap: 0.9rem !important;
    }

    .fan-owned-listings-page .listing-image img,
    .fan-owned-page .listing-image img
    {
        max-width: 120px !important;
    }

    /* Make page h2 headings wrap rather than overflow */
    .fan-joined-page h2,
    .fan-owned-page h2,
    .fan-owned-listings-page h2,
    .fan-member-page h2,
    .fan-codes-page h2,
    .fan-wishlist-page h2,
    .fan-form-page h2
    {
        font-size: 1.45rem;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Padding reduction for page wrappers on narrow screens */
    .fan-joined-page,
    .fan-owned-page,
    .fan-owned-listings-page,
    .fan-member-page,
    .fan-codes-page,
    .fan-wishlist-page,
    .fan-form-page,
    .fan-affiliates-page
    {
        padding: 1.6rem 0.5rem;
    }
}

/* -- FanUpdate search box: keep it inside the panel -- */
@media (max-width: 640px)
{
    #fanupdate .archivelink p
    {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        margin: 0;
    }

    #fanupdate .archivelink input[type="text"],
    #fanupdate .archivelink input[name="q"],
    .site-panel input[type="search"]
    {
        box-sizing: border-box;
        flex: 1 1 8rem;
        max-width: 100%;
        min-width: 0;
        width: auto;
    }
}

/* -- FanUpdate entries: tighter padding on phones -- */
@media (max-width: 640px)
{
    #fanupdate .fu-entry
    {
        padding: 1.3rem 1.1rem;
    }
}