/* ========================================================================== 
   PsychoForum global cleanup
   ========================================================================== */

/* Preserve the uploaded PsychoForum logo's native aspect ratio everywhere.
   Flightdeck writes width/height attributes; CSS height:auto prevents distortion. */
img.custom_logo {
    height: auto !important;
}

/* --------------------------------------------------------------------------
   Custom forum images (BPD, depression, etc.)
   --------------------------------------------------------------------------
   The old global translate(40px, 5px) moved every icon by hand and produced
   inconsistent placement between forums and screen sizes. Rows with a custom
   forum image now get a dedicated class from forumlist_body.html and use a
   normal RTL/LTR float instead.
   -------------------------------------------------------------------------- */

/* Custom artwork replaces Milk's small generic forum-status circle. */
.css_icons_enabled .forums dl.row-item.has-custom-forum-image::before,
.css_icons_enabled .forums dl.row-item.has-custom-forum-image::after {
    display: none !important;
}

/* Remove the reserved padding that Milk keeps for its generic status icon. */
dl.row-item.has-custom-forum-image dt .list-inner,
.rtl dl.row-item.has-custom-forum-image dt .list-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Consistent custom icon box. */
dl.row-item.has-custom-forum-image .forum-image {
    float: left !important;
    display: block !important;
    padding: 0 !important;
    margin: 2px 18px 8px 0 !important;
    line-height: 0 !important;
}

.rtl dl.row-item.has-custom-forum-image .forum-image {
    float: right !important;
    margin: 2px 0 8px 18px !important;
}

dl.row-item.has-custom-forum-image .forum-image img {
    display: block !important;
    width: 128px !important;
    height: 128px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    margin: 0 !important;
}

/* Keep title/description aligned as one clean text block beside the image. */
dl.row-item.has-custom-forum-image .forumtitle {
    display: block !important;
    padding-top: 6px !important;
}

dl.row-item.has-custom-forum-image .forumtitle + br {
    display: none !important;
}

dl.row-item.has-custom-forum-image .forum_description {
    display: block !important;
    margin-top: 5px !important;
}

.rtl dl.row-item.has-custom-forum-image dt .list-inner,
.rtl dl.row-item.has-custom-forum-image .forumtitle,
.rtl dl.row-item.has-custom-forum-image .forum_description {
    text-align: right !important;
}

/* Ensure the row always contains the floated artwork. */
dl.row-item.has-custom-forum-image dt .list-inner::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 767px) {
    /* Slightly smaller artwork on phones, with proportional spacing. */
    dl.row-item.has-custom-forum-image .forum-image img {
        width: 100px !important;
        height: 100px !important;
    }

    dl.row-item.has-custom-forum-image .forum-image {
        margin: 2px 14px 8px 0 !important;
    }

    .rtl dl.row-item.has-custom-forum-image .forum-image {
        margin: 2px 0 8px 14px !important;
    }
}

@media (max-width: 380px) {
    dl.row-item.has-custom-forum-image .forum-image img {
        width: 88px !important;
        height: 88px !important;
    }
}

/* PsychoForum Mobile Header Fix v5 — mobile Milk particles canvas reset */
/* ========================================================================== 
   PsychoForum mobile header override for Milk v2
   --------------------------------------------------------------------------
   Scope: phones only (<= 767px). Desktop/tablet styling is left untouched.

   Goals:
   1. Keep the current 2171×433 panoramic artwork fully visible horizontally (no face cropping).
   2. Remove Milk's large mobile header margins that create an oversized banner.
   3. Preserve the custom logo's intrinsic aspect ratio (no stretching).
   4. Keep the logo centered above the background art.
   5. Prevent the particles canvas from creating extra header height on phones.
   ========================================================================== */

@media (max-width: 767px) {

    /*
       PsychoForum mobile header geometry.
       IMPORTANT: .headerbar and .forum_header use the SAME height.
       This removes the dark strip Milk was leaving underneath the artwork.
       The 20.5vw value preserves the current compact mobile look.
    */
    .headerbar {
        --pf-mobile-header-h: clamp(76px, 20.5vw, 155px);

        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: var(--pf-mobile-header-h) !important;
        min-height: var(--pf-mobile-header-h) !important;
        max-height: var(--pf-mobile-header-h) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: none !important;
    }

    /* The artwork layer is pinned to the header; it cannot create extra space. */
    .headerbar .forum_header {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        /*
         * Keep the entire horizontal composition visible.
         * The shallow mobile header crops only a little vertically,
         * never from the left/right faces.
         */
        background-repeat: no-repeat !important;
        background-position: center 43% !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;

        overflow: hidden !important;
    }

    /* Make the overlay follow the artwork instead of affecting layout height. */
    .headerbar_overlay_container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }

    /*
       Milk's footer JS writes an inline pixel height to .particles_container.
       Override it on phones so the container can never become taller than
       the panoramic artwork. It also becomes the positioning layer for the logo.
    */
    .headerbar .particles_container,
    .headerbar #particles-js {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Milk normally adds 50-100px vertical margins around the logo. */
    body.navbar_o_header .site-description,
    body.navbar_o_header .site-description.logo_left,
    body.navbar_o_header .site-description.logo_right,
    body.navbar_i_header .site-description,
    body.navbar_i_header .site-description.logo_left,
    body.navbar_i_header .site-description.logo_right,
    #site-description {
        float: none !important;
        position: relative !important;
        z-index: 3 !important;

        width: 100% !important;
        height: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #site-description > a,
    #logo,
    .logo {
        float: none !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /*
       Custom logo uploaded in Milk ACP.
       Critical: both width and height are returned to auto so the browser
       preserves the source image ratio even if ACP contains fixed dimensions.
    */
    img.custom_logo,
    #site-description img,
    #logo img,
    .logo img {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: min(62vw, 340px) !important;
        max-height: 64% !important;

        object-fit: contain !important;
        object-position: center center !important;

        margin: 0 auto !important;
    }

    /* Fallback for Milk's stock span-based logo when no custom logo is used. */
    .site_logo {
        display: block !important;
        width: min(62vw, 340px) !important;
        height: clamp(42px, 12vw, 72px) !important;
        margin: 0 auto !important;

        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    /* The graphical PsychoForum logo already contains the subtitle. */
    #site-description h1,
    #site-description p,
    .site-description h1,
    .site-description p {
        display: none !important;
    }

    /*
       Keep Milk v2 animated particles on mobile, but lock the canvas to the
       compact PsychoForum header so it cannot alter the layout or create gaps.
    */
    .headerbar .particles_container,
    .headerbar #particles-js {
        z-index: 2 !important;
        pointer-events: none !important;
    }

    #particles-js > canvas.particles-js-canvas-el,
    .particles-js-canvas-el {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;

        /*
         * Milk's overall_footer.html later injects:
         *   margin-top: -headerbar_height
         * onto the generated canvas. That desktop trick pushes the canvas
         * completely outside our compact mobile header. Reset it here.
         */
        margin: 0 !important;
        margin-top: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* Logo always stays above the animated particles. */
    #site-description,
    .site-description {
        z-index: 3 !important;
    }

    /*
       Bring the rounded forum body directly up to the header.
       A small overlap hides any 1px browser seam without covering the artwork.
    */
    #inner-wrap {
        margin-top: -8px !important;
    }
}

/* Very small phones: slightly smaller logo, same undistorted proportions. */
@media (max-width: 430px) {
    img.custom_logo,
    #site-description img,
    #logo img,
    .logo img {
        max-width: 60vw !important;
        max-height: 60% !important;
    }

    .site_logo {
        width: 60vw !important;
        max-width: 285px !important;
        height: clamp(40px, 11vw, 62px) !important;
    }
}


/* ========================================================================== 
   PsychoForum desktop/tablet header background fix
   --------------------------------------------------------------------------
   Keep the header artwork proportional at desktop widths. Milk's current
   Flightdeck setting leaves the background at its native 2171px width, which
   makes the composition look zoomed/cropped differently as the viewport
   changes. `cover` scales proportionally; it does not stretch the image.
   Mobile (<= 767px) remains controlled by the rules above.
   ========================================================================== */
@media (min-width: 768px) {
    .headerbar .forum_header {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}