/* ==========================================================================
   KalkulatorGodzin.pl — design system
   System-font stack on purpose: zero webfont requests = faster LCP/CLS.
   Personality comes from color, weight, spacing and the tabular time-digits.
   ========================================================================== */

:root{
  --ink:        #14213D;
  --ink-70:     #14213Db3;
  --paper:      #F7F6F2;
  --paper-2:    #FFFFFF;
  --line:       #DAD5C8;
  --amber:      #F2A104;
  --amber-dark: #C77F00;
  --teal:       #21867A;
  --teal-light: #E4F2EF;
  --red:        #B3311C;
  --shadow:     0 1px 2px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.06);
  --radius:     10px;
  --radius-lg:  16px;
  --font-ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --maxw:       1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:var(--teal)}
a:hover{color:var(--amber-dark)}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- top notice bar ---------- */
.notice-bar{
  background:var(--ink); color:#fff; font-size:13px; text-align:center;
  padding:6px 12px;
}
.notice-bar strong{color:var(--amber)}

/* ---------- header ---------- */
header.site-header{
  background:var(--paper-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; font-size:19px; letter-spacing:-0.01em}
.brand-mark{width:34px;height:34px;flex:0 0 auto}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--ink-70); letter-spacing:.03em}

nav.main-nav{display:flex; gap:22px}
nav.main-nav a{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600}
nav.main-nav a:hover{color:var(--teal)}

.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{padding:38px 0 20px}
.hero h1{
  font-size:clamp(28px,4vw,42px); line-height:1.15; letter-spacing:-0.02em;
  margin:0 0 10px; max-width:820px;
}
.hero h1 em{font-style:normal; color:var(--teal)}
.hero p.lead{font-size:17px; color:var(--ink-70); max-width:640px; margin:0 0 4px}
.trust-row{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:13.5px; color:var(--ink-70)}
.trust-row span{display:flex; align-items:center; gap:6px}
.trust-row svg{width:16px;height:16px; color:var(--teal); flex:0 0 auto}

/* ---------- calculator card ---------- */
.calc-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); margin-top:26px; overflow:hidden;
}
.tabs{display:flex; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--paper)}
.tab-btn{
  font:inherit; font-weight:700; font-size:14px; color:var(--ink-70);
  background:none; border:none; padding:14px 18px; cursor:pointer; white-space:nowrap;
  border-bottom:3px solid transparent;
}
.tab-btn[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--amber)}
.tab-btn:hover{color:var(--ink)}

.tab-panel{padding:26px 24px 30px; display:none}
.tab-panel.active{display:block; animation:fadein .25s ease}
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

.tab-panel h2{font-size:20px; margin:0 0 4px}
.tab-panel .sub{color:var(--ink-70); font-size:14.5px; margin:0 0 20px}

.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.field-grid{grid-template-columns:1fr}}

.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:700; color:var(--ink)}
.field input, .field select{
  font:inherit; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:20px; padding:11px 12px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); width:100%;
}
.field input:focus, .field select:focus{border-color:var(--teal); background:#fff}
.field .hint{font-family:var(--font-ui); font-size:12px; color:var(--ink-70); font-weight:400}

.op-row{display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0}
.op-btn{
  width:40px;height:40px;border-radius:50%; border:1.5px solid var(--line); background:#fff;
  font-size:18px; font-weight:800; cursor:pointer; color:var(--ink);
}
.op-btn[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

.btn{
  font:inherit; font-weight:700; font-size:15px; border:none; border-radius:8px;
  padding:13px 22px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{background:var(--amber); color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(242,161,4,.35)}
.btn-block{width:100%; margin-top:18px}

.result{
  margin-top:20px; padding:20px; border-radius:12px; background:var(--teal-light);
  border:1px solid #bfe2db; display:none;
}
.result.show{display:block; animation:fadein .3s ease}
.result .big{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(28px,6vw,40px); font-weight:800; color:var(--teal); letter-spacing:-0.01em;
}
.result .meta{font-size:13.5px; color:var(--ink-70); margin-top:6px}
.result.warn{background:#FBEAE6; border-color:#f0c3b8}
.result.warn .big{color:var(--red)}

.check-row{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px}
.check-row input{width:17px;height:17px}

/* ---------- content sections ---------- */
section.content{padding:44px 0}
section.content h2{font-size:26px; letter-spacing:-0.01em; margin:0 0 6px}
section.content .section-sub{color:var(--ink-70); margin:0 0 26px; max-width:640px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:800px){.grid-3{grid-template-columns:1fr}}

.card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; font-size:14.5px; color:var(--ink-70)}
.card .num{font-family:var(--font-mono); font-weight:800; color:var(--amber-dark); font-size:13px; letter-spacing:.04em}

.steps{counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:14px}
.steps li{
  counter-increment:step; position:relative; padding-left:44px; font-size:15px; color:var(--ink-70);
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-2px; width:30px;height:30px;
  background:var(--ink); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:14px;
}
.steps li b{color:var(--ink); display:block; font-size:15.5px; margin-bottom:2px}

.related-links{display:flex; flex-wrap:wrap; gap:10px}
.related-links a{
  display:inline-block; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:8px 14px; font-size:13.5px; text-decoration:none; color:var(--ink);
}
.related-links a:hover{border-color:var(--teal); color:var(--teal)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  padding:16px 4px; cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-size:22px; color:var(--teal); flex:0 0 auto; font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0 4px 16px; color:var(--ink-70); font-size:14.5px; max-width:680px}

/* author / EEAT box */
.author-box{
  display:flex; gap:16px; align-items:flex-start; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:26px;
}
.author-avatar{
  width:52px;height:52px;border-radius:50%; background:var(--ink); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
}
.author-box h3{margin:0 0 4px; font-size:15px}
.author-box p{margin:0; font-size:13.5px; color:var(--ink-70)}
.author-box .updated{font-size:12.5px; color:var(--ink-70); margin-top:8px}

/* sources */
.sources{font-size:13px; color:var(--ink-70)}
.sources li{margin-bottom:4px}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#cdd3e0; padding:40px 0 24px; margin-top:20px}
footer a{color:#fff; text-decoration:none}
footer a:hover{color:var(--amber)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin:0 0 12px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px}
.foot-note{border-top:1px solid #2a3a63; margin-top:30px; padding-top:20px; font-size:12.5px; color:#93a0bd; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

.legal-page main.wrap{padding:40px 20px 60px}
.legal-page h1{font-size:28px; margin-bottom:6px}
.legal-page .updated{color:var(--ink-70); font-size:13.5px; margin-bottom:30px}
.legal-page h2{font-size:19px; margin-top:32px}
.legal-page p, .legal-page li{color:var(--ink-70); font-size:15px}

@media (max-width:820px){
  nav.main-nav{position:fixed; inset:56px 0 auto 0; background:var(--paper-2); flex-direction:column;
    padding:10px 20px 20px; border-bottom:1px solid var(--line); display:none; gap:2px;}
  nav.main-nav.open{display:flex}
  nav.main-nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex; align-items:center; justify-content:center; width:38px;height:38px; background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer}
}