/*
Theme Name: Factory Base
Theme URI: https://maysterpro.com.ua
Description: Lightweight per-site theme (family: construction, layout: listfirst).
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;flex-direction:column;text-align:center}
.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;margin:0}
.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)}
/* Overflow menu ("priority+").
   The header is one row; a rubric with a long name used to wrap onto a second
   line and push the whole header apart. Anything that does not fit moves under
   this toggle instead — see the script in the footer.
   Wrapping stays the default so that WITHOUT javascript the menu is merely
   ugly rather than truncated: an item that is neither visible nor reachable is
   worse than a second line. */
.nav li.nav-more{position:relative;display:flex;align-items:center}
/* The same three bars as the mobile burger, deliberately: one sign for
   "there are more items here" beats two, and the visitor has already met it
   on their phone. */
/* Centred in the header row, and left there.
   A link's inline box does not sit exactly in the middle of that row — half
   leading is split unevenly around the baseline — so the icon can look about a
   pixel off against the text. A nudge that closes the gap was tried and
   removed: the correction is font-metric specific, and the factory ships
   eleven font families, so 0.06em landed dead-on for one of them and overshot
   by the same amount on the next. Row centring is wrong by at most a pixel
   everywhere, which beats being exact somewhere and worse elsewhere.
   vertical-align:middle is not the answer either: it aligns to the middle of
   the lowercase letters, two pixels lower still. */
.nav li.nav-more>button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;line-height:0;color:var(--ink)}
.nav li.nav-more>button .bars{display:inline-block;width:22px}
.nav li.nav-more>button .bars span{display:block;height:2px;background:currentColor;border-radius:2px}
.nav li.nav-more>button .bars span+span{margin-top:5px}
/* Open state is the accent colour, and nothing else. The mobile burger folds
   its bars into a cross; the same rules on this button did not take effect in
   the browser even though the selector matches and the colour beside them
   does apply — unexplained, so it is not shipped. The dropdown appearing right
   under the icon is the feedback that matters anyway. */
.nav li.nav-more>button[aria-expanded=true]{color:var(--accent)}
.nav li.nav-more>ul{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;flex-direction:column;gap:0;min-width:220px;max-width:min(320px,80vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 28px rgba(0,0,0,.14);padding:6px 0}
.nav li.nav-more[data-open=true]>ul{display:flex}
.nav li.nav-more>ul li{border-bottom:1px solid var(--line)}
.nav li.nav-more>ul li:last-child{border-bottom:none}
.nav li.nav-more>ul a{display:block;padding:10px 14px;font-size:15px}
.nav li.nav-more>ul a:hover{background:var(--bg);text-decoration:none}
.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 li.nav-more{display: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}
}