/*
-----------------------------------------
BASE
1. Reset och bas
2. Layout (page, main, container, section, sektionsrubrik)
3. Knappar och ikoner
4. Brödtext ur en rich text editor
Alla värden kommer från tokens.css.
-----------------------------------------
*/

/* ---- Reset och bas ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 1 rem = 10 px, exakt som på källsajten (html { font-size: 10px }): sidan följer inte webbläsarens teckenstorlek */
html {
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Källans body har backface-visibility: hidden, vilket gör texten gråskalekantutjämnad i stället för LCD-kantutjämnad (källans app.css) */
body {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-tight);
  color: inherit;
}

p,
ul,
ol,
figure,
blockquote,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

/* Ingen max-inline-size: som på källsajten krymper inte en bild i texten till sin ruta, utan klipps av rutan (.article__content har overflow hidden) */
img {
  display: block;
  block-size: auto;
}

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

a:hover,
a:focus {
  color: var(--text-link-hover);
  text-decoration: underline;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Fokusringen är webbläsarens egen som på källsajten (Bootstrap): 5 px auto på länkar och knappar, 1 px auto i sökfält */
a:focus,
button:focus {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input:focus {
  outline: 1px auto Highlight;
  outline: 1px auto -webkit-focus-ring-color;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-15);
  z-index: var(--z-cookie);
  padding: var(--space-5) var(--space-15);
  background: var(--surface-page);
  color: var(--text-body);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: none;
}

/* ---- Layout ------------------------------------------------------------------- */

/* Sidhuvudet är fast: innehållet börjar under det (källans .navbar + * { margin-top: 60px }). Sidfoten följer direkt efter innehållet, också på en kort sida (källans 404 är en tom sida med sidfoten överst). */
.main {
  padding-block-start: var(--size-header-height);
}

/* Källans container: fasta bredder i steg och 15 px marginal */
.container {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--space-15);
}

@media (width >= 768px) {
  .container {
    inline-size: var(--size-container-sm);
  }
}

@media (width >= 1085px) {
  .container {
    inline-size: var(--size-container-md);
  }
}

@media (width >= 1200px) {
  .container {
    inline-size: var(--size-container-lg);
  }
}

/* Sektion (källans div.section): centrerad, 60 px luft och en tunn linje under */
.section {
  padding-block: var(--space-60);
  border-block-end: var(--border-width) solid var(--border-section);
  text-align: center;
}

/* Sidans rubrik i en sektion för sig: sektionerna som följer ligger 30 px under rubriken (källans .section-title + * { margin-top: 3rem }) */
/* Rubriken ligger i källans container (15 px luft på sidorna): 360 px bred på 390 */
.section--page-title {
  padding-block-end: 0;
  padding-inline: var(--space-15);
  border-block-end: 0;
}

.section--page-title + .section {
  padding-block-start: var(--space-30);
}

.section--text {
  text-align: left;
}

.section__title {
  max-inline-size: var(--size-section-title);
  margin-inline: auto;
  font: var(--font-section-title);
  color: var(--text-title);
  text-transform: uppercase;
  text-align: center;
}

/* Raden ovanför eller i stället för rubriken (källans small i .section-title) */
.section__eyebrow {
  display: block;
  font-size: var(--fs-20);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-eyebrow);
}

.section__title + * {
  margin-block-start: var(--space-30);
}

.section__image {
  inline-size: 100%;
  max-inline-size: var(--size-image-wide);
  margin-inline: auto;
  margin-block-end: var(--space-30);
}

/* 12 px luft ovanför texten: på källsajten ligger ett tomt stycke (med 12 px marginal) före texten i sektionen */
.section__text {
  max-inline-size: var(--size-text-columns);
  margin-inline: auto;
  padding-block-start: var(--space-12);
  text-align: center;
}

/* ---- Knappar ----------------------------------------------------------------- */

/* Kontursknappen (källans .section-link): orange kontur, fylld i hover */
.button {
  display: inline-block;
  margin-block-start: var(--space-30);
  padding: 0.6rem var(--space-10) 0.5rem;
  border: var(--border-width-button) solid var(--text-link);
  background: transparent;
  color: var(--text-link);
  font: var(--font-button);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

.button:hover,
.button:focus {
  background: var(--text-link);
  color: var(--text-inverse);
  text-decoration: none;
}

/* Fylld (heroens Läs mer): fylld orange, genomskinlig i hover */
.button--solid {
  background: var(--text-link);
  color: var(--text-inverse);
}

.button--solid:hover,
.button--solid:focus {
  background: transparent;
}

/* Gröna Fortsätt i kakrutan (Bootstrap btn-success) */
.button--success {
  vertical-align: middle;
  margin-block-start: var(--space-15);
  padding: 0.6rem 1.2rem;
  border: var(--border-width) solid var(--color-success-line);
  background: var(--color-success);
  color: var(--text-inverse);
  font: var(--font-weight-regular) var(--fs-16) / 2.4rem var(--font-family-heading);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.button--success:hover,
.button--success:focus {
  border-color: var(--color-success-hover-line);
  background: var(--color-success-hover);
  color: var(--text-inverse);
}

.button--success:focus {
  border-color: var(--color-success-focus-line);
}

/* ---- Ikoner (Font Awesome 4.5, glyfer som SVG ur design/ikoner) ----------------------------------
   Färgen är textfärgen: ikonen är en mask över currentColor. Glyfen är 1 em hög och viewBox-bredd / 1792 em bred (--icon-width), som i fonten. */
.icon {
  display: inline-block;
  inline-size: var(--icon-width, 1em);
  block-size: 1em;
  background: currentcolor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
  vertical-align: middle;
}

.icon--search {
  --icon: url("../assets/icons/search.svg");
  --icon-width: 0.92857em;
}

.icon--facebook {
  --icon: url("../assets/icons/facebook.svg");
  --icon-width: 0.57143em;
}

.icon--twitter {
  --icon: url("../assets/icons/twitter.svg");
  --icon-width: 0.92857em;
}

.icon--youtube {
  --icon: url("../assets/icons/youtube.svg");
  --icon-width: 0.85714em;
}

.icon--instagram {
  --icon: url("../assets/icons/instagram.svg");
  --icon-width: 0.85714em;
}

.icon--tag {
  --icon: url("../assets/icons/tag.svg");
  --icon-width: 0.85714em;
}

.icon--home {
  --icon: url("../assets/icons/home.svg");
  --icon-width: 0.92857em;
}

.icon--phone {
  --icon: url("../assets/icons/phone.svg");
  --icon-width: 0.78571em;
}

.icon--envelope {
  --icon: url("../assets/icons/envelope.svg");
}

.icon--globe {
  --icon: url("../assets/icons/globe.svg");
  --icon-width: 0.85714em;
}

.icon--angle-down {
  --icon: url("../assets/icons/angle-down.svg");
  --icon-width: 0.64286em;
}

/* Delningsknapparnas ikoner (källans Shariff-SVG:er) */
.icon--share-twitter {
  --icon: url("../assets/icons/share-twitter.svg");
}

.icon--share-facebook {
  --icon: url("../assets/icons/share-facebook.svg");
}

.icon--user {
  --icon: url("../assets/icons/user.svg");
  --icon-width: 0.78571em;
}

.icon--comment {
  --icon: url("../assets/icons/comment.svg");
}

/* ---- Brödtext ur en rich text editor --------------------------------------------- */

.rich-text {
  font: var(--font-body);
  color: var(--text-body);
}

.rich-text > * {
  margin-block-end: var(--space-12);
}

.rich-text h2 {
  margin-block: var(--space-24) var(--space-12);
  font-size: var(--fs-34);
}

.rich-text h3 {
  margin-block: var(--space-24) var(--space-12);
  font-size: var(--fs-28);
}

.rich-text h4 {
  margin-block: var(--space-12);
  font-size: var(--fs-20);
}

.rich-text ul,
.rich-text ol {
  padding-inline-start: 4rem;
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text strong {
  font-weight: var(--font-weight-bold);
}

.rich-text .center {
  text-align: center;
}

.rich-text blockquote {
  padding: var(--space-12) var(--space-20);
  border-inline-start: 0.5rem solid var(--color-grey-ee);
  font-size: var(--fs-20);
}

/* Bilder i texten (källans align-klasser) */
.rich-text img {
  display: inline-block;
  vertical-align: middle;
}

.rich-text .aligncenter {
  display: block;
  margin: 0.5rem auto;
}

.rich-text .alignleft {
  float: left;
  margin: 0.5rem var(--space-20) var(--space-20) 0;
}

.rich-text .alignright {
  float: right;
  margin: 0.5rem 0 var(--space-20) var(--space-20);
}

.rich-text .alignnone {
  margin: 0.5rem var(--space-20) var(--space-20) 0;
}

/* Inbäddad video (blocket videoEmbed i brödtexten): storleken styrs av klasserna, aldrig av style */
.video-embed {
  position: relative;
  inline-size: 100%;
  max-inline-size: 50rem;
  margin-block: var(--space-12);
}

.video-embed--video {
  max-inline-size: 100%;
}

.video-embed__frame,
.video-embed__video {
  display: block;
  inline-size: 100%;
  border: 0;
  aspect-ratio: var(--size-embed-ratio);
}

.video-embed__frame--card {
  aspect-ratio: auto;
  block-size: var(--size-embed-card-height);
}