/*
 * Responsive overrides — loaded LAST so it wins over legacy desktop-first CSS.
 *
 * Strategy: keep all existing legacy CSS as the "desktop baseline" untouched.
 * This file layers `@media (max-width: ...)` overrides on top, so any rule
 * here only takes effect on narrower viewports. Desktop (>= 980px) renders
 * pixel-identical to before.
 *
 * Breakpoints: 600 (tablet), 768 (desktop), 980 (legacy site width). Mirror
 * --bp-tablet/--bp-desktop/--bp-wide in tokens.css when changing.
 *
 * Scope rules:
 *   - Phase 0 / 1: foundation only — viewport-safe wrapper + header chrome.
 *     Later phases add: hamburger nav, grids, form rows, etc.
 *   - Never add a rule here that applies above 980px; that belongs in the
 *     legacy stylesheets.
 */

/* Universal border-box: every responsive width calc assumes it. Has zero
   visual effect on legacy fixed-width layouts but is required for fluid
   wrappers and padded mobile containers. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* The legacy .blueButton background-image needs the browser's default
   <button> chrome suppressed when rendered as <button>. This used to be
   an inline style on every form submit; centralized so buttonBlue()
   doesn't have to know about it. */
button.blueButton {
    border: 0;
    cursor: pointer;
}
button.blueButton[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Fluid page wrapper. Replaces inline style="width: 980px; margin: 0 auto;"
   that was hardcoded on #mainContentWrapper in the layouts. */
#mainContentWrapper {
    max-width: var(--container-max, 980px);
    margin: 0 auto;
    width: 100%;
}

/* ------------------------------------------------------------------
 * Hamburger button — hidden on desktop, shown <=768px via the media block.
 * ------------------------------------------------------------------ */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    cursor: pointer;
    line-height: 0;
}
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
    margin: 4px 0;
    border-radius: 1px;
    transition: transform var(--transition-fast, 150ms), opacity var(--transition-fast, 150ms);
}
body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scrim shown when slide-in panel is open (so taps outside close it). */
.nav-scrim {
    display: none;
}
body.nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
}

/* ------------------------------------------------------------------
 * Tablet / mobile (<= 980px) — chrome fluidization
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
    /* Stat strip + masthead were pinned to 980px in dnexus-v4.css. */
    #v4HeaderTop .holder,
    #v4Header .holder {
        width: 100%;
        min-width: 0;
    }

    /* Side padding so content doesn't touch the viewport edge. */
    #mainContentWrapper {
        padding-left: var(--gutter, 12px);
        padding-right: var(--gutter, 12px);
    }

    /* Footer link table was style="width: 800px" — let it fluidly shrink. */
    #footerLinks,
    .footer-links-table {
        max-width: 100%;
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------
 * Mobile (<= 768px) — stack layout-table cells, slide-in sidebar
 * ------------------------------------------------------------------
 * The .layout-table outer wrapper in default/gallery layouts becomes a
 * 1-column stack here. #leftcolumn (sidenav) is hidden by default and
 * shown as a slide-in panel when body.nav-open is set by nav-toggle.js.
 *
 * Templates like gallery/browse.php and tag/browse.php emit their own
 * </td><td id="widerightcolumn"> mid-content; those cells also become
 * blocks and stack vertically below the main content. That's the
 * acceptable mobile ordering (content first, ads/tagcloud after).
 */
@media (max-width: 768px) {
    .nav-toggle { display: inline-block; vertical-align: top; }

    /* Don't force-collapse <table> in user-authored content (post bodies,
       comments, etc.) — only the layout shell. */
    .layout-table,
    .layout-table > tbody,
    .layout-table > tbody > tr {
        display: block;
    }
    .layout-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 0;
    }

    /* Sidebar slides in from the left when toggled open. */
    #leftcolumn {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 320px);
        background: var(--legacy-panel, #F4F4F4);
        border-right: 1px solid var(--legacy-border, #DCDCDC);
        z-index: 999;
        padding: 12px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-normal, 250ms);
        -webkit-overflow-scrolling: touch;
    }
    body.nav-open #leftcolumn {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Header chrome stacks: logo, search, nav links flow naturally on
       narrow viewports. The fixed pixel widths in dnexus-v4.css for these
       elements would force horizontal scroll otherwise. */
    #v4Header { height: auto; padding: 8px 0; }
    #v4Header .holder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px; }
    #dnlogo { flex: 0 0 auto; }
    #searchForm { order: 99; flex: 1 1 100%; }
    #searchForm input[type="text"] { width: 100% !important; box-sizing: border-box; }
    .navLinks { flex: 1 1 100%; order: 100; }
    .rightSide { order: 0; margin-left: auto; }

    /* Stats strip is verbose on a phone — let it scroll horizontally rather
       than wrap into 4 rows. */
    #v4HeaderTop { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #v4HeaderTop .holder { white-space: nowrap; }
}

/* Prevent background scroll behind the open slide-in panel. */
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------------
 * Legacy account / member 2-column layout tables.
 *
 * Most templates under templates/account/ and templates/member/ use an
 * outer <table> with a wide main-content cell + a fixed-width sidebar
 * cell (330px on /account/*, 450/480px on /member/*). They have no
 * class hook so we target by the inline style="width:..." attribute
 * via :has(). Modern browsers (Safari 15.4+, Chrome 105+, Firefox 121+)
 * all support :has().
 *
 * At <=768px the outer table becomes a single column: main content
 * first, sidebar below.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Browsers auto-insert <tbody>, so `table > tbody > tr > td` matches
       the rendered DOM whether the source HTML wrote <tbody> or not. List
       comes from grepping inline style="width:Npx" sidebar tds across
       templates/. Add new widths here when found. */
    table:has(> tbody > tr > td[style*="width:300px"]),
    table:has(> tbody > tr > td[style*="width: 300px"]),
    table:has(> tbody > tr > td[style*="width:330px"]),
    table:has(> tbody > tr > td[style*="width: 330px"]),
    table:has(> tbody > tr > td[style*="width:425px"]),
    table:has(> tbody > tr > td[style*="width: 425px"]),
    table:has(> tbody > tr > td[style*="width:450px"]),
    table:has(> tbody > tr > td[style*="width: 450px"]),
    table:has(> tbody > tr > td[style*="width:480px"]),
    table:has(> tbody > tr > td[style*="width: 480px"]) {
        display: block;
    }
    table:has(> tbody > tr > td[style*="width:300px"]) > tbody,
    table:has(> tbody > tr > td[style*="width:330px"]) > tbody,
    table:has(> tbody > tr > td[style*="width:425px"]) > tbody,
    table:has(> tbody > tr > td[style*="width:450px"]) > tbody,
    table:has(> tbody > tr > td[style*="width:480px"]) > tbody {
        display: block;
    }
    table:has(> tbody > tr > td[style*="width:300px"]) > tbody > tr,
    table:has(> tbody > tr > td[style*="width:330px"]) > tbody > tr,
    table:has(> tbody > tr > td[style*="width:425px"]) > tbody > tr,
    table:has(> tbody > tr > td[style*="width:450px"]) > tbody > tr,
    table:has(> tbody > tr > td[style*="width:480px"]) > tbody > tr {
        display: block;
    }
    table:has(> tbody > tr > td[style*="width:300px"]) > tbody > tr > td,
    table:has(> tbody > tr > td[style*="width:330px"]) > tbody > tr > td,
    table:has(> tbody > tr > td[style*="width:425px"]) > tbody > tr > td,
    table:has(> tbody > tr > td[style*="width:450px"]) > tbody > tr > td,
    table:has(> tbody > tr > td[style*="width:480px"]) > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Breathing room when the sidebar drops below content. */
    td[style*="width:300px"],
    td[style*="width: 300px"],
    td[style*="width:330px"],
    td[style*="width: 330px"],
    td[style*="width:425px"],
    td[style*="width: 425px"],
    td[style*="width:450px"],
    td[style*="width: 450px"],
    td[style*="width:480px"],
    td[style*="width: 480px"] {
        padding-top: 14px !important;
    }
}

/* ------------------------------------------------------------------
 * Site footer — 3 columns on desktop (preserves the legacy 800px-wide
 * <table> look), stacked at <=768px so links don't horizontal-scroll.
 * ------------------------------------------------------------------ */
.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}
.site-footer__col h5 {
    margin: 0 0 4px;
}
@media (max-width: 768px) {
    .site-footer__columns {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 12px;
    }
}

/* ------------------------------------------------------------------
 * Forms — fluidize inputs and stack hand-rolled <table>-based form
 * layouts on mobile.
 *
 * Most legacy forms (account/settings, account/compose, account/personal,
 * profile edit, etc.) use a 2-column <table> with a label cell and a
 * control cell. We target `form > table` and `form table.formish` so
 * user-authored tables in post bodies are untouched. Cells stack at
 * <=768px and every form control fills its container.
 *
 * The lists feature already uses a clean div-based pattern
 * (.list-form-row); leave it alone but mirror the rules to a
 * forward-looking generic .form-row so new templates have a canonical
 * class name.
 * ------------------------------------------------------------------ */
.form-row {
    margin-bottom: 14px;
}
.form-row > label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}
.form-row__hint {
    font-size: 0.75rem;
    color: #666;
    margin-top: 4px;
}

@media (max-width: 768px) {
    /* Stack form-table cells vertically. */
    form > table,
    form > table > tbody,
    form > table > tbody > tr,
    form .formish > table,
    form .formish > table > tbody,
    form .formish > table > tbody > tr {
        display: block;
    }
    form > table > tbody > tr > td,
    form .formish > table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
        box-sizing: border-box;
    }

    /* Every form control fills its container on mobile, including the
       legacy .myaccount_textbox class used across account pages. */
    form input[type="text"],
    form input[type="email"],
    form input[type="url"],
    form input[type="password"],
    form input[type="search"],
    form input[type="tel"],
    form input[type="number"],
    form input[type="date"],
    form select,
    form textarea,
    form .myaccount_textbox {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* File and image inputs keep their natural sizing so they don't
       look bizarrely stretched. */
    form input[type="file"],
    form input[type="image"] {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
 * Section header (rboxTabHeader): breadcrumb + tabs strip.
 * On mobile the breadcrumb wraps and the tabs scroll horizontally so 4+
 * tabs don't push the breadcrumb off-screen.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .rboxTabHeader {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rboxTabHeader .breadcrumb {
        white-space: normal;
        word-wrap: break-word;
    }
    .rboxTabHeader .rboxTabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .rboxTabHeader .rboxTabs .tab {
        display: inline-block;
    }
}

/* ------------------------------------------------------------------
 * Legacy .thumbnail / .thumbnailmedium / .thumbnailsmall (used in
 * member/wallpapers, member/favorites, search results, archive pages —
 * any surface that didn't migrate to wallpaper-thumb-grid). The fixed
 * 182×137 / 250×188 / 150×113 dimensions overflow on phones <360px wide.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .thumbnail,
    .thumbnailmedium,
    .thumbnailsmall {
        max-width: 100%;
        height: auto;
    }
}

/* ------------------------------------------------------------------
 * Wallpaper-thumb grid (used by gallery browse and any other surface
 * that renders partials/wallpaper-thumb.php).
 *
 * Desktop: 3 fixed columns — preserves the legacy <table> visual.
 * Tablet (<=768px): auto-fill so the grid adapts to whatever fits.
 * Phone (<=400px): exactly 2 columns so thumbs stay tappable.
 *
 * `.thumbnail` / .js-thumb-hover image styling lives in the legacy
 * stylesheets; we don't override it here.
 * ------------------------------------------------------------------ */
.wallpaper-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
}
.wallpaper-thumb-grid__cell {
    position: relative;
    min-height: 122px;
    text-align: center;
}
@media (max-width: 768px) {
    .wallpaper-thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
@media (max-width: 400px) {
    .wallpaper-thumb-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ------------------------------------------------------------------
 * Wallpaper view page (gallery/wallpaper.php + wallpaper/show.php)
 * ------------------------------------------------------------------
 * Desktop is a 490px (left, main content) + 300px (right, sidebar) table.
 * On <=768px we stack the cells, fluidize the inline-styled fixed widths
 * (max-width: 480px / 470px / 450px / 400px and width: 490px / 300px /
 * 100px). The voting block keeps its repeat-y background — it tiles
 * naturally at any container width.
 *
 * The "modern" www-subdomain template (templates/wallpaper/show.php) uses
 * semantic .wallpaper-view / .preview / .info / .actions classes; its
 * <img> in .preview gets a fluid clamp here.
 */
@media (max-width: 768px) {
    /* Outer two-column table → block stack. */
    .wallpaper-view-table,
    .wallpaper-view-table > tbody,
    .wallpaper-view-table > tbody > tr {
        display: block;
    }
    .wallpaper-view-table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
    }
    .wallpaper-view-table__sidebar {
        margin-top: 14px;
    }

    /* The legacy template hard-codes a max-width on each .rbox in the
       left column. Override so they fill the viewport. */
    .wallpaper-view-table__main .rbox .rboxInner[style*="max-width"],
    .wallpaper-view-table .commentContent[style*="width"] {
        max-width: 100% !important;
        width: auto !important;
    }

    /* The preview image (and the inline-styled <img id="bigthumb">) was
       capped at 450px; let it scale to the full container. */
    #bigthumb,
    .wallpaper-view .preview img,
    .wallpaper-view-table img[id="bigthumb"] {
        max-width: 100% !important;
        height: auto;
    }

    /* The leave-a-comment textarea was constrained to max-width: 470px. */
    #commentarea {
        max-width: 100% !important;
    }

    /* Comment-card body cell stops being a 60px-wide fixed avatar gutter;
       avatar shrinks slightly to keep the meta/body cell readable. */
    .comment-card__layout > tbody > tr > .comment-card__avatar {
        width: 48px;
    }
    .comment-card__avatar img {
        max-width: 100%;
        height: auto;
    }

    /* Modern www wallpaper view: stack preview + info vertically. */
    .wallpaper-view .wallpaper-main {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .wallpaper-view .info { width: 100%; }
}

/* ------------------------------------------------------------------
 * Touch-target sizing for legacy blue buttons on mobile.
 * The desktop button is 17px tall (.blueButton height + padding) — well
 * under the 44px iOS / 48px Android target guidance. Bump padding so the
 * tap area is comfortable without changing visual weight at narrow
 * widths. The 3-span GIF caps remain anchored to top:0 so the visual
 * stays consistent; the extra padding is below the cap.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .blueButton {
        height: auto;
        min-height: 36px;
        padding: 10px 14px 8px;
        line-height: 1.2;
    }
    .blueButton .bbL,
    .blueButton .bbR {
        height: 100%;
        min-height: 36px;
    }
}