/* /pravna-pomosht - the consumer funnel's landing page.

   Mobile first and deliberately thin: paid consumer traffic arrives mostly on a phone, and the
   question box has to be reachable without scrolling. Nothing here is heavier than text, so the
   page paints in one pass with no layout shift and no blocking script. */
.pp { max-width: var(--page-w,860px); margin: 0 auto; padding: 18px 16px 40px; }
.pp h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.2; margin: 10px 0 8px; }
.pp .lede { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }

.pp-ask { display: flex; flex-direction: column; gap: 10px; }
.pp-ask textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit;
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  line-height: 1.45; color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: 12px; resize: vertical; min-height: 88px; }
.pp-ask textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-ask .btn, .pp-cta .btn { align-self: stretch; padding: 13px 18px; font-size: 16px; font-weight: 600;
  border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent);   /* flips with the theme: near-black on the bright
                                green, white on the dark one */ cursor: pointer; }

.pp-trust, .pp-honest, .pp-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.pp-trust { color: var(--muted); }
.pp-honest { color: var(--text); }
.pp-note { color: var(--muted); }

.pp h2 { font-size: 17px; margin: 26px 0 10px; }
.pp-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-ex a { display: block; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.4; }
.pp-ex a:hover { border-color: var(--accent); }

.pp-other { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.pp-other a { color: var(--accent); }

/* ---------------------------------------------------- the one free answer, shown in place */
.pp-free { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.pp-answer { margin: 22px 0 0; }
.pp-text { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--text);
  overflow-wrap: anywhere; }

.pp-src { margin: 16px 0 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); }
.pp-src > summary { padding: 11px 14px; cursor: pointer; font-size: 14px; color: var(--muted); }
.pp-src-row { padding: 9px 14px; border-top: 1px solid var(--border); font-size: 14px;
  line-height: 1.45; }
.pp-src-row .ref { color: var(--text); }
.pp-src-row a.ref { color: var(--accent); text-decoration: none; }
.pp-src-row a.ref:hover { text-decoration: underline; }
.pp-src-row .law { color: var(--muted); }

.pp-next { margin: 16px 0 0; font-size: 15px; }
.pp-next a { color: var(--accent); }

.pp-cta { margin: 20px 0 0; }
/* Shares .pp-ask .btn's rule above rather than restating it, so the CTA cannot drift from
   the button it replaces. */
.pp-cta .btn { display: inline-block; text-decoration: none; align-self: auto; }

@media (min-width: 700px) {
  .pp-ask { flex-direction: row; align-items: flex-start; }
  .pp-ask textarea { flex: 1; }
  .pp-ask .btn { align-self: auto; min-width: 132px; }
  .pp-ex { display: grid; grid-template-columns: 1fr 1fr; }
}

/* the label above the box on every width (UX review, 7 Oct 2026); it used to sit beside it */
.pp-ask { flex-wrap: wrap; }
.pp-label { flex-basis: 100%; display: block; margin: 0 0 6px; font-weight: 600; }