/*
 * friska-site.css — Friskas egen stilmall, början på skalet för friska.se.
 *
 * Skriven som ett system, inte som sidstil: värdena står som variabler högst upp, allt
 * under dem läser variablerna, och inget här gäller bara en viss sidas innehåll. Den dag
 * friska.se blir hela sajten flyttar filen in i det stora bygget och ersätter både
 * WordPress-temats stilmall och våra tillägg till den.
 *
 * Värdena är hämtade från blodtrycksdoktorn.se (beslut 2026-09-21): färgerna,
 * typsnitten, textskalan, knappen och heron är desamma som i out/assets/theme.css och
 * out/assets/site.css — men inskrivna här som tokens, inte lästa därifrån. Filen laddar
 * aldrig theme.css och lånar inga klassnamn. Varje värde och var det kommer ifrån står i
 * .claude/design-system-friska.md, som är kontraktet.
 *
 * Värden märkta PLATSHÅLLARE är tillfälliga och byts när designen är beslutad.
 */

/* ------------------------------------------------------------------ 0. Typsnitt */

/* Isidora Sans — temats fem vikter, som namngivna familjer, inte font-weight.
   Filnamnen är MyFonts-kitets egna; samma filer som i out/assets/fonts/. */
@font-face {
  font-family: "IsidoraSans-Black";
  src: url("fonts/34C90D_5_0.woff2") format("woff2"),
       url("fonts/34C90D_5_0.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "IsidoraSans-Bold";
  src: url("fonts/34C90D_7_0.woff2") format("woff2"),
       url("fonts/34C90D_7_0.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "IsidoraSans-Medium";
  src: url("fonts/34C90D_10_0.woff2") format("woff2"),
       url("fonts/34C90D_10_0.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "IsidoraSans-Regular";
  src: url("fonts/34C90D_12_0.woff2") format("woff2"),
       url("fonts/34C90D_12_0.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "IsidoraSans-SemiBold";
  src: url("fonts/34C90D_16_0.woff2") format("woff2"),
       url("fonts/34C90D_16_0.woff") format("woff");
  font-display: swap;
}

/* Geist — brödtexten, enligt Fedzas beslut 2026-08-28 för den stora sajten, och dess
   fetstil för <strong> i löptext (Figma-designen för startsidan, 2026-09-24). */
@font-face {
  font-family: "Geist-Medium";
  src: url("fonts/Geist-Medium.woff2") format("woff2"),
       url("fonts/Geist-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Geist-Bold";
  src: url("fonts/Geist-Bold.woff2") format("woff2"),
       url("fonts/Geist-Bold.woff") format("woff");
  font-display: swap;
}

/* ------------------------------------------------------------------ 1. Tokens */

:root {
  /* Färger — från blodtrycksdoktorn.se */
  --color-ink: #343434;
  --color-ink-strong: #101011;
  --color-ink-hero: #232323;
  --color-ink-muted: #5a5a5a;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f6f7;
  --color-surface-brand: #fff3f9;
  --color-brand: #72053a;
  --color-button: #a61154;
  --color-button-hover: #710c39;
  --color-brand-contrast: #ffffff;
  --color-link: #a61154;
  --overlay-banner: linear-gradient(115.56deg, rgba(0, 0, 0, 0.2) 13.1%, rgba(0, 0, 0, 0) 73.37%);
  --color-line: #e2e2df;

  /* Typsnitt — från blodtrycksdoktorn.se. Namngivna vikter, aldrig font-weight. */
  --font-body: "Geist-Medium", sans-serif;
  --font-heading: "IsidoraSans-Bold", sans-serif;
  --font-heading-hero: "IsidoraSans-Bold", sans-serif;
  --font-strong: "IsidoraSans-Bold", sans-serif;
  --font-body-strong: "Geist-Bold", sans-serif;
  --font-fine: "IsidoraSans-Regular", sans-serif;

  /* Typskala — temats: 16px som flyter till 20px mellan 1000 och 1600px bredd */
  --text-base: clamp(16px, 16px + 4 * ((100vw - 1000px) / 600), 20px);
  --text-lead: 18px;
  --text-fine: 14px;
  --text-h1: 40px;
  --text-h2: clamp(23px, 23px + 2 * ((100vw - 400px) / 600), 28px);
  --text-h3: clamp(19px, 19px + 4 * ((100vw - 1000px) / 600), 23px);
  --leading-body: 1.5;
  --leading-h1: 1.2;
  --leading-heading: 1.2;
  --tracking-h1: -0.1rem;

  /* Rytm och form */
  --space-0: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 5rem;
  --container: 44rem;
  --container-wide: 1300px;
  --container-banner: 1100px;
  --gutter: 20px;
  --radius: 0.5rem;
  --radius-pill: 100px;
  --radius-banner: clamp(1.5rem, 4.7vw, 52px);
  --rule: 1px;
  --rule-accent: 3px;

  /* Heron och frågelistan — avstånden i Figma-designen för startsidan, 2026-09-24 */
  --hero-padding-top: var(--space-5);
  --hero-heading-gap: 1.25rem;
  --hero-banner-gap: 3.25rem;
  --faq-gap: 1.75rem;
}

@media (min-width: 48rem) {
  :root {
    --text-h1: 50px;
  }
}

@media (min-width: 64rem) {
  :root {
    --text-h1: 52px;
    --text-lead: 20px;
    --hero-padding-top: var(--space-6);
  }
}

/* -------------------------------------------------------------------- 2. Bas */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-surface);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  line-height: var(--leading-heading);
  color: var(--color-ink-strong);
  margin: 0 0 var(--space-2);
}

p,
ul,
ol {
  margin: var(--space-2) 0;
}

strong,
b {
  font-family: var(--font-body-strong);
  font-weight: normal;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-button-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Den breda containern — heron med bild och breda avsnitt. */
.container--wide,
.hero--split .container,
.section--wide .container {
  max-width: var(--container-wide);
}

/* Hela bredden, med sidmarginalen — headern och sidfoten. */
.container--full {
  max-width: none;
}

/* Bildblocket under heron: bildens egen bredd plus sidmarginalen. */
.container--banner {
  max-width: calc(var(--container-banner) + 2 * var(--gutter));
}

/* ------------------------------------------------------------- 3. Komponenter */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

/* Header */
.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

/* Ordmärket, i temats höjder för headerns logotyp: 25px på mobil, 36px från 64rem. */
.site-header__logo,
.site-footer__logo {
  display: block;
  line-height: 0;
}

.site-header__logo img,
.site-footer__logo img {
  height: 25px;
  width: auto;
  margin: 0;
}

@media (min-width: 64rem) {
  .site-header__logo img,
  .site-footer__logo img {
    height: 36px;
  }
}

/* Logo page — only the wordmark, centred on an otherwise empty page (layouts/logo.njk).
   The header's wordmark at four times its mobile height. */
.logo-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.logo-page__logo {
  margin: 0;
  line-height: 0;
}

.logo-page__logo img {
  height: 100px;
  width: auto;
  max-width: 100%;
}

/* Hero */
.hero {
  padding-block: var(--hero-padding-top) var(--space-3);
}

.hero__heading {
  font-family: var(--font-heading-hero);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--color-ink-hero);
  margin-bottom: var(--hero-heading-gap);
}

.hero__intro {
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.hero__intro > :last-child {
  margin-bottom: 0;
}

/* Bildblocket under heron (`heroBanner` i frontmatter): ett foto med rundade hörn, en
   mörk toning uppe till vänster, och den gamla och den nya logotypen ovanpå. Fotots ruta
   är större än blocket och beskärs nere till höger, och logotypernas lägen och bredder är
   andelar av blocket — allt mätt i Figma-designen (1100 × 582), så att kompositionen
   krymper som en helhet på smalare skärmar. */
.banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1100 / 582;
  margin-top: var(--hero-banner-gap);
  border-radius: var(--radius-banner);
}

.banner__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 106.27%;
  height: 112.89%;
}

.banner__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
}

.banner__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-banner);
}

.banner__logo {
  position: absolute;
  top: 50%;
  height: auto;
  margin: 0;
  transform: translateY(-50%);
}

.banner__logo--from {
  left: 9.86%;
  width: 40%;
}

.banner__logo--to {
  left: 61.05%;
  width: 23.71%;
}

/* Etikett ovanför hero-rubriken (`eyebrow` i frontmatter) och meta-rader i inledningen —
   dokumentsidor som användarmanualerna: "Användarmanual" ovanför, "För vårdgivare" och
   versionen under. */
.hero__eyebrow {
  font-family: var(--font-strong);
  font-size: var(--text-fine);
  color: var(--color-brand);
  margin: 0 0 var(--space-2);
}

.hero__meta {
  color: var(--color-ink-muted);
  margin: 0;
}

.hero__list {
  padding-left: 1.25em;
}

.hero__list li {
  margin-bottom: var(--space-1);
}

/* Delad hero: rubrik/text i en kolumn, en bild i en andra. Används när sidan har
   `heroImage` i sin frontmatter (t.ex. startsidan) — annars är hero en enda spalt.
   Proportionerna är hemskärmens på blodtrycksdoktorn.se: text 60 %, bild resten. */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: var(--space-5);
}

.hero__media img {
  border-radius: var(--radius);
  object-fit: cover;
  width: 100%;
  max-height: 475px;
  margin: 0;
}

@media (max-width: 48rem) {
  .hero--split .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__media img {
    max-height: 350px;
  }
}

/* Avsnitt */
.section {
  padding-block: var(--space-3);
}

.section__heading {
  font-size: var(--text-h2);
}

/* Underrubriker och nästlade listor inne i ett avsnitt — långa dokument har båda. */
.section__body h3 {
  font-size: var(--text-h3);
  margin: var(--space-4) 0 var(--space-1);
}

.section__body li > ul,
.section__body li > ol {
  margin: var(--space-1) 0 0;
}

/* Frågor och svar: en <dl class="faq">, frågan i fetstil på en egen rad och svaret
   direkt under, med luft mellan paren. */
.faq {
  margin: 0;
}

.faq dt {
  font-family: var(--font-body-strong);
  margin-top: var(--faq-gap);
}

.faq dd {
  margin: var(--space-0) 0 0;
}

.faq dd p {
  margin: 0;
}

.faq dd img {
  margin: var(--space-1) 0 0;
}

/* Ett avsnitt med `class: section--wide` i frontmatter använder den breda containern —
   regeln står vid .container--wide ovan. */

/* Dokumentblock — de fyra block som användarmanualerna är byggda av. Generella: en
   markerad ruta, en rad bilder med bildtext, en varningsruta med symbol, och en tabell med
   en symbolkolumn. */

/* Markerad ruta: en etikett och några rader, på den avvikande ytan med en brand-kant */
.note {
  background: var(--color-surface-alt);
  border-left: var(--rule-accent) solid var(--color-brand);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}

.note p {
  margin: var(--space-1) 0;
}

.note > :last-child {
  margin-bottom: 0;
}

.note__label {
  display: block;
  font-family: var(--font-strong);
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

/* Bilder i rad: skärmbilder med bildtext, radbryts på smala skärmar. Bildens bredd sätts
   med width/height på <img>, inte i stilmallen. */
.figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* Varje bild tar plats från 140px upp till sin egen bredd, så att två 340px-bilder står
   bredvid varandra i läsbredden och fyra 160px-bilder får rum på en rad; på mobil bryts
   raden två och två. */
.figure {
  flex: 1 1 140px;
  min-width: 0;
  max-width: max-content;
  margin: 0;
}

.figure img {
  margin: 0 auto;
  border: var(--rule) solid var(--color-line);
  border-radius: var(--radius);
}

.figure figcaption {
  font-family: var(--font-fine);
  font-size: var(--text-fine);
  color: var(--color-ink-muted);
  text-align: center;
  margin-top: var(--space-1);
}

/* Varningsruta: symbolen till vänster, rubrik och text till höger */
.warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border: var(--rule) solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}

.warning__icon {
  flex: 0 0 auto;
}

.warning__icon img {
  margin: 0;
}

.warning__body {
  min-width: 0;
}

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

.warning__body > :last-child {
  margin-bottom: 0;
}

.warning__title {
  display: block;
  margin-bottom: var(--space-1);
}

/* Tabell med symbolkolumn: symbolen centrerad till vänster, texten till höger */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-3);
}

.table th,
.table td {
  border: var(--rule) solid var(--color-line);
  padding: var(--space-2);
  text-align: left;
  vertical-align: middle;
}

.table th {
  background: var(--color-surface-alt);
  font-family: var(--font-strong);
  font-weight: normal;
}

.table__icon {
  width: 7rem;
  text-align: center;
}

.table__icon img {
  margin: 0 auto;
}

.table__icon img + img {
  margin-top: var(--space-2);
}

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

.table__text > :last-child {
  margin-bottom: 0;
}

@media (max-width: 48rem) {
  .table__icon {
    width: 5rem;
  }

  .table th,
  .table td {
    padding: var(--space-1);
  }
}

/* Knapp — samma format som "Kom igång" på blodtrycksdoktorn.se, i knappfärgen #a61154 */
.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-button);
  color: var(--color-brand-contrast);
  font-family: var(--font-strong);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--color-button-hover);
  color: var(--color-brand-contrast);
}

/* Sidfot — ordmärket, som i headern, och härkomsten bredvid när sidan har den */
.site-footer {
  margin-top: var(--space-4);
  color: var(--color-ink-strong);
  font-family: var(--font-fine);
  font-size: var(--text-fine);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 4rem;
}

.site-footer__origin {
  margin: 0;
}