@charset "utf-8";
/* ==========================================================================
   ARTIKLAR

   Läsbarhet först. En person som söker "hur bevisar man umgängessabotage"
   klockan elva på kvällen ska kunna läsa utan ansträngning.
   ========================================================================== */

.article__inner {
  max-width: 42rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- Sidhuvud ------------------------------------------------------------ */
.article-header {
  border-bottom: 1px solid var(--ivory-edge);
  background: var(--ivory-warm);
}
.article-header .article__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}
.article-header__logo {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  letter-spacing: -0.01em;
  /* Guldlinjen ur loggan. Se public/media/famora-ordmarke.svg. */
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.12em;
}
.crumbs {
  display: flex;
  gap: 0.45rem;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
}
.crumbs a { color: var(--text-on-light-mute); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--navy-800); }

/* --- Brödtext ------------------------------------------------------------ */
.article {
  background: var(--ivory-warm);
  padding-block: 3rem 5rem;
}

.article__h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  margin: 0 0 1.1rem;
}

.article__lead {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-on-light-soft);
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ivory-edge);
}

.article__h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy-800);
  margin: 2.75rem 0 0.9rem;
}

.article__p {
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--text-on-light-soft);
  margin: 0 0 1.15rem;
}
.article__p strong { color: var(--navy-800); font-weight: 600; }

.article__list {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
}
.article__list li {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-on-light-soft);
  margin-bottom: 0.7rem;
}
.article__list li strong { color: var(--navy-800); font-weight: 600; }
.article__list--num { counter-reset: item; }

/* Sidoruta för det som är lätt att missförstå */
.article__note {
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.article__note p {
  margin: 0;
  font-size: var(--step--2);
  line-height: 1.65;
  color: #6B5426;
}

/* Avgränsning — allmän information, inte rådgivning */
.article__disclaimer {
  margin: 3rem 0 0;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
}
.article__disclaimer p {
  margin: 0;
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--text-on-light-mute);
}

.article__related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ivory-edge);
}
.article__related ul { margin: 0; padding-left: 1.35rem; }
.article__related li {
  margin-bottom: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.6;
}
.article__related a { color: var(--navy-600); text-underline-offset: 3px; }

/* ==========================================================================
   ÖVERSIKTSSIDAN
   ========================================================================== */
.kb-list { display: grid; gap: 1.1rem; }

.kb-card {
  display: block;
  padding: 1.6rem 1.75rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.kb-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.kb-card__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--navy-800);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.kb-card__body {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-on-light-soft);
}

/* ==========================================================================
   FAST KNAPP I BOTTEN

   Endast på mobil. På större skärmar finns knappen i artikelns slut och
   en fast rad skulle bara ta plats.

   Visas först när läsaren scrollat en bit — annars täcker den innehållet
   innan hen ens börjat läsa.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--navy-900);
  border-top: 1px solid rgba(247, 244, 239, 0.12);
  padding: 0.85rem var(--gutter);
  transform: translateY(110%);
  transition: transform 260ms ease;
}
.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__inner {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sticky-cta__text {
  flex: 1;
  margin: 0;
  font-size: var(--step--2);
  line-height: 1.4;
  color: rgba(247, 244, 239, 0.82);
}
.sticky-cta .btn { flex: none; white-space: nowrap; }

@media (min-width: 720px) {
  .sticky-cta { display: none; }
}

@media (max-width: 480px) {
  .sticky-cta__inner { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .sticky-cta__text { text-align: center; }
  .sticky-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
  .kb-card { transition: none; }
  .kb-card:hover { transform: none; }
}

/* ==========================================================================
   METARAD — uppdaterad och lästid

   Google visar ofta datumet i sökresultatet. Lästiden hjälper läsaren
   avgöra om hen orkar just nu.
   ========================================================================== */
.article__meta {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
}

/* ==========================================================================
   INNEHÅLLSFÖRTECKNING

   Ankarlänkar. Läsaren hittar till sin fråga, och Google kan visa dem
   som hopplänkar under sökresultatet.
   ========================================================================== */
.article__toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
}
.article__toc-label {
  margin: 0 0 0.7rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
}
.article__toc ul {
  margin: 0;
  padding-left: 1.1rem;
}
.article__toc li {
  margin-bottom: 0.4rem;
  font-size: var(--step--1);
  line-height: 1.5;
}
.article__toc a {
  color: var(--navy-600);
  text-underline-offset: 3px;
}
.article__toc a:hover { color: var(--navy-800); }

/* Rubriker får luft ovanför när man hoppar dit via ankarlänk */
.article__h2 { scroll-margin-top: 1.5rem; }

/* ==========================================================================
   VANLIGA FRÅGOR

   Måste synas på sidan. Strukturerad data utan synligt innehåll är
   precis vad Google slår ner på.
   ========================================================================== */
.article__faq { margin-top: 3rem; }

.faq-item {
  border-bottom: 1px solid var(--ivory-edge);
}
.faq-item:first-of-type { border-top: 1px solid var(--ivory-edge); }

.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.05rem 0;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::before {
  content: '+';
  flex: none;
  width: 1.1rem;
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.3;
  /* 🛑 Var --gold, 2,04:1 mot ivory. Tecknet är dekorativt — rubriken
     bär informationen — men vid den kontrasten är det nästan osynligt
     även för den som ser bra, och plus/minus är det enda som visar om
     frågan är öppen eller stängd. */
  color: var(--gold-deep);
}
.faq-item[open] .faq-item__q::before { content: '−'; }

.faq-item__q:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 2px;
  border-radius: 3px;
}

.faq-item__a {
  padding: 0 0 1.05rem 1.85rem;
}
.faq-item__a p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-on-light-soft);
}

/* --------------------------------------------------------------------------
   NÖDINFORMATION I ARTIKLAR

   🛑 Artiklarna behandlade våld och hot men innehöll ingen väg vidare.
   Enda hjälpen var en länk längst ned bland lästips.

   Blocket är lugnt, inte alarmerande. Den som läser om våld i sin egen
   situation behöver inte skrämmas — hen behöver ett telefonnummer.
   Därför navy och inte rött: rött läser som varning, det här är hjälp.
   -------------------------------------------------------------------------- */
.urgent {
  margin: 2.5rem 0 0;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--radius-sm);
}

.urgent__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--navy-800);
}

.urgent__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-on-light-soft);
}

.urgent__list li { margin: 0.35rem 0; }
.urgent__list strong { color: var(--navy-800); }

/* ==========================================================================
   KÄLLOR
   ==========================================================================

   ⚠️ Kallorna star FORE ansvarsfriskrivningen, inte efter.

   Skalet ar att de sager olika saker. Kallistan sager "det har gar att
   kontrollera". Friskrivningen sager "det har ar inte rad till dig".
   Laggs friskrivningen forst last kallorna som en efterhandsursakt; laggs
   den sist last den som en avgransning av nagot lasaren just sett belagg
   for.

   Lankarna oppnas i samma flik. En lasare mitt i en vardnadstvist ska
   inte forlora sidan hen last for att hen kollade ett lagrum. */
.article__sources {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ivory-edge);
}
.article__sources ul {
  margin: 0;
  padding-left: 1.35rem;
}
.article__sources li {
  margin-bottom: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-on-light-mute);
}
.article__sources a { color: var(--navy-600); text-underline-offset: 3px; }
.article__sources-note {
  margin: 1.1rem 0 0;
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--text-on-light-mute);
}

/* Granskningsraden i metadata. Sitter pa samma rad som datumet. */
.article__meta .article__reviewed { color: var(--text-on-light-mute); }