/* enkelai.net - shared stylesheet */
/* Loaded after assets/stylesheets/main_free.css - only site chrome that
   the Clarity template does not provide (persistent nav) plus the
   plain-text wordmark and a fix for transparent figure backgrounds. */

/* ===================== Färgpalett ===================== */
/* --petrol-light används enbart till linjer, ramar och hover - aldrig
   som textfärg (3.08:1 mot vitt räcker inte för brödtext).
   --terracotta används enbart som bakgrund på call-to-action med vit
   text - aldrig som textfärg. */
:root {
  --petrol-deep: #024A61;
  --petrol: #037092;
  --petrol-light: #4A9DBA;
  --tint: #E4F0F5;
  --sand: #E8C9A8;
  --terracotta: #C0562A;
  --ink: #1A1A1A;
}

/* Brödtext */
body {
  color: var(--ink);
}

p, ol, ul, li, code, pre, h3, h4, h5, h6 {
  color: var(--ink);
}

/* Rubriker */
h1, h2 {
  color: var(--petrol-deep);
}

/* Länkar i brödtext. Nav och sidfot ärver --ink som tidigare. */
div.container.blog p a,
div.container.blog li a {
  color: var(--petrol);
}

/* Hover markeras med linjen, inte med textfärgen. */
div.container.blog p a:hover,
div.container.blog li a:hover {
  color: var(--petrol);
  text-decoration-color: var(--petrol-light);
  text-decoration-thickness: 2px;
}

::-moz-selection {
  color: var(--ink);
  background: var(--sand);
}

::selection {
  color: var(--ink);
  background: var(--sand);
}

/* ===================== Sidchrome ===================== */

.wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0;
}

figure img {
  background: #fff;
}

strong {
  font-weight: 600;
}

div.container.blog ul,
div.container.blog ol {
  padding-left: 1.2em;
}

/* Figurpanelerna: mallens grå ersatt med paletten. */
div.container.blog.gray {
  background-color: var(--tint);
}

div.container.blog#first-content {
  background: linear-gradient(90deg, hsla(198, 46%, 93%, 1) 0%, hsla(31, 58%, 78%, 1) 100%);
  flex: none;
}

/* ===================== Nyhetsbrevsformulär ===================== */

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
  margin-top: 1rem;
}

.newsletter-form label {
  font-family: "Poppins", sans-serif;
  font-size: 0.8em;
  font-weight: 500;
}

.newsletter-form input[type="email"] {
  font-family: "Charter", sans-serif;
  font-size: 1em;
  padding: 0.6em 0.8em;
  margin-top: 0.4em;
  border: 1px solid var(--petrol-light);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
}

.newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--petrol-light);
  outline-offset: 1px;
}

.newsletter-form .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-family: "Charter", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
}

.newsletter-form .checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
}

/* Call-to-action: terracotta som bakgrund, vit text. */
.newsletter-form button {
  align-self: flex-start;
  background-color: var(--terracotta);
  color: #FFFFFF;
}

.newsletter-form button:hover {
  background-color: var(--terracotta);
  color: #FFFFFF;
  opacity: 0.85;
}

.newsletter-form button:active {
  background-color: var(--terracotta);
  color: #FFFFFF;
  opacity: 0.7;
}

/* ===================== Byline ===================== */
/* Raden under heron på / och /for-organisationer/. Selektorerna är
   scopade under div.container.blog för att gå före mallens
   div.container.blog img respektive div.container.blog p.text. */

.byline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

div.container.blog .byline img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
  object-fit: cover;
}

.byline > div {
  min-width: 0;
}

div.container.blog .byline p.text {
  padding: 0;
}

/* Mindre bild på smala skärmar - men kvar bredvid texten, ingen radbrytning. */
@media screen and (max-width: 600px) {
  .byline {
    gap: 1rem;
  }

  div.container.blog .byline img {
    width: 80px;
    height: 80px;
  }
}

/* ===================== Active-state i toppmenyn ===================== */
/* Markeringen hängs på <body>, inte på menyvalet, så att <header>-blocket
   förblir byte-identiskt på samtliga sidor. Bara understrykningen och
   textfärgen ändras - inga mått - så mobillayouten är oförändrad.
   404 och /integritet/ saknar klass: inget menyval motsvarar dem. */

body.nav-hem nav ul a[href="/"],
body.nav-artiklar nav ul a[href="/artiklar/"],
body.nav-organisationer nav ul a[href="/for-organisationer/"],
body.nav-nyhetsbrev nav ul a[href="/nyhetsbrev/"] {
  color: var(--petrol-deep);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--petrol-light);
}