/* ==========================================================================
   EuroEyes DK — the blog post body (blog.css)
   --------------------------------------------------------------------------
   A post's body is its `post_content` (the operator's ruling of 2026-09-21,
   ADR-0013 decision 2), printed by Elementor Pro's Post Content widget inside
   Theme Builder document 15, `Enkelt indlaeg (DA)` (single post). Nothing
   else in this repository styles that body: style.css is scoped to `.kfe-*`
   and the hand-built `.ee-*` components, so without this file a post renders
   the kit's global typography plus browser defaults for tables, quotes,
   figures and lists.

   THE SCOPE IS THE POST-CONTENT WRAPPER AND NOTHING ELSE. Every selector
   starts `body .elementor-widget-theme-post-content`, (0,1,1) before its own
   element, which beats the kit's `.elementor-kit-5 <el>` rules (0,1,1) by
   the `body` type selector rather than by load order. Page chrome and the
   `.ee-*` components stay style.css's and the chrome and theme-qa lanes';
   the kf-elements widgets above and below the body (the header, the call to
   action, the latest-posts row) carry their own sheets.

   NO COLOUR AND NO FACE IS INVENTED HERE. Colours are style.css's `--ee-*`
   palette (declared on :root, so they resolve outside a `.kfe` wrapper — the
   `--kfe-*` map is declared on `body .kfe` and does not reach this widget);
   the two faces are the kit's own global typography, the same two custom
   properties kf-elements' `--kfe-font-heading` and `--kfe-font-body` chain
   to. The heading colour `--ee-ink` is the kit's Secondary (#102E4A) that
   `--kfe-heading` reads; the body colour `--ee-text` is EE Muted (#4A5763)
   that `--kfe-body` reads.

   WHAT IS THIN, said here because it is true: two posts in the whole corpus
   carry a <blockquote> and three a <table>, so those two rules have two and
   three real posts behind them. The bodies are the old site's rendered
   output and 88 posts carry inline `style` attributes kept as scraped
   (ADR-0013); an inline style beats every rule below, by design.

   Versioned by this file's own content hash in functions.php, never by the
   theme header (style.css's `Version:` is not this lane's). Pushed to
   ee-build by docs/runbooks/the-child-theme-and-kf-elements-on-ee-build.md,
   the dated entry of 2026-09-24.
   ========================================================================== */

body .elementor-widget-theme-post-content {
  color: var(--ee-text);
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* --- headings: h2 to h4 (every body <h1> was demoted to <h2> by the extractor) --- */
body .elementor-widget-theme-post-content h2,
body .elementor-widget-theme-post-content h3,
body .elementor-widget-theme-post-content h4 {
  color: var(--ee-ink);
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 1.6em 0 0.55em;
}
body .elementor-widget-theme-post-content h2 { font-size: 28px; }
body .elementor-widget-theme-post-content h3 { font-size: 22px; }
body .elementor-widget-theme-post-content h4 { font-size: 18px; color: var(--ee-ink-soft); }
body .elementor-widget-theme-post-content > :first-child,
body .elementor-widget-theme-post-content .elementor-widget-container > :first-child { margin-top: 0; }

/* --- paragraphs and lists --- */
body .elementor-widget-theme-post-content p { margin: 0 0 1.1em; }
body .elementor-widget-theme-post-content ul,
body .elementor-widget-theme-post-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
body .elementor-widget-theme-post-content li { margin: 0 0 0.4em; }
body .elementor-widget-theme-post-content li > ul,
body .elementor-widget-theme-post-content li > ol { margin: 0.4em 0 0; }
body .elementor-widget-theme-post-content ul li::marker { color: var(--ee-accent); }
body .elementor-widget-theme-post-content strong,
body .elementor-widget-theme-post-content b { color: var(--ee-text-deep); font-weight: 700; }

/* --- inline links --- */
body .elementor-widget-theme-post-content a {
  color: var(--ee-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body .elementor-widget-theme-post-content a:hover,
body .elementor-widget-theme-post-content a:active,
body .elementor-widget-theme-post-content a:focus-visible { color: var(--ee-accent-deep); }

/* --- tables --- */
body .elementor-widget-theme-post-content table {
  border-collapse: collapse;
  border: 1px solid var(--ee-line-strong);
  margin: 0 0 1.4em;
  width: 100%;
  font-size: 15px;
  line-height: 1.5;
}
body .elementor-widget-theme-post-content th,
body .elementor-widget-theme-post-content td {
  border: 1px solid var(--ee-line-strong);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
body .elementor-widget-theme-post-content th,
body .elementor-widget-theme-post-content thead td {
  background-color: var(--ee-mist);
  color: var(--ee-ink);
  font-weight: 700;
}
/* Hello Elementor's reset.css stripes every ODD body row grey (`table tbody>tr:nth-child(odd)>td`,
   (0,1,4)), greys the hovered row and draws the first header row's top border in its own grey
   ((0,2,4)). Measured on /artikler/alternativ-til-laesebriller/ in the window of 2026-09-24: an odd
   row read rgba(128,128,128,0.07) beside this file's even-row tint, two stripe colours at once. Each
   is answered here one step more specific, so the stripes are the palette's and nothing else's. */
body .elementor-widget-theme-post-content table tbody > tr:nth-child(odd) > td { background-color: transparent; }
body .elementor-widget-theme-post-content table tbody > tr:nth-child(even) > td { background-color: var(--ee-light); }
body .elementor-widget-theme-post-content table tbody > tr > th { background-color: var(--ee-mist); }
body .elementor-widget-theme-post-content table tbody > tr:hover > td { background-color: var(--ee-mist); }
body .elementor-widget-theme-post-content table thead:first-child tr:first-child th,
body .elementor-widget-theme-post-content table thead:first-child tr:first-child td { border-top-color: var(--ee-line-strong); }

/* --- quotes --- */
body .elementor-widget-theme-post-content blockquote {
  background-color: var(--ee-mist);
  border-left: 4px solid var(--ee-accent);
  border-radius: 0 12px 12px 0;
  color: var(--ee-ink-soft);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  margin: 1.6em 0;
  padding: 18px 24px;
}
body .elementor-widget-theme-post-content blockquote p:last-child { margin-bottom: 0; }
body .elementor-widget-theme-post-content blockquote cite {
  color: var(--ee-caption);
  display: block;
  font-size: 14px;
  font-style: normal;
  margin-top: 0.6em;
}

/* --- figures and inline pictures --- */
body .elementor-widget-theme-post-content img {
  border-radius: 12px;
  display: inline-block;
  height: auto;
  max-width: 100%;
}
body .elementor-widget-theme-post-content figure,
body .elementor-widget-theme-post-content .wp-caption {
  margin: 1.6em 0;
  max-width: 100%;
}
body .elementor-widget-theme-post-content figure img,
body .elementor-widget-theme-post-content .wp-caption img { display: block; }
body .elementor-widget-theme-post-content figcaption,
body .elementor-widget-theme-post-content .wp-caption-text {
  color: var(--ee-caption);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}
body .elementor-widget-theme-post-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body .elementor-widget-theme-post-content .alignleft { float: left; margin: 0.3em 1.4em 1em 0; max-width: 50%; }
body .elementor-widget-theme-post-content .alignright { float: right; margin: 0.3em 0 1em 1.4em; max-width: 50%; }
body .elementor-widget-theme-post-content::after { clear: both; content: ""; display: table; }

/* 820: the tablet width — the column narrows, a side picture keeps its float at under half. */
@media (max-width: 1024px) {
  body .elementor-widget-theme-post-content h2 { font-size: 26px; }
  body .elementor-widget-theme-post-content .alignleft,
  body .elementor-widget-theme-post-content .alignright { max-width: 45%; }
}

/* 390: one column. Nothing floats, and a table stays a table: its type and cells tighten so three
   columns fit a phone without widening the page (`overflow-wrap: anywhere` was tried in the same
   window and broke the narrow first column mid-word, `Kriteri|um`). NOT `display: block` with its own
   scroll — measured on /artikler/laesebriller-eller-progressive-briller/ at 390 in the window of
   2026-09-24, the scraped `style="height: 215px;"` on that <table> then clipped six rows to one
   (scrollHeight 631 in a 215px box); as a table, a height is only ever a minimum. */
@media (max-width: 767px) {
  body .elementor-widget-theme-post-content { font-size: 16px; }
  body .elementor-widget-theme-post-content h2 { font-size: 23px; }
  body .elementor-widget-theme-post-content h3 { font-size: 20px; }
  body .elementor-widget-theme-post-content h4 { font-size: 17px; }
  body .elementor-widget-theme-post-content .alignleft,
  body .elementor-widget-theme-post-content .alignright {
    float: none;
    margin: 1.2em 0;
    max-width: 100%;
  }
  body .elementor-widget-theme-post-content table { font-size: 13px; }
  body .elementor-widget-theme-post-content th,
  body .elementor-widget-theme-post-content td {
    overflow-wrap: break-word;
    padding: 6px 8px;
  }
  body .elementor-widget-theme-post-content blockquote { font-size: 17px; padding: 14px 18px; }
}