/*
Theme Name:   MONC
Theme URI:    https://monc.se/
Description:  Barntema för MONC byggt på GeneratePress. Lugn, tydlig läsyta för förklarande artiklar och verktyg.
Author:       MONC
Template:     generatepress
Version:      1.0.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  monc
License:      GNU General Public License v2 or later
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --ink: #13233a;        /* rubriker */
  --text: #2a3442;       /* brödtext */
  --muted: #5b6b7e;      /* metadata */
  --paper: #ffffff;
  --mist: #eef3f7;       /* tonade ytor */
  --brand: #1e3a5f;      /* logotypens blå */
  --signal: #0b6e8a;     /* länkar och handlingar, 5.8:1 mot vitt */
  --rule: #d5dee7;

  --ok-bg: #ecfdf5;   --ok-line: #0d9488;   --ok-text: #064e3b;
  --warn-bg: #fffbeb; --warn-line: #d97706; --warn-text: #78350f;
  --info-bg: #eef6fa; --info-line: #0b6e8a; --info-text: #0f3a4a;

  --font-body: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Plex Condensed", "Plex", system-ui, sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 44rem;      /* cirka 70 tecken per rad */
  --radius: 6px;
}

/* ==========================================================================
   Grund
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .widget-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Färg bara på temats egna rubriker och artikelns vanliga rubriker, så att
   egendesignade sektioner (startsidan, verktygen) behåller sina färger. */
.entry-title, .page-title, .widget-title,
.entry-content > :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); }
h1, .entry-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem); line-height: 1.08; font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.15; }
h3 { font-size: 1.3125rem; line-height: 1.25; }
h4 { font-size: 1.125rem; line-height: 1.3; }

a { color: var(--signal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

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

/* ==========================================================================
   Sidhuvud med linjal
   ========================================================================== */
.site-header { background: var(--paper); }
/* Linjalen: en tunn skala under menyn, MONC:s igenkänningstecken. */
.main-navigation {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, var(--brand) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--brand) 0 1px, transparent 1px 40px),
    linear-gradient(var(--brand), var(--brand));
  background-size: 100% 5px, 100% 10px, 100% 1px;
  background-position: left bottom 1px, left bottom 1px, left bottom;
  background-repeat: repeat-x;
}
.inside-header { padding-top: 20px; padding-bottom: 6px; }
.main-navigation .inside-navigation { padding-bottom: 8px; }
body { overflow-x: clip; } /* fullbreddssektioner med 100vw ger annars en sidledsrullning */
.home .site-content { padding-top: 0; }
.site-logo img, .custom-logo { max-height: 40px; width: auto; }
.main-title a { font-family: var(--font-head); color: var(--brand); font-weight: 600; }
.site-logo + .site-branding { display: none; } /* logotypen innehåller redan namnet */
.site-description { display: none; }

.main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  padding-left: 12px;
  padding-right: 12px;
  line-height: 48px;
}
.inside-navigation { padding-left: 0; }
.main-navigation .main-nav > ul { margin-left: -12px; }
/* Mellanbredd: tätare meny så att den ryms på en rad så länge det går. */
@media (min-width: 769px) and (max-width: 1100px) {
  .main-navigation .main-nav ul li a { font-size: 0.875rem; padding-left: 8px; padding-right: 8px; }
  .main-navigation .main-nav > ul { margin-left: -8px; }
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--signal); background: transparent; }
.main-navigation ul ul { background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(19, 35, 58, 0.08); }
.main-navigation .main-nav ul ul li a { line-height: 1.4; padding-top: 10px; padding-bottom: 10px; font-weight: 400; }
.menu-toggle, .main-navigation .menu-toggle { color: var(--ink); font-family: var(--font-body); font-weight: 600; background: transparent; }

/* ==========================================================================
   Layout: en lugn läskolumn
   ========================================================================== */
.site-content { padding-top: 40px; }
.separate-containers .inside-article,
.one-container .site-content { background: transparent; padding-left: 24px; padding-right: 24px; }
.single .site-main .inside-article,
.page .site-main .inside-article {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.home.page .site-main .inside-article { max-width: none; }
@media (max-width: 768px) {
  .site-content { padding-top: 24px; }
  .separate-containers .inside-article,
  .one-container .site-content { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   Artikelhuvud
   ========================================================================== */
.entry-header { margin-bottom: 28px; }
.entry-header .cat-links, .entry-header .cat-links a {
  font-size: 0.9375rem; font-weight: 600; color: var(--signal); text-decoration: none;
}
.entry-meta, .entry-meta a { font-size: 0.9375rem; color: var(--muted); }
.entry-meta a:hover { color: var(--signal); }
.entry-header .entry-meta { margin-top: 12px; }
.featured-image img, .post-image img { border-radius: var(--radius); }

/* Yoast-brödsmulor */
.monc-breadcrumbs { font-size: 0.875rem; color: var(--muted); margin: 0 0 14px; }
.monc-breadcrumbs a { color: var(--muted); text-decoration: none; }
.monc-breadcrumbs a:hover { color: var(--signal); text-decoration: underline; }

/* ==========================================================================
   Brödtext
   ========================================================================== */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content > p, .entry-content > :is(ul, ol) > li { color: var(--text); }
.entry-content > p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
.entry-content h2 { margin-top: 2.2em; margin-bottom: 0.5em; }
.entry-content h3 { margin-top: 1.8em; margin-bottom: 0.4em; }
.entry-content > :is(p, ul, ol) strong { color: var(--ink); font-weight: 600; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin-left: 0; }
.entry-content li { margin-bottom: 0.45em; }
.entry-content li::marker { color: var(--muted); }
.entry-content ol > li::marker { font-family: var(--font-head); font-weight: 600; color: var(--brand); }

.entry-content blockquote {
  margin: 1.6em 0; padding: 0 0 0 1.25em;
  border-left: 3px solid var(--brand);
  font-style: normal; color: var(--ink); font-size: 1.1875rem;
}
.entry-content blockquote cite { display: block; margin-top: 0.5em; font-size: 0.9375rem; color: var(--muted); font-style: normal; }

.entry-content code {
  font-family: var(--font-code); font-size: 0.875em;
  background: var(--mist); color: var(--ink);
  padding: 0.1em 0.35em; border-radius: 4px;
}
.entry-content pre {
  font-family: var(--font-code); font-size: 0.9375rem; line-height: 1.55;
  background: var(--ink); color: #e6edf3;
  padding: 18px 20px; border-radius: var(--radius); overflow-x: auto;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

.entry-content img { border-radius: var(--radius); height: auto; max-width: 100%; }
.entry-content figure figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 8px; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

/* ==========================================================================
   Tabeller som mätprotokoll
   ========================================================================== */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 1.6em 0;
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
  border-radius: 0;
}
.entry-content table thead tr,
.entry-content table thead tr[style] { background: transparent !important; color: var(--ink) !important; }
.entry-content table th {
  font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem;
  text-align: left; color: var(--ink);
  padding: 10px 12px; border-bottom: 1px solid var(--brand);
}
.entry-content table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.entry-content table tbody tr,
.entry-content table tbody tr[style] { background: transparent !important; }
.entry-content table tbody tr:nth-child(even) { background: #f7f9fb !important; }
.entry-content table td[align], .entry-content table td[style*="text-align"] { text-align: left !important; }
.entry-content table td p { margin: 0; }

@media (max-width: 640px) {
  .entry-content table, .entry-content table tbody, .entry-content table tr, .entry-content table td { display: block; width: 100%; }
  .entry-content table { border-bottom: 0; }
  .entry-content table thead { display: none; }
  .entry-content table tr { padding: 10px 0; border-bottom: 1px solid var(--rule); background: transparent !important; }
  .entry-content table td { border: 0; padding: 3px 0; }
  .entry-content table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  }
}

/* ==========================================================================
   Faktarutor (används i befintliga artiklar)
   ========================================================================== */
.monc-info, .monc-tip, .monc-warning {
  margin: 1.6em 0; padding: 14px 18px;
  border-left: 3px solid; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem; line-height: 1.6;
}
.monc-info    { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
.monc-tip     { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok-text); }
.monc-warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.monc-info strong, .monc-tip strong, .monc-warning strong { display: block; margin-bottom: 4px; color: inherit; }
.monc-info ul { margin: 0.4em 0 0; }

/* ==========================================================================
   Verktygslist efter artiklar
   ========================================================================== */
.monc-tools {
  max-width: var(--measure);
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 2px solid var(--brand);
}
.monc-tools h2 { font-size: 1.375rem; margin: 0 0 4px; }
.monc-tools p { color: var(--muted); font-size: 0.9375rem; margin: 0 0 16px; }
.monc-tools ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  border-top: 1px solid var(--rule);
}
.monc-tools li { margin: 0; border-bottom: 1px solid var(--rule); }
.monc-tools li a {
  display: block; padding: 11px 2px;
  font-weight: 600; font-size: 0.9375rem; color: var(--ink); text-decoration: none;
}
.monc-tools li a:hover { color: var(--signal); text-decoration: underline; }

/* ==========================================================================
   Arkiv och bloggflöde: lista, inte kort
   ========================================================================== */
.blog .site-main, .archive .site-main, .search .site-main { max-width: var(--measure); margin: 0 auto; }
.blog .inside-article, .archive .inside-article, .search .inside-article {
  padding: 26px 0 !important; border-bottom: 1px solid var(--rule); background: transparent;
}
.blog .entry-title, .archive .entry-title, .search .entry-title { font-size: 1.5rem; line-height: 1.2; }
.blog .entry-title a, .archive .entry-title a, .search .entry-title a { color: var(--ink); text-decoration: none; }
.blog .entry-title a:hover, .archive .entry-title a:hover, .search .entry-title a:hover { color: var(--signal); }
.blog .post-image, .archive .post-image { display: none; }
.entry-summary p { color: var(--text); }
.read-more, .more-link { font-weight: 600; color: var(--signal); }
.page-header { max-width: var(--measure); margin: 0 auto 8px; padding: 0 0 18px; border-bottom: 2px solid var(--brand); background: transparent; }
.page-header .page-title { font-size: 2.25rem; }
.taxonomy-description { color: var(--muted); }

.paging-navigation, .nav-links { font-weight: 600; }
.page-numbers { padding: 6px 10px; color: var(--ink); text-decoration: none; }
.page-numbers.current { color: var(--paper); background: var(--brand); border-radius: 4px; }

/* ==========================================================================
   Formulär och kommentarer
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  border: 1px solid #b9c6d3; border-radius: 4px; background: var(--paper); padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { border-color: var(--signal); outline: 2px solid var(--signal); outline-offset: 0; }
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, .wp-block-button__link {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  background: var(--brand); color: var(--paper); border: 0; border-radius: 4px; padding: 11px 20px;
}
button:hover, input[type="submit"]:hover, a.button:hover, .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.comments-area { max-width: var(--measure); margin: 48px auto 0; }

/* ==========================================================================
   Sidfot
   ========================================================================== */
.monc-footer {
  background-color: var(--ink);
  color: #b9c6d3;
  /* samma linjal som under menyn, här i ljus ton mot den mörka botten */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 40px);
  background-size: 100% 5px, 100% 10px;
  background-position: left top, left top;
  background-repeat: repeat-x;
  margin-top: 72px;
}
.monc-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; gap: 40px 56px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr);
}
.monc-footer .monc-footer__mark {
  font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1;
  letter-spacing: 0.04em; color: #fff; margin: 0 0 14px;
}
.monc-footer p { font-size: 0.9375rem; line-height: 1.55; margin: 0; max-width: 30ch; }
.monc-footer h2 {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  color: #8fa3b8; margin: 4px 0 14px; letter-spacing: 0;
}
.monc-footer ul { list-style: none; margin: 0; padding: 0; }
.monc-footer li { margin: 0 0 9px; font-size: 0.9375rem; line-height: 1.4; break-inside: avoid; }
.monc-footer .monc-footer__tools { columns: 2; column-gap: 32px; }
.monc-footer a { color: #e6edf3; text-decoration: none; }
.monc-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.monc-footer a:focus-visible { outline-color: #9fd6e6; }

/* Copyrightraden: samma mörka yta, vänsterställd i samma kolumn som innehållet ovanför. */
.site-info { background: var(--ink); color: #8fa3b8; font-size: 0.875rem; }
.site-info .inside-site-info {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  justify-content: flex-start;
}
.site-info .copyright-bar {
  width: 100%; text-align: left; padding: 18px 0 22px;
  border-top: 1px solid #2b3d55;
}
.site-info a { color: #c9d4df; }

@media (max-width: 900px) {
  .monc-footer__inner { grid-template-columns: 1fr 1fr; }
  .monc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .monc-footer__inner { grid-template-columns: 1fr; padding-top: 44px; }
}

/* ==========================================================================
   Tillgänglighet
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}