/* index.html */

:root{
  --menu-width: 60rem;
  --mw: 60rem;
  --white: #FFFDF9;
  --green: mediumseagreen;
  --grey: #F0EFED; /* #f3f2f1*/
}

.container {
  display: grid;
  grid-template-columns: auto minmax(min-content, var(--menu-width)) auto;
  width: 100%;
  background-color: var(--white);
}

.green-margins {
  background-color: var(--green);
}

#nav-div {
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  align-items: center;
  font-family: monospace;
  font-size: 1.25rem;
}

.nav-link {
  color: var(--white);
  text-decoration-thickness: 3px;
}

.nav-link:not(:hover) {
  text-decoration-color: var(--green);
}

.nav-link:hover {
  text-decoration-color: var(--white);
}

#menu-button {
  display:flex;
  align-items:center;
  height:100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

#menu-button a {text-decoration: none;}


#menu-button:has(#checkbox:not(checked))>a {
  color: var(--white);
}
#menu-button:has(#checkbox:not(checked))>a:hover>#labelbox::before {
  border-bottom: 3px solid white;
}

#menu-button:has(#checkbox:checked)>a {
  color: var(--green);
}
#menu-button:has(#checkbox:checked)>a:hover>#labelbox::before {
  border-bottom: 3px solid var(--green);
}


#menu-button:has(#checkbox:not(checked)) {
  background-color: var(--green);
  color: var(--white);
}

#menu-button:has(#checkbox:checked) {
  background-color: var(--white);
  color: var(--green);
}


#checkbox:not(checked) ~ #labelbox::before {
  content: "\002304 Menu";  /* DOWN ARROWHEAD (U+2304) */
  font-weight: bold;
  padding: 5px 0px 5px 0px;
}

#checkbox:checked ~ #labelbox::before {
  content: "\002303 Menu";  /* UP ARROWHEAD (U+2303) */
  font-weight: bold;
  padding: 5px 0px 5px 0px;
}



div:has(#checkbox:checked) ~ #super-menu {
  display: block;
}

#super-menu {
  display: none;
  order: 1;
  width: 100%;
}

#search-button {
  display:flex;
  align-items:center;
  height:100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.menu-header {
    margin:auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a {
    font-weight: 500;
    color: steelblue;

}
a:visited {
    color: rebeccapurple;
}
.menu-header a:hover {
    text-decoration-thickness: 4px;
}
.menu-header a:active {
    color:black;
    background-color: #fd0;
}
/* .menu-header a:focus {
    color:black;
    background-color: #fd0;
} */
.menu-header > ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  /*column-count: 2;*/
  /*grid-template-columns: 12.5rem 12.5rem;*/
  /*grid-template-columns: 1fr 1fr;*/
  grid-template-columns: fit-content(50%) fit-content(50%);
  column-gap: 1.875rem;
  row-gap: 0.625rem;
  max-width: var(--mw);
  list-style: none;
}
.menu-header > ul li {
  background-color: rgb(255 209 220);
  border: 0.125rem solid rgb(79 185 227);
  padding: 2px 2px 2px 2px;
}
h2 {
    margin: 0px;
}

footer.kontakt {
    border-top: 0.625rem solid var(--green);
    border-bottom: 37.5rem solid var(--grey);
    font-size: 200%;
}


.kontakt-div {
    display: flex;
    width: var(--mw);
    max-width: var(--mw);
    margin:auto;
}



body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    padding: 0;
}

section {
    padding-top: 1.875rem; padding-bottom: 1.875rem;
}

section.tekst-content {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
    max-width:960px;
    margin:auto;
}

section.content {
        max-width:960px; margin:auto;
}
.content > h1 {
    margin-bottom: 1rem;
}


/* MEDLEMSKAB.HTML */
#rec-pay {
    display: flexbox;
    max-width:960px;
    margin:auto;
}

#onetime-pay {
    max-width:960px; margin:auto;
}


.btn {
  background: #5A78FF;
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(0.95);
}

.btn:focus-visible {
  outline: 2px solid #1E5FA8;
  outline-offset: 2px;
}