/* Aptly-tema for hjelpesenteret.
   Farger, typografi og form følger aptly-brand (themes.ts).
   Material setter html-fontstørrelsen til 125 %, så 1rem = 20px her.
   Størrelsene fra temaet (som antar 16px) er derfor regnet om. */

:root {
  /* Aptly-paletten */
  --aptly-primary: #00B8B3;
  --aptly-primary-light: #D1F2F1;
  --aptly-primary-dark: #0C5455;
  --aptly-secondary: #344b54;
  --aptly-secondary-light: #4a8390;
  --aptly-secondary-dark: #1C2930;
  --aptly-text: #131B1F;
  --aptly-border: #E1E1E1;
  --aptly-gray: #D8D8D8;
  --aptly-success: #61B800;
  --aptly-info: #3F97F5;
  --aptly-warning: #EF7930;
  --aptly-error: #DE5646;
  --aptly-radius: 16px;
}

:root > * {
  --md-primary-fg-color: var(--aptly-primary);
  --md-primary-fg-color--light: var(--aptly-primary-light);
  --md-primary-fg-color--dark: var(--aptly-primary-dark);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--aptly-primary-dark);
  --md-accent-fg-color--transparent: rgba(0, 184, 179, 0.1);
  --md-default-fg-color: var(--aptly-text);
  --md-default-fg-color--light: rgba(19, 27, 31, 0.68);
  --md-default-fg-color--lighter: rgba(19, 27, 31, 0.4);
  --md-default-fg-color--lightest: rgba(19, 27, 31, 0.08);
  /* Teal (#00B8B3) har for lav kontrast for lenketekst på hvitt.
     Lenker bruker derfor primary dark, med teal understrek. */
  --md-typeset-a-color: var(--aptly-primary-dark);
  --md-footer-bg-color: var(--aptly-secondary);
  --md-footer-bg-color--dark: var(--aptly-secondary-dark);
  --md-code-bg-color: #F4F6F7;
}

/* ---------- Topplinje ---------- */

.md-header {
  background-color: #FFFFFF;
  color: var(--aptly-secondary);
  box-shadow: 0 1px 0 var(--aptly-border);
}
.md-header--shadow {
  box-shadow: 0 1px 0 var(--aptly-border), 0 4px 12px rgba(19, 27, 31, 0.06);
}
.md-header__button.md-logo {
  margin: 0.2rem 0.4rem 0.2rem 0;
  padding: 0.3rem 0.2rem;   /* holder topplinjen på standardhøyden 2.4rem */
}
.md-header__button.md-logo img {
  height: 1.4rem;
  width: auto;
}
/* Logoen sier allerede «Aptly», så topplinjen viser bare «Hjelpesenter». */
.md-header__topic:first-child .md-ellipsis {
  font-size: 0;
}
.md-header__topic:first-child .md-ellipsis::after {
  content: "Hjelpesenter";
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--aptly-secondary);
}
.md-header__topic:last-child {
  font-weight: 600;
}

/* Søk */
.md-search__form {
  background-color: #F4F6F7;
  border-radius: var(--aptly-radius);
  color: var(--aptly-text);
}
.md-search__form:hover {
  background-color: var(--aptly-primary-light);
}
.md-search__input {
  color: var(--aptly-text);
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--aptly-secondary);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--aptly-radius) var(--aptly-radius) 0 0;
}

/* Ingen ekstra luft mellom topplinjen og innholdet. */
.md-main__inner {
  margin-top: 0;
}

/* ---------- Meny ---------- */

/* Mer luft mellom seksjonene, så de ikke flyter sammen. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__list > .md-nav__item--section {
    margin: 2em 0;
  }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--aptly-secondary);
    cursor: default;
  }
}

/* Nettstedsnavnet over menyen gjentar logoen på store skjermer. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }
}
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > .md-nav__link[for] {
  color: var(--aptly-secondary);
  font-weight: 600;
}
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--aptly-primary-dark);
  font-weight: 600;
}
.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--aptly-primary-dark);
}

/* ---------- Tekst ---------- */

.md-typeset {
  font-size: 0.8rem;       /* 16px */
  font-weight: 300;        /* body1 i temaet */
  line-height: 1.7;
  color: var(--aptly-text);
}
.md-typeset strong,
.md-typeset b {
  font-weight: 600;
}
.md-typeset h1 {
  font-size: 1.4rem;       /* 1.75rem i temaet */
  font-weight: 600;
  color: var(--aptly-primary);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.md-typeset h2 {
  font-size: 1.25rem;      /* 1.5625rem i temaet */
  font-weight: 600;
  color: var(--aptly-text);
  letter-spacing: -0.01em;
}
.md-typeset h3 {
  font-size: 0.9rem;       /* h4 i temaet, så hierarkiet blir tydelig */
  font-weight: 600;
  color: var(--aptly-text);
}
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--aptly-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.md-typeset a:hover {
  color: var(--aptly-primary-dark);
  text-decoration-color: var(--aptly-primary-dark);
}
.md-typeset .headerlink {
  text-decoration: none;
}

/* ---------- Kort ---------- */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--aptly-border);
  border-radius: var(--aptly-radius);
  padding: 1rem 1.1rem;
  background: #FFFFFF;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Kort med lenke er klikkbare i hele flaten. Kort uten lenke reagerer ikke på hover. */
.md-typeset .grid.cards > ul > li:has(a),
.md-typeset .grid > .card:has(a) {
  position: relative;
  cursor: pointer;
}
.md-typeset .grid.cards > ul > li:has(a):hover,
.md-typeset .grid > .card:has(a):hover {
  border-color: var(--aptly-primary);
  box-shadow: 0 4px 16px rgba(0, 184, 179, 0.12);
}
.md-typeset .grid.cards > ul > li > p:last-child > a:last-child::after,
.md-typeset .grid > .card > p:last-child > a:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--aptly-radius);
}
.md-typeset .grid.cards > ul > li > hr {
  border-bottom-color: var(--aptly-border);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .lg {
  color: var(--aptly-primary);
}
.md-typeset .grid.cards a {
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Knapper ---------- */

.md-typeset .md-button {
  border-radius: var(--aptly-radius);
  border: 2px solid var(--aptly-secondary);
  color: var(--aptly-secondary);
  font-weight: 600;
  padding: 0.5em 1.4em;
  text-decoration: none;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: var(--aptly-secondary);
  border-color: var(--aptly-secondary);
  color: #FFFFFF;
}
.md-typeset .md-button--primary {
  background-color: var(--aptly-primary);
  border-color: var(--aptly-primary);
  color: #FFFFFF;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--aptly-primary-dark);
  border-color: var(--aptly-primary-dark);
  color: #FFFFFF;
}

/* ---------- Tabeller ---------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--aptly-border);
  border-radius: var(--aptly-radius);
  overflow: hidden;
  font-size: 0.75rem;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--aptly-primary-light);
  color: var(--aptly-text);
  font-weight: 600;
}
.md-typeset table:not([class]) td {
  border-top-color: var(--aptly-border);
  vertical-align: top;
}
.md-typeset table:not([class]) tbody tr:hover {
  background-color: #F7FBFB;
  box-shadow: none;
}

/* ---------- Merknader ---------- */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--aptly-radius);
  border-width: 1px;
  box-shadow: none;
  font-size: 0.75rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  border-radius: var(--aptly-radius) var(--aptly-radius) 0 0;
  font-weight: 600;
}
.md-typeset .admonition.info,
.md-typeset .admonition.note {
  border-color: var(--aptly-info);
}
.md-typeset .admonition.warning {
  border-color: var(--aptly-warning);
}
.md-typeset blockquote {
  border-left: 4px solid var(--aptly-primary);
  background: var(--aptly-primary-light);
  border-radius: 0 var(--aptly-radius) var(--aptly-radius) 0;
  color: var(--aptly-text);
  padding: 0.6rem 1rem;
}

/* ---------- Bunntekst ---------- */

.md-footer__link {
  border-radius: var(--aptly-radius);
}
.md-footer__title {
  font-weight: 600;
}

/* ---------- Ikoner fra dashbordet ---------- */

.md-typeset .aptly-icon,
.md-typeset .twemoji.aptly-icon {
  color: var(--aptly-secondary);
  vertical-align: -0.2em;
  margin-right: 0.2em;
}