/* Page-scoped styles for the EKR guide prose sections.
   Owned by the block-styling pass. Kept out of editorial.src.css because that
   file is shared by every page and is PurgeCSS-processed.

   Scope is the running reference text only: `.prose-section > .container >
   .prose-content` and its bare HTML children. The fee calculator card
   (.feecalc-*), the hero, CTA, advisor card and FAQ are styled elsewhere and
   are deliberately untouched here.

   Everything is written against structure (h2 / h3 / p / ul / table / strong),
   never against a specific heading, section id or section count, because the
   prose is being re-split in parallel.

   Two globals have to be beaten on this page:
   - main.css `h2 { font-size: 2.5rem }` and `h2, h3 { color: #1e40af }`
   - editorial.css `.prose-section h2|h3|p` (specificity 0,1,1)
   Selectors below therefore run at 0,2,1 or higher — `.prose-section
   .prose-content <tag>` — rather than relying on load order, which is not
   guaranteed because every sheet on this page is preload-swapped.
   ============================================================ */

/* ---------- 1. Section frame ---------------------------------------------

   Sections stay on paper white rather than alternating cream. Two reasons:
   the fee calculator band in the middle of the page is already cream, so
   alternation would fight it, and the tables below use cream as their zebra
   band — which only reads if the section behind them is white.

   Separation is carried instead by the rule above each H2 (block 2). That is
   robust to the prose being re-split into any number of sections, which an
   nth-child alternation would not be. */

/* `section.prose-section` (0,1,1) rather than `.prose-section` (0,1,0) so this
   beats editorial's `.prose-section { padding: 72px 0 80px }` on specificity.
   Load order would also win, but every sheet on this page is preload-swapped,
   so order is not something to lean on.

   Tighter than the editorial default: this page carries five-plus sections
   rather than one or two, and the rule above each H2 already does the
   separating, so 152px of dead space between chapters is not needed. */
section.prose-section {
  background: #ffffff;
  padding: 64px 0 72px;
}

/* The in-page TOC links to these ids. Sticky nav is ~80px, so land the heading
   below it. ekr-toc.css owns the rail and may restate this; a duplicate
   declaration is harmless, a missing one hides the heading under the nav. */
.prose-section[id] {
  scroll-margin-top: 96px;
}

/* 62ch of Inter at 1.02rem lands around 72-75 characters per line. Editorial's
   72ch default measures closer to 90, which is past the point where the eye
   loses the line return on a page this long. Narrowing also frees gutter width
   for the desktop TOC rail. */
.prose-section .prose-content {
  max-width: 62ch;
}

/* ---------- 2. Heading hierarchy ------------------------------------------

   H2 = chapter: large serif under a full-measure hairline with a cobalt tick.
   H3 = subhead: small serif under a short cobalt dash.
   The two differ in size (34px against 20px at desktop), in rule width and in
   the weight of the marker, so they never read as the same level. The content
   currently has no H3 — the re-split promoted them all to H2 — but the rules
   stay because the split is still moving. Both markers sit above the
   text and span from the left edge of the measure, so nothing indents out of
   alignment with the paragraphs. */

.prose-section .prose-content > h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.9vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: balance;
  margin: 0 0 1.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-rule);
}

/* Straddles the hairline (top: -1px over a 2px bar) so the tick reads as a
   thickening of the rule rather than a separate object floating above it. */
.prose-section .prose-content > h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.25rem;
  height: 2px;
  background: var(--color-cobalt);
}

.prose-section .prose-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 2.75rem 0 0.85rem;
}

.prose-section .prose-content h3::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-cobalt);
  margin-bottom: 0.75rem;
}

/* An H3 that opens a block needs the dash but not the 2.75rem separation from
   the H2 it sits under. */
.prose-section .prose-content > h2 + h3 {
  margin-top: 1.75rem;
}

/* ---------- 3. Body rhythm ------------------------------------------------ */

.prose-section .prose-content p {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(15, 23, 42, 0.82);
  margin: 0 0 1.15rem;
}

.prose-section .prose-content > p:last-child {
  margin-bottom: 0;
}

/* All bold in prose: 600 rather than the browser's 700, and full ink against
   the 0.82 body grey. 700 Inter next to a serif heading reads as shouting. */
.prose-section .prose-content p strong,
.prose-section .prose-content li strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Several paragraphs open with a bolded lead-in that works as a mini-heading
   ("Mikorra kell fizetni.", "Visszatérítés."). The type is the same as any
   other bold run — what marks it as a section opener is the gap above it, so
   the reader sees a new point starting rather than a continuation. */
.prose-section .prose-content p:has(> strong:first-child) {
  margin-top: 1.9rem;
}

/* ...except when the lead-in paragraph is the first thing after a heading,
   where the heading already provides the separation. */
.prose-section .prose-content h2 + p:has(> strong:first-child),
.prose-section .prose-content h3 + p:has(> strong:first-child) {
  margin-top: 0;
}

.prose-section .prose-content em {
  font-style: italic;
}

/* ---------- 4. Lists ------------------------------------------------------

   The global `* { margin: 0; padding: 0 }` reset strips list indentation, so
   padding-left has to be restored explicitly or the markers clip. Square
   markers rather than discs: the page has no rounded corner anywhere else. */

.prose-section .prose-content ul,
.prose-section .prose-content ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.prose-section .prose-content ul {
  list-style: square outside;
}

.prose-section .prose-content ol {
  list-style: decimal outside;
}

.prose-section .prose-content li {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.68;
  color: rgba(15, 23, 42, 0.82);
  margin-bottom: 0.75rem;
  padding-left: 0.3rem;
}

.prose-section .prose-content li:last-child {
  margin-bottom: 0;
}

.prose-section .prose-content li::marker {
  color: var(--color-cobalt);
}

/* ---------- 5. Links ------------------------------------------------------

   Prose links on this page were rendering as unstyled browser blue with a
   full underline — nothing in main.css or editorial.css claims a bare `a`
   inside .prose-content. Cobalt with an offset hairline underline matches the
   anchor treatment on the service pages. */

.prose-section .prose-content a {
  color: var(--color-cobalt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(37, 99, 235, 0.38);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.prose-section .prose-content a:hover {
  text-decoration-color: currentColor;
}

.prose-section .prose-content a:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
  text-decoration-color: currentColor;
}

/* ---------- 6. Tables -----------------------------------------------------

   Four data tables carry most of the page's value, so they get the full house
   treatment from the value-thresholds reference table: ink header band, cream
   mono uppercase column labels, cobalt underline beneath the band, serif stub
   column, hairline row rules, cream zebra.

   The markup is bare `<table>` with no wrapper div and no classes, so every
   rule here has to hang off element selectors inside .prose-content. */

.prose-section .prose-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.1rem 0 2.3rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

/* Caption above the table as a mono eyebrow, left-aligned to the measure.
   The browser default is centred and set in body type, which reads as a stray
   line of prose rather than a table title. */
.prose-section .prose-content caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  padding: 0 0 0.7rem;
}

.prose-section .prose-content thead th {
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: left;
  vertical-align: bottom;
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--color-cobalt);
}

/* A table with only row headers (the bank-transfer ledger) has no ink band to
   anchor it, so it gets a rule of the same visual weight along its top edge. */
.prose-section .prose-content table:not(:has(thead)) {
  border-top: 2px solid var(--color-ink);
}

.prose-section .prose-content tbody th,
.prose-section .prose-content tbody td {
  padding: 0.8rem 1rem;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--color-rule);
}

/* Stub column — both the `<th scope="row">` form and, in the tables that use a
   `<thead>`, the plain first `<td>`. In every table on this page the first
   column is the row label, and giving it serif weight is what lets the eye
   scan down it without reading the body columns. */
.prose-section .prose-content tbody th,
.prose-section .prose-content tbody td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
  text-align: left;
}

.prose-section .prose-content tbody td {
  color: rgba(15, 23, 42, 0.84);
}

.prose-section .prose-content tbody td:first-child {
  color: var(--color-ink);
}

/* Cream zebra rather than grey: it is the page's own background tone, so the
   banding registers as paper rather than as a second colour. Only works
   because .prose-section stays white (block 1). */
.prose-section .prose-content tbody tr:nth-child(even) > * {
  background: var(--color-cream);
}

.prose-section .prose-content tbody tr:hover > * {
  background: rgba(37, 99, 235, 0.05);
}

/* ---------- 7. Mobile ----------------------------------------------------- */

@media (max-width: 767px) {
  section.prose-section {
    padding: 44px 0 52px;
  }
  .prose-section .prose-content > h2 {
    padding-top: 1.25rem;
    margin-bottom: 1.1rem;
  }
  .prose-section .prose-content h3 {
    margin-top: 2.25rem;
    font-size: 1.14rem;
  }
  .prose-section .prose-content p,
  .prose-section .prose-content li {
    font-size: 1rem;
    line-height: 1.68;
  }
  .prose-section .prose-content p:has(> strong:first-child) {
    margin-top: 1.6rem;
  }

  /* Tighter cells and a smaller face keep three columns inside 375px without
     a horizontal scroller.

     `break-word`, deliberately not `anywhere`: `anywhere` drops a cell's
     min-content width to one character, so auto table layout hands the stub
     column almost no space and Hungarian compounds get chopped mid-word
     ("ajánlattét / eli"). `break-word` keeps the longest word as the floor for
     column sizing and only breaks a token that genuinely cannot fit. */
  .prose-section .prose-content table {
    font-size: 0.86rem;
    margin: 1.75rem 0 1.9rem;
  }
  .prose-section .prose-content thead th {
    padding: 0.6rem 0.5rem;
    font-size: 0.63rem;
    letter-spacing: 0.05em;
  }
  .prose-section .prose-content tbody th,
  .prose-section .prose-content tbody td {
    padding: 0.6rem 0.5rem;
    overflow-wrap: break-word;
  }
  .prose-section .prose-content tbody th,
  .prose-section .prose-content tbody td:first-child {
    font-size: 0.88rem;
  }

  /* Hungarian only. Agglutinated compounds ("rendszerhasználati",
     "ajánlattételi") set the minimum width of the stub column, and without
     hyphenation that column eats the space the rule column needs — the
     deadline table grows about 10% taller and its middle column drops to
     two-word lines. Chrome's hu dictionary breaks these correctly. English
     words are short enough not to need it, and "ap-proval" in a 90px column
     looks worse than the wrap it replaces, so EN is left alone.
     Restricted to tables that keep their columns — the header-less ones stack
     to full width below, where there is no narrow column to rescue. */
  html[lang="hu"] .prose-section .prose-content table:has(thead) tbody th,
  html[lang="hu"] .prose-section .prose-content table:has(thead) tbody td {
    hyphens: auto;
  }

  /* Key/value tables (row headers, no column headers) stack instead of
     squeezing: the label becomes a mono eyebrow and the value sits under it at
     full width. Safe only for this shape — a table with a `<thead>` would lose
     the column semantics that tell the two value columns apart, so that case
     keeps its real table layout above. */
  .prose-section .prose-content table:not(:has(thead)) tbody tr,
  .prose-section .prose-content table:not(:has(thead)) tbody th,
  .prose-section .prose-content table:not(:has(thead)) tbody td {
    display: block;
    width: 100%;
  }
  .prose-section .prose-content table:not(:has(thead)) tbody tr {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-rule);
  }
  .prose-section .prose-content table:not(:has(thead)) tbody th {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
    padding: 0 0 0.25rem;
    border-bottom: 0;
  }
  .prose-section .prose-content table:not(:has(thead)) tbody td {
    padding: 0;
    border-bottom: 0;
    font-size: 0.95rem;
    color: var(--color-ink);
  }
  .prose-section .prose-content table:not(:has(thead)) tbody tr:nth-child(even) > * {
    background: transparent;
  }
  .prose-section .prose-content table:not(:has(thead)) tbody tr:hover > * {
    background: transparent;
  }
}