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

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

@media (max-width: 768px)
{
    .wrapper
    {
        padding: 0 1.4rem 3rem;
    }

    .site-panel,
    .content-card
    {
        padding: 2rem 2rem;
    }
}

@media (max-width: 560px)
{
    body
    {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    header
    {
        padding: 3rem 0 2rem;
    }

    .site-eyebrow
    {
        margin-bottom: 0.7rem;
    }

    .site-tagline
    {
        margin-top: 0.7rem;
    }

    .ornament
    {
        margin: 1.4rem 0 0;
    }

    nav
    {
        margin: 1.5rem 0 0;
    }

    .site-panel,
    .content-card
    {
        padding: 1.6rem 1.4rem;
    }

    .site-section-header,
    .section-label
    {
        margin: 2.5rem 0 1rem;
    }

    footer
    {
        margin-top: 3rem;
        padding: 1.8rem 0;
    }

    .fan-joined-page,
    .fan-owned-page,
    .fan-owned-listings-page,
    .fan-member-page,
    .fan-codes-page,
    .fan-wishlist-page,
    .fan-form-page
    {
        padding: 1.6rem 1.4rem;
    }

    .site-grid,
    .fl-grid
    {
        grid-template-columns: 1fr;
    }

    .site-stats,
    .stats-row
    {
        gap: 0.6rem;
    }

    img
    {
        display: block;
        height: auto;
        max-width: 100%;
    }

    img.skin
    {
        max-width: 80% !important;
        width: 80% !important;
    }

    nav a
    {
        align-items: center;
        display: inline-flex;
        font-size: 0.65rem;
        min-height: 44px;
        padding: 0.35rem 0.8rem;
    }

    .site-tagline
    {
        font-size: 0.52rem;
        letter-spacing: 0.15em;
    }
}

/* ===== 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)
{
    /* Home page nests .fan-affiliates-page (2.8rem sides) inside the panel; shrink its side padding. */
    .site-panel .fan-affiliates-page
    {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .collective-stats
    {
        padding: 1.2rem 0.6rem;
    }

    blockquote
    {
        padding: 1.2rem 1rem 1.2rem 1.4rem;
    }

    .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: 560px)
{
    /* Fix: owned-listing flex row is too cramped on narrow phones.
       Stack thumbnail above info so both 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;
    }

    /* Prevent long page h2 titles from overflowing the card */
    .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.55rem;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* -- FanUpdate search box: keep it inside the panel -- */
@media (max-width: 560px)
{
    #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: 560px)
{
    #fanupdate .fu-entry
    {
        padding: 1.3rem 1.1rem;
    }
}