/* layout */
#root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main#main {
  flex: 1;
  padding: 10px 10px 86px 0;
  min-height: 100dvh;
}

header#header, main#main, footer#footer {
  margin-left: calc(209px + 20px);
}

@media (width <= 799px) {
  header#header, main#main, footer#footer {
    margin-left: calc(62px + 20px);
  }
}

main#main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--border-radius);
  background-color: light-dark(var(--white), var(--black));
  outline: 2px solid light-dark(var(--black), var(--white));
  translate: 0 -200%;
  &:focus-visible {
    translate: 0 0;
  }
}

/* theme */
:root {
  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  --type-mono: monospace;
  --type-display: "GT America", ui-sans-serif, system-ui, sans-serif;
  --type-body: "GT America", ui-sans-serif, system-ui, sans-serif;

  --border-radius: 6px;

  --grey: oklch(0.539 0.0064 31.07);
  --grey-1: oklch(0.9791 0 0);
  --blue: oklch(0.9476 0.0313 222.05);
  --blue1: oklch(0.8954 0.0604 234.09);
  --orange: oklch(0.9398 0.0315 53.49); /* orange */
  --orange00: oklch(0.9398 0.0315 53.49);
  --orange02: oklch(0.8711 0.0793 53.4);
  --orange04: oklch(0.836161 0.121863 66.351);
  --red: oklch(0.7058 0.1892 35.98); /* rose */
  --red-2: oklch(0.8918 0.0568 18.27);
  --brown: oklch(0.8619 0.037 48.27);
  --yellow: oklch(0.9452 0.0944 97.44);
  --yellow2: oklch(0.9391 0.1275 99.77);
  --pink: oklch(0.9211 0.0643 330.98);
  --mint: oklch(0.9595 0.0573 178.66); /* turquoise*/
  --green: oklch(0.9311 0.1139 153.58); /* vert */
  --purple: oklch(0.8928 0.0503 269.26);

  --beige: oklch(0.9603 0.004 106.47);
  --beige1: oklch(0.9087 0.0201 106.79);
  --grass: oklch(0.9308 0.0473 107.28);
  --grass-1: oklch(0.8925 0.0128 149.23);
  --lime: oklch(0.9617 0.1226 117.82);
  --bluegrey: oklch(0.8765 0.0546 223.28);

  --scale: calc(5 / 4); /* major third = 1.25 */

  --fs-caption:   calc(1rem * pow(var(--scale), -2)); /* 11.52px (~12) */
  --fs-callout:   calc(1rem * pow(var(--scale), -1)); /* 14.4px (~15) */
  --fs-body:      calc(1rem * pow(var(--scale), 0));  /* 18px */
  --fs-title3:    calc(1rem * pow(var(--scale), 1));  /* 22.5px (~22-23) */
  --fs-title2:    calc(1rem * pow(var(--scale), 2));  /* 28.125px (~29-30) */
  --fs-title1:    calc(1rem * pow(var(--scale), 3));  /* 35.156px (~35) */
  --fs-lg-title:  calc(1rem * pow(var(--scale), 4));  /* 43.945px (~45) */
  --fs-xl-title2: calc(1rem * pow(var(--scale), 5));  /* 54.932px (~55) */
  --fs-xl-title1: calc(1rem * pow(var(--scale), 6));  /* 68.665px (~70) */

  --caption:   500 var(--fs-caption)/1.33 var(--type-body);
  --callout:   500 var(--fs-callout)/1.33 var(--type-body);
  --body:      400 var(--fs-body)/1.29 var(--type-body);

  --title3:    500 var(--fs-title3)/1.26 var(--type-display);
  --title2:    500 var(--fs-title2)/1.20 var(--type-display);
  --title1:    500 var(--fs-title1)/1.18 var(--type-display);
  --lg-title:  500 var(--fs-lg-title)/1.17 var(--type-display);
  --xl-title2: 500 var(--fs-xl-title2)/1.12 var(--type-display);
  --xl-title1: 500 var(--fs-xl-title1)/1.05 var(--type-display);

  /* A metric tile: one line of value plus one line of label */
  --metric-height: calc(var(--fs-xl-title2) * 1.12 + var(--fs-callout) * 1.33);

  --ctrl-tint: var(--red);
  --ctrl-tint-1: color-mix(in oklch, var(--ctrl-tint), black 95%);
}

@font-face {
  font-family: "GT America";
  src:  url('/font/GT-America-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src:  url('/font/GT-America-Standard-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src:  url('/font/GT-America-Standard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src:  url('/font/GT-America-Standard-Medium-Italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

body {
  background-color: light-dark(var(--beige), var(--black));
}

.rich {
  p, h1, h2, h3, h4, h5, h6, img, table, blockquote {
    margin-bottom: 1rem;
  }
  img {
    max-width: 100%;
  }
  figure img {
    max-height: 400px;
  }
  /* Sambatch puts lead metrics and figures before the first heading; as inline blocks they
     share a right-aligned line, in order, and wrap when narrow */
  &:has(> .metrics:first-child, > figure:first-child) {
    align-self: stretch;
    max-width: 38rem;
    text-align: end;
    > * {
      text-align: start;
    }
  }
  .metrics:not(h2 ~ .metrics), figure:not(h2 ~ figure) {
    display: inline-flex;
    vertical-align: top;
    margin-left: 26px;
  }
  figure:not(h2 ~ figure) img {
    max-height: var(--metric-height);
  }
  /* Sambatch writes metrics into content with the index card's markup; match its tiles */
  .metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 1rem;
  }
  .metric {
    min-width: 200px;
    max-width: 100%;
    border-left: 1px solid var(--black);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    strong {
      font: var(--xl-title2);
    }
    span {
      font: var(--callout);
    }
  }
}

/* concept card */
.concept .card {
  border-radius: var(--border-radius);
  padding: 30px 34px 40px 30px;
  transition: transform 0.2s ease;
  .card-title {
    color: var(--black);
  }
  menu {
    margin-top: 30px;
    .button {
      border-radius: 100px;
    }
  }
  &:hover {
    transform: translateY(-4px);
  }
}

@media (width <= 799px) {
  .concept .card {
    figcaption {
      header {
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: start;
      }
    }
  }
}

.questions.concept .card { background-color: var(--blue); }
.questions.concept .in-progress .card {
  background-color: var(--orange00);
  &:hover {
    transform: none;
  }
}
.publications.concept .card { background-color: var(--white); }
.keys.concept .card { background-color: var(--grass-1); }
.search.concept .card { background-color: var(--white); }
.search.concept .question:has(.card) .card { background-color: var(--blue); }
.search.concept .question.in-progress .card { background-color: var(--orange00); }
.search.concept .key:has(.card) .card { background-color: var(--grass-1); }
/* Pastel backgrounds stay light in dark mode, so the summary can't inherit the page text colour */
.concept :is(.key, .question) .card figcaption > p { color: var(--black); }

/* topics */
.topic {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--grey);
  white-space: nowrap;
  img {
    width: 19px;
    aspect-ratio: 1 / 1;
    padding: 4px;
    border: 1px solid var(--black);
    border-radius: 50%;
    overflow: visible;
  }

  &.klima img, &.climate img { background-color: var(--orange) }
  &.energi img, &.energy img { background-color: var(--yellow) }
  &.samfunn img, &.society img { background-color: var(--pink) }
  &.byer img, &.cities img { background-color: var(--blue1) }
  &.natur img, &.nature img { background-color: var(--green) }
  &.mat img, &.food img { background-color: var(--lime) }
  &.helse img, &.health img { background-color: var(--red-2) }
  &.forbruk img, &.consumption img { background-color: var(--mint) }
  &.økonomi img, &.economy img { background-color: var(--purple) }

  &.rettferdig-omstilling, &.just-transition { --topic-color: var(--pink); }
  &.vind-og-sol, &.wind-and-solar { --topic-color: var(--yellow); }
  &.energisystemer, &.energy-systems { --topic-color: var(--yellow) }
  &.forbruk-og-mat img, &.consumption-and-food { --topic-color: var(--lime) }
  &.klimastyring, &.climate-governance { --topic-color: var(--orange) }
  &.energifattigdom, &.energy-poverty { --topic-color: var(--red-2) }
  &.klimapolitikk, &.climate-policy { --topic-color: var(--orange) }
  &.mobilitet, &.mobility { --topic-color: var(--blue1) }
  &.delingsøkonomi, &.delingsokonomi, &.sharing-economy { --topic-color: var(--purple) }
  &.byplanlegging, &.urban-planning { --topic-color: var(--blue1) }

  &.rettferdig-omstilling img, &.just-transition img { background-color: var(--pink) }
  &.vind-og-sol img, &.wind-and-solar img { background-color: var(--yellow) }
  &.energisystemer img, &.energy-systems img { background-color: var(--yellow) }
  &.forbruk-og-mat img, &.consumption-and-food img { background-color: var(--lime) }
  &.klimastyring img, &.climate-governance img { background-color: var(--orange) }
  &.energifattigdom img, &.energy-poverty img { background-color: var(--red-2) }
  &.klimapolitikk img, &.climate-policy img { background-color: var(--orange) }
  &.mobilitet img, &.mobility img { background-color: var(--blue1) }
  &.delingsøkonomi img, &.delingsokonomi img, &.sharing-economy img { background-color: var(--purple) }
  &.byplanlegging img, &.urban-planning img { background-color: var(--blue1) }
}
/* Card topic icons match the two-line date/author dl beside them */
.meta-row .topics {
  font: var(--callout);
  img {
    box-sizing: border-box;
    width: auto;
    height: 2lh;
    margin-bottom: 0;
  }
}
a.topic {
  color: var(--grey);
  &:hover, &:active {
    text-decoration: none
  }
}
/* tags */
.tag {
  background-color: var(--yellow);
  font: var(--caption);
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: var(--border-radius);
  color: var(--black);
  white-space: nowrap;

  &.local-solution { background-color: var(--pink); }
  &.answered { background-color: var(--bluegrey); border-radius: 0; }
  &.in-progress { background-color: var(--orange02); border-radius: 0; }
  &.recommendations, &.policy-guidance, &.best-practices, &.decision-support { background-color: var(--yellow2) }
  &.opinion { background-color: var(--grass) }
}

/* accent button */
button, input[type="button"], input[type="submit"], a.button {
  &.tinted.accent {
    --ctrl-tint: var(--bluegrey);
    --ctrl-tint-idle: oklch(from var(--ctrl-tint) calc(l + 0.05) calc(c - 0.02) h);
    --ctrl-tint-hover: oklch(from var(--ctrl-tint) calc(l + 0.02) calc(c) calc(h + 2));
    --ctrl-tint-active: oklch(from var(--ctrl-tint) calc(l + 0.10) calc(c - 0.05) calc(h - 5));
    --ctrl-tint-disabled: oklch(from var(--ctrl-tint-hover) l c h / 0.3);

    --ctrl-tint-1: color-mix(in oklch, var(--ctrl-tint), black 95%);

    --ctrl-3-disabled: oklch(from var(--ctrl) l c h / 0.3);
  }
  &.tinted.outline {
    --ctrl-tint: transparent;
    --ctrl-tint-idle: oklch(from var(--ctrl-tint) calc(l + 0.05) calc(c - 0.02) h);
    --ctrl-tint-hover: var(--white);
    --ctrl-tint-active: oklch(from var(--ctrl-tint) calc(l + 0.10) calc(c - 0.05) calc(h - 5));
    --ctrl-tint-disabled: oklch(from var(--ctrl-tint-hover) l c h / 0.3);

    --ctrl-tint-1: color-mix(in oklch, var(--ctrl-tint), black 95%);

    --ctrl-3-disabled: oklch(from var(--ctrl) l c h / 0.3);
    border: 1.35px solid var(--ctrl-tint-1);
    padding: 10px 39px;
  }
  &.tinted.shadow {
    --ctrl-tint: var(--white);
    --ctrl-tint-idle: oklch(from var(--ctrl-tint) calc(l + 0.05) calc(c - 0.02) h);
    --ctrl-tint-hover: var(--grey-1);
    --ctrl-tint-active: oklch(from var(--ctrl-tint) calc(l + 0.10) calc(c - 0.05) calc(h - 5));
    --ctrl-tint-disabled: oklch(from var(--ctrl-tint-hover) l c h / 0.3);

    --ctrl-tint-1: color-mix(in oklch, var(--ctrl-tint), black 95%);

    --ctrl-3-disabled: oklch(from var(--ctrl) l c h / 0.3);
    padding: 18px 22px;
    box-shadow: 0px 6px 0px 0px var(--beige1);
  }
}

/* form */
select {
  padding-right: 32px
}