/*
Theme Name: Factory Base
Theme URI: https://instrumentypro.com.ua
Description: Lightweight per-site theme (family: construction, layout: grid).
Version: 2.0
Text Domain: factory-base
*/
:root{
--bg:#f4f5f6;--surface:#ffffff;--ink:#1b1f24;--muted:#5f6873;
--line:#dfe3e8;--chip:#eceff2;--accent:#b26a00;--accent-ink:#ffffff;
--accent2:#2c5c8a;--radius:6px;
--shadow:0 1px 2px rgba(20,25,30,.05),0 8px 24px rgba(20,25,30,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;line-height:1.25;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:34px}h2{font-size:26px}h3{font-size:21px}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:99}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:20px;padding-block:14px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;font-weight:700;font-size:17px;flex:0 0 auto}
/* A generated mark comes with its own transparent background — putting the
   accent square behind it would frame someone else's shape in a coloured box. */
.brand-mark-img{background:none;object-fit:contain}
.brand-name{font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;font-weight:700;font-size:20px;line-height:1.1}
/* An uploaded logo is whatever size it was made at — a 741px file would push
   the whole header apart. The theme declares 240x60 as its slot, so the image
   is held to that height and lets its width follow. */
.custom-logo-link{display:inline-flex;align-items:center;flex:0 0 auto}
.custom-logo{max-height:60px;width:auto;max-width:min(280px,52vw);object-fit:contain}
.brand-tag{color:var(--muted);font-size:12px}
.nav{margin-left:auto;}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0}
.nav a{color:var(--ink);font-weight:600;font-size:15px}
.nav .current-menu-item>a{color:var(--accent)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;cursor:pointer;line-height:0}
.nav-toggle .bars{display:inline-block;width:22px}
.nav-toggle .bars span{display:block;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle .bars span+span{margin-top:5px}
.nav-toggle[aria-expanded=true] .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle .bars span{transition:transform .18s ease,opacity .18s ease}
@media(prefers-reduced-motion:reduce){.nav-toggle .bars span{transition:none}}

/* generic cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card-body{padding:16px 18px}
.card h2,.card h3{margin:0 0 6px}
.card a.title{color:var(--ink)}
.card a.title:hover{color:var(--accent);text-decoration:none}
.meta{color:var(--muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cat-chip{display:inline-block;background:var(--accent2);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:calc(var(--radius) / 1.5)}
.cat-chip:hover{text-decoration:none;opacity:.9}
.excerpt{color:var(--muted);font-size:15px;margin:6px 0 0}
.more{display:inline-block;margin-top:10px;background:var(--accent);color:var(--accent-ink);padding:7px 15px;border-radius:var(--radius);font-size:14px;font-weight:600}
.more:hover{text-decoration:none;opacity:.92}

/* hero: mosaic */
.hero{margin:22px 0}
.mosaic{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto auto;gap:14px}
.mosaic .m1{grid-row:span 2}
.mosaic .m4row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:190px;background:var(--chip);display:flex;align-items:flex-end}
.tile.big{min-height:400px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .veil{position:relative;width:100%;padding:18px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 65%);color:#fff}
.tile .veil h2,.tile .veil h3{color:#fff;margin:6px 0 0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.tile .veil a{color:#fff}
.tile .veil .meta{color:rgba(255,255,255,.85)}
.tile .veil .cat-chip{position:relative}

/* hero: grid + listfirst */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lead{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
.lead .thumb{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--chip)}
.lead .thumb img{width:100%;height:100%;object-fit:cover}
.row-list{display:flex;flex-direction:column;gap:14px}
.row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.row .thumb{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--chip)}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.row h3{font-size:17px;margin:0 0 4px}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;margin:26px 0 50px}
.section-title{font-size: 19px;font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--accent);display:inline-block}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}
.widget h3{font-size: 19px;margin:0 0 12px;font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif}
.widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.widget li a{color:var(--ink);font-weight:600;font-size:15px}
.widget li a:hover{color:var(--accent);text-decoration:none}
.mini{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start}
.mini .thumb{border-radius:calc(var(--radius) / 1.5);overflow:hidden;aspect-ratio:1;background:var(--chip)}
.mini .thumb img{width:100%;height:100%;object-fit:cover}
.searchform{display:flex;gap:8px}
.searchform input[type=search]{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;font:inherit;background:var(--bg);color:var(--ink)}
.searchform button{border:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);padding:8px 14px;cursor:pointer;font-weight:600}

/* single */
.crumbs{color:var(--muted);font-size:13px;margin:18px 0 10px}
.crumbs a{color:var(--muted)}
.entry{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px}
.entry h1{margin-top:0}
.entry-hero{border-radius:var(--radius);overflow:hidden;margin:16px 0 22px}
.entry-content{font-size:18px}
.entry-content h2{margin-top:1.4em}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content blockquote{margin:1.4em 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent);color:var(--muted)}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content td,.entry-content th{border:1px solid var(--line);padding:8px 10px}
.entry-content figure{margin:1.4em 0}
/* greeting cards: a block of text people came to take away, the button that
   gives it to them, and the postcard under it. The button is styled as the
   main action of the card — on these pages copying IS the visit. */
.fx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:1em 0 .6em}
.fx-card-text p{margin:0 0 .6em}
.fx-card-text p:last-child{margin-bottom:0}
.fx-copy{margin-top:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:0;border-radius:var(--radius);padding:9px 18px;background:var(--accent);color:var(--accent-ink)}
.fx-copy:hover{filter:brightness(1.07)}
.fx-copy[data-state=done]{background:var(--chip);color:var(--ink)}
.fx-card+p+figure,.fx-card~figure{margin-top:.6em}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.share span{color:var(--muted);font-size:14px;margin-right:2px}
.share a{display:inline-block;padding:6px 13px;border-radius:var(--radius);background:var(--chip);color:var(--ink);font-size:14px;font-weight:600}
.share a:hover{background:var(--accent);color:var(--accent-ink);text-decoration:none}
/* comments — the one place on the site that renders WordPress's own markup, so
   every class it emits needs a rule here or the block falls back to browser
   defaults (bare inputs, Times New Roman, a grey submit button) */
.comments{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.comments .comment-list,.comments ol,.comments ul.comment-list{list-style:none;padding:0;margin:0}
.comments .comment-list ol.children{list-style:none;margin:12px 0 0 22px;padding-left:14px;border-left:2px solid var(--line)}
.comments .comment-body{border-bottom:1px solid var(--line);padding:14px 0}
.comments .comment-list>li:last-child>.comment-body{border-bottom:none}
.comments .comment-author{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-weight:600}
.comments .comment-author .says{display:none}
.comments .comment-metadata,.comments .comment-meta{color:var(--muted);font-size:13px}
.comments .comment-metadata a{color:var(--muted)}
.comments .comment-content{margin-top:6px}
.comments .comment-content p{margin:0 0 .7em}
.comments .reply{margin-top:6px}
.comments .comment-reply-link{display:inline-block;background:var(--chip);color:var(--ink);border-radius:var(--radius);padding:4px 12px;font-size:13px;font-weight:600}
.comments .comment-reply-link:hover{background:var(--accent);color:var(--accent-ink);text-decoration:none}
.comments .comment-awaiting-moderation{display:inline-block;margin-top:6px;background:var(--chip);color:var(--muted);border-radius:var(--radius);padding:3px 10px;font-size:13px}
.comments .comment-respond{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.comments .comment-list .comment-respond{border-top:none;padding-top:0}
.comment-reply-title{font-size: 19px;font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;margin:0 0 4px;font-size:19px}
.comment-reply-title small{font-size:14px;font-weight:400;margin-left:10px}
.comment-notes,.comment-form-cookies-consent label,.form-allowed-tags{color:var(--muted);font-size:14px}
.comment-form{display:flex;flex-direction:column;gap:12px;max-width:560px;margin-top:12px}
.comment-form p{margin:0;display:flex;flex-direction:column;gap:5px}
.comment-form label{font-size:14px;color:var(--muted)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;width:100%}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:8px}
.comment-form .comment-form-cookies-consent input{width:auto}
.comment-form .form-submit{margin:0}
.comment-form input[type=submit]{align-self:flex-start;width:auto;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius);padding:11px 24px;font:inherit;font-weight:600;cursor:pointer}
.comment-form input[type=submit]:hover{opacity:.92}
.no-comments,.nocomments{color:var(--muted)}

/* pagination + footer */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.pagination .page-numbers{padding:7px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.pagination .current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:28px 0 36px;color:var(--muted);font-size:14px}
.foot{display:flex;gap:18px 28px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.foot-name{font-family:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;font-weight:700;color:var(--ink);font-size:16px;margin-bottom:2px}
.foot-nav ul{list-style:none;display:flex;gap:8px 20px;flex-wrap:wrap;margin:0;padding:0}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}

/* contact form */
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:520px;margin-top:8px}
.contact-form label{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--muted)}
.contact-form input,.contact-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.contact-form button{align-self:flex-start;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius);padding:11px 24px;font:inherit;font-weight:600;cursor:pointer}
/* Honeypot: off-screen for people, filled in by bots. Global, not scoped to the
   contact form — the comment form carries the same field. */
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-notice{padding:10px 14px;border-radius:var(--radius)}
.form-notice.ok{background:rgba(46,139,87,.12);color:#1d6b45}
.form-notice.bad{background:rgba(180,60,45,.12);color:#8f2f1f}

@media(max-width:900px){
.layout{grid-template-columns:1fr}
.mosaic{grid-template-columns:1fr}
.mosaic .m1{grid-row:auto}
.tile.big{min-height:260px}
.grid3{grid-template-columns:1fr 1fr}
.lead{grid-template-columns:1fr}
h1{font-size:27px}h2{font-size:22px}
.entry{padding:20px 18px}
}
@media(max-width:640px){
body{font-size:16px}
.wrap{padding:0 16px}
.hdr{flex-wrap:wrap;flex-direction:row;text-align:left;align-items:center;gap:12px;padding-block:12px}
.brand{gap:9px;min-width:0}
.brand-name{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-logo{max-height:42px;max-width:62vw}
.nav-toggle{display:block;flex:0 0 auto}
.nav{display:none;width:100%;margin:0}
.nav.open{display:block}
.nav ul{flex-direction:column;gap:0;padding:6px 0 2px;border-top:1px solid var(--line)}
.nav li{border-bottom:1px solid var(--line)}
.nav li:last-child{border-bottom:none}
.nav a{display:block;padding:12px 2px;font-size:16px}
.hero{margin:16px 0}
.layout{gap:20px;margin:20px 0 36px}
.grid3{grid-template-columns:1fr}
.row{grid-template-columns:92px 1fr}
.entry{padding:18px 16px}
.foot{flex-direction:column;gap:14px}
.foot-nav ul{flex-direction:column;gap:10px}
}