/*
 * My Comics — front-end styles
 * DOM IDs/classes mirror Comic Easel so your existing theme CSS (comicpress) keeps working.
 * Extend freely here for v1.1+ aesthetic upgrades.
 */

#comic-wrap { margin: 0 auto; text-align: center; max-width: 100%; }
#comic img { max-width: 100%; height: auto; display: inline-block; }

/* Nav wrapper — table layout so buttons share available width evenly */
#comic-nav-wrapper {
    margin: 0.75rem auto;
    border-collapse: collapse;
    width: 100%;
    max-width: 760px;
}

/* Each button cell */
#comic-nav-wrapper td.comic-nav {
    padding: 0.4rem 0.6rem;
    text-align: center;
}

/* Active buttons */
#comic-nav-wrapper td.comic-nav a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: #533595;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s ease;
    white-space: nowrap;
}
#comic-nav-wrapper td.comic-nav a:hover { background: #3d2771; }
#comic-nav-wrapper td.comic-nav a.comic-nav-comments { background: #533595; }
#comic-nav-wrapper td.comic-nav a.comic-nav-comments:hover { background: #3d2771; }

/* Void/disabled state (no first/last/prev/next target) */
#comic-nav-wrapper td.comic-nav-void span {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    color: #999;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   MOBILE: convert table to flex so buttons wrap to two rows
   display:contents on <tr> makes <td> cells direct flex children
   of <tbody>, which is set to flex + wrap.
   --------------------------------------------------------------- */
@media (max-width: 540px) {
    #comic-nav-wrapper tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }
    #comic-nav-wrapper tr {
        display: contents;
    }
    #comic-nav-wrapper td.comic-nav {
        display: block;
        padding: 0;
    }
    #comic-nav-wrapper td.comic-nav a,
    #comic-nav-wrapper td.comic-nav-void span {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }
}

.comic-chapter { font-size: 0.9rem; color: #555; margin: 0.25rem 0; }
.comic-transcript { margin-top: 1.5rem; padding: 1rem; background: #f6f6f6; border-left: 4px solid #333; }

.my-comics-cast { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.my-comics-cast .cast-item a { display: block; padding: 0.25rem 0.5rem; background: #eee; border-radius: 4px; }

.my-comics-archive .my-comics-chapter { margin-top: 1rem; font-size: 1.15rem; }