/* Photodromm / Oshine + Tatsu. The public content reflows in an 80% frame.
   All rules are desktop-only and require the server-assigned body class.
   Covers (page 620), the editor and /access never receive that class. */
@media screen and (min-width: 1025px) {
    body.phd-public-width-80 {
        background: #000 !important;
    }

    body.phd-public-width-80 #main-wrapper {
        background: #000 !important;
    }

    body.phd-public-width-80 #main {
        width: 80% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* The ordinary header is positioned relative to #main by Oshine. */
    body.phd-public-width-80 #header #header-inner-wrap {
        width: 100%;
        box-sizing: border-box;
    }

    /* Oshine changes this header to fixed positioning while scrolling. */
    body.phd-public-width-80.header-transparent #header #header-inner-wrap.no-transparent,
    body.phd-public-width-80.sticky-header #header #header-inner-wrap.no-transparent {
        width: 80% !important;
        left: 10% !important;
        right: auto !important;
    }

    /* Compact the common desktop header. On the live theme the logo had
       50px of vertical padding plus a 10px margin, followed by a 100px menu.
       Signature keeps its existing inset. Logo/menu align to the image edge. */
    body.phd-public-width-80 #header-top-bar-left {
        padding-left: 24px;
        padding-right: 24px;
        text-align: left;
    }

    body.phd-public-width-80 #header-inner-wrap.style4,
    body.phd-public-width-80 #header-inner-wrap.style4 #header-wrap {
        height: auto !important;
        min-height: 0 !important;
        line-height: normal !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        text-align: left;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 .logo {
        display: table;
        float: none;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 0 4px !important;
        line-height: 0 !important;
        text-align: left;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 .logo a {
        display: block;
        position: relative;
        line-height: 0 !important;
    }

    /* The theme swaps transparent/normal/sticky logos using opacity and
       positioning. Preserve that switch, anchoring all copies to the link. */
    body.phd-public-width-80 #header-inner-wrap.style4 .logo img {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 #header-bottom-bar {
        clear: both;
        width: 100%;
        box-sizing: border-box;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 40px !important;
        background: #000 !important;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 #navigation {
        float: none;
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto !important;
        min-height: 0 !important;
        line-height: 40px !important;
        font-size: 22.4px;
        font-size: clamp(16px, 1.64vw, 22.4px);
        text-align: left;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 #menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: clamp(16px, 2.1vw, 30px);
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        line-height: 40px !important;
    }

    /* Clearfix pseudo-elements otherwise participate in the flex row and
       create an extra gap before the first label. */
    body.phd-public-width-80 #header-inner-wrap.style4 #menu::before,
    body.phd-public-width-80 #header-inner-wrap.style4 #menu::after {
        display: none;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 #menu > li {
        float: none;
        flex: 0 0 auto;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 40px !important;
    }

    body.phd-public-width-80 #header-inner-wrap.style4 #menu > li > a {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 40px !important;
        white-space: nowrap;
    }

    /* Marked only for actual fullscreen Slider Revolution modules. */
    body.phd-public-width-80 .phd-contained-slider-section,
    body.phd-public-width-80 .phd-contained-slider-section > .tatsu-fullscreen-wrap {
        height: auto !important;
        min-height: 0 !important;
    }

    body.phd-public-width-80 .phd-contained-slider-section .tatsu-section-pad {
        padding-bottom: 0 !important;
    }

    /* Also handles a slider first initialized on a narrow window, then enlarged.
       Its original forced-fullwidth wrapper must measure the new parent width. */
    body.phd-public-width-80 #main .phd-contained-slider-wrap {
        width: 100% !important;
        left: 0 !important;
        position: relative !important;
    }

    body.phd-public-width-80 .phd-contained-slider-section rs-fw-forcer,
    body.phd-public-width-80 .phd-contained-slider-outer > rs-fw-forcer {
        display: none !important;
    }
}