/* Accessibility copied/adapted from Sustainability(12) */
.sdgs-accessibility-widget{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:99998;
    font-family:'Inter','Sarabun',sans-serif;
}

.sdgs-accessibility-widget.cookie-visible{
    bottom:48px;
}

.sdgs-accessibility-toggle{
    width:56px;
    height:56px;
	bottom:120px;
    border-radius:50%;
    border:3px solid #ffffff;
    background:#2f3f99;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.sdgs-accessibility-toggle:hover{
    transform:translateY(-3px);
    background:#003b7a;
    box-shadow:0 18px 38px rgba(0,0,0,.3);
}

.sdgs-accessibility-panel{
    position:absolute;
    right:0;
    bottom:72px;
    width:min(480px, calc(100vw - 32px));
    max-height:min(760px, calc(100vh - 130px));
    overflow:hidden;
    background:#eef0fa;
    border-radius:12px 12px 22px 22px;
    box-shadow:0 25px 70px rgba(6,20,67,.35);
    animation:sdgsA11yPanelIn .25s ease both;
}

.sdgs-accessibility-panel[hidden]{
    display:none !important;
}

@keyframes sdgsA11yPanelIn{
    from{opacity:0; transform:translateY(16px) scale(.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
}

.sdgs-accessibility-header{
    background:#2f3f99;
    color:#ffffff;
    min-height:78px;
    padding:18px 22px 22px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    border-radius:12px 12px 0 0;
    position:relative;
}

.sdgs-accessibility-header::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-1px;
    width:88px;
    height:10px;
    transform:translateX(-50%);
    background:#eef0fa;
    border-radius:20px 20px 0 0;
}

.sdgs-accessibility-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:24px;
    line-height:1;
}

.sdgs-accessibility-title i{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    color:#2f3f99;
    font-size:18px;
}

.sdgs-accessibility-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.sdgs-accessibility-icon-btn{
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:#ffffff;
    font-size:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:.95;
}

.sdgs-accessibility-icon-btn:hover{
    opacity:1;
    transform:scale(1.08);
}

.sdgs-accessibility-body{
    max-height:590px;
    overflow-y:auto;
    padding:16px 14px 82px;
}

.sdgs-accessibility-section{
    background:#ffffff;
    border-radius:16px;
    padding:20px;
    margin-bottom:16px;
    box-shadow:0 8px 24px rgba(21,32,78,.05);
}

.sdgs-accessibility-section h3{
    font-size:16px;
    font-weight:700;
    color:#4d4f5c;
    margin:0 0 14px;
}

.sdgs-accessibility-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.sdgs-accessibility-option{
    min-height:80px;
    border:0;
    border-radius:14px;
    background:#f1f1f4;
    color:#161821;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 12px;
    cursor:pointer;
    text-align:left;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sdgs-accessibility-option span{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#111;
}

.sdgs-accessibility-option em{
    font-style:normal;
    font-size:15px;
    font-weight:500;
    line-height:1.25;
}

.sdgs-accessibility-option:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(21,32,78,.12);
}

.sdgs-accessibility-option.is-active{
    background:#dfe6ff;
    outline:3px solid rgba(47,63,153,.2);
}

.sdgs-accessibility-option.is-active span{
    background:#2f3f99;
    color:#ffffff;
}

.sdgs-accessibility-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:48px;
    background:#2f3f99;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    border-radius:0 0 22px 22px;
}

.sdgs-accessibility-footer button{
    border:0;
    background:#ffffff;
    color:#2f3f99;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    padding:6px 12px;
    cursor:pointer;
}

.sdgs-accessibility-footer span{
    font-size:13px;
    font-weight:700;
    opacity:.95;
}

/* Applied accessibility modes */
html.a11y-bigger-text body{font-size:19px !important;}
html.a11y-bigger-text p,
html.a11y-bigger-text li,
html.a11y-bigger-text a,
html.a11y-bigger-text button,
html.a11y-bigger-text input,
html.a11y-bigger-text textarea{font-size:1.12em !important;}

html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li{line-height:1.9 !important;}

html.a11y-text-align p,
html.a11y-text-align li,
html.a11y-text-align .service-entry{text-align:left !important;}

html.a11y-readable-font body,
html.a11y-readable-font h1,
html.a11y-readable-font h2,
html.a11y-readable-font h3,
html.a11y-readable-font h4,
html.a11y-readable-font h5,
html.a11y-readable-font h6{font-family:Arial, Helvetica, sans-serif !important;}

html.a11y-contrast body{background:#000 !important; color:#fff !important;}
html.a11y-contrast p,
html.a11y-contrast li,
html.a11y-contrast span,
html.a11y-contrast div{color:#fff !important;}
html.a11y-contrast h1,
html.a11y-contrast h2,
html.a11y-contrast h3,
html.a11y-contrast h4,
html.a11y-contrast h5,
html.a11y-contrast h6,
html.a11y-contrast a{color:#ffff66 !important;}
html.a11y-contrast .service-entry,
html.a11y-contrast .post-item,
html.a11y-contrast .detail-sidebar-card,
html.a11y-contrast .project-info-card{background:#111 !important; border-color:#fff !important;}

html.a11y-grayscale{filter:grayscale(1) !important;}

html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video,
html.a11y-hide-images figure{visibility:hidden !important;}

html.a11y-pause-animations *,
html.a11y-pause-animations *::before,
html.a11y-pause-animations *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;}

html.a11y-highlight-links a{background:#ffeb3b !important; color:#003b7a !important; outline:2px solid #003b7a !important; text-decoration:underline !important; text-underline-offset:3px;}

html.a11y-outline-focus *:focus{outline:4px solid #ffcc00 !important; outline-offset:3px !important;}

.sdgs-reading-mask{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:99997;
    --mask-y:50vh;
    background:linear-gradient(to bottom,
        rgba(0,0,0,.72) 0,
        rgba(0,0,0,.72) calc(var(--mask-y) - 70px),
        transparent calc(var(--mask-y) - 70px),
        transparent calc(var(--mask-y) + 70px),
        rgba(0,0,0,.72) calc(var(--mask-y) + 70px),
        rgba(0,0,0,.72) 100%);
}

.sdgs-page-structure-box{
    position:fixed;
    right:24px;
    top:110px;
    z-index:99996;
    width:min(360px, calc(100vw - 32px));
    max-height:60vh;
    overflow:auto;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    padding:18px;
    color:#003b7a;
}

.sdgs-page-structure-box strong{display:block; margin-bottom:10px; font-size:18px;}
.sdgs-page-structure-box ul{margin:0; padding-left:18px;}
.sdgs-page-structure-box li{margin:8px 0; line-height:1.35;}
.sdgs-page-structure-box li.level-h2{margin-left:12px;}
.sdgs-page-structure-box li.level-h3{margin-left:24px;}
.sdgs-page-structure-box a{color:#003b7a; text-decoration:underline;}
.sdgs-page-structure-close{float:right; border:0; background:#003b7a; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer;}

@media(max-width:575.98px){
    .sdgs-accessibility-widget{right:14px; bottom:16px;}
    .sdgs-accessibility-widget.cookie-visible{bottom:22px;}
    .sdgs-accessibility-toggle{width:52px; height:52px; font-size:23px;}
    .sdgs-accessibility-panel{right:-4px; bottom:55px; width:calc(100vw - 20px); max-height:calc(100vh - 115px);}
    .sdgs-accessibility-header{min-height:0px; padding:16px 18px 20px;}
    .sdgs-accessibility-title{font-size:21px;}
    .sdgs-accessibility-body{padding:14px 12px 76px;}
    .sdgs-accessibility-section{padding:16px;}
    .sdgs-accessibility-grid{gap:10px;}
    .sdgs-accessibility-option{min-height:76px; padding:12px 10px;}
    .sdgs-accessibility-option em{font-size:14px;}
}




/* =========================================================
   MUGR Homepage placement override
   Accessibility launcher sits under the fixed contact channel icons.
   Visual/functionality above is sourced from Sustainability.
   ========================================================= */
@media (min-width:992px){
    .sdgs-accessibility-widget{
        right:20px !important;
        top:calc(50% + 185px) !important;
        bottom:auto !important;
    }
    .sdgs-accessibility-panel{
        position:fixed !important;
        right:18px !important;
        top:auto !important;
        bottom:24px !important;
    }
}
@media (max-width:991px){
    .sdgs-accessibility-widget{
        right:14px !important;
        bottom:16px !important;
        top:auto !important;
    }
}
/* Keep widget above homepage layers */
.sdgs-accessibility-widget{z-index:10050!important}
.sdgs-accessibility-panel{z-index:10051!important}


/* =========================================================
   Accessibility V1.1 — stylesheet/header repair + launcher guarantee
   ========================================================= */
.sdgs-accessibility-widget{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
.sdgs-accessibility-toggle{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
.sdgs-a11y-human-icon{
    display:block !important;
    width:31px !important;
    height:31px !important;
    color:#fff !important;
}

/* Native hidden attribute must win for the panel until opened */
.sdgs-accessibility-panel[hidden],
.sdgs-reading-mask[hidden]{
    display:none !important;
}

/* Desktop: directly below the existing fixed contact-channel stack */
@media (min-width:992px){
    .sdgs-accessibility-widget{
        right:20px !important;
        top:calc(50% + 190px) !important;
        bottom:auto !important;
    }
}

/* Mobile: fixed bottom-right unless opened from mobile-menu footer */
@media (max-width:991px){
    .sdgs-accessibility-widget{
        right:14px !important;
        top:auto !important;
        bottom:18px !important;
    }
}


/* =========================================================
   Accessibility V1.2 — desktop spacing + larger launcher icon
   ========================================================= */
.sdgs-accessibility-toggle{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
}
.sdgs-a11y-human-icon{
    width:42px !important;
    height:42px !important;
}

/* Move below the last contact-channel button with clear separation */
@media (min-width:992px){
    .sdgs-accessibility-widget{
        right:18px !important;
        top:calc(50% + 230px) !important;
        bottom:auto !important;
    }
}
@media (max-width:991px){
    .sdgs-accessibility-toggle{
        width:62px !important;
        height:62px !important;
        min-width:62px !important;
        min-height:62px !important;
    }
    .sdgs-a11y-human-icon{
        width:38px !important;
        height:38px !important;
    }
}


/* =========================================================
   Accessibility V1.3 — precise right alignment + wide desktop spacing
   - Align launcher center line with the fixed contact buttons above.
   - Move farther down on very wide desktop screens to avoid overlap.
   ========================================================= */

/* Desktop / notebook: same right-side center line as contact buttons */
@media (min-width:992px){
    .sdgs-accessibility-widget{
        right:14px !important;
        left:auto !important;
        bottom:auto !important;
    }

    .sdgs-accessibility-toggle{
        margin:0 !important;
    }
}

/* Notebook / normal desktop */
@media (min-width:992px) and (max-width:1599px){
    .sdgs-accessibility-widget{
        top:calc(50% + 230px) !important;
    }
}

/* Very wide desktop: give the contact stack more vertical clearance */
@media (min-width:1600px){
    .sdgs-accessibility-widget{
        top:calc(50% + 275px) !important;
    }
}

/* Extra-wide screens */
@media (min-width:1900px){
    .sdgs-accessibility-widget{
        top:calc(50% + 290px) !important;
    }
}

/* Keep panel inside viewport even when launcher is lower */
@media (min-width:992px){
    .sdgs-accessibility-panel{
        right:18px !important;
        left:auto !important;
        top:auto !important;
        bottom:20px !important;
        max-height:calc(100vh - 40px) !important;
    }
}


/* =========================================================
   Accessibility V1.4 — mobile single-launcher rule
   ========================================================= */
@media (max-width:991px){
    .sdgs-accessibility-widget{
        display:block !important;
        right:14px !important;
        bottom:calc(18px + env(safe-area-inset-bottom)) !important;
        top:auto !important;
    }
}
