/*
  Japan 2026 – stilmall. "Shuchū" (集中) – dojo-redaktionell riktning.
  Allt utseende ligger här. Sidorna innehåller ingen inline-CSS,
  så det går att byta färger, typsnitt och layout genom att bara ändra den här filen.
*/

:root {
  --ink: #1C1A17;
  --ink-linje: #3A2E22;
  --paper: #EDE7D9;
  --paper-2: #E3DBC8;
  --straw: #C9B58B;
  --straw-dim: #B9AE96;
  --stamp: #A13328;
  --text: #1C1A17;
  --text-dimmad: #545C4C;
  --lank: #1C1A17;
  --bredd: 62rem;
  --typsnitt: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --rubriktyp: 'Zen Old Mincho', 'Yu Mincho', serif;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--typsnitt);
  line-height: 1.6;
  overflow-x: hidden;
}

a, a:link, a:visited { color: var(--lank); }
a:hover, a:active { color: var(--stamp); }

:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

/* ---------- Sidhuvud och huvudmeny ---------- */

.sidhuvud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink-linje);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logotyp {
  color: var(--straw);
  font-family: var(--rubriktyp);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.meny {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.meny a {
  color: var(--straw-dim);
  text-decoration: none;
  font-size: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

.meny a:hover { color: var(--paper); }
.meny a.aktiv { color: var(--paper); border-bottom-color: var(--stamp); }

/* ---------- Hero (endast startsidan) ---------- */

.hero {
  position: relative;
  color: var(--paper);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.2rem, 6vw, 5rem);
  min-height: clamp(260px, 34vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(10, 8, 6, 0.76) 0%, rgba(10, 8, 6, 0.36) 52%, rgba(10, 8, 6, 0.2) 100%),
    url('../assets/hero-start.jpg');
  background-size: cover;
  background-position: center 68%;
}

.hero-jp {
  position: absolute;
  top: clamp(1rem, 3vw, 2.2rem);
  right: clamp(1.2rem, 6vw, 5rem);
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--rubriktyp);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: rgba(237, 231, 217, 0.7);
}

.hero-kicker {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--straw);
}

.hero-dagar {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.hero-tal {
  font-family: var(--rubriktyp);
  font-size: clamp(3.2rem, 9vw, 6.2rem);
  line-height: 0.85;
}

.hero-dagtext {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.4rem;
}

.hero-rad { font-size: 1.05rem; color: var(--straw); }
.hero-datum { font-size: 0.9rem; color: var(--straw-dim); }

.hero-tema {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.05rem;
}

.hero-stamp {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid #D9695A;
  color: #D9695A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rubriktyp);
  font-size: 1.15rem;
  transform: rotate(-8deg);
  flex-shrink: 0;
}

/* ---------- Innehåll ---------- */

.innehall {
  max-width: var(--bredd);
  margin: 0 auto;
  padding: 1.6rem 1.2rem;
}

.hero + .innehall > h1:first-child { display: none; }

h1, h2, h3, h4 { font-family: var(--rubriktyp); color: var(--ink); line-height: 1.3; font-weight: 600; }
h1 { font-size: 2.1rem; border-bottom: 1px solid var(--straw); padding-bottom: 0.4rem; }
h2 { margin-top: 2.2rem; font-size: 1.5rem; border-bottom: 1px solid var(--straw); padding-bottom: 0.3rem; }
h3 { font-size: 1.2rem; }

hr { border: 0; border-top: 1px solid var(--straw); margin: 1.8rem 0; }

code {
  background: var(--paper-2);
  padding: 0.05rem 0.35rem;
  border-radius: 0.2rem;
  font-size: 0.9em;
}

blockquote {
  margin: 1.2rem 0;
  padding: 0.7rem 1.1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--stamp);
}

blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

/* ---------- Undermeny och innehållsförteckning ---------- */

.undermeny {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--straw);
}

.undermeny a { text-decoration: none; color: var(--text-dimmad); }
.undermeny a.aktiv { font-weight: 700; color: var(--stamp); }

.sidinnehall {
  background: var(--paper-2);
  padding: 0.7rem 1.1rem;
  margin-bottom: 1.2rem;
  border-left: 3px solid var(--straw);
}

.sidinnehall .rubrik { margin: 0 0 0.3rem; font-family: var(--rubriktyp); font-weight: 600; }
.sidinnehall ul { margin: 0; padding-left: 1.2rem; columns: 2 16rem; }

/* ---------- Tabeller ---------- */

.tabell { overflow-x: auto; margin: 1.2rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

th {
  color: var(--ink);
  text-align: left;
  font-family: var(--rubriktyp);
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--straw);
}

td {
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--straw);
  vertical-align: top;
}

tbody tr:nth-child(even) { background: var(--paper-2); }

.justera-left { text-align: left; }
.justera-center { text-align: center; }
.justera-right { text-align: right; }

/* ---------- Reseblogg ---------- */

.dagnav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.dagmeta { color: var(--text-dimmad); }

.plan td:first-child { white-space: nowrap; }

.bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.bilder figure { margin: 0; }
.bilder img, .bilder video { width: 100%; height: auto; display: block; }
.bilder figcaption { font-size: 0.85rem; color: var(--text-dimmad); }

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

/* ---------- Sidfot ---------- */

.sidfot {
  max-width: var(--bredd);
  margin: 2rem auto 1rem;
  padding: 0 1.2rem;
  color: var(--text-dimmad);
  font-size: 0.85rem;
}

/* ---------- Utskrift ---------- */

@media print {
  .sidhuvud, .hero, .undermeny, .sidfot, .dagnav { display: none; }
  .hero + .innehall > h1:first-child { display: block; }
  .innehall { max-width: none; padding: 0; }
}