/* site.css — the shared stylesheet.
   Written 2026-09-03. Loaded by every page AFTER its own inline <style>, so
   what is here wins.

   Why it exists and what belongs in it
   ------------------------------------
   The pages still carry their own inline CSS (A27 — the full extraction is not
   done). This file is the start of the one shared stylesheet, and three things
   live here that could not live anywhere else:

     1. Fluid type.   --h1-size was a fixed 40px chosen on a 2026 laptop. On a
                      32" monitor it is small; on a phone it is large. clamp()
                      makes it scale with the viewport, and because the pages
                      set their headings from these variables, redefining the
                      variables here changes every heading on every page.
     2. Reading measure. Long lines are the site's worst readability flaw.
     3. New shared classes — the mobile menu's procedure list.

   Anything new goes HERE, not into a page. */

:root {
  /* --- fluid type (A27b) ----------------------------------------------
     clamp(min, preferred, max): never smaller than min, never larger than
     max, and in between it grows with the window. 1vw = 1% of the window
     width. */
  --h1-size:   clamp(28px, 2.2vw + 18px, 52px);
  --h2-size:   clamp(24px, 1.4vw + 16px, 38px);
  --body:      clamp(16px, 0.25vw + 15px, 18px);
  --body-main: clamp(15px, 0.2vw + 14px, 17px);

  /* --- reading measure (A39) ------------------------------------------
     A full-width section is fine; full-width text is not. Around 70–80
     characters per line is where reading stops being work. */
  --measure: 72ch;
  --measure-px: 720px;
}

/* --- fluid type, applied ------------------------------------------------
   Redefining the variables above is not enough: the pages hardcode their
   heading sizes (`.hero-h1 { font-size: 40px }`) instead of reading the
   token, and several set a different fixed size at each breakpoint. Since
   this file loads last, naming the classes here is what actually makes the
   headings scale. Checked 2026-09-03 — these are every heading class that
   carried a fixed px size.

   When A27 pulls the CSS out of the pages, delete this block and have the
   components read the variables instead. */
.hero-h1,
.svc-hero-h1,
.team-hero-h1,
.post-hero-h1   { font-size: var(--h1-size); line-height: 1.08; }
.price-section-title,
.svc-section-heading { font-size: var(--h2-size); line-height: 1.2; }

/* Long-form body copy never runs wider than the measure, whatever the
   section around it does. Headings and tables are left alone. */
.svc-section-body > p,
.svc-section-body > ul,
.faq-answer-inner > p,
.post-body > p,
.post-body > ul {
  max-width: min(var(--measure), var(--measure-px));
}

/* --- mobile menu: the procedure list (2026-09-03) ---------------------
   Until now the phone menu had categories but no procedures. */
.mob-sub-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 18px 0 6px;
}
.mob-proc-link {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.mob-proc-link:last-child { border-bottom: none; }
.mob-proc-link:active { color: var(--burgundy); }

/* --- courtesy: respect the visitor's motion setting ------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── Mobile menu drill-down (2026-09-04) ─────────────────────────────────
   Four categories on the first screen; pressing one slides its procedures in
   from the right. The flat 38-item list it replaced buried the CTA and the
   phone number under a very long scroll. */
.mob-menu { position: fixed; overflow-x: hidden; }
/* A panel is absolutely positioned, so it adds no height of its own. Without
   this the menu stays as tall as the first screen and the panel gets clipped
   halfway down, with the page showing through underneath. */
.mob-menu.pane-open {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  overflow-y: hidden;
}
.mob-root,
.mob-pane { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.mob-menu.pane-open .mob-root { transform: translateX(-100%); }
.mob-pane {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  background: var(--card-bg, #fff);
  padding: 20px 28px 40px;
  overflow-y: auto;
}
.mob-pane[hidden] { display: none; }
.mob-pane.is-open { transform: translateX(0); }

/* The category rows are buttons now, not links — they open a panel. */
button.mob-cat-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.07);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mob-chev { opacity: .45; font-size: 1.1em; line-height: 1; }

.mob-back {
  background: none;
  border: none;
  padding: 4px 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--burgundy, #7a1f2b);
  cursor: pointer;
}
.mob-pane-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}
.mob-pane-all {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 13px;
  text-decoration: underline;
  opacity: .75;
}


/* ── Group headings inside a card grid ───────────────────────────────────
   Used by /paslaugos and by the homepage catalogue. They are grid items
   spanning every column, so the cards keep flowing normally underneath.
   Moved here from paslaugos.html on 2026-09-04, when the homepage started
   drawing the same headings. */
.grp-head {
  grid-column: 1 / -1;
  margin: 26px 0 2px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.grp-head:first-child { margin-top: 0; }
.grp-cat {
  font-size: 22px;
  color: var(--ink, #2b2422);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  padding-bottom: 8px;
}
.grp-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8b3a2c;
}
@media (max-width: 640px) { .grp-cat { font-size: 19px; } }


/* ── Text-only service sections: one centred column ──────────────────────
   A section with no photograph drops to a single full-width column (1080px),
   but the reading measure caps paragraphs at ~650px — so the heading ran the
   whole width while the text was a narrow ribbon on the left, leaving 430px of
   dead space down every section. That is the "blank page" look Paulius saw
   2026-09-07. Centring the whole block turns that emptiness into even margin,
   which reads as deliberate instead of unfinished. The indications grid is
   given a little more room so its two columns keep working. */
.svc-section--wide .svc-section-inner {
  max-width: 760px;
  margin-inline: auto;
}
.svc-section--wide .svc-section-body > p,
.svc-section--wide .svc-section-body > ul,
.svc-section--wide .svc-section-body > ol {
  max-width: none;          /* the column already holds the measure */
}
/* The cap stays at every width — on a 1100px tablet an uncapped column would
   run ~1000px, which is far past a comfortable line length. */


/* ── Contact-form bot trap ─────────────────────────────────────────────────
   The `website` field in both form partials. Moved off-screen rather than
   display:none, because some bots skip fields hidden that way; a person never
   sees it, and uzklausa.php drops any enquiry where it is filled. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── Straipsniai be nuotraukų (Paulius, 2026-09-24) ───────────────────────
   Kortelėje nuotraukos vietoje — vienas ramus, lygus prekės ženklo atspalvis
   (šviesus smėlis iš #A0785A): kortelė lieka lygiai tokios pat formos kaip
   nuotraukų kortelės, tad mišrioje eilėje viskas sulygiuota. Straipsnio viršus —
   kaip kitų puslapių antraštė (šviesi juosta, tamsus pavadinimas).
   Išbandyta ir atmesta tą pačią dieną: nuotraukos, spalvų gradientai pagal temą,
   tekstinės kortelės be dėžutės („stretched“). Klases uždeda
   `nuorodos.pazymek_teksto_kortele()`. */
.be-nuotraukos{background:#E8DDD2!important;background-image:none!important}
.post-hero.post-hero--tekstas{height:auto;background:#F0EFEC;display:block}
.post-hero--tekstas .post-hero-img,.post-hero--tekstas .post-hero-overlay{display:none}
.post-hero--tekstas .post-hero-content{position:relative;padding:64px 0 52px;background:transparent}
.post-hero--tekstas .post-breadcrumb,.post-hero--tekstas .post-breadcrumb a{color:#8a8280}
.post-hero--tekstas .post-category-tag{color:#5A0001;background:rgba(90,0,1,.07);border-color:transparent}
.post-hero--tekstas .post-title{color:#1F1A1A;font-size:40px;max-width:760px}
@media (max-width:809px){.post-hero--tekstas .post-hero-content{padding:28px 0 24px}.post-hero--tekstas .post-title{font-size:28px}}

/* Juodraščio žymė — tik Mac'o peržiūroje (debesies statymas juodraščių nestato). */
.juodrastis-zenklas{background:#FFF4D6;border:1px solid #E3C36A;color:#5E4700;padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.45;margin:0 0 28px}

/* ── Pataisos po viso puslapių patikrinimo (2026-09-26) ───────────────────
   Kiekviena eilutė — radinys iš peržiūros, tikrintas naršyklėje. */
/* Inkaras (#proceduros, #kainos) sustodavo po dviem prilipusiomis juostomis
   (60 + 50 px), ir skyriaus antraštė likdavo pusiau uždengta. */
[id] { scroll-margin-top: 130px; }
/* „Skaityti daugiau →“: telefone rodyklė iššokdavo į atskirą eilutę. */
.blog-card-read, .proc-link, .op-card-cta, .treat-link { white-space: nowrap; }
/* Vienas ilgas žodis kortelės pavadinime („Dermatovenerologo“) išlįsdavo
   pro kortelės kraštą telefone ir buvo nukerpamas. */
.proc-name, .concern-name, .blog-card-title, .op-card-title, .treat-name { overflow-wrap: anywhere; hyphens: auto; }
/* Skaičius su intervalu ar vienetu („1–2 savaites“, „2 vnt.“) nesiskaido per
   dvi eilutes — statymas apgaubia juos `<span class="nw">`. */
.nw { white-space: nowrap; }
/* Kainų lentelė: kaina nebeprilimpa prie paslaugos pavadinimo telefone,
   kurso ženkliukas — prie gretimo stulpelio antraštės. */
.pricing-table td:last-child, .pricing-table th:last-child { padding-left: 12px; }
.pricing-table td:last-child { white-space: nowrap; }
.price-deal { margin-left: 8px; }
/* Būklių puslapių sąrašai su paryškinta pradžia („**ABCDE** …“): punktas
   būdavo `display:flex`, ir paryškinta dalis su tekstu skildavo į du
   atsitiktinio pločio stulpelius. Dabar — vienas tekstas su tašku kairėje. */
.concern-list li { display: block; position: relative; padding-left: 16px; }
.concern-list li::before { position: absolute; left: 0; top: .62em; margin-top: 0; }
ol.concern-list > li { padding-left: 24px; }
ol.concern-list > li::before { top: 0; }
/* Antraštė po sąrašo prilipdavo prie paskutinio punkto (tarpas 0 px). */
.concern-section-body .concern-list { margin-bottom: 18px; }
.concern-section-body .concern-list:last-child { margin-bottom: 0; }
/* Lentelė paslaugos puslapio turinyje (pirmoji — botulino toksinas kitoms
   sritims; iki šiol rodydavosi kaip tekstas su „|“). */
.svc-table { width: 100%; max-width: var(--measure-px, 720px); border-collapse: collapse; margin: 8px 0 22px; font-size: 15px; line-height: 1.5; }
.svc-table th, .svc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.svc-table th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a8280; }
.svc-table td:first-child { font-weight: 600; color: #1F1A1A; }
@media (max-width: 809px) { .svc-table { font-size: 14px; } .svc-table th, .svc-table td { padding: 8px 6px; } }
/* Formos klaidos — vienodai abiejose formose (2026-09-26). Kontaktų puslapio
   stilius skaitė `.has-error`, paslaugų — `.is-error`; dabar skriptas uždeda
   abu, o čia abu parodomi. */
.form-group.has-error .form-input, .form-group.has-error .form-select, .form-group.has-error .form-textarea,
.form-input.is-error, .form-textarea.is-error, .form-select.is-error { border-color: #c0392b; }
.form-error-msg.is-shown, .form-group.has-error .form-error-msg { display: block; }
.form-error { display: block; color: #c0392b; font-size: 12.5px; line-height: 1.4; margin-top: 6px; }
.form-error:empty { display: none; }