/*
Theme Name: Tabell
Text Domain: tabell
Description: Ett minimalt tema med tabell-baserat flöde. Stil som hemmaservern.
Version: 2.1
*/

/* Färger. Mörkt läge följer enhetens inställning. */
:root {
  --bakgrund: #FFFFFF; --yta: #F6F6F3; --linje: #E6E5E0; --text: #1C1C1A;
  --dampad: #6B6A64; --markering: #FFE270; --markering-text: #1C1C1A;
  --lank: #1D63C9; --fokus: #1D63C9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bakgrund: #18181A; --yta: #222225; --linje: #333337; --text: #F1F0EC;
    --dampad: #A3A29C; --markering: #F5CF45; --markering-text: #18181A;
    --lank: #7FB0FF; --fokus: #7FB0FF;
  }
}
:root[data-theme="dark"] {
  --bakgrund: #18181A; --yta: #222225; --linje: #333337; --text: #F1F0EC;
  --dampad: #A3A29C; --markering: #F5CF45; --markering-text: #18181A;
  --lank: #7FB0FF; --fokus: #7FB0FF;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bakgrund); color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; line-height: 1.5;
}
.ram { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--lank); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Sidhuvud: sajtnamn och RSS-länk */
header { border-bottom: 1px solid var(--linje); }
header .ram {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.namn { margin: 0; font-size: 1.25rem; font-weight: 800; }
.namn a { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.namn span[aria-hidden] {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--markering); font-size: 1.15rem;
  transition: transform .15s ease;
}
.namn a:hover span[aria-hidden] { transform: rotate(-8deg); }
.verktyg { display: flex; align-items: center; gap: .6rem; }
.rss {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border-radius: 999px; background: var(--yta);
  color: var(--text); font-weight: 700; font-size: .95rem;
}
.rss:hover { background: var(--markering); color: var(--markering-text); text-decoration: none; }
.rss svg { width: 1rem; height: 1rem; color: #E8762B; }

/* Innehåll */
main .ram { padding-top: 2rem; padding-bottom: 4rem; }
main h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .75rem; }

/* Sökfält */
.sokfalt { position: relative; margin: 0 0 2rem; }
.sokfalt label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sokfalt input[type="search"] {
  width: 100%; padding: .9rem 1.1rem .9rem 2.9rem;
  font: inherit; color: var(--text); background: var(--yta);
  border: 2px solid transparent; border-radius: 14px;
}
.sokfalt input[type="search"]:focus { outline: none; border-color: var(--fokus); background: var(--bakgrund); }
.sokfalt svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; color: var(--dampad); pointer-events: none; }

/* Litet sökfält i sidhuvudet (inlägg och sidor) – växer vid klick */
.sokfalt-litet { margin: 0; }
.sokfalt-litet input[type="search"] {
  width: 7.5rem; padding: .45rem .9rem .45rem 2.2rem; font-size: .95rem;
  border-radius: 999px; transition: width .2s ease;
}
.sokfalt-litet input[type="search"]:focus { width: 15rem; }
.sokfalt-litet svg { left: .8rem; width: 1rem; height: 1rem; }

/* Tabellen – samma i alla flöden */
.antal { font-size: .95rem; color: var(--dampad); margin: 0 0 .5rem; }
.tabellram { overflow-x: auto; }
.postlist { width: 100%; border-collapse: collapse; }
.postlist thead th { text-align: left; padding: 0 .75rem .5rem; border-bottom: 2px solid var(--text); }
.postlist thead th:first-child { padding-left: 0; }
.postlist thead a {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem 0;
  font-size: .85rem; font-weight: 700; color: var(--dampad); white-space: nowrap;
}
.postlist thead a:hover, .postlist th[aria-sort] a { color: var(--text); text-decoration: none; }
.postlist tbody tr { border-bottom: 1px solid var(--linje); }
.postlist tbody tr:hover { background: var(--yta); }
.postlist tbody th, .postlist tbody td { padding: .85rem .75rem; vertical-align: middle; }
.postlist tbody td:first-child { padding-left: 0; }
.postlist tbody th { font-weight: 500; text-align: left; }
.postlist tbody th a { color: var(--text); }
.postlist tbody td { color: var(--dampad); white-space: nowrap; font-size: .95rem; font-variant-numeric: tabular-nums; }
.postlist td.kol-id a { color: var(--dampad); }

/* Sidbläddring */
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: 2rem 0 0; }
.nav-links a, .nav-links span {
  padding: .4rem .9rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  border: 1.5px solid var(--linje); color: var(--text);
}
.nav-links a:hover { border-color: var(--dampad); text-decoration: none; }
.nav-links .current { background: var(--text); color: var(--bakgrund); border-color: var(--text); }
.nav-links .dots { border-color: transparent; }

/* Tom lista */
.tom { text-align: center; padding: 3rem 1rem; background: var(--yta); border-radius: 16px; }
.tom p { margin: 0 0 1rem; }
.knapp {
  display: inline-block; font-weight: 700; padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--markering); color: var(--markering-text);
}
.knapp:hover { text-decoration: none; filter: brightness(.96); }

/* Enskilt inlägg */
article { max-width: 42rem; }
article h2 { margin-bottom: .35rem; }
.meta { color: var(--dampad); font-size: .95rem; margin: 0 0 1.75rem; }
.featured { margin: 0 0 1.75rem; }
.featured img { display: block; width: 100%; height: auto; border-radius: 16px; }
article img { max-width: 100%; height: auto; border-radius: 12px; }
article p, article li { line-height: 1.65; }
.terms, .widgets {
  margin: 2.5rem 0 0; padding: 1.25rem 1.25rem; background: var(--yta); border-radius: 16px; font-size: .95rem;
}
.terms { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; }
.terms dt, .widget-title, .widget h2, .widget h3 {
  font-size: .85rem; font-weight: 700; color: var(--dampad); margin: 0;
}
.terms dd { margin: 0; }
.widgets { margin-top: 1rem; }
.widget { margin: 0 0 1.5rem; }
.widget:last-child { margin-bottom: 0; }
.widget-title, .widget h2, .widget h3 { margin-bottom: .5rem; }
.widget ul { margin: 0; padding-left: 1.1rem; }
.widget li { margin: 0 0 .25rem; }

/* Sidfot */
footer { border-top: 1px solid var(--linje); color: var(--dampad); font-size: .9rem; }
footer .ram { padding-top: 2rem; padding-bottom: 2.5rem; }
footer p { max-width: 42rem; margin: 0 0 .75rem; }
footer p:first-child { font-weight: 700; }

/* Mobil: göm Id och Källa så att rubriken får plats */
@media (max-width: 40rem) {
  .kol-id, .kol-kalla { display: none; }
  .postlist thead th:nth-child(2), .postlist tbody th { padding-left: 0; }
  .rss { padding: .4rem .8rem; }
  /* På inlägg: sajtnamn och verktyg på samma rad, RSS bara som ikon */
  .single header .ram, .page header .ram { flex-wrap: nowrap; }
  .single .rss span, .page .rss span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .single .rss, .page .rss { padding: .55rem; }
  .sokfalt-litet input[type="search"] { width: 6rem; }
  .sokfalt-litet input[type="search"]:focus { width: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .namn span[aria-hidden], .sokfalt-litet input[type="search"] { transition: none; }
}