/* == header == */
.hdr {
  background: var(--main-background);
  border-block-end: var(--border) var(--gray-85);
  position: sticky;
  inset-block: 0 auto; /* required for sticky */
  z-index: 1; /* required to go over position: relative; */
  --max-content-size: var(--max-header-size);
}

.hdr, .ftr, .menu-container:not([hidden]) {
  padding-inline: max(var(--page-pad), (100% - var(--max-content-size)) / 2);
  --button-color: var(--green-50);
  --button-background: var(--green-95);
  --button-hover-color: var(--green-90);
  --button-inverted-hover-color: var(--green-45);
  --button-weight: 400;
}

.hdr nav {
  padding-block: 16px 8px;
  position: relative; /* for positioning search bar */
  align-items: baseline;
}

.hdr nav, .modal-menu {
  display: flex;
  gap: 16px;
}

.hdr-sects {
  margin-inline-start: auto;
}

.hdr-sects a[aria-current] {
  font-weight: var(--bold);
}

:is(.hdr-system, .menu-system) li :is(a, button, label) {
  background: var(--button-background);
  border: none;
  border-radius: var(--pill-radius);
  color: var(--main-color);
  display: block; /* with inline-block the items are NOT aligned on baseline */
  padding-block: var(--widget-pad-bl); /* = button */
  padding-inline: var(--widget-pad-in);
}

.hdr .logo {
  align-self: start; /* don't align with menu items, so vertical placement of popup menu is more predictable */
}

.hdr .logo svg {
  height: 50px;
  vertical-align: baseline;
  fill: var(--grayblue-35);
}

.hdr svg.logo-img { /* svg required to overrule .hdr .logo svg */
  fill: var(--logo-green);
}

:is(.hdr, .modal-menu, .ftr) a {
  color: unset;
  text-decoration: none;
}

.hdr li, .menu-system li {
  display: inline-block;
}

.hdr-sects a {
  display: block;
}

.hdr-system {
  padding-top: calc(-1.5em + 49px); /* predictable placement of popup menu, roughly baseline align with logo */
}

.hdr-system, .menu-system {
  justify-self: flex-end; /* to right-align system menu when sections menu is hidden */
  display: flex;
  gap: 0.5em;
}

.hdr-system .search .dcl-trigger[aria-expanded=true] .open,
.hdr-system .search .dcl-status:checked ~ .dcl-trigger .open,
.hdr-system .search .dcl-trigger[aria-expanded=false] .close,
.hdr-system .search .dcl-status:not(:checked) ~ .dcl-trigger .close {
  display: none;
}

/* == search pop-up == */
.hdr search {
  position: absolute;
  inset-block: auto calc(-2.5em - 39px); /* position relative to bottom of header, as distance from top differs per breakpoint */
  inset-inline: max(0px, 100% - 30em) 0;
  background: var(--green-90);
  box-shadow: var(--shadow);
  border-radius: 0 0 20px 20px;
}

.hdr form {
  margin: 20px; /* can't be padding on search, because of [hidden=until-found] */
}

:is(.hdr, .modal-menu) form {
  display: flex;
  align-items: center;
  border-radius: 99px; /* large value set circular radius with maximum size, unlike percentage-sizes */
  background: var(--gray-100);
}

:is(.hdr, .modal-menu) input {
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-inline-start: 16px;
}

:is(.hdr, .modal-menu) [type=submit] {
  margin: -1px; /* merge button border with form border */
  background: var(--button-color);
  color: var(--button-main-text);
}

/* == pop-up menu == */
/*
TODO: animated pointer https://codepen.io/onediv/pen/LYzwENb, https://codepen.io/onediv/pen/WNOdMWw, https://codepen.io/WhisnuYs/pen/XWdpdGP
TODO: nice menu animation https://codepen.io/fadzrinmadu/pen/bGqrJjB, https://codepen.io/smpnjn/pen/VwKXdmy
*/
/* for testing only */
/* .modal-menu { opacity: .5; }
.dcl-backdrop { background: none; }
.dcl-content.has-backdrop:not([hidden]) { backdrop-filter: none; } */
/* end testing */
.menu-container:not([hidden]) {
  --max-content-size: var(--max-header-size);
  padding: 8px;
}

:is(.menu-container, .ftr) h2 {
  position: absolute;
  /* ^ this line combined with .dcl-status[type='checkbox']:not(:checked) ~ .dcl-content {display: none} causes page crash when reloading with devtools open in menu */
  inset-inline: -9999em auto;
}

.modal-menu {
  position: relative; /* go over backdrop */
  background: var(--green-25);
  box-shadow: var(--shadow);
  padding: 8px;
  border-radius: 26px;
  max-height: 100%;
  float: right;
  align-items: baseline; /* align sections with buttons in desktop menu */
  flex-direction: row-reverse; /* to place menu-system to the right */
}

.modal-menu, .ftr {
  color: var(--gray-100);
}

/*.menu-top {
	grid: auto / auto 1fr auto auto;
}*/
.social svg, .ftr .logo-img {
  fill: currentColor;
}

.menu-system {
  display: grid;
  grid-template: 1fr/1fr;
}

.menu-system .spacer {
  visibility: hidden;
}

.menu-system li:has(search) {
  grid-area: 2/1/2/4;
}

.menu-items {
  padding: 8px;
  position: relative;
  min-height: 0; /* required, by default contents always extends grid cell */
  flex: 1;
}

.menu-items ul {
  overflow: auto;
}

.menu-items h3 {
  font-size: 1em;
  margin-block: min(max(0px, 4vh - 15px), 15px);
}

:is(.menu-items, .ftr) .dcl-trigger {
  background: none;
  border: none;
  color: unset;
  padding: 0;
  text-align: unset;
  text-wrap: unset;
  display: flex; /* show arrow centered before multi-line label in menu */
  align-items: center;
  gap: 8px;
  font-weight: var(--bold);
}

:is(.menu-items, .ftr) h3 .icon {
  transition: transform 0.2s ease, opacity 0.5s ease;
}

/* == breadcrumbs == */
.bcr {
  font-size: smaller;
  padding-block: 1rem;
}

/* == footer == */
.ftr {
  background: var(--green-15);
  padding-block: 50px;
  --max-content-size: var(--max-page-size);
}

.ftr, .ftr h3 {
  line-height: 2.2rem; /* all lines equal height, for better aligning of items and headlines */
}

.ftr .logo-img {
  display: block;
  height: 80px;
}

.ftr hb-line {
  align-items: flex-start;
  gap: 0;
  margin-block: 9px;
}

.ftr h3 {
  font-size: 125%;
  margin: 0;
}

.ftr h3 span {
  flex: 1;
}

.ftr a {
  /*display: inline-block;*/ /* optional, for square focus around wrapped lines, but these shouldn't be wrapped anyway */
}

.ftr .social ul {
  display: flex;
}

.ftr .social a {
  padding: 0;
  margin: 8px;
}

.ftr .social :is(a, svg) {
  display: block;
}

.ftr .social svg {
  width: 32px;
}

.ftr button {
  background: none;
  color: unset;
}

.ftr .theme-button {
  margin-block: 2.2rem auto; /* = line-height */
}

/* not using mobile.css/desktop.css, so we can use breakpoints independent of main page */
/* note: calculate values with desktop scrollbar present! */
@media (width <= calc(14.3em + 113px)) { /* insufficient space for all button labels in system menu */
  /* these calculations are dependent on the amount of text displayed and custom user fonts */
  /* w(9) = 241, w(24) = 456; em = (w(24) - w(9)) / 15; px = w(9) - 9*em */
  .hdr-system > :not(.menu) {
    display: none;
  }
}
@media (width <= calc(17.6em + 219px)) { /* insufficient space for Husbanken text in logo */
  /* w(9) = 348, w(24) = 563 */
  .hdr .logo-text {
    display: none;
  }
}
@media (width <= calc(29.3em + 289px)) { /* insufficient space for button labels & large logo */
  /* w(9) = 522, w(24) = 911 */
  .hdr .logo svg {
    height: 33px;
  }
  .hdr-system {
    padding: 0; /* reset .hdr-system */
  }
  :is(.hdr-system, .menu-system) li :is(a, label, button) {
    /* = button */
    padding: var(--widget-pad-bl); /* create square icons */
  }
  :is(.hdr-system, .menu-system) :is(a, label, button) span {
    display: none;
  }
  :is(.hdr-system, .menu-system) :is(a, label, button) svg {
    display: block;
    width: var(--icon-solo-size);
  }
  .modal-menu {
    width: min(22em, 100%);
  }
}
@media (width > calc(29.3em + 289px)) { /* sufficient space for button labels & large logo */
  .menu-container:not([hidden]) {
    padding-block: 32px 8px;
  }
  :is(.hdr-system, .menu-system) .menu-trigger {
    width: 6.25em; /* "Close" is longest label */
    text-align: right; /* to force icon to right */
  }
}
@media (width <= calc(47.5em + 340px)) { /* insufficient space for section menu */
  /* w(9) = 757, w(24) = 1478 */
  .hdr-sects {
    text-align: center;
    line-height: 1; /* so that wrapped labels aren't bigger than icons */
    margin-inline: auto;
  }
  .hdr-sects li:not(:has([aria-current])) {
    display: none;
  }
  .modal-menu {
    flex-direction: column;
  }
  .menu-system {
    width: 100%;
  }
  .menu-items {
    display: grid;
  }
  .menu-items > li {
    display: contents;
  }
  .menu-items .icon {
    transform: rotate(90deg);
  }
  .menu-items .dcl-status:checked + label .icon,
  .menu-items [aria-expanded=true] .icon {
    transform: rotate(-90deg);
  }
  .menu-items .dcl-content {
    margin-inline-start: 28px;
    /*min-height: 2.1em;*/ /* not sure why we want this; stays visible with hidden='until-found' */
    overflow: auto;
  }
  .menu-items .dcl-content::after {
    content: "";
    position: sticky;
    height: 2vh;
    display: block;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--green-25));
    inset-block: auto -1px;
  }
}
@media (width > calc(47.5em + 340px)) { /* full desktop menu */
  /* w(9) = 767, w(20) = 1483 */
  .hdr-sects, .menu-items {
    display: flex;
    padding-inline-end: 34px;
    gap: 1em;
  }
  .hdr-sects a[aria-current] {
    border-block-end: solid 1px;
  }
  .menu-container.dcl-open {
    padding-block: calc(-1.6em + 59px) 20vh;
    /* 9(52), 24(28) */
  }
  .modal-menu {
    height: 100%;
    max-height: 700px; /* enough to fit all text on large fonts */
  }
  .menu-items h3 {
    /* TODO: fix wrapping on large fonts */
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;
  }
  .menu-items .dcl-trigger[aria-expanded=true] {
    color: var(--green-75);
  }
  .menu-items .dcl-status:checked + h3,
  .menu-items [aria-expanded=true] {
    font-weight: var(--bold);
  }
  .menu-items .icon {
    display: none;
  }
  .menu-items .dcl-content {
    position: absolute;
    inset-inline: 0;
  }
}

/*# sourceMappingURL=7-hdr-ftr.css.map */