/**
 * Teuton — reading typography for post/page article content (Etapp 6).
 *
 * Scope: `.nv-content-wrap.entry-content` — the prose area used by both single
 * posts (article.nv-single-post-wrap) and all page templates (.nv-single-page-wrap /
 * .teuton-page-main). NOT used by .ts-page rebuilt sections, the shop, or widgets,
 * so nothing leaks. Loaded only on singular non-rebuilt pages (see functions.php).
 *
 * Goals (user feedback): Roboto body for readability (matches the rebuilt pages),
 * smaller subheadings with less contrast, and natural heading rhythm — more space
 * ABOVE a heading than below, so each heading attaches to the text it introduces.
 * Plus a "you are here" active state for the table-of-contents sidebar.
 */

/* ------------------------------------------------------------------ *
 *  Body prose
 * ------------------------------------------------------------------ */
.nv-content-wrap.entry-content {
  font-family: var(--ts-font-roboto) !important;
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
  color: var(--ts-text);
}

/* Comfortable reading measure on text blocks (tables/figures stay wider). */
.nv-content-wrap.entry-content p,
.nv-content-wrap.entry-content ul,
.nv-content-wrap.entry-content ol,
.nv-content-wrap.entry-content blockquote,
.nv-content-wrap.entry-content h2,
.nv-content-wrap.entry-content h3,
.nv-content-wrap.entry-content h4,
.nv-content-wrap.entry-content h5,
.nv-content-wrap.entry-content h6 {
  max-width: 44rem;
}

.nv-content-wrap.entry-content p {
  margin: 0 0 1.15rem;
}

/* ------------------------------------------------------------------ *
 *  Headings — Khand, smaller, with more space above than below
 * ------------------------------------------------------------------ */
.nv-content-wrap.entry-content h2,
.nv-content-wrap.entry-content h3,
.nv-content-wrap.entry-content h4,
.nv-content-wrap.entry-content h5,
.nv-content-wrap.entry-content h6 {
  font-family: var(--ts-font) !important; /* Khand */
  color: #1f2026;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: none;
}

/* Pages author section headings at varied levels (terms uses h5, blog h2,
   others h3), so every level stays clearly heading-like — never below body —
   while still descending. */
.nv-content-wrap.entry-content h2 {
  font-size: 1.75rem !important;
  margin: 2.4rem 0 0.6rem !important;
}
.nv-content-wrap.entry-content h3 {
  font-size: 1.5rem !important;
  margin: 2.2rem 0 0.55rem !important;
}
.nv-content-wrap.entry-content h4 {
  font-size: 1.3rem !important;
  margin: 2rem 0 0.5rem !important;
}
.nv-content-wrap.entry-content h5 {
  font-size: 1.35rem !important; /* clearly above 18px body (terms page uses h5 for sections) */
  margin: 1.9rem 0 0.45rem !important;
}
.nv-content-wrap.entry-content h6 {
  font-size: 1.2rem !important;
  margin: 1.7rem 0 0.4rem !important;
}

/* First block shouldn't push down from the title. */
.nv-content-wrap.entry-content > :first-child,
.nv-content-wrap.entry-content > h2:first-child,
.nv-content-wrap.entry-content > h3:first-child {
  margin-top: 0 !important;
}

/* Anchor jumps clear the sticky header (was only set on the TOC page). */
.nv-content-wrap.entry-content :is(h2, h3, h4, h5, h6) {
  scroll-margin-top: 5.5rem;
}

/* ------------------------------------------------------------------ *
 *  Links, lists, quotes, tables, media, rules
 * ------------------------------------------------------------------ */
.nv-content-wrap.entry-content a {
  color: var(--ts-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(3, 102, 214, 0.3);
  transition: border-color 0.15s, color 0.15s;
}
.nv-content-wrap.entry-content a:hover,
.nv-content-wrap.entry-content a:focus-visible {
  border-bottom-color: var(--ts-primary);
}

.nv-content-wrap.entry-content ul,
.nv-content-wrap.entry-content ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}
.nv-content-wrap.entry-content ul {
  list-style: disc;
}
.nv-content-wrap.entry-content ol {
  list-style: decimal;
}
.nv-content-wrap.entry-content li {
  margin: 0 0 0.4rem;
}
.nv-content-wrap.entry-content li > ul,
.nv-content-wrap.entry-content li > ol {
  margin-top: 0.4rem;
}

.nv-content-wrap.entry-content blockquote {
  margin: 1.6rem 0;
  padding: 0.3rem 0 0.3rem 1.2rem;
  border-left: 3px solid var(--ts-primary);
  color: #555;
  font-style: italic;
}
.nv-content-wrap.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.nv-content-wrap.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.6rem 0;
  font-size: 1rem;
}
.nv-content-wrap.entry-content th,
.nv-content-wrap.entry-content td {
  border: 1px solid #e3e5e9;
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.nv-content-wrap.entry-content thead th,
.nv-content-wrap.entry-content tr:first-child th {
  background: #f4f5f7;
  font-family: var(--ts-font);
  font-weight: 600;
}

.nv-content-wrap.entry-content img {
  height: auto;
  border-radius: 8px;
}
.nv-content-wrap.entry-content figure {
  margin: 1.6rem 0;
}
.nv-content-wrap.entry-content figcaption,
.nv-content-wrap.entry-content .wp-caption-text {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: #6b6e76;
  text-align: left;
}

.nv-content-wrap.entry-content hr {
  border: 0;
  border-top: 1px solid #e3e5e9;
  margin: 2rem 0;
}

/* ------------------------------------------------------------------ *
 *  Table-of-contents sidebar: "you are here" active state (scroll-spy).
 *  Redefines the base link (block + reserved left accent) so the active
 *  marker never shifts the text. Loads here because the TOC page is singular.
 * ------------------------------------------------------------------ */
body.teuton-page-layout--toc-sidebar .ts-toc__list a {
  display: block;
  padding: 0.2rem 0.5rem 0.2rem 0.85rem;
  border-left: 3px solid transparent;
  border-bottom: 0;
  border-radius: 0 6px 6px 0;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
body.teuton-page-layout--toc-sidebar .ts-toc__list a:hover,
body.teuton-page-layout--toc-sidebar .ts-toc__list a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 0;
}
body.teuton-page-layout--toc-sidebar .ts-toc__list a.is-active {
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--ts-header-accent);
}

@media (prefers-reduced-motion: reduce) {
  body.teuton-page-layout--toc-sidebar .ts-toc__list a {
    transition: none;
  }
}

/* TOC sidebar: drop the dated grey wrapper — let the burgundy card float on its shadow. */
body.teuton-page-layout--toc-sidebar .teuton-page-sidebar {
  background: transparent;
  padding: 0;
}
body.teuton-page-layout--toc-sidebar .ts-toc--auto {
  box-shadow: 0 18px 40px rgba(44, 0, 30, 0.22);
}

/* ------------------------------------------------------------------ *
 *  Single-post share buttons (.ts-share) — own branded set.
 *  Scoped under entry-content so it overrides the prose link styling.
 * ------------------------------------------------------------------ */
.nv-content-wrap.entry-content .ts-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 2.6rem 0 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e3e5e9;
}
.nv-content-wrap.entry-content .ts-share__label {
  font-family: var(--ts-font);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ts-text);
}
.nv-content-wrap.entry-content .ts-share__list {
  display: flex;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: none;
}
.nv-content-wrap.entry-content .ts-share__list li {
  margin: 0 !important;
  padding: 0 !important;
}
.nv-content-wrap.entry-content .ts-share__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  border-radius: 50%;
  border: 1px solid #e3e5e9;
  background: #fff;
  color: var(--ts-header-bg);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.nv-content-wrap.entry-content .ts-share__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}
.nv-content-wrap.entry-content .ts-share__btn:hover,
.nv-content-wrap.entry-content .ts-share__btn:focus-visible {
  background: var(--ts-header-bg);
  color: #fff;
  border-color: var(--ts-header-bg);
  transform: translateY(-2px);
}
.nv-content-wrap.entry-content .ts-share__copied {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ts-header-bg);
  color: #fff;
  font-family: var(--ts-font-roboto);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.nv-content-wrap.entry-content .ts-share__btn.is-copied .ts-share__copied {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .nv-content-wrap.entry-content .ts-share__btn {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 *  Single-post sidebar — "Nyheter från Teuton Systems": sticky + card UI.
 * ------------------------------------------------------------------ */
/* Sticky for both the single-post sidebar and the right-sidebar page layout. */
@media (min-width: 992px) {
  body.single-post .nv-sidebar-wrap.nv-right,
  body.teuton-page-layout--right-sidebar .teuton-page-sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
  }
}

/* Right-sidebar pages (Så blir du övervakad, m.fl.): drop the dated grey wrapper
   like the TOC sidebar — the news card below provides its own container. */
body.teuton-page-layout--right-sidebar .teuton-page-sidebar {
  background: transparent;
  padding: 0;
}

/* "Nyheter från Teuton Systems" recent-posts widget → clean card (posts + pages). */
.widget_recent_entries {
  background: #fff;
  border: 1px solid #e3e5e9;
  border-radius: 14px;
  padding: 1.3rem 1.45rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.widget_recent_entries .widget-title {
  font-family: var(--ts-font);
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2026;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ts-header-accent);
}
.widget_recent_entries ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.widget_recent_entries li {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eef0f3;
}
.widget_recent_entries li:first-child {
  padding-top: 0;
}
.widget_recent_entries li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget_recent_entries a {
  font-family: var(--ts-font-roboto) !important;
  color: var(--ts-text) !important;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s;
}
.widget_recent_entries a:hover {
  color: var(--ts-primary) !important;
}
.widget_recent_entries .post-date {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #6b6e76;
}

/* ------------------------------------------------------------------ *
 *  Contact form (.ts-cform) — EmailJS form on support + contact pages.
 * ------------------------------------------------------------------ */
.ts-cform {
  max-width: 640px;
  margin: 1.5rem 0 0;
}
.ts-cform__row {
  display: grid;
  gap: 1.1rem;
  margin: 0 0 1.1rem;
}
@media (min-width: 560px) {
  .ts-cform__row {
    grid-template-columns: 1fr 1fr;
  }
}
.ts-cform__field {
  display: block;
  margin: 0 0 1rem;
}
.ts-cform__row .ts-cform__field {
  margin: 0;
}
.ts-cform__label {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--ts-font);
  font-weight: 600;
  font-size: 1.05rem;
  color: #1f2026;
}
.ts-cform__req {
  color: var(--ts-header-accent);
}
.ts-cform input[type="text"],
.ts-cform input[type="email"],
.ts-cform select,
.ts-cform textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ts-font-roboto);
  font-size: 1.0625rem;
  color: var(--ts-text);
  background: #fff;
  border: 1px solid #d9dce1;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ts-cform select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404248' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
.ts-cform textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.55;
}
.ts-cform input:focus,
.ts-cform select:focus,
.ts-cform textarea:focus {
  outline: none;
  border-color: var(--ts-primary);
  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.15);
}
.ts-cform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ts-cform__captcha {
  margin: 0 0 1rem;
}
.ts-cform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ts-cform__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ts-primary);
  color: #fff;
  font-family: var(--ts-font);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.ts-cform__submit:hover:not(:disabled) {
  background: #0a5bc0;
}
.ts-cform__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ts-cform__spinner {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ts-cform-spin 0.7s linear infinite;
}
.ts-cform.is-sending .ts-cform__spinner {
  display: inline-block;
}
@keyframes ts-cform-spin {
  to {
    transform: rotate(360deg);
  }
}
.ts-cform__status {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 500;
}
.ts-cform__status.is-ok {
  color: #1a7f37;
}
.ts-cform__status.is-err {
  color: #c0392b;
}
.ts-cform__notice--setup {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  background: #fff7e6;
  border: 1px solid #ffe1a6;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #8a6d00;
}
@media (prefers-reduced-motion: reduce) {
  .ts-cform__spinner {
    animation-duration: 2s;
  }
}