/* main.css – gemensam grund för alla sidor:
   bas, header/navigation, innehållsyta, kort, knappar, footer.
   Färger och mått kommer från root.css (var(--...)).
   Sidspecifik CSS ligger i blogg.css, wiki.css och portfolio.css.
   Layouten använder hela sidans bredd och anpassar sig till skärmen. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;            /* inga falska fetstilar/kursiv när typsnittet saknar dem */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;                /* Presque Elegante finns bara i en vikt */
  line-height: 1.25;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

code,
pre {
  overflow-wrap: anywhere;
}

pre {
  overflow-x: auto;
}

/* ---------- Header och navigation ---------- */
.site-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
}

.site-header .inner {
  padding: var(--space-2) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  color: var(--color-header-text);
  text-decoration: none;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.site-nav a {
  display: inline-block;
  color: var(--color-header-text);
  text-decoration: none;
  padding: 0.4rem 0.1rem;          /* större träffyta på touch */
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  border-bottom-color: var(--color-accent);
  color: var(--color-header-text);
}

/* ---------- Innehåll (full bredd) ---------- */
main {
  width: 100%;
  padding: var(--space-3) var(--gutter);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.hero {
  text-align: center;
  padding: var(--space-4) 0;
}

.hero p {
  max-width: 40rem;                /* behåller läsbar radlängd i startsidans intro */
  margin: 0 auto var(--space-3);
  color: var(--color-muted);
}

.button {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.button:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

/* Kort-rutnät: så många kolumner som får plats, 1 på mobil */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
  padding: var(--space-2);
}

.meta {
  color: var(--color-muted);
  font-size: 0.9em;
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: var(--space-3) var(--gutter);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

/* ---------- Små skärmar ---------- */
@media (max-width: 600px) {
  .site-header .inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    gap: 0 var(--space-2);
  }

  .button {
    display: block;
    text-align: center;
  }
}

main {
  padding: var(--space-4) var(--gutter);
  max-width: 100%;
  margin: 0 auto;
}

.intro {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 22vw, 280px);
  gap: var(--space-4);
  align-items: stretch;            /* kolumnerna blir lika höga */

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* ---------- Vänster ---------- */
.intro__main {
  min-width: 0;                  /* hindrar långa texter från att spränga griden */
}

.intro h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

/* Faktan: tre kolumner inne i vänsterdelen */
.facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;       /* under varandra */
  gap: var(--space-4);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.fact__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  color: var(--color-primary);
}

.fact__text {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.7;
}

.fact__text h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0 0 var(--space-2);
}

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

.fact__text .indrag {
  margin-left: var(--space-3);
  margin-bottom: var(--space-3);
  font-style: italic;
}

.fact__text .indrag2 {
  margin: 0 0 var(--space-1) var(--space-3);
  font-style: italic;
}

.intro__side {
  background: var(--color-surface-soft);   /* bakgrundsfärg */
  padding: var(--space-3);
  align-self: stretch;             /* bakgrunden fyller hela höjden */
}

.intro__side h3 {
  background: var(--color-accent);      /* rosa (#d9a299), byt till --color-tan för lugnare ton */
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  margin-bottom: var(--space-2);
}

.intro__figure {
  margin: 0;
}

.intro__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.intro__caption {
  text-align: center;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ---------- Responsivt ---------- */

/* Smal laptop/surfplatta: faktan staplas, sidebar ligger kvar */
@media (max-width: 1000px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

/* Mobil: allt staplas, bilden överst */
@media (max-width: 700px) {
  .intro {
    grid-template-columns: 1fr;
  }
  .intro__side {
    position: static;
    order: -1;                   /* bilden hamnar före rubriken */
    max-width: 280px;
    margin: 0 auto;
  }
}
/* ---------- About me ---------- */
.about {
  background: var(--color-surface-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.about h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-2);
}

.about p {
  max-width: 65ch;
  line-height: 1.7;
  color: var(--color-text);
}

.about p + p {
  margin-top: var(--space-2);
}

/* ---------- Mobil: bilden hamnar under faktan ---------- */
@media (max-width: 700px) {
  .intro {
    grid-template-columns: 1fr;
  }
}

.intro__table {
  width: 100%;
  table-layout: fixed;             /* kolumnbredderna styrs av reglerna nedan */
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.intro__table th {
  width: 35%;                  /* vänster kolumn: 1/3 */
  padding: var(--space-1) 0;
  text-align: left;
  vertical-align: top;
}

.intro__table td {
  font-family: var(--font-body);
  width: 65%;                  /* höger kolumn: 2/3 */
  padding: var(--space-1) 0;
  text-align: left;
  vertical-align: top;
  white-space: normal;        /* tillåt radbrytning */
  overflow-wrap: anywhere;    /* bryt även långa ord om de inte ryms */
  word-break: normal;
}

.intro__table th {
  font-family: var(--font-heading);
  font-weight: 700;
  padding-right: var(--space-2);
  white-space: normal;        /* tillåt radbrytning */
  overflow-wrap: anywhere;    /* bryt även långa ord om de inte ryms */
  word-break: normal;        /* hindrar etiketten från att brytas */
}

.intro__table td {
  color: var(--color-text);
}

.intro__table tr:last-child th,
.intro__table tr:last-child td {
  border-bottom: none;             /* ingen linje under sista raden */
}