/* Page-scoped polish for the procurement rules + annual plan guide
   (content/service-ajanlatkeroknek-szabalyzat.yaml, HU / EN / DE).

   Loaded only by that page, after the shared sheets. Nothing here changes a
   shared selector's behaviour elsewhere. Every sheet is preload-swapped, so
   load order is not relied on: selectors carry enough specificity to win on
   their own (usually one class or id more than the rule they correct).

   Sections:
   1. Labels the shared `.prose-section p` rule (0,1,1) inflates
   2. Section rhythm and backgrounds
   3. Prose measure and H3 spacing
   4. Comparison ledger and chapter grid
   5. Pitfalls ledger as a two-column board
   6. FAQ: collapsed answers leaked their first line
   7. Contact form density, sticky advisor column
   8. Breadcrumb and hero eyebrow on small screens
   ============================================================ */


/* ---------- 1. Labels ---------------------------------------------------

   Eyebrows and callout labels are <p> elements inside .prose-section, so
   editorial's `.prose-section p { font-size: 1.02rem; color: ... }` beats
   their own single-class rules. They rendered at 16px with .14em tracking in
   grey, louder than the H3s under them. Restore the house label spec. */

.prose-section .alternatives-ledger__eyebrow,
.prose-section .on-demand-services__eyebrow,
.prose-section .fee-summary-callout .fee-summary-callout__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
}
.prose-section .alternatives-ledger__eyebrow,
.prose-section .on-demand-services__eyebrow {
  margin: 0 0 .85rem;
}
.prose-section .fee-summary-callout .fee-summary-callout__label {
  margin: 0 0 .5rem;
}

/* Ledger kickers were rgba(.55) at 11.5px on cream, under 4.5:1. */
.prose-section.alternatives-ledger .alternatives-ledger__kicker {
  color: rgba(15, 23, 42, .72);
}


/* ---------- 2. Section rhythm -------------------------------------------

   The shared blocks alternate cool grey (plain prose) and cream (ledgers,
   chapter grid), but two pairs land on the same tone back to back:
   comparison ledger -> chapter grid, and pitfalls -> references -> FAQ ->
   form. Separate them with paper white and a hairline instead of relying on
   whitespace alone. */

#szabalyzat-pillerek.prose-section {
  background: #fff;
  padding: 80px 0 88px;
}
#szabalyzat-pillerek .fee-summary-callout {
  background: var(--color-cream);
}

#referenciak {
  border-top: 1px solid var(--color-rule);
}

#gyik.faq-section {
  background: #fff;
}


/* ---------- 3. Prose measure and H3 spacing -----------------------------

   Editorial's 72ch measure ran to ~88 characters per line in Inter here.
   64ch keeps lines under 80 and widens the gutter the TOC rail sits in.
   Only the plain prose sections, the ledgers set their own widths. */

.prose-section:not(.alternatives-ledger):not(.on-demand-services) > .container > .prose-content {
  max-width: 64ch;
}

/* "Ki fogadja el?" and its siblings sat as close to the paragraph above as
   to their own text. More space above than below groups each H3 with its
   answer. */
.prose-section .prose-content > h3 {
  margin-top: 2.25rem;
  margin-bottom: .55rem;
}
.prose-section .prose-content > h2 + h3 {
  margin-top: 1.5rem;
}


/* ---------- 4. Comparison ledger and chapter grid ----------------------- */

/* The chapter descriptions picked up the 1.02rem / 1.7 prose paragraph spec
   and ran to nine lines in a half-width column. Match the ledger body. */
.prose-section.on-demand-services .on-demand-services__desc {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, .8);
}

/* A centred six-line intro is hard to read on a phone. The chapter grid
   already goes left on mobile, so the ledgers follow it. */
@media (max-width: 700px) {
  .alternatives-ledger .alternatives-ledger__header {
    text-align: left;
    margin-bottom: 1.75rem;
  }
  /* Rows sat 16px in from the header above them. The hover rule that
     padding made room for does not fire on touch. */
  .alternatives-ledger .alternatives-ledger__row {
    padding-left: 0;
  }
}


/* ---------- 5. Pitfalls as a two-column board ---------------------------

   Third ledger on the page and the longest. Its rows are independent
   checks, not a comparison along one axis, so on wide screens they tile
   two up: white cells on a hairline grid (the reference stats strip idiom),
   kicker above the title. Halves the run and stops it reading as a repeat
   of the comparison ledger. Below 900px it stays the stacked ledger. */

@media (min-width: 900px) {
  #gyakori-hibak .alternatives-ledger__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-rule);
    border: 1px solid var(--color-rule);
  }
  #gyakori-hibak .alternatives-ledger__row {
    display: block;
    padding: 1.5rem 1.6rem 1.65rem;
    background: #fff;
    border-bottom: 0;
  }
  #gyakori-hibak .alternatives-ledger__row:hover {
    background: #fff;
  }
  /* An odd count would leave a bare hairline-grey cell. The last item
     takes the full row instead. */
  #gyakori-hibak .alternatives-ledger__row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  #gyakori-hibak.alternatives-ledger .alternatives-ledger__kicker {
    margin: 0 0 .6rem;
    color: var(--color-cobalt);
  }
}


/* ---------- 6. FAQ ------------------------------------------------------

   editorial.css sets `.faq-item .faq-answer { padding: 0 0 1.5rem
   !important }`, which also wins over main.css's
   `.faq-answer[hidden] { padding-bottom: 0 }`. Every collapsed answer kept
   a 24px window, showing the answer's top rule and, on phones, a sliver of
   its first line. Zero it while hidden. */

.faq-section .faq-item .faq-answer[hidden] {
  padding-bottom: 0 !important;
}


/* ---------- 7. Contact form ---------------------------------------------

   The form is a flex column with a 24px gap and each group also carried a
   24px bottom margin, so labels sat 8px from their field and 48px from the
   one above. Drop the margin and let the gap do the spacing. */

#kapcsolat .contact-form .form-group {
  margin-bottom: 0;
}

/* The advisor column is less than half the form's height. Keep it beside
   the fields while the reader fills them in. */
@media (min-width: 1024px) {
  #kapcsolat .director-intro-compact {
    position: sticky;
    top: 112px;
    align-self: start;
  }
}


/* ---------- 8. Breadcrumb and hero eyebrow ------------------------------

   main.css lets every crumb shrink inside a no-wrap flex row, so on a phone
   the links were clipped mid-word and the separators vanished. Keep the
   ancestors whole, drop the generic "Services" step, and let only the
   current page truncate. */

@media (max-width: 768px) {
  nav.breadcrumb li:not(:last-child) {
    flex-shrink: 0;
  }
  nav.breadcrumb li:last-child {
    min-width: 0;
  }
  nav.breadcrumb li:last-child > [aria-current="page"] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 480px) {
  nav.breadcrumb li:nth-child(2):not(:last-child) {
    display: none;
  }
}

/* The section refs in the eyebrow broke with a lone "§" on its own line.
   The YAML glues "§" to its number and the "·" to the word before it, so
   balance can only split after the dot. */
.page-hero .hero-eyebrow {
  text-wrap: balance;
}

/* Tap targets under 44px on phones: the breadcrumb links (16px) and the two
   text links closing the references block (25px). Height moves from the
   nav's padding onto the links, so the breadcrumb row keeps its size. */
@media (max-width: 768px) {
  nav.breadcrumb {
    padding-top: 0;
    padding-bottom: 0;
  }
  nav.breadcrumb li > a,
  nav.breadcrumb li > [aria-current="page"] {
    display: inline-block;
    padding: .6rem 0;
  }
  #referenciak .ref-proof__full,
  #referenciak .ref-proof__cta {
    padding: .65rem 0;
  }
  #referenciak .ref-proof__links {
    gap: 0;
  }
}