/* TAI-ECOSAFE shared branded header. Loaded on every portal page. */
.header-wrapper {
    color:#fff;
    background:linear-gradient(90deg,rgba(2,31,27,.9),rgba(2,43,35,.35)),
        url("../images/layout/jonathan-borba-Ui73wdp0wok-unsplash.jpg") center 46%/cover no-repeat;
    box-shadow:0 10px 30px rgba(7,51,43,.17);
}
.header-wrapper header { max-width:none; margin:0; padding:0; background:transparent; }
.header-wrapper .top-wrapper { position:relative; width:100%; max-width:none; min-height:121px; margin:0; padding:0 36px; background:transparent; box-sizing:border-box; }
.header-wrapper .top-brand { min-height:121px; padding:0; display:flex; align-items:center; gap:32px; }
.header-wrapper .top-brand>a,.header-wrapper .top-brand .image-container { display:block; }
.header-wrapper .top-brand .image-container img { width:112px; height:112px; object-fit:contain; filter:drop-shadow(0 4px 7px rgba(0,0,0,.35)); }
.header-wrapper .brand-name { margin-left:0; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.header-wrapper .brand-name .hed1 { font-size:1.5rem; line-height:1.15; font-weight:750; letter-spacing:-.025em; }
.header-wrapper .brand-name .hed2 { margin-top:7px; font-size:1rem; font-weight:500; }
.header-wrapper .menu-wrapper { border-top:1px solid rgba(255,255,255,.13); background:rgba(3,67,56,.95); backdrop-filter:blur(8px); }
.header-wrapper .top-menu { max-width:1440px; height:62px; margin:auto; padding:0; }
.header-wrapper .top-menu>.menu { position:relative; min-height:62px; padding:0 90px 0 64px; display:flex; align-items:stretch; gap:5px; box-sizing:border-box; }
.header-wrapper .top-menu>.menu>li { position:relative; display:flex; align-items:center; }
.header-wrapper .top-menu>.menu>li>a { height:62px; display:flex; align-items:center; padding:0 17px; color:#fff; font-size:.98rem; font-weight:550; line-height:1.25; text-decoration:none; white-space:nowrap; box-sizing:border-box; }
.header-wrapper .top-menu>.menu>li>a:hover,.header-wrapper .top-menu>.menu>li>a:focus-visible { color:#d7f29c; background:rgba(255,255,255,.07); }
.header-wrapper #lang-select-li { margin-left:auto; }
.header-wrapper #language-selection { min-width:150px; padding:8px 36px 8px 16px; border:1px solid rgba(255,255,255,.55); border-radius:9px; color:#fff; background:rgba(0,37,31,.45); }
.header-wrapper .top-menu>.menu>li.account-actions { display:flex; align-items:center; gap:7px; margin-left:8px; }
.header-wrapper .top-menu>.menu>li.account-actions.is-authenticated { position:absolute; top:-87px; right:36px; max-width:48%; margin:0; }
.header-wrapper .account-actions form { margin:0; }
.header-wrapper .account-welcome { max-width:150px; overflow:hidden; color:#dff3b3; font-size:.76rem; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.header-wrapper .account-button { min-height:40px; padding:8px 13px; border:0; border-radius:8px; background:linear-gradient(135deg,#a3cf45,#79b72d); color:#fff; font:inherit; font-size:.8rem; font-weight:700; white-space:nowrap; cursor:pointer; box-shadow:0 7px 16px rgba(77,132,28,.24); }

@media(min-width:768px){
    .header-wrapper .side-menu:not(:checked)~nav.top-menu>.menu,
    .header-wrapper .side-menu:checked~nav.top-menu>.menu{display:flex}
    .header-wrapper .top-menu>.menu>li>ul { top:100%; left:0; z-index:1000; min-width:220px; padding:8px 0; border:1px solid rgba(255,255,255,.16); border-radius:0 0 10px 10px; background:#074c40; box-shadow:0 14px 30px rgba(0,31,26,.28); box-sizing:border-box; }
    .header-wrapper .top-menu>.menu>li>ul>li { display:block; padding:0; }
    .header-wrapper .top-menu>.menu>li>ul>li>a { display:block; padding:11px 18px; color:#fff; font-size:.9rem; font-weight:550; line-height:1.35; text-decoration:none; white-space:nowrap; }
    .header-wrapper .top-menu>.menu>li>ul>li>a:hover,.header-wrapper .top-menu>.menu>li>ul>li>a:focus-visible { color:#e3f5bc; background:rgba(255,255,255,.1); }
}

@media(max-width:1350px){
    .header-wrapper .top-wrapper{padding-left:28px;padding-right:28px}
    .header-wrapper .top-brand{gap:20px}.header-wrapper .top-brand .image-container img{width:100px;height:100px}
    .header-wrapper .top-menu>.menu{padding-left:20px;padding-right:150px;gap:0}
    .header-wrapper .top-menu>.menu>li>a{padding-left:8px;padding-right:8px;font-size:.86rem}
    .header-wrapper #language-selection{min-width:116px;padding-left:10px;padding-right:24px;font-size:.82rem}
    .header-wrapper .top-menu>.menu>li.account-actions.is-authenticated{right:28px;max-width:50%}
}
@media(min-width:1001px) and (max-width:1135px){
    .header-wrapper .top-menu>.menu{padding-right:20px}
    .header-wrapper .account-welcome{display:none}
    .header-wrapper .account-button{padding-left:9px;padding-right:9px;font-size:.72rem}
}
@media(min-width:768px) and (max-width:1000px){
    .header-wrapper .menu-wrapper{min-height:54px}
    .header-wrapper .hamb{display:inline-block;color:#fff}
    .header-wrapper .top-menu{height:auto;max-height:0;padding:0;text-align:left}
    .header-wrapper .side-menu:not(:checked)~nav.top-menu>.menu{display:none}
    .header-wrapper .side-menu:checked~nav.top-menu{max-height:none}
    .header-wrapper .side-menu:checked~nav.top-menu>.menu{display:block}
    .header-wrapper .top-menu>.menu{min-height:0;padding:8px 18px 18px}
    .header-wrapper .top-menu>.menu>li{display:block;padding:0}
    .header-wrapper .top-menu>.menu>li>a{display:block;height:auto;padding:12px 8px;font-size:.9rem}
    .header-wrapper #lang-select-li{margin:8px 0 0;padding:0}
    .header-wrapper #language-selection{width:100%}
    .header-wrapper .top-menu>.menu>li.account-actions,.header-wrapper .top-menu>.menu>li.account-actions.is-authenticated{position:static;display:flex;max-width:none;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:10px 8px}
    .header-wrapper .account-welcome{flex-basis:100%;max-width:none;padding-bottom:2px;font-size:.85rem}
    .header-wrapper .account-button{min-height:40px;padding:8px 16px;font-size:.85rem}
    .header-wrapper .top-menu>.menu>li>ul{position:static;width:100%;min-width:0;margin:0;padding:4px 0 4px 16px;border:0;border-radius:0;background:rgba(0,0,0,.12);box-shadow:none}
    .header-wrapper .top-menu>.menu>li>ul>li>a{padding:9px 12px;font-size:.84rem}
}
@media(max-width:767px){
    .header-wrapper{background-position:65% center}
    .header-wrapper .top-wrapper{min-height:102px;padding:10px 18px}
    .header-wrapper .top-brand{min-height:82px;gap:12px;padding-right:56px}
    .header-wrapper .top-brand .image-container img{width:66px;height:66px}
    .header-wrapper .brand-name .hed1{font-size:1.05rem}.header-wrapper .brand-name .hed2{font-size:.68rem}
    .header-wrapper .menu-wrapper{min-height:54px}.header-wrapper .hamb-label{color:#fff}
    .header-wrapper .top-menu{height:auto}
    .header-wrapper .top-menu>.menu{min-height:0;padding:8px 18px 18px}.header-wrapper .top-menu>.menu>li{display:block}.header-wrapper .top-menu>.menu>li>a{display:block;height:auto;padding:12px 8px}
    .header-wrapper #lang-select-li{margin:8px 0 0}.header-wrapper #language-selection{width:100%}
    .header-wrapper .top-menu>.menu>li.account-actions,.header-wrapper .top-menu>.menu>li.account-actions.is-authenticated{position:static;display:flex;max-width:none;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:10px 8px}
    .header-wrapper .account-welcome{flex-basis:100%;max-width:none;padding-bottom:2px;font-size:.85rem}
    .header-wrapper .account-button{min-height:40px;padding:8px 16px;font-size:.85rem}
}
