/* ============================================================
   Maisternya Horodenka – styles
   Palette A «Герб міста», from the Horodenka coat of arms
   (13.09.1991, A. Hrechylo & I. Turetskyi):
   green field + golden gates | blue field + three silver stripes.
   ============================================================ */

:root {
  --bg:          #FFFFFF;
  --bg-alt:      #F4F7FA;  /* the heraldic silver */
  --bg-deep:     #12365F;
  --primary:     #1B4F8C;  /* blue field */
  --primary-dark:#12365F;
  --secondary:   #1E7A4B;  /* green field */
  --accent:      #E8A317;  /* golden gates */
  --accent-dark: #C8880B;
  --text:        #14202E;
  --text-muted:  #55627A;
  --border:      #DDE5EE;
  --on-accent:   #14202E;
  --on-primary:  #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.75rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.1rem); }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1em; }
a  { color: var(--primary); }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(48px, 8vw, 84px) 0; }
.section--alt { background: var(--bg-alt); }
.lede { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--text-muted); max-width: 62ch; }

/* Skip link – keyboard users shouldn't tab through the whole page first */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* Visible focus ring for keyboard navigation. Dark navy, not gold: gold on
   white is only ~2:1, and on the gold call button a gold ring disappears.
   The call button gets a double ring (white gap + navy) so it reads on any
   background, including the dark bands. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
}
.btn--call:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

/* Inline SVG icons inherit the text colour. */
.ico { flex: none; display: inline-block; vertical-align: -0.2em; }
.hero__reassure .ico--shield { margin-right: .35em; vertical-align: -0.25em; }

/* The three silver stripes – bridges over the Yamhoriv river */
.stripes { margin: 0 0 22px; }
.stripes span {
  display: block; height: 3px; width: 52px; border-radius: 2px;
  background: var(--secondary); opacity: .85; margin-bottom: 4px;
}
.stripes span:nth-child(2) { width: 38px; }
.stripes span:nth-child(3) { width: 24px; }

/* Draft mode. While <body> carries class="draft", every unfilled business
   detail is highlighted, so an incomplete page cannot quietly look finished.
   Remove that one class from <body> to switch the highlighting off site-wide
   – the .ph spans themselves can stay, they become invisible. */
body.draft .ph { background: rgba(232,163,23,.22); padding: 0 4px; border-radius: 3px; font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 10px;
  font-size: 1.06rem; font-weight: 700; text-decoration: none;
  cursor: pointer; font-family: inherit;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--call {
  background: var(--accent); color: var(--on-accent);
  font-size: clamp(1.05rem, 3.1vw, 1.3rem); font-weight: 800;
  min-height: 62px; padding: 0 32px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}
.btn--call:hover { background: var(--accent-dark); }

.btn--solid { background: var(--primary); color: var(--on-primary); }
.btn--solid:hover { background: var(--primary-dark); }

.btn--ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); }

/* ---------- Hero ---------- */
.hero { background: var(--bg-alt); padding: clamp(36px, 6vw, 68px) 0 clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 48px; } }

.hero__eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 6px 14px;
  background: var(--primary); color: var(--on-primary);
  border-radius: 100px; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero__sub { font-size: clamp(1rem, 2.4vw, 1.22rem); color: var(--text-muted); max-width: 54ch; margin-bottom: 26px; }
.hero__sub strong { color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__reassure { margin: 14px 0 0; font-size: .95rem; font-weight: 600; color: var(--secondary); }
.hero__hours { margin: 18px 0 0; font-size: .95rem; color: var(--text-muted); }
.nowrap { white-space: nowrap; }

/* ---------- Info tip: (i) button + popover ----------
   The popover is positioned against the nearest .tip-anchor, so it spans the
   whole line it explains instead of hanging off a 20px icon. Without JS it
   opens on hover/focus; with JS (html.js) a tap or click toggles it, and Esc
   or a click elsewhere closes it. Hover only counts on devices that really
   hover, so a tap on a phone doesn't leave it stuck open. */
.tip-anchor { position: relative; }
.tip__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px -10px -12px -6px; padding: 0;
  vertical-align: middle; border: 0; background: none; cursor: pointer;
  color: var(--primary); border-radius: 50%;
}
.tip__btn:hover { color: var(--primary-dark); }
.tip__body {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  max-width: 420px; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(20,32,46,.06), 0 10px 24px -10px rgba(20,32,46,.3);
  font-size: .9rem; font-weight: 400; line-height: 1.5; text-align: left;
}
html:not(.js) .tip-anchor:focus-within .tip__body,
.tip-anchor.is-open .tip__body { display: block; }
@media (hover: hover) { .tip-anchor:has(.tip__btn:hover) .tip__body { display: block; } }

/* ---------- Opening status pill ----------
   Filled in by script.js from the opening hours in the structured data;
   stays hidden without JS, where the static hours line does the job. */
.status {
  display: inline-flex; align-items: center; gap: .5em;
  margin: 0; padding: 6px 12px; border-radius: 100px;
  font-size: .9rem; font-weight: 700; line-height: 1.3;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.status[hidden] { display: none; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.status--open::before { background: var(--secondary); box-shadow: 0 0 0 3px rgba(30,122,75,.18); }
.status--soon::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(232,163,23,.22); }
.status--closed::before { background: #B4472F; }
.status__muted { font-weight: 400; color: var(--text-muted); }
.loc__block .status { margin-top: 8px; }

/* Flat white card on the silver hero – no border, no shadow; the contrast
   of white on silver is enough to set it apart. */
.hero__card { background: var(--bg); border-radius: 16px; padding: 26px; }
.hero__card h2 { font-size: 1.12rem; margin-bottom: 16px; }
.hero__list { list-style: none; margin: 0; padding: 0; }
.hero__list li {
  padding: 9px 0 9px 30px; position: relative;
  border-bottom: 1px solid var(--border); font-size: .97rem;
}
.hero__list li:last-child { border-bottom: 0; }
.hero__list li::before {
  content: "✓"; position: absolute; left: 0; top: 9px;
  color: var(--secondary); font-weight: 800;
}

/* Slim hero for secondary pages (privacy policy) */
.hero--slim { padding: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 36px); }
.hero--slim h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }

/* Long-form text pages */
/* Goes INSIDE a .wrap, never on the same element: .wrap centres the column,
   .prose then caps the line length and stays flush left within it, so body
   text lines up with the page heading above. */
.prose { max-width: 72ch; margin-left: 0; margin-right: auto; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; color: var(--primary); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose code {
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; font-size: .9em;
}
.prose__meta { margin-top: 2.5em; color: var(--text-muted); font-size: .9rem; }

/* ---------- Trust bar ---------- */
.trust { background: var(--bg-deep); color: #fff; padding: 26px 0; }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; text-align: center; }
/* Three items in two columns: the last one takes a full row, centred, so
   it doesn't sit lopsided under the first – and its info tip has room. */
@media (max-width: 759px) { .trust__grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }
.trust__num { display: block; font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 800; color: var(--accent); line-height: 1.1; }
.trust__lbl { font-size: .87rem; opacity: .88; }
.trust .tip__btn { color: rgba(255,255,255,.85); margin-left: -4px; }
.trust .tip__btn:hover { color: #fff; }
.trust .tip__body { left: 50%; right: auto; width: max-content; max-width: min(280px, 80vw); transform: translateX(-50%); }

/* ---------- Services ---------- */
.svc { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 640px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc { grid-template-columns: repeat(3, 1fr); } }

.svc__card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px;
}
.svc__card h3 { color: var(--primary); margin-bottom: 12px; }
.svc__card ul { list-style: none; margin: 0; padding: 0; }
.svc__card li { padding: 5px 0 5px 18px; position: relative; font-size: .93rem; color: var(--text-muted); }
.svc__card li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.svc__card p:last-child { margin: 0; font-size: .93rem; color: var(--text-muted); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; margin-top: 34px; counter-reset: s; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: .97rem; margin: 0; }

/* ---------- Price framing ---------- */
.price__grid { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 720px) { .price__grid { grid-template-columns: 1fr 1fr; } }
.price__box { border-radius: 14px; padding: 26px; border: 2px solid var(--border); }
/* Muted by colour, not opacity – opacity took the text below AA contrast. */
.price__box--bad { background: var(--bg-alt); }
.price__box--bad .price__tag { color: var(--text-muted); }
.price__box--good { border-color: var(--accent); background: var(--bg); }
.price__tag { display: block; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; margin-bottom: 6px; }
.price__box--good .price__tag { color: var(--secondary); }
.price__box p { margin: 0; color: var(--text-muted); font-size: .95rem; }

/* ---------- About ---------- */
/* Comfortable line length for reading on wide screens. */
.about__block p { max-width: 68ch; }

/* Bogdan's own words: a large opening quote mark instead of a side stripe. */
.about__quote {
  position: relative; margin: 28px 0 0; padding: 4px 0 0 52px;
  font-size: 1.15rem; font-weight: 600; font-style: italic; line-height: 1.5;
}
.about__quote::before {
  content: "«"; content: "«" / ""; position: absolute; left: 0; top: -14px;
  font-size: 3.6rem; font-style: normal; font-weight: 800; line-height: 1;
  color: var(--accent);
}

/* ---------- Location + route ---------- */
/* The heading belongs to the left column only, so its top lines up with the
   top of the map on the right. */
.loc__grid { display: grid; gap: 28px; align-items: start; }
.loc__grid h2 { margin-bottom: 26px; }
@media (min-width: 920px) { .loc__grid { grid-template-columns: 1fr 1.15fr; gap: 40px; } }
.loc__block { margin-bottom: 22px; }
.loc__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.loc__value { font-size: 1.1rem; font-weight: 700; }
/* The phone number is the page's primary action – give it a real tap target */
.loc__value a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}


/* Map. With consent for Google Maps the iframe goes in by itself (as the map
   scrolls near); without it, this facade stands in, with one button that
   loads the map for this visit only. The "open in Google Maps" link lives
   under the map, never on it. Without JS the facade can do nothing, so its
   hint and button are hidden and only the link below remains. */
.map { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); min-height: 340px; background: var(--bg-alt); }
.map__facade {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  gap: 14px; padding: 20px; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,0,0,.025) 22px 44px),
    var(--bg-alt);
  color: var(--text);
}
.map__pin { color: var(--primary); }
.map__hint { font-size: .9rem; color: var(--text-muted); max-width: 34ch; }
html:not(.js) .map__hint, html:not(.js) #loadmap { display: none; }
.map__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 10px;
  font-weight: 700; font-size: .92rem; font-family: inherit; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  background: var(--primary); color: var(--on-primary);
}
.map__pill:hover { background: var(--primary-dark); }
.map__pill--ghost { background: var(--bg); color: var(--primary); border-color: var(--border); }
.map__pill--ghost:hover { border-color: var(--primary); }
.map iframe { display: block; width: 100%; height: 340px; border: 0; }
.map__below {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-top: 12px;
}
.map__note { margin: 0; font-size: .92rem; color: var(--text-muted); }

/* ---------- Final CTA + footer ---------- */
.final { background: var(--bg-deep); color: #fff; text-align: center; }
.final h2 { color: #fff; }
.final p { color: rgba(255,255,255,.82); max-width: 52ch; margin-left: auto; margin-right: auto; }
.final .btn--call { margin-top: 12px; }

/* Footer: one slim row – copyright on the left, legal links on the right.
   Bottom padding clears the sticky call bar (≈84px) on phones, so the links
   never hide behind it. */
.foot {
  background: var(--bg-alt); color: var(--text-muted);
  padding: 12px 0 96px; font-size: .92rem;
}
@media (min-width: 760px) { .foot { padding-bottom: 12px; } }
.foot p { margin: 0; }

.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 24px;
}
@media (max-width: 759px) { .foot__bottom { flex-direction: column; text-align: center; } }
.foot__copy { font-size: .85rem; }

/* ---------- Cookie consent ----------
   A centred modal over a dimmed page, so the visitor sees it and decides.
   The backdrop (.consent) stops above the sticky call bar on phones (whose
   live height comes from script.js), and the call bar is lifted above the
   backdrop: the phone number stays bright and tappable the whole time.

   Gold belongs to the call button alone. The card's main button is the
   page's blue, so "Погоджуюсь" can never be mistaken for "call". */
.consent {
  position: fixed; z-index: 70;
  top: 0; left: 0; right: 0; bottom: var(--sticky-h, 0px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(20,32,46,.55);
  animation: consent-fade .2s ease-out;
}
.consent__card {
  width: 100%; max-width: 440px;
  max-height: 100%; overflow-y: auto;
  background: var(--bg); color: var(--text);
  border-radius: 18px; padding: 22px;
  box-shadow: 0 24px 60px -16px rgba(20,32,46,.5);
  animation: consent-in .25s ease-out;
}
@media (min-width: 760px) {
  .consent__card { max-width: 500px; padding: 32px; }
  .consent .consent__inner { gap: 16px; }
  .consent .consent__title { font-size: 1.25rem; }
  .consent .consent__text { font-size: 1rem; }
  .consent .consent__row { font-size: .95rem; padding: 10px 0; }
  .consent .consent__btn { min-height: 50px; font-size: 1rem; }
}
@keyframes consent-fade { from { opacity: 0; } }
@keyframes consent-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* While the modal is up: no scrolling the page behind it, and the call bar
   rises above the backdrop. */
html.consent-open, html.consent-open body { overflow: hidden; }
html.consent-open .sticky { z-index: 80; }

.consent__inner { display: grid; gap: 12px; }
.consent__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
.consent__text a { color: var(--primary); text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 10px; }
.consent__btn {
  flex: 1 1 0; min-height: 44px; padding: 0 16px; white-space: nowrap;
  border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg); color: var(--primary);
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.consent__btn:hover { border-color: var(--primary); }
.consent__btn--main { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.consent__btn--main:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.consent__title { margin: 0 0 4px; font-weight: 800; font-size: 1rem; color: var(--text); }
.consent__row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .87rem; line-height: 1.45; color: var(--text-muted);
  padding: 7px 0; cursor: pointer;
}
.consent__row strong { color: var(--text); }
.consent__row + .consent__row { border-top: 1px solid var(--border); }
.consent__row--locked { cursor: default; }
.consent__row--locked input { opacity: .55; }
.consent__row input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }

/* Footer control for withdrawing consent later – consent that cannot be
   taken back is not consent. Both footer links get a full 44px tap target. */
.foot__links { display: flex; gap: 0 20px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .85rem; }
.foot__links a, .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--primary); text-decoration: underline;
}

/* ---------- Back to top ----------
   Quiet on purpose: a small white circle with the page's blue arrow, the
   same border and shadow language as the cards. Bottom-right; on phones it
   sits 12px above the sticky call bar so it never covers the number. */
.totop {
  position: fixed; z-index: 45; right: 16px;
  bottom: calc(var(--sticky-h, 0px) + 12px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg); color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px -6px rgba(20,32,46,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, border-color .12s ease, color .12s ease;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { border-color: var(--primary); color: var(--primary-dark); }
@media (min-width: 760px) { .totop { right: 24px; bottom: 24px; width: 48px; height: 48px; } }
html.consent-open .totop { visibility: hidden; opacity: 0; }

/* ---------- Sticky mobile call bar ----------
   Always anchored to the bottom edge; the cookie card floats above it. */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px -12px rgba(0,0,0,.45);
}
.sticky .btn { width: 100%; padding: 0 16px; }
@media (min-width: 760px) { .sticky { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}