/* Phase 24 - Mandate Mobile Remove Side Space
   Update only:
   public/assets/css/public-mandate.css
*/

/* Desktop stays wide and centered */
.mandate-sheet{
    width:calc(100vw - 56px)!important;
    max-width:1800px!important;
    margin:18px auto!important;
    box-sizing:border-box!important;
}

/* Mobile: remove left/right wasted space */
@media (max-width:768px){
    html,body{
        overflow-x:hidden!important;
    }

    /* Remove wrapper side spaces only when it contains mandate */
    .page-intro:has(.mandate-sheet),
    .public-card:has(.mandate-sheet),
    .public-page-card:has(.mandate-sheet),
    .content-card:has(.mandate-sheet),
    .section-card:has(.mandate-sheet),
    .main-content:has(.mandate-sheet),
    .public-content:has(.mandate-sheet),
    .content-wrap:has(.mandate-sheet),
    .page-wrap:has(.mandate-sheet),
    main:has(.mandate-sheet){
        width:100vw!important;
        max-width:100vw!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding-left:0!important;
        padding-right:0!important;
        border-left:0!important;
        border-right:0!important;
        border-radius:0!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    .mandate-sheet{
        width:100vw!important;
        max-width:100vw!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        margin-top:4px!important;
        margin-bottom:8px!important;
        padding:3px!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
        box-shadow:none!important;
    }

    .mandate-callout{
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:7px!important;
        border-radius:8px!important;
        border-left-width:4px!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    .mandate-callout p{
        font-size:10.6px!important;
        line-height:1.32!important;
        margin:0 0 6px!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .mandate-flow,
    .ppdo-mandate-enhanced-list{
        width:100%!important;
        max-width:100%!important;
        margin:6px 0 0!important;
        padding:0!important;
        gap:6px!important;
        box-sizing:border-box!important;
    }

    .mandate-banner,
    .mandate-callout li,
    .mandate-copy li,
    .ppdo-mandate-enhanced-item{
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:7px 7px 7px 28px!important;
        border-radius:8px!important;
        font-size:10.6px!important;
        line-height:1.32!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .mandate-copy{
        font-size:10.6px!important;
        line-height:1.32!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .mandate-number,
    .mandate-callout li::before,
    .mandate-copy li::before,
    .ppdo-mandate-enhanced-item::before{
        left:6px!important;
        top:7px!important;
        width:17px!important;
        height:17px!important;
        font-size:7px!important;
        border-width:1px!important;
    }

    .mandate-banner:hover,
    .mandate-callout li:hover,
    .mandate-copy li:hover,
    .ppdo-mandate-enhanced-item:hover{
        transform:none!important;
    }
}

/* Small Android / iPhone portrait */
@media (max-width:430px){
    .mandate-sheet{
        width:100vw!important;
        max-width:100vw!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding:2px!important;
    }

    .mandate-callout{
        padding:6px!important;
        border-radius:7px!important;
    }

    .mandate-callout p,
    .mandate-copy,
    .mandate-banner,
    .mandate-callout li,
    .mandate-copy li,
    .ppdo-mandate-enhanced-item{
        font-size:9.8px!important;
        line-height:1.28!important;
    }

    .mandate-banner,
    .mandate-callout li,
    .mandate-copy li,
    .ppdo-mandate-enhanced-item{
        padding:6px 6px 6px 25px!important;
        border-radius:7px!important;
    }

    .mandate-number,
    .mandate-callout li::before,
    .mandate-copy li::before,
    .ppdo-mandate-enhanced-item::before{
        left:5px!important;
        top:6px!important;
        width:16px!important;
        height:16px!important;
        font-size:6.5px!important;
    }
}

/* Very small screen */
@media (max-width:360px){
    .mandate-callout p,
    .mandate-copy,
    .mandate-banner,
    .mandate-callout li,
    .mandate-copy li,
    .ppdo-mandate-enhanced-item{
        font-size:9.2px!important;
        line-height:1.25!important;
    }

    .mandate-banner,
    .mandate-callout li,
    .mandate-copy li,
    .ppdo-mandate-enhanced-item{
        padding-left:23px!important;
    }

    .mandate-number,
    .mandate-callout li::before,
    .mandate-copy li::before,
    .ppdo-mandate-enhanced-item::before{
        width:15px!important;
        height:15px!important;
    }
}