/*
Theme Name: KONSTRADO HR
Description: Procedury HR, jawność płac i zewnętrzna obsługa zgłoszeń. Edytowalny motyw blokowy.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: konstrado-hr
*/

:root{--navy:#112d39;--teal:#146d65;--mint:#d7eee5;--paper:#f6f5ef;--ink:#18333c;--muted:#51646a;--line:#d7dfdc}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Arial,sans-serif}
a{color:inherit}
button,input,select,textarea{font:inherit}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dc7d39;outline-offset:5px}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
header{background:var(--paper);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{text-decoration:none;font-size:25px;font-weight:800;letter-spacing:2px}
.brand small{display:block;font-size:9px;letter-spacing:2.4px;font-weight:600}
.links{display:flex;gap:25px;align-items:center;font-size:14px}
.links a{text-decoration:none}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;background:var(--teal);color:white;padding:14px 23px;border-radius:4px;text-decoration:none;border:1px solid var(--teal);font-size:15px;font-weight:700;cursor:pointer}
.btn:hover{background:#0b524c}
.btn.light{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.btn.outline{background:transparent;border-color:var(--line);color:var(--ink)}
.hero{display:grid;grid-template-columns:1.18fr 1fr;gap:65px;align-items:center;padding:86px 0 72px}
.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-size:11px;font-weight:700;color:var(--teal);margin:0 0 24px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,5.1vw,66px);line-height:1.07;font-weight:500;letter-spacing:-2.8px;margin-bottom:27px}
h1 em{font-family:Georgia,serif;font-weight:400;color:var(--teal)}
.lead{color:var(--muted);font-size:18px;max-width:610px}
.actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:29px}
.small{font-size:13px;color:var(--muted)}
.diagram{background:var(--navy);color:#fff;padding:40px;border-radius:6px;position:relative;box-shadow:16px 16px 0 #e4e7df}
.diagram .eyebrow{color:#a7daca}
.diagram h2{font-size:30px;font-weight:400;line-height:1.25;max-width:330px}
.diagram-item{padding:22px 0;display:grid;grid-template-columns:40px 1fr;gap:16px;border-top:1px solid #42616b}
.diagram-item > p:first-child{font:italic 25px Georgia;color:#9ed7c5}
.diagram-item strong{display:block;font-size:17px}
.diagram-item p{color:#b9cfd2;font-size:13px;margin:3px 0 0}
.diagram-foot{font-size:12px;color:#a7daca;padding-top:17px;border-top:1px solid #42616b}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 0}
.strip .wrap{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.section{padding:86px 0}
.heading{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:42px}
h2{font-size:clamp(30px,3.5vw,43px);line-height:1.18;letter-spacing:-1.3px;font-weight:500;margin-bottom:20px}
.heading p{color:var(--muted);margin-bottom:20px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.card{border:1px solid var(--line);padding:30px;background:#fff;display:flex;flex-direction:column;border-radius:4px}
.number{font-family:Georgia,serif;font-size:25px;color:var(--teal);margin-bottom:25px}
.card h3{font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.5px}
.card p,.card li{font-size:15px;color:var(--muted)}
ul{padding-left:19px;margin:0 0 25px}
li{margin-bottom:9px}
.card .textlink{margin-top:auto}
.textlink{font-size:14px;font-weight:700;text-underline-offset:5px}
.dark{background:var(--navy);color:#fff}
.dark .eyebrow{color:#9ed7c5}
.dark .heading p,.dark .muted{color:#b9cfd2}
.support{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.support article{border-top:1px solid #49616a;padding:25px 0 12px}
.support h3{font-size:21px;font-weight:500}
.support p{font-size:15px;color:#bdd0d2}
.support a{color:#bcebd9}
.note{font-size:13px;border-left:3px solid #81bca6;padding-left:18px;margin:25px 0 0;color:#bdd0d2}
.subscription{background:var(--mint);display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:48px;border-radius:5px}
.subscription h2{max-width:480px}
.subscription p{color:#375e58}
.subscription ul{font-size:16px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.step{border-top:2px solid var(--teal);padding-top:20px}
.step .small{color:var(--teal);font-weight:700}
.step h3{font-size:20px;line-height:1.3;margin:15px 0}
.step p{font-size:14px;color:var(--muted)}
.team{background:#eaece5}
.team .card{background:transparent;border:0;border-left:1px solid #becbc3;border-radius:0}
.team .card:first-child{border-left:0}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-size:17px;font-weight:600;padding-right:20px}
details p{font-size:15px;color:var(--muted);margin:15px 0 0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact a{overflow-wrap:anywhere}
.request{padding:30px;background:#fff;border:1px solid var(--line);border-radius:4px}
.request h3{font-size:23px;font-weight:500}
label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}
select{width:100%;padding:13px;border:1px solid #a9bbb6;background:#fff;color:var(--ink);border-radius:3px;margin-bottom:20px}
.request .btn{width:100%}
footer{padding:30px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:10}
.preview{background:#e8ecdf;color:#4e6255;text-align:center;font-size:11px;padding:6px 15px}
.mobile{display:none}
@media(max-width:950px){.links{gap:13px}
.links a:not(.btn){display:none}
.hero{gap:32px}
.diagram{padding:28px}
h1{font-size:49px}
.services{gap:14px}
.card{padding:22px}
.heading{gap:35px}
}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}
.nav{min-height:75px;gap:12px}
.brand{font-size:19px}
.brand small{font-size:7px}
.links .btn{padding:10px 12px;font-size:11px}
.hero{grid-template-columns:1fr;padding:50px 0;gap:40px}
h1{font-size:44px;letter-spacing:-1.8px}
.diagram{box-shadow:8px 8px 0 #e4e7df}
.strip .wrap{flex-wrap:wrap;justify-content:flex-start;gap:12px 25px;font-size:10px}
.section{padding:54px 0}
.heading,.services,.support,.subscription,.faq,.contact{grid-template-columns:1fr;gap:23px}
.heading{margin-bottom:25px}
.subscription{padding:28px}
.process{grid-template-columns:1fr 1fr}
.team .card{border-left:0;border-top:1px solid #becbc3;padding-left:0}
.team .card:first-child{border-top:0}
footer .wrap{flex-direction:column;gap:7px}
.lead{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > header { top: var(--wp-admin--admin-bar--height, 0px); }
.wrap { max-width: 1180px; }
.brand img { display:block; width:192px; max-width:100%; height:auto; mix-blend-mode:multiply; }
.brand small { margin-top:5px; }
.action-link, .strip p, footer p { margin:0; }
.card .action-link { margin-top:auto; }
.diagram-item > p:first-child { font:italic 25px Georgia,serif; color:#9ed7c5; }
.diagram-item strong { color:white; }
.diagram-item p:has(>strong) { margin:0; }
.mail-link { margin:20px 0; }
.contact input,.contact textarea { width:100%; border:1px solid #a9bbb6; border-radius:3px; padding:10px; color:var(--ink); background:white; margin-bottom:13px; }
.contact textarea { min-height:100px; resize:vertical; }
.contact select { margin-bottom:13px; }
.contact .trap { position:absolute; left:-10000px; }
.request { min-width:0; }
.notice { padding:12px; background:var(--mint); }
.hero,.process,.support,.services,.contact,.heading,.subscription,.faq { margin-block-start:0; }
@media(max-width:700px){ .brand img {width:140px;} .hero > *, .contact > * {min-width:0;} .process {gap:18px;} }
@media(max-width:420px){ .process {grid-template-columns:1fr;} .nav {gap:8px;} }