/*
Theme Name: Tavelramar
Theme URI: https://tavelramar.se/
Description: Sida om inramning. Barntema till Twenty Twenty-Five. Nykter, modern layout i ett typsnitt.
Author: Björn Andersson
Author URI: https://www.bjorn-andersson.se/
Template: twentytwentyfive
Version: 3.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: tavelramar
*/

/* v3.0. Den förra versionen var ett tidskriftsidiom: stor serif, bildtext
   ute i marginalen, helt rött fält. Var för sig gick det an, tillsammans
   blev sidan gammaldags, och på smala skärmar hamnade bildtexten utanför.
   Nu: ett typsnitt, mindre grader, inget som sticker ut ur spalten.
   Accenten är grågrön och används i tunna streck, aldrig som fond.       */

:root {
  --tr-accent: var(--wp--preset--color--accent);
  --tr-linje:  var(--wp--preset--color--rule);
  --tr-svag:   var(--wp--preset--color--soft);
  --tr-text:   var(--wp--preset--color--contrast);
  --tr-ton:    var(--wp--preset--color--base-2);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Ingen bredd får skapa vågrät scroll, oavsett hur smal skärmen är. */
html, body { overflow-x: hidden; }
img, svg, video, table { max-width: 100%; height: auto; }

/* =========================================================== 1. HUVUDET */

.sidhuvud { border-bottom: 1px solid var(--tr-linje); }

.sidhuvud .rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 46px;
}

/* Märket: symbol plus ordbild, i en färg. */
.markt,
.sidhuvud a.markt:hover,
.sidhuvud a.markt:visited {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  text-decoration: none !important;
  color: var(--tr-text) !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1;
  white-space: nowrap;
}

.markt svg { display: block; width: 1.25em; height: 1.25em; flex: none; }

.sidhuvud .wp-block-navigation { font-size: .875rem; letter-spacing: -.005em; }

.sidhuvud .wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none;
  color: var(--tr-svag);
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}

/* Accent nr 2: aktiv sida och hover. Färgen betyder alltid "här kan du gå". */
.sidhuvud .wp-block-navigation .wp-block-navigation-item__content:hover,
.sidhuvud .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--tr-text);
  border-bottom-color: var(--tr-accent);
}

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base) !important;
  padding-top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.25rem;
  border-bottom: 0;
}

/* Accent nr 1: länkar i löpande text. Texten är svart, strecket är färgat. */
.artikel a:not(.wp-block-button__link) {
  color: var(--tr-text);
  text-decoration: underline;
  text-decoration-color: var(--tr-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.artikel a:hover { color: var(--tr-accent); }

:focus-visible { outline: 2px solid var(--tr-accent); outline-offset: 3px; }

/* =========================================================== 2. ARTIKELN */

.artikel h1 { max-width: 20ch; margin-inline-start: 0 !important; }

.artikel h2 {
  margin-inline-start: 0 !important;
  margin-top: 2.6rem !important;
  max-width: 28ch;
}

.artikel h3 {
  margin-inline-start: 0 !important;
  margin-top: 2rem !important;
  max-width: 36ch;
  color: var(--tr-text);
}

.artikel p { margin-inline-start: 0 !important; }

/* Ingressen: något större, inte ett annat typsnitt. */
.artikel p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: #413C35;
  max-width: 48ch;
}

.artikel strong { font-weight: 600; }

/* Accent nr 4: ett tunt vänsterstreck vid ett avgörande råd.
   Högst ett per artikel, och aldrig med färgad bakgrund. */
.artikel .viktigt {
  border-left: 3px solid var(--tr-accent);
  padding-left: 1.15rem;
  margin: 2rem 0;
}
.artikel .viktigt p { margin: 0; }

/* =========================================================== 3. BILDER
   Bilden ligger i spalten. Bildtexten ligger under bilden, alltid.
   Den förra versionen la ut den i marginalen, och då hamnade den vid
   sidan av sidan på allt som inte var en bred skärm.                    */

.wp-block-image { margin-block: 2.2rem; }

.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.artikel .wp-block-image figcaption,
.forsta .wp-block-image figcaption {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tr-svag);
  margin-top: .7rem;
  padding-left: .8rem;
  border-left: 2px solid var(--tr-linje);
  max-width: 52ch;
  text-align: left;
}

/* Portrattet pa om-sidan. Litet och vanstrallt, inte en artikelbild. */
.artikel .portratt {
  width: 128px;
  margin: 0 0 2rem !important;
}
.artikel .portratt img { border-radius: 50%; }

@media (max-width: 800px) {
  .artikel .portratt { width: 104px; margin-bottom: 1.5rem !important; }
}

/* =========================================================== 4. STARTSIDAN */

.forsta .toppnummer { align-items: center; }

/* Accent nr 3: etiketter och nummer. Aldrig hela rubriker. */
.forsta .etikett {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tr-accent);
  margin: 0 0 .75rem;
}

.puff .amne {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tr-svag);
  margin: 0 0 .45rem;
}

.forsta .toppnummer h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 600;
  max-width: 18ch;
  margin: 0 0 .9rem !important;
}

.forsta .toppnummer p { max-width: 42ch; font-size: 1.0625rem; line-height: 1.6; }

.pufflista { display: grid; gap: 2.4rem 2rem; }
.pufflista.tva { grid-template-columns: repeat(2, 1fr); }
.pufflista.tre { grid-template-columns: repeat(3, 1fr); }

.puff { display: flex; flex-direction: column; min-width: 0; }
.puff img { width: 100%; height: auto; display: block; margin-bottom: .85rem; border-radius: 2px; }

.puff h3 {
  font-size: 1.1875rem;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 .4rem;
  max-width: 22ch;
}
.puff h3 a { text-decoration: none; color: var(--tr-text); }
.puff h3 a:hover { color: var(--tr-accent); }
.puff p { font-size: .9375rem; line-height: 1.55; color: var(--tr-svag); margin: 0; max-width: 36ch; }

.puff.text { border-top: 1px solid var(--tr-linje); padding-top: 1rem; }
.puff.text .nr {
  font-size: .6875rem; letter-spacing: .14em; font-weight: 600;
  color: var(--tr-accent); margin: 0 0 .5rem;
}
.puff.text h3 { font-size: 1.3125rem; max-width: 20ch; }

/* Avbrottet. Tidigare ett helt oxblodsrött fält, vilket blev tungt och
   såg ut som en varningsruta. Nu en dämpad ton med ett accentstreck. */
.avbrott {
  background: var(--tr-ton);
  color: var(--tr-text);
  border-left: 3px solid var(--tr-accent);
  padding: 2rem 1.9rem;
  border-radius: 2px;
}
.avbrott p { max-width: 52ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tr-svag); }
.avbrott .fraga {
  font-size: 1.3125rem; line-height: 1.3; font-weight: 600;
  letter-spacing: -.018em; margin: 0 0 .6rem; max-width: 26ch;
  color: var(--tr-text);
}
.avbrott a {
  color: var(--tr-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--tr-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =========================================================== 5. SLUTBLOCK */

.slutblock {
  border-top: 1px solid var(--tr-linje);
  padding-top: 1.4rem;
  margin-top: 3rem;
  max-width: 60ch;
}
.slutblock .rubrik {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--tr-accent); margin: 0 0 .5rem;
}
.slutblock p { font-size: 1.0625rem; line-height: 1.6; margin: 0; }

/* =========================================================== 6. SIDFOTEN */

.sidfot {
  border-top: 1px solid var(--tr-linje);
  font-size: .8125rem;
  color: var(--tr-svag);
}
.sidfot a { color: var(--tr-svag); }
.sidfot a:hover { color: var(--tr-accent); }

/* =========================================================== 7. SMALT
   En brytpunkt, inte fem. Allt ovanför är redan flytande.               */

@media (max-width: 800px) {
  .pufflista.tva, .pufflista.tre { grid-template-columns: 1fr; gap: 2.2rem; }
  .avbrott { padding: 1.5rem 1.3rem; }
  .artikel h2 { margin-top: 2.2rem !important; max-width: none; }
  .artikel h1, .artikel h3, .puff h3, .forsta .toppnummer h2 { max-width: none; }
  .artikel p:first-of-type { font-size: 1.0625rem; max-width: none; }
  .wp-block-image { margin-block: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}