/* ══════════════════════════════════════════════════════════════════════════
   znoghaideli — site.css
   WordPress additions on top of wireframe.css: things a real multi-page site
   needs that a single-file prototype did not (links instead of buttons, page
   content, galleries, pagination, admin bar, honeypot). Same tokens, same
   rules: 4px radius, amber is the only accent, no uppercase.
   ══════════════════════════════════════════════════════════════════════════ */

/* Links that the wireframe drew as <button>s. A button does not inherit the
   page's line-height (it uses `normal`) and its base font-size is the UA's
   13.333px; the wireframe's measurements depend on both. Reproduce them so a
   link renders at exactly the button's size. */
a.cell,a.chip,a.ref,a.jrn-s,.brand{text-decoration:none}
a.btn,a.chip,a.cell{line-height:normal}
a.cell{font-size:13.3333px}
a.chip{display:inline-block}
.cell-b .t3,.cell-b .t4{color:var(--ink)}

/* sticky header under the WP admin bar */
.admin-bar .hdr{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}}
@media(max-width:600px){.admin-bar .hdr{top:0}}

/* honeypot: present for bots, invisible for people and screen readers */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ── page content (privacy, terms, news posts, project text) ─────────── */
.prose{max-width:72ch;color:var(--ink-2)}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(19px,2vw,24px);margin-top:1.6em}
.prose h3{font-size:clamp(16.5px,1.5vw,19px);margin-top:1.4em}
.prose a{color:var(--accent-tx)}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:.35em}
.prose img,.prose figure{border-radius:var(--r);max-width:100%;height:auto}
.prose figure{margin:1.4em 0}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 16px;border-left:3px solid var(--accent);color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;font-size:13.6px}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}

/* ── breadcrumb line above detail pages ───────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.crumbs a:hover{color:var(--accent-tx);border-color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--ink-4)}

/* ── gallery thumbnails open a lightbox ───────────────────────────────── */
.gal button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal button img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh}
.lb::backdrop{background:rgba(10,14,18,.86)}
.lb img{max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:var(--r);margin:0 auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:#EEF2F6;font-size:13px}
.lb-bar button{background:none;border:1px solid #4A5663;color:#EEF2F6;border-radius:var(--r);padding:7px 13px;cursor:pointer;font-family:inherit}
.lb-bar button:hover{border-color:#EEF2F6}

/* ── video facade: the iframe loads only on click ─────────────────────── */
.vid{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0E1318}
.vid button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.85}
.vid .play{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:var(--r);
  background:var(--accent);display:grid;place-items:center}
.vid .play:after{content:"";border-left:16px solid var(--on-accent);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── map on the contact page ──────────────────────────────────────────── */
.map{margin-top:22px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-load{width:100%;height:100%;display:grid;place-items:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;color:var(--ink-3);font-size:13px;
  background:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 9px),var(--bg-2)}
.map-load b{color:var(--ink);font-weight:600}

/* ── category page: product cards and sub-category chips ──────────────── */
.pgrid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.pgrid{grid-template-columns:1fr}}
.ref-p{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:12.2px;color:var(--ink)}
.ref-p i{font-style:normal;font-family:var(--f-geo);color:var(--ink-3);font-size:12px}

/* ── project detail meta and related blocks ───────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,3.2vw,46px);align-items:start}
@media(max-width:1080px){.detail{grid-template-columns:1fr}}
.sect-h{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}

/* ── pagination ───────────────────────────────────────────────────────── */
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.pager .page-numbers{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surf);color:var(--ink-2);
  font-family:var(--f-mono);font-size:13px;text-decoration:none}
.pager .page-numbers:hover{border-color:var(--line-2);color:var(--ink)}
.pager .current{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}

/* screen-reader text (WP core class) */
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* the calculator script removes the skeleton; without JS keep it out of the way */
.no-js .skel{display:none}

/* Header fit. In the wireframe the brand was a <button>, which does not
   inherit the page font, so "მიქადელი" rendered in a fallback face ~20px
   narrower than Noto Sans Georgian. With the intended font the six nav items
   no longer fit on one line at 1241–1440px. Win the 20px back from the gaps
   instead of changing the font. */
@media(min-width:1241px){
  .hdr-row{gap:13px}
  .nav a{padding-inline:5px}
}

/* The footer brand is a link here (a <button> in the wireframe), so the
   wireframe's `.ftr a` rule would turn it inline and collapse the logo tile. */
.ftr a.brand{display:flex;padding:0;color:inherit}
.ftr a.brand:hover{color:inherit}

/* the e-mail error span is ours (the wireframe validates only name, phone, consent); no gap while empty */
#e-f-mail:empty{display:none}

/* ── custom-quote form on calculator step 1 (wireframe note, no drawing) ── */
.cq{display:grid;gap:16px;border-top:1px solid var(--line);padding-top:20px;scroll-margin-top:100px}
.cq.hide{display:none}
/* file picker: native input kept for keyboard/screen readers, visually replaced
   by a Georgian label button (the browser's own text would be in its UI language) */
.filepick{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surf);padding:9px 11px}
.filepick input[type=file]{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.filepick label{position:relative;pointer-events:none}
.filepick span{font-size:13.4px;color:var(--ink-3);overflow-wrap:anywhere}
.filepick:hover{border-color:var(--ink-3)}
.filepick:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ── category page filters: material chips + price range ──────────────── */
.fbar{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin:-6px 0 22px}
.fbar .chips{margin:0;align-items:center}
.fbar .lbl{margin-right:4px}
.frange{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.frange input[type=number]{width:110px;padding:8px 11px;font-size:13.6px}
.frange .btn{padding:8px 15px}

/* ── calculator step 2: dividers inside a sash / the top section (D-14, not in the wireframe) ── */
.dpanes{display:grid;gap:8px}
.dpane{display:grid;gap:11px;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;background:var(--bg)}
.dpane .dsz{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-left:4px}
.dbody{display:grid;gap:8px;padding-left:12px;border-left:2px solid var(--accent)}
.drow{display:grid;grid-template-columns:128px minmax(0,1fr) 68px 30px;gap:10px;align-items:center}
.dlb{font-size:12.2px;color:var(--ink-2)}
.drow input[type=range]{width:100%;margin:0;accent-color:var(--accent);cursor:pointer}
.drow output{font-family:var(--f-mono);font-size:12.5px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.dx{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  color:var(--ink-3);font-size:16px;line-height:1;cursor:pointer;padding:0}
.dx:hover{border-color:var(--ink-3);color:var(--ink)}
.dadd{display:flex;gap:8px;flex-wrap:wrap}
.dadd .btn{padding:7px 12px;font-size:12.6px}
.dadd .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){
  .drow{grid-template-columns:minmax(0,1fr) 68px 30px}
  .dlb{grid-column:1/-1}
}