/*
 * Sweden Connect Sandbox — site stylesheet
 *
 * Follows the official Sweden Connect design (www.swedenconnect.se). Tokens and
 * component rules are documented in _design/DESIGN.md, including every value that
 * was assumed rather than read from the official theme.
 *
 * Loaded after css/bootstrap.min.css, which it overrides. Bootstrap itself is
 * unmodified.
 */

/* ------------------------------------------------------------------ *
 * Fonts — self-hosted. No third-party requests from published pages.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * Design tokens
 * ------------------------------------------------------------------ */

:root {
  /* Text and outlines. These two near-identical values both exist in the
     official theme; they are kept distinct so a later diff stays honest. */
  --sc-text: #292a2b;
  --sc-text-muted: #707070;
  --sc-outline: #2b2a29;

  /* Accents */
  --sc-accent: #5a6751;
  --sc-accent-light: #657c54;
  --sc-link-hover: #5a5856;

  /* Surfaces */
  --sc-bg: #ffffff;
  --sc-bg-frame: #f3f3f3;
  --sc-bg-offwhite: #eff0ee;
  --sc-bg-offwhite-alt: #f0efee;
  --sc-panel-sage: #d6d9d3;
  --sc-panel-sage-hover: #e5e8e2;
  --sc-border: #e8e8e8;

  /* Secondary accents */
  --sc-terracotta: #cd7a6e;
  --sc-terracotta-tint: #f7e4e1;
  --sc-sand: #d59151;
  --sc-sand-tint: #fbf3eb;

  /* Typography */
  --sc-font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --sc-font-size-body: 1.125rem;
  --sc-line-height-body: 1.5;

  /* Layout */
  --sc-page-max-width: 1440px;
  --sc-logo-max-width: 343px;
  --sc-logo-max-width-narrow: 221px;
  --sc-border-width: 2px;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */

html,
body {
  font-family: var(--sc-font-family);
}

body {
  font-size: var(--sc-font-size-body);
  line-height: var(--sc-line-height-body);
  color: var(--sc-text);
  background-color: var(--sc-bg-frame);
}

/* ------------------------------------------------------------------ *
 * Page frame
 *
 * A white page container floated on the grey body background, centred and
 * capped at 1440px. On wide screens this shows as grey gutters down both
 * sides. Every page wraps its header, main content and footer in it.
 * ------------------------------------------------------------------ */

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: var(--sc-page-max-width);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--sc-bg);
}

/* Pushes the footer to the bottom of short pages. */
.page-main {
  flex: 1 1 auto;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sc-text);
}

/* h1 and h2 are defined by the official theme. h3-h6 deliberately keep
   Bootstrap's sizes: the official theme does not define them. */
h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 6px;
  font-size: 2rem;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 1.5rem;
  line-height: var(--sc-line-height-body);
}

p.excerpt {
  margin-top: 2rem;
  font-size: 1.25rem;
  line-height: var(--sc-line-height-body);
}

p.image-text {
  font-size: 0.875rem;
  font-style: italic;
  line-height: var(--sc-line-height-body);
  margin-top: 6px;
}

li p {
  padding: 0;
  margin: 0;
}

a {
  color: var(--sc-text);
  text-decoration: underline;
}

a:hover {
  color: var(--sc-link-hover);
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Focus indicator
 *
 * The most recognisable detail of the official design, and an accessibility
 * feature. Copied from the official theme unchanged.
 * ------------------------------------------------------------------ */

a:focus,
button:focus,
input:focus {
  box-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px dotted var(--sc-outline);
  outline-offset: 3px;
  box-shadow: none;
  z-index: 1;
}

/* Fallback for browsers without :focus-visible. Never removes an outline,
   only supplies one where the modern selector is unsupported. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus {
    outline: 3px dotted var(--sc-outline);
    outline-offset: 3px;
    box-shadow: none;
  }
}

/* Bootstrap 5 sets `outline: 0` on these three and replaces the outline with a
   box-shadow ring. Left alone it would erase the focus indicator on every
   service button and nav link, so it is overridden by name. If a new Bootstrap
   component is used on this site, check whether it does the same thing:
   grep the dist CSS for `outline:0`. */
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
  outline: 3px dotted var(--sc-outline);
  outline-offset: 3px;
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * Buttons
 *
 * The official theme inverts the usual Bootstrap convention: primary is the
 * outlined variant, secondary is the filled one.
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.675rem 1.25rem;
  border: var(--sc-border-width) solid transparent;
  border-radius: 2px;
  font-family: var(--sc-font-family);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  text-decoration: none;
}

.btn-sc-primary {
  background-color: transparent;
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

.btn-sc-secondary {
  background-color: var(--sc-accent);
  border-color: var(--sc-accent);
  color: #fff;
}

.btn-sc-primary:hover,
.btn-sc-secondary:hover {
  border-color: var(--sc-accent-light);
  text-decoration: none;
}

.btn-sc-primary:hover {
  color: var(--sc-accent-light);
}

.btn-sc-secondary:hover {
  background-color: var(--sc-accent-light);
  color: #fff;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

/* Sticky, not fixed. A fixed header is positioned against the viewport, so it
   would ignore the container's centring and span the grey gutters above
   1440px. Sticky stays inside the container and occupies flow space, which
   also removes the need for a spacer under it. */
nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 1rem 2rem;
  background-color: var(--sc-bg);
}

nav.navbar a {
  color: var(--sc-text);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
}

nav.navbar a:hover {
  color: var(--sc-link-hover);
  text-decoration: underline;
}

/* Menu to the right of the bar once the navbar is expanded. Bootstrap's own
   ms-auto depends on .navbar-collapse growing to fill the bar; this states the
   alignment directly so it does not matter whether it does. */
@media (min-width: 992px) {
  nav.navbar .navbar-collapse {
    flex-grow: 1;
    justify-content: flex-end;
  }

  nav.navbar .navbar-nav {
    margin-left: auto;
  }
}

nav.navbar .navbar-nav .nav-link {
  color: var(--sc-text);
  padding-bottom: 0.5rem;
  border-bottom: var(--sc-border-width) solid transparent;
}

/* Current page marker, following the official breadcrumb treatment. Bootstrap 5
   puts .active on the link itself, not on the surrounding .nav-item, and its
   .nav-link rule sets `border: 0` — so this writes the whole border shorthand
   rather than just its colour. */
nav.navbar .navbar-nav .nav-link.active {
  color: var(--sc-text);
  font-weight: 700;
  border-bottom: var(--sc-border-width) solid var(--sc-terracotta);
}

.navbar-brand {
  padding: 0;
  max-width: var(--sc-logo-max-width-narrow);
}

.logo {
  width: 100%;
  max-width: var(--sc-logo-max-width-narrow);
  height: auto;
}

@media (min-width: 768px) {
  .navbar-brand {
    max-width: var(--sc-logo-max-width);
  }

  .logo {
    max-width: var(--sc-logo-max-width);
  }
}

/* ------------------------------------------------------------------ *
 * Article content
 * ------------------------------------------------------------------ */

h1.article-header {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* The site-wide h2 has no top margin, which is right for the sidebar and footer
   but not for section headings inside an article. */
article h2 {
  margin-top: 3rem;
}

article > h2:first-child {
  margin-top: 0;
}

/* The sticky header would otherwise cover the heading an anchor jumps to. It is
   91px tall at desktop widths: 1rem padding top and bottom around a logo that is
   intrinsically 343x59 and capped at 343px wide, so it renders unscaled. 6rem
   rounds that up with a little clearance. */
article h2[id],
article h3[id] {
  scroll-margin-top: 6rem;
}

article img {
  max-width: 100%;
  height: auto;
}

article ul {
  margin: 0 0 1.5rem;
  padding-left: 30px;
}

article ul li {
  margin-top: 10px;
}

article ul li:first-of-type {
  margin-top: 0;
}

/* Links onward to other pages at the end of an article: full-width sage panels
   with a chevron, following the official theme's .dg-link-list-theme. The
   chevron is drawn in CSS because their arrow is an SVG asset we do not have. */
.page-links {
  margin: 2.5em 0 0;
  padding: 0;
  list-style: none;
}

.page-links li + li {
  margin-top: 8px;
}

.page-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23.5px 24px;
  background-color: var(--sc-panel-sage);
  color: var(--sc-text);
  text-decoration: none;
  cursor: pointer;
}

.page-links a:hover {
  background-color: var(--sc-panel-sage-hover);
  color: var(--sc-text);
  text-decoration: underline;
}

.page-links a::after {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  margin-left: 1.5rem;
  border-top: var(--sc-border-width) solid currentColor;
  border-right: var(--sc-border-width) solid currentColor;
  transform: rotate(45deg);
}

.info-box {
  margin: 2em 0 2rem;
  padding: 1.5em 2em 3em;
  background-color: var(--sc-bg-offwhite);
  border-left: var(--sc-border-width) solid var(--sc-accent);
}

.info-box > :first-child {
  margin-top: 0;
}

.info-box p:last-child {
  margin-bottom: 0;
}

.alert-box {
  margin: 2em 0 2rem;
  padding: 1.5em 2em 3em;
  background-color: var(--sc-terracotta-tint);
  border-left: var(--sc-border-width) solid var(--sc-terracotta);
}

.alert-box p:last-child {
  margin-bottom: 0;
}

.code {
  padding: 18px 25px;
  margin-bottom: 2rem;
  background-color: var(--sc-bg-offwhite-alt);
  border: var(--sc-border-width) solid var(--sc-border);
  border-radius: 2px;
}

/* PEM lines are 76 characters, which is wider than the col-md-7 column below the
   xl breakpoint, so the block scrolls rather than spilling. white-space stays at
   the pre default: wrapped base64 is harder to read and invites doubt about
   whether the line breaks are real. 0.75rem is the largest step that keeps a
   76-character line inside the column at 1140px. */
.code pre {
  margin: 0;
  overflow-x: auto;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* On phones the column is full width but 25px of panel padding each side is not
   worth the room it costs the block. */
@media (max-width: 575.98px) {
  .code {
    padding: 14px 12px;
  }
}

/* Copy button on a code block. The block is the positioning context; the
   button sits in its top-right corner. */
.code--copyable {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background-color: var(--sc-bg);
  border: var(--sc-border-width) solid var(--sc-border);
  border-radius: 2px;
  font-family: var(--sc-font-family);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sc-text);
  cursor: pointer;
}

.copy-button:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

.copy-button[data-copied="true"] {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

/* The button overlaps the first line of the block, so make room for it. */
.code--copyable pre {
  padding-top: 2.25rem;
}

/* ------------------------------------------------------------------ *
 * Service listing
 *
 * Replaces the previous single-cell-per-row tables. Rows are separated by
 * rules, following the official article-list treatment.
 * ------------------------------------------------------------------ */

.service-list {
  margin: 2em 0;
  border-bottom: var(--sc-border-width) solid var(--sc-border);
}

.service-item {
  padding: 1.25rem 0;
  border-top: var(--sc-border-width) solid var(--sc-border);
}

.service-item__description {
  font-size: 1rem;
  line-height: var(--sc-line-height-body);
}

.service-item__note {
  font-size: 1rem;
  line-height: var(--sc-line-height-body);
  margin-top: 1rem;
}

/* Fixed-width service buttons, so the description column lines up. */
.btn-fixed {
  width: 200px;
  text-align: left;
  display: inline-block;
}

/* ------------------------------------------------------------------ *
 * Identity provider listing
 *
 * Same rule-separated rows as the service listing above, but each row is a
 * name and a set of label/value pairs rather than a button and a description.
 * ------------------------------------------------------------------ */

.idp-list {
  margin: 2em 0;
  border-bottom: var(--sc-border-width) solid var(--sc-border);
}

.idp-item {
  padding: 1.25rem 0;
  border-top: var(--sc-border-width) solid var(--sc-border);
}

.idp-item h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

.idp-item dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  line-height: var(--sc-line-height-body);
}

.idp-item dt {
  font-weight: 400;
  color: var(--sc-text-muted);
}

/* The values are long URLs in a narrow column, so they must be allowed to
   break. Anywhere, not break-word: these have no spaces to break at. */
.idp-item dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.idp-item__note {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-style: italic;
}

/* A note about the listing as a whole, rather than about one row. The negative
   top margin is what actually closes the gap: .idp-list has a 2em bottom margin
   (36px at the article's 1.125rem), and two positive adjoining margins collapse
   to the larger, so any small positive value here would be swallowed whole. A
   negative one is added to the larger positive instead, leaving 20px. */
.idp-list__note {
  margin: -1em 0 2rem;
  font-size: 1rem;
  font-style: italic;
}

/* Below sm the label column has no room beside the value, so labels sit above. */
@media (max-width: 575.98px) {
  .idp-item dl {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
  }

  .idp-item dd + dt {
    margin-top: 0.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * Sidebar
 * ------------------------------------------------------------------ */

.sidebar {
  border-top: var(--sc-border-width) solid var(--sc-border);
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .sidebar {
    margin-top: 0;
    margin-left: 50px;
    padding-left: 75px;
    padding-top: 0;
    border-top: 0;
    border-left: var(--sc-border-width) solid var(--sc-border);
  }
}

/* The sidebar heading is an <h2> so the page does not jump h1 -> h3, but it
   keeps the size it had as an <h3>: these are Bootstrap 5's own h3 values,
   which the site-wide h2 rule above would otherwise override. */
.sidebar h2 {
  margin: 0 0 0.5rem;
  font-size: calc(1.3rem + 0.6vw);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--sc-text);
}

@media (min-width: 1200px) {
  .sidebar h2 {
    font-size: 1.75rem;
  }
}

.sidebar > ul {
  padding: 15px 0 0;
  list-style: none;
  margin: 0;
}

.sidebar > ul li a {
  font-size: 1rem;
  line-height: 2;
  color: var(--sc-text);
}

.sidebar > ul li a:hover {
  color: var(--sc-link-hover);
}

.sidebar > ul li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

/* The top margin keeps page content clear of the separating line. Round 01 had
   it on the old footer; the round 02 rewrite dropped it. */
.site-footer {
  margin-top: 2rem;
  padding: 2rem 0;
  border-top: var(--sc-border-width) solid var(--sc-border);
}

.site-footer .row {
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.site-footer .row .col-md-3:first-of-type {
  padding-left: 0;
}

.site-footer .row .col-md-3:last-of-type {
  padding-right: 0;
}

.site-footer .row h2 {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--sc-text);
  margin: 1rem 0;
}

/* Footer text sits below body size. The official theme uses 1rem here; ours is
   one step down, which is a deliberate local choice. Headings stay at 1rem so
   they still read as headings. */
.site-footer .row p,
.site-footer .row a {
  font-size: 0.875rem;
}

.site-footer .row p {
  margin-bottom: 0;
}

.site-footer .row ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .row ul li {
  display: flex;
  align-items: center;
}

.site-footer .row ul li a {
  line-height: 1.5;
  margin: 0 0 8px;
}

.site-footer a {
  color: var(--sc-text);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--sc-link-hover);
  text-decoration: none;
}

/* Attribution text on its own line above the logo, as on the official site.
   Both are right-aligned, which the official site does not do. The width: 100%
   is what keeps the logo on a line of its own below. */
/* Bootstrap 5 pads every direct child of a .row, not just .col-* elements, so
   without this the text and the logo would sit half a gutter inside the row's
   2rem inset instead of level with it. */
.site-footer .footer-logo-row {
  --bs-gutter-x: 0;
  margin-top: 1.1em;
}

.footer-logo-text {
  width: 100%;
  margin-bottom: 0.75rem;
  text-align: right;
}

/* Selector depth matches .site-footer .row p above, which would otherwise win. */
.site-footer .row .footer-logo-text p {
  font-size: 0.75rem;
  color: var(--sc-text-muted);
}

/* Sits on its own line, because .footer-logo-text above it is width: 100%.
   margin-left: auto pushes it to the right end of that line. */
.footer-logo {
  max-height: 28px;
  max-width: 182px;
  height: auto;
  margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * Helpers
 * ------------------------------------------------------------------ */

.margin-top-sm {
  margin-top: 10px;
}