/* Two reviewable header directions. Shared destinations and behavior. */
.h-header{background:#fff;color:var(--navy);border-bottom:1px solid var(--line)}
.h-main{display:grid;grid-template-columns:175px minmax(0,1fr) auto;align-items:center;gap:30px;min-height:88px;padding-block:18px}
.h-brand{display:flex;align-items:center}.h-brand img{display:block;width:175px;height:auto}
.h-nav{min-width:0}.h-sectors{display:flex;align-items:center;justify-content:center;gap:23px}
.h-sectors>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;white-space:nowrap;font-size:.9375rem}
.h-sectors [aria-current=page]{color:var(--teal);text-decoration:underline;text-underline-offset:8px}
.h-sector-icon{width:20px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.h-sector-icon img{display:block;width:18px;height:20px;object-fit:contain;filter:invert(19%) sepia(41%) saturate(1570%) hue-rotate(157deg) brightness(90%) contrast(103%)}
.h-sector-icon-affald img{width:19px;height:19px}.h-sector-icon-varme img{width:21px;height:21px}
.h-actions{display:flex;align-items:center;gap:18px}
.h-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 0;border:0;background:none;font:inherit;font-size:.875rem;color:var(--navy);white-space:nowrap;border-radius:var(--radius-control)}
.h-action .icon{height:18px;width:18px}.h-action:hover{background:var(--light);text-decoration:none}
.h-action.h-self{background:var(--navy);color:#fff;padding:11px 17px;font-weight:700}
.h-action.h-self:hover{background:var(--teal)}
.h-header .menu-toggle,.h-mobile-links{display:none}
.h-header .search-toggle span{display:inline}
.h-top{background:var(--color-surface);font-size:.8125rem}
.h-top-inner{display:flex;justify-content:flex-end;align-items:center;min-height:38px;gap:24px}
.h-top nav{display:flex;align-items:center;gap:30px}.h-top a{padding-block:8px}

.h-header-b .h-main{min-height:102px;padding-block:19px;grid-template-columns:185px minmax(0,1fr) auto}
.h-header-b .h-brand img{width:185px}
.h-header-b .h-sectors{gap:28px}
.h-header-b .h-sectors>a{font-size:1rem}
.h-header-b .h-actions{gap:10px;border-left:1px solid var(--line);padding-left:22px}
.h-header-b .h-action{flex-direction:column;gap:6px;min-height:64px;min-width:68px;padding:8px 12px;line-height:1.2;font-size:.8125rem}
.h-header-b .h-action .icon{width:23px;height:23px;stroke-width:1.5}
.h-header-b .h-self{background:transparent;color:var(--navy);font-weight:500}
.h-header-b .h-self:hover{background:var(--light);color:var(--navy)}
.version-picker{position:fixed;right:20px;bottom:18px;z-index:20;display:flex;align-items:center;gap:5px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:0 4px 22px #00374f20;font-size:.8125rem}
.version-picker>span{padding:0 9px;color:var(--muted)}
.version-picker a{padding:8px 11px;border-radius:var(--radius-control);display:flex;gap:7px;font-weight:700;min-height:36px;align-items:center}
.version-picker a[aria-current]{background:var(--navy);color:#fff}.version-picker a:hover{text-decoration:none;background:var(--mint);color:var(--navy)}
@media(min-width:1201px) and (max-width:1350px){
 .h-main{grid-template-columns:150px minmax(0,1fr) auto;gap:20px}
 .h-brand img{width:150px}.h-sectors{gap:15px}.h-sectors>a{font-size:.875rem;gap:5px}
 .h-actions{gap:12px}.h-action.h-self{padding-inline:12px}
 .h-header-b .h-main{grid-template-columns:170px minmax(0,1fr) auto;gap:24px}
 .h-header-b .h-brand img{width:170px}.h-header-b .h-sectors{gap:20px}
 .h-header-b .h-actions{padding-left:16px;gap:4px}.h-header-b .h-action{padding-inline:10px}
}
@media(max-width:1200px){
 .h-main,.h-header-b .h-main{grid-template-columns:1fr auto auto;gap:20px;min-height:80px;padding-block:15px}
 .h-header .menu-toggle{display:flex;grid-column:3;grid-row:1;gap:7px;margin:0;padding:10px 0 10px 10px;font-size:.875rem}
 .h-nav{display:none;grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding-top:20px}
 .h-nav.is-open{display:block}.h-sectors,.h-header-b .h-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
 .h-sectors>a{justify-content:flex-start;font-size:1rem}.h-sector-icon{width:25px}
 .h-actions{grid-column:2;grid-row:1}.h-mobile-links{display:flex;gap:22px;border-top:1px solid var(--line);margin-top:16px;padding:18px 0 4px;font-size:.875rem}
 .h-header-b .h-mobile-links{display:none}
}
@media(max-width:760px){
 .h-main,.h-header-b .h-main{grid-template-columns:1fr auto;gap:10px;padding-block:16px;min-height:0}
 .h-brand img,.h-header-b .h-brand img{width:165px}
 .h-header .menu-toggle{grid-column:2;grid-row:1;padding:8px;min-height:44px}
 .h-header .menu-toggle span{position:static;width:auto;height:auto;clip:auto;overflow:visible}
 .h-actions,.h-header-b .h-actions{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:.6fr 1.2fr 1.2fr;gap:8px;border:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:4px}
 .h-action{padding:10px 6px;font-size:.8125rem;gap:5px}.h-action.h-self{padding:10px 8px}
 .h-header-b .h-action{min-width:0;min-height:64px;padding:7px 5px}
 .h-nav{grid-row:3}.h-sectors,.h-header-b .h-sectors{grid-template-columns:1fr 1fr;gap:12px}
 .h-top-inner{width:calc(100% - 40px);min-height:38px}.h-phone{display:none}
 .h-top nav{width:100%;justify-content:space-between;gap:15px;font-size:.75rem}
 .h-top nav>a:first-child{display:none}
 .h-header-b .h-mobile-links{display:flex}
 .h-mobile-links{flex-wrap:wrap;gap:12px 22px}
 .version-picker{right:10px;bottom:10px;font-size:.75rem;padding:4px;gap:3px}
 .version-picker>span{padding-inline:5px}.version-picker a{padding:7px 9px}.version-picker a span{display:none}
}
@media(max-width:360px){
 .h-brand img,.h-header-b .h-brand img{width:145px}
 .h-main,.h-header-b .h-main{gap:8px}
 .h-actions{grid-template-columns:.6fr 1.2fr 1.2fr;gap:4px}
 .h-header-a .h-login{flex-direction:column;gap:3px;padding:3px}
 .h-action.h-self{padding-inline:5px}
 .h-top nav{gap:10px;font-size:.75rem}
}

/* Variant A: outline login and primary self-service action. */
.h-about-icon{width:19px;height:20px;flex-shrink:0;stroke-width:1.6}
.h-header-a .h-self,.h-header-a .h-login{border:1px solid var(--navy);padding:10px 14px;font-weight:500;min-height:44px}
.h-header-a .h-login{background:transparent;color:var(--navy)}
.h-header-a .h-self{background:var(--navy);color:#fff}
.h-header-a .h-login:hover{background:var(--color-surface);color:var(--navy)}
.h-header-a .h-self:hover{background:var(--deep);color:#fff}
/* Variant B: a shared outline family, optical size and stroke weight. */
.h-header-b .h-sector-icon{width:22px;height:24px}
.h-header-b .h-sector-icon .icon{width:20px;height:22px;stroke-width:1.6}
.h-header-b .h-sector-icon-affald .icon{width:20px;height:20px}
.h-header-b .h-sector-icon-spildevand .icon{width:20px;height:21px}
@media(max-width:760px){.h-header-a .h-self,.h-header-a .h-login{padding:10px 7px;flex-direction:row}}
@media(max-width:360px){.h-header-a .h-self,.h-header-a .h-login{padding-inline:4px}}
.h-header-b .h-sector-icon-el .icon{width:24px;height:24px}
.h-header-b .h-sector-icon-varme .icon{width:22px;height:22px}

/* B: keep the mobile menu with the other icon actions, separated after login. */
@media(max-width:1200px){
 .h-header-b .h-main{grid-template-columns:1fr auto}
 .h-header-b .h-actions .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;grid-column:auto;grid-row:auto;min-height:64px;min-width:68px;padding:8px 12px 8px 22px;margin-left:8px;border-left:1px solid var(--line);border-radius:0;font-size:.8125rem;line-height:1.2}
 .h-header-b .h-actions .menu-toggle .icon{width:23px;height:23px;stroke-width:1.5}
}
@media(max-width:760px){
 .h-header-b .h-main{grid-template-columns:1fr}
 .h-header-b .h-actions{grid-template-columns:.6fr 1.15fr 1.15fr .7fr;gap:4px}
 .h-header-b .h-actions .h-action{padding-inline:2px}
 .h-header-b .h-actions .menu-toggle{min-width:0;margin:0;padding:7px 2px 7px 8px}
}
@media(max-width:360px){
 .h-header-b .h-actions{grid-template-columns:.55fr 1.15fr 1.15fr .65fr;gap:2px}
 .h-header-b .h-actions .h-action{font-size:.78125rem}
}

/* Compact desktop navigation: align to the actions, with one group separator. */
@media(min-width:1201px){
 .h-header-a .h-main{gap:22px}
 .h-header-a .h-sectors{justify-content:flex-end;gap:20px}
 .h-header-a .h-sectors>a{position:relative}
 .h-header-a .h-actions{gap:12px;border-left:1px solid var(--color-border-on-mint);padding-left:20px}
}
@media(min-width:1201px) and (max-width:1350px){
 .h-header-a .h-main{gap:16px}
 .h-header-a .h-sectors{gap:14px}
 .h-header-a .h-actions{padding-left:14px;gap:10px}
 .h-header-a .h-self,.h-header-a .h-login{padding-inline:10px}
}

/* Shared icons and interaction feedback across both header variants. */
.h-header-a .h-sector-icon{width:22px;height:24px}
.h-header-a .h-sector-icon .icon{width:20px;height:22px;stroke-width:1.6}
.h-header-a .h-sector-icon-affald .icon{width:20px;height:20px}
.h-header-a .h-sector-icon-spildevand .icon{width:20px;height:21px}
.h-header-a .h-sector-icon-el .icon{width:24px;height:24px}
.h-header-a .h-sector-icon-varme .icon{width:22px;height:22px}
.h-sectors>a{position:relative;border-radius:var(--radius-control);isolation:isolate;transition:color .16s ease}
.h-sectors>a:after{content:"";position:absolute;inset:0 -8px;background:var(--color-hover);border-radius:var(--radius-control);z-index:-1;opacity:0;transition:opacity .16s ease}
.h-sectors>a:hover,.h-sectors>a:focus-visible{color:var(--deep);text-decoration:none}
.h-sectors>a:hover:after,.h-sectors>a:focus-visible:after{opacity:1}
.h-action{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.h-header .h-action:hover,.h-header .h-action:focus-visible{background:var(--color-hover);color:var(--deep);box-shadow:none}
.h-header-a .h-login:hover,.h-header-a .h-login:focus-visible{background:var(--color-hover);color:var(--deep);box-shadow:none}
.h-header-a .h-self:hover,.h-header-a .h-self:focus-visible{background:var(--color-hover);color:var(--deep);box-shadow:none}
.h-top nav>a,.h-mobile-links>a{position:relative;border-radius:var(--radius-control);transition:background-color .16s ease,box-shadow .16s ease}
.h-mobile-links>a:hover{background:var(--color-hover);box-shadow:0 0 0 6px var(--color-hover);text-decoration:none}
.h-top nav>a:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
.h-top nav>a:hover,.h-top nav>a:focus-visible{background:transparent;box-shadow:none;color:var(--deep);text-decoration:none}
.h-top nav>a:hover:after,.h-top nav>a:focus-visible:after{transform:scaleX(1)}
@media(min-width:1201px){.h-header-a .search-toggle{padding-inline:8px}}

@media(min-width:1201px){.h-header-b .h-sectors{justify-content:flex-end}}