/****************************************************************/
/* FONT: Oslo Sans                                              */
/****************************************************************/

@font-face {
  font-family: 'Oslo Sans';
  src: url('../fonts/OsloSans-Regular.woff2') format('woff2'),
  url('../fonts/OsloSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Oslo Sans';
  src: url('../fonts/OsloSans-Bold.woff2') format('woff2'),
  url('../fonts/OsloSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/****************************************************************/
/* COLOR VARIABLES from designmanual.oslo.kommune.no            */
/****************************************************************/

:root {
  --oslo-blue:                  #6FE9FF;
  --oslo-blue-dark:             #2A2859;
  --oslo-blue-dark--lighter:    #54527A;
  --oslo-blue-light:            #B3F5FF;
  --oslo-red:                   #FF8274;
  --oslo-green:                 #43F8B6;
  --oslo-green-dark:            #034B45;
  --oslo-green-dark--lighter:   #1C5D57;
  --oslo-green-dark--lightest:  #356E6A;
  --oslo-green-light:           #C7F6C9;
  --oslo-green-light--darker:   #35C691;
  --oslo-black:                 #2C2C2C;
  --oslo-yellow:                #F9C66B;
  --oslo-yellow-dark:           #E0B260;
  --oslo-yellow--lighter:       #FAD797;
  --oslo-beige-dark:            #D0BFAE;
  --oslo-beige-light:           #F8F0DD;
  --oslo-white:                 #FFFFFF;
}

/****************************************************************/
/* OSLO LIGHT COLOR SCHEME                                      */
/****************************************************************/

[data-md-color-scheme="oslo-light"] {
  --md-primary-fg-color:      var(--oslo-blue-dark--lighter);
  --md-primary-bg-color:      var(--oslo-blue-dark);
  --md-accent-fg-color:       var(--oslo-green-dark--lightest);
  --md-accent-bg-color:       var(--oslo-black);
  --md-footer-bg-color:       var(--oslo-white);
  --md-footer-fg-color:       var(--oslo-blue-dark);
  --md-footer-bg-color--dark: var(--oslo-blue-dark);
}

/****************************************************************/
/* BASE TYPOGRAPHY                                              */
/****************************************************************/

body, h1, h2, h3, h4, h5, h6,
.md-header, .md-header__title,
.md-tabs__link {
  font-family: 'Oslo Sans', Arial, sans-serif !important;
}

body {
  font-size: 1.1em;
}

h1, .stor-overskrift { font-size: 2em; }
h2, .mellomstor-overskrift { font-size: 1.5em; }
h3, .liten-overskrift { font-size: 1.1em; }
.stor-tekst { font-size: 1.3em; }
.liten-tekst { font-size: 0.9em; }

/****************************************************************/
/* FLEXIBLE BOXES                                               */
/****************************************************************/

.flex-bokser {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .flex-bokser { flex-direction: column; }
}

.bakgrunn-boks-1 {
  background-color: var(--oslo-beige-dark);
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 2em;
}

.bakgrunn-boks-2 {
  background-color: var(--oslo-beige-light);
  padding: 1em;
  border-radius: 6px;
  flex: 1;
}

.bakgrunn-boks-3 {
  background-color: var(--oslo-green-dark);
  color: #fff;
  padding: 1em;
  border-radius: 6px;
  flex: 1;
}

/****************************************************************/
/* HEADER + NAV STYLES                                          */
/****************************************************************/

[data-md-color-scheme="oslo-light"] .md-header {
  background-color: #fff;
  color: var(--oslo-blue-dark);
  min-height: 72px;
  box-shadow: 0 1px 0 #e6e6e6;
  border: none;
}

.md-header__button.md-logo img {
  height: 48px !important;
  width: auto !important;
  margin-top: 0.25em;
  margin-right: 0.7em;
  margin-left: 0.5em;
}

.md-header__title {
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 0.005em;
  margin-left: 0.2em;
}

.md-nav__title {
  display: none;
}

.md-tabs {
  background-color: var(--oslo-white);
  border-bottom: 1px solid #f2f2f2;
}

.md-tabs__link {
  font-size: 1.45em;
  font-weight: 400;
  margin-top: 0.2em;
}

.md-tabs__item--active .md-tabs__link,
.md-nav__link--active {
  color: #1bc2e6;
  font-weight: 700;
  border-bottom: 3px solid #1bc2e6;
}

/****************************************************************/
/* HEADINGS AND LINKS                                           */
/****************************************************************/

[data-md-color-scheme="oslo-light"] .md-typeset h1,
[data-md-color-scheme="oslo-light"] .md-typeset h2,
[data-md-color-scheme="oslo-light"] .md-typeset h3 {
  color: var(--oslo-blue-dark);
}
[data-md-color-scheme="oslo-light"] .md-content a,
.md-content a.hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
[data-md-color-scheme="oslo-light"] .md-search__input::placeholder {
  color: var(--oslo-black);
}
[data-md-color-scheme="oslo-light"] .md-search__input {
  color: var(--oslo-blue-dark);
}
[data-md-color-scheme="oslo-light"] .md-search__form {
  background-color: #ffffff;
  border: 2px solid var(--oslo-green-dark--lighter);
}
[data-md-color-scheme="oslo-light"] .md-search__form:hover {
  background-color: #F2F2F2;
}
[data-md-color-scheme="oslo-light"] .md-footer-meta.md-typeset a:focus,
[data-md-color-scheme="oslo-light"] .md-footer-meta.md-typeset a:hover,
.md-source:focus,
.md-source:hover,
.md-tabs__link:focus,
.md-tabs__link:hover,
.md-body__link:focus,
.md-body__link:hover,
.md-footer__link:focus,
.md-footer__link:hover {
  opacity: 1;
  color: var(--oslo-green-dark--lighter);
}

/****************************************************************/
/* RACI Tables                                                  */
/****************************************************************/

/* Full width for RACI tables + max width for description. Need to add a custom selector to not */
/* match the other markdown tables.                                                             */
div.raci_table + .md-typeset__scrollwrap .md-typeset__table {
  width: 100%;
}
div.raci_table + .md-typeset__scrollwrap .md-typeset__table table thead tr {
  background-color: #f2f2f2;
}
div.raci_table + .md-typeset__scrollwrap .md-typeset__table table thead tr th:first-child {
  width: 100%;
}

/* Remove icon for the summary box */
.md-typeset summary:before {
  display: none;
}

/* Remove border and background for the details/summary box */
.md-typeset table:not([class]) td>:last-child,.md-typeset table:not([class]) th>:last-child {
  background-color: transparent;
  border-width: 0;
}
.md-typeset summary:last-child {
  background-color: transparent;
}

.md-typeset details, .md-typeset details:focus-within {
  box-shadow: none;
}

/* Remove padding for the details/summary box to align with regular text */
[dir=ltr] .md-typeset summary {
  padding-left: 0.6rem;
  padding-top: 0;
  padding-bottom: 0;
}
.md-typeset .admonition,.md-typeset details {
  padding-left: 0;
}

/* Move the open/close icon since box padding is removed */
.md-typeset summary:after {
  top: 0;
}
[dir=ltr] .md-typeset summary:after {
  right: -0rem;
}