:root{
  --primary:#0f766e;
  --primary-dark:#115e59;
  --bg:#f3f4f6;
  --card-bg:#ffffff;
  --text:#111827;
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,0.07);
  --border:#e3e3e3;
  --soft-text:#666;
  --soft-bg:#eef9f3;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
}

/* CONTAINERS */
.container{width:95%;max-width:980px;margin:0 auto;}

/* HEADER */
.site-header{
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  padding:12px 0;
}
.header-inner{display:flex;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand-dot{width:16px;height:16px;background:var(--primary);border-radius:50%;}
.brand-name{font-weight:700;font-size:1.25rem;}

/* MAIN LAYOUT */
.page-main{padding:2.2rem 0 3rem;}
.hero-layout{display:flex;flex-direction:column;gap:2rem;}

.calc-column,.text-column{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

/* CARD */
.card{
  background:var(--card-bg);
  border-radius:1.1rem;
  padding:1.4rem 1.5rem 1.3rem;
  border:1px solid #e5e7eb;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

/* TITLES */
.calc-card h1{
  font-size:1.4rem;
  margin:0 0 .4rem 0;
  font-weight:800;
  text-align:center;
}
.calc-intro{
  font-size:.9rem;
  color:var(--soft-text);
  margin:0 0 .9rem 0;
  text-align:center;
}

/* SWITCH BUTTONS */
.period-switch,
.rate-switch{
  display:flex;
  gap:.5rem;
  margin-bottom:.8rem;
  flex-wrap:wrap;
}
.period-btn,
.rate-btn{
  flex:1 1 0;
  min-width:140px;
  border-radius:999px;
  border:1px solid #d1d5db;
  padding:.75rem 1.1rem;
  font-size:.95rem;
  background:#f9fafb;
  color:#111827;
  cursor:pointer;
  font-weight:700;
}
.period-btn.active,
.rate-btn.active{
  background:var(--primary);
  border-color:var(--primary-dark);
  color:#fff;
}
.rate-hint{
  font-size:.78rem;
  color:var(--soft-text);
  margin:-.2rem 0 .8rem;
  text-align:center;
}

/* FIELDS */
.field-row{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:.7rem;
}
.field-row label{
  font-size:.85rem;
  color:#111827;
  font-weight:700;
}
.field-row input,
.field-row select{
  border-radius:.55rem;
  border:1px solid #d1d5db;
  padding:.65rem .9rem;
  font-size:1rem;
  font-family:inherit;
  font-weight:650;
  background:#fff;
}
.field-row input::placeholder{font-weight:600;color:#9ca3af;}
.field-row input:focus,
.field-row select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 1px rgba(15,118,110,.18);
}
.field-row input[readonly]{
  background:#f9fafb;
  cursor:not-allowed;
}

/* INLINE ROWS */
.inline-row{display:flex;flex-direction:row;gap:.75rem;}
.field-group{flex:1;display:flex;flex-direction:column;gap:.25rem;}

@media(max-width:640px){
  .inline-row{flex-direction:column;}
}

/* CHECKBOX + HELP */
.checkbox-label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.85rem;
  color:#374151;
  font-weight:650;
}
.checkbox-label input[type="checkbox"]{width:16px;height:16px;}
.help-text{font-size:.78rem;color:var(--soft-text);margin-top:.3rem;}
.small-field{max-width:160px;}

/* ACTIONS */
.calc-actions{text-align:center;margin:1rem 0 .4rem;}
.btn-clear{
  border:none;
  border-radius:999px;
  padding:.8rem 2.1rem;
  font-size:.98rem;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn-clear:hover{background:var(--primary-dark);}
.calc-hint{
  font-size:.8rem;
  color:var(--soft-text);
  text-align:center;
  font-weight:650;
  margin-top:.6rem;
}

/* RESULT BOX (nettobruto) */
.result-box{
  margin-top:.9rem;
  margin-bottom:.3rem;
  padding:.9rem 1.1rem;
  border-radius:.9rem;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}
.result-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.95rem;
  margin-bottom:.2rem;
  font-weight:700;
}
.result-line:last-child{margin-bottom:0;}
.result-line.subtle{font-size:.85rem;color:#4b5563;font-weight:650;}
.result-label{font-weight:800;color:#047857;}

/* nettobruto result ids */
#netMonthNormal,
#netMonthHoliday,
#netYear,
#taxTotal{
  font-weight:900;
}

/* TEKSTKOLOM */
.text-column h2{
  font-size:1.25rem;
  margin:0 0 .4rem 0;
  font-weight:800;
}
.text-column h3{
  font-size:1.05rem;
  margin:1.1rem 0 .2rem 0;
  font-weight:800;
}
.text-column p{
  font-size:.9rem;
  color:#374151;
  margin:0 0 .55rem 0;
  font-weight:520;
}

/* FAQ */
.faq{
  margin-top:1.6rem;
  margin-bottom:2rem;
}
.faq .container{
  max-width:980px;
}
.faq h2{
  max-width:720px;
  margin:0 auto 1rem auto;
  padding:0 6px;
}
.faq-item{
  max-width:720px;
  margin:0 auto .75rem auto;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.9rem 1rem;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
}
.faq-item > summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::marker{content:"";}
.faq-item > summary::after{
  content:"›";
  font-size:22px;
  line-height:1;
  opacity:.75;
  transform:rotate(0deg);
  transition:transform .18s ease, opacity .18s ease;
}
.faq-item[open] > summary::after{
  transform:rotate(90deg);
  opacity:1;
}
.faq-item > p{
  margin:.75rem 0 0 0;
  line-height:1.6;
  color:#374151;
  font-weight:520;
}

/* BLOGS (GRID: geen overlap) */
.blog-section{
  margin-top:2.0rem;
  margin-bottom:2.8rem;
}
.blog-section-title{
  max-width:720px;
  margin:0 auto 18px auto;
  padding:0 6px;
  line-height:1.2;
}
.blog-grid{
  max-width:720px;
  margin:0 auto;
  padding:0 6px;

  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
}
.blog-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1rem 1.1rem;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
}
.blog-card h3{
  font-size:1.02rem;
  margin:0 0 .35rem 0;
  font-weight:800;
}
.blog-card p{
  font-size:.9rem;
  color:#374151;
  margin:0 0 .5rem 0;
  font-weight:520;
}
.blog-card p:last-child{margin-bottom:0;}
.seo-tags{
  margin-top:.25rem;
  padding-top:.35rem;
  border-top:1px dashed #e5e7eb;
  font-size:.78rem;
  color:rgba(107,114,128,0.95);
}
@media(min-width:1024px){
  .blog-grid{
    max-width:980px;              /* match container */
    grid-template-columns:1fr 1fr;
    gap:1.6rem;
  }
}

/* FOOTER */
.site-footer{
  padding:15px 0;
  border-top:1px solid var(--border);
  background:var(--card-bg);
  margin-top:40px;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  font-size:.9rem;
  color:var(--soft-text);
}
.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
  font-size:.85rem;
}
.footer-links a{color:var(--primary);text-decoration:none;font-weight:600;}
.footer-links a:hover{text-decoration:underline;}
.footer-sep{color:#9ca3af;}
.footer-copy{font-size:.85rem;color:var(--soft-text);}

/* SHARE BUTTON */
.header-share{position:relative;margin-left:auto;}
.header-share-btn{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:750;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:background .15s,transform .1s;
}
.header-share-btn:hover{background:var(--primary-dark);transform:translateY(-1px);}
.header-share-menu{
  display:none;
  position:absolute;
  right:0;
  top:120%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  padding:.35rem 0;
  min-width:180px;
  z-index:9999;
}
.header-share-menu.open{display:block;}
.header-share-item{
  width:100%;
  border:none;
  background:transparent;
  text-align:left;
  padding:.45rem .9rem;
  font-size:.82rem;
  cursor:pointer;
  color:#111827;
}
.header-share-item:hover{background:#f3f4f6;}
.header-share-toast{
  position:absolute;
  right:0;
  top:-28px;
  background:#111827;
  color:#fff;
  font-size:.75rem;
  padding:3px 10px;
  border-radius:20px;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .15s,transform .15s;
}
.header-share-toast.show{opacity:1;transform:translateY(-10px);}

/* RESPONSIVE */
@media(max-width:768px){
  .page-main{padding-top:1.6rem;}
  .card{padding:1.2rem 1.1rem 1.1rem;}
}
@media(min-width:1024px){
  .text-column{
    background:#fff;
    padding:24px;
    border-radius:14px;
    box-shadow:0 6px 20px rgba(0,0,0,0.07);
  }
  .calc-card h1{font-size:2.0rem;}
  .calc-intro{font-size:.98rem;}
  .field-row label{font-size:1.0rem;}
  .field-row input,.field-row select{padding:.95rem 1.4rem;font-size:1.18rem;}
  .btn-clear{font-size:1.02rem;padding:.95rem 2.4rem;}
  .calc-hint{font-size:.96rem;}
  .text-column h2{font-size:1.5rem;}
  .text-column p{font-size:.96rem;}
}