/* ===== Ghost-X Mobile Responsive Overrides ===== */
/* Only applies at phone-sized widths. Desktop layout is untouched. */

@media (max-width: 768px) {

    /* Header: stack badge + search bars + circle buttons */
    .header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }

    .ghostx-badge {
        margin: 0 auto;
    }

    .pill-ring {
        width: 90%;
        margin: 0 auto;
    }

    .circle-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Carousel nav: allow horizontal scroll, hide arrow buttons */
    .scroll-nav {
        padding: 4px 0;
    }

    #navLeftArrow,
    #navRightArrow {
        display: none;
    }

    .carousel-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Toolbar row: stack everything vertically */
    .top-toolbars-row {
        flex-direction: column;
        align-items: stretch;
    }

    .top-toolbars-row-right {
        flex-direction: column;
    }

    .right-column-2-row {
        flex-direction: column;
    }

    .left-toolbar,
    .right-toolbar-1,
    .right-toolbar-2 {
        width: 100%;
    }

    .dropdown-toolbar {
        width: 100%;
    }

    .toolbar-button {
        width: 100%;
    }

    /* Main content area: single column, reordered so content shows first */
    .content-container {
        flex-direction: column;
    }

    .main-content {
        order: 1;
    }

    .ghost-nav-left {
        order: 2;
    }

    .ghost-nav-right {
        order: 3;
    }

    .ghost-nav-left,
    .ghost-nav-right,
    .main-content {
        width: 100%;
        max-width: 100%;
    }

    .ad-divider-vertical {
        display: none;
    }

    /* Images and video: never overflow the screen width */
    .main-content-img,
    .video-player {
        max-width: 100%;
        height: auto;
    }

    .content-container .main-content .image-gallery {
        flex-direction: column !important;
    }

    /* Comment box: full width, comfortable tap targets */
    .post-box {
        flex-direction: column;
    }

    .post-input {
        width: 100%;
    }

    .post-button {
        width: 100%;
        padding: 12px;
    }
}