@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --main-width: 60rem;
  --white: #FFFDF9;
  --green: mediumseagreen;
  --grey: #F0EFED;  /*#F3F2F1*/
}

* {
  box-sizing: border-box;
}

h2 {
  margin: 0px;
}

p {
    margin-top: 0px;
}


hr.thick-green {
  height: 4px;
  background-color: var(--green);
  border: none;
}


body {
  background-color: var(--white);
  margin: 0;
  padding: 0;
  font-family: Inter, Roboto, 'Segoe UI', sans-serif;
  font-size: 1rem;
}


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


.banner-row {
  display: grid;
  grid-template-columns: auto minmax(min-content, var(--main-width)) auto;
  /*width: 100%;*/
}


#banner {
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;  /* default */
  color: var(--white);  background-color: var(--green);
}

#logo-title {
  padding-top: 16px;  padding-bottom: 16px;
  font: bold 3rem monospace;
}

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

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

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


#menu-button {
  display: flex;
  align-items: center;
  padding-top: 10px; padding-bottom: 10px;
  font: bold 1.5rem monospace;
}

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

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

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

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

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

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

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

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

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


#super-menu-row {
  display: none;
  padding-bottom: 8px;
  border-bottom: 4px solid var(--grey);
}

.super-menu-section {
  max-width: var(--main-width);  margin: auto;
  padding-top: 1rem;  padding-bottom: 1rem;
}


.super-menu-header {
  max-width: var(--main-width);  margin: auto;
  margin: auto;
}

.super-menu-header a:hover {
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
}

.super-menu-header a:active {
  color: black;
  background-color: #fd0;
}

/*.super-menu-header a:focus {
  color: black;
  background-color: #fd0;
}*/

.super-menu-header > ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: fit-content(50%) fit-content(50%);
  grid-template-rows: 1fr 1fr 1fr 1fr;
  column-gap: 1.875rem;
  row-gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.super-menu-header > ul li {
  background-color: rgb(255 209 220);
  border: 0.125rem solid rgb(79 185 227);
  padding: 2px 2px 2px 2px;
}

.super-menu-header a {
  font-weight: 500;
  color: steelblue;
}
.content-section a:visited {
  color: rebeccapurple;
}



.intro-row {
  color: var(--white);  background-color: var(--green);
}

.intro-section {
  max-width: var(--main-width);  margin: auto;
  padding-top: 1rem;  padding-bottom: 1rem;
}


.content-row {
}

.content-section {
  max-width: var(--main-width);  margin: auto;
  padding-top: 1.875rem;  padding-bottom: 1.875rem;
}
.content-section a {
  font-weight: 500;
  color: steelblue;
}
.content-section a:visited {
  color: rebeccapurple;
}

.footer-row {
  border-top: 0.625rem solid var(--green);
  background-color: var(--grey);
}

.footer-main {
  max-width: var(--main-width);  margin:auto;
}

.so-me-icons {
    display: flex;
    gap: 1.5rem;
}
.so-me-icons > a {
    text-decoration: none;
}





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

#onetime-pay {
  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;
}

.pop-viewed-lst {
    font-size: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: clamp(16px, 4vw, 48px) clamp(8px, 2vw, 32px);
}
.pop-viewed-lst > a:hover {
      text-decoration-thickness: 0.25rem;
      text-decoration-skip-ink: none;
}


/*** bestyrelsen ***/
.rolle-pfp {
    padding-right: 1rem;
}
.rolle-pfp > img{
    width:100px;
    height:100px;
}

.rolle-item {
    display: flex;
    padding-bottom: 0.5rem
}
.rolle-item > h3 {
    margin-bottom: 0px;
}

.rolle-item > p {
    margin-top: 0px;
}

/***
h2 {
  margin: 0px;
}




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