/* SALOPINO / PALVELUSIVUJEN YLÄVALIKKO
   Malli: etusivun 68px korkea vaalea yläpalkki, sama typografia,
   välit, pyöreät painikkeet ja tunnisteet. Muokkaa vain tätä tiedostoa
   muuttaaksesi kaikkien 6 Ratkaisut-sivun valikkotyyliä.
   Linkit: HTML:n SALOPINO / PÄÄVALIKKO -osiossa.
*/
.sal-header,.sal-header *{box-sizing:border-box}
.sal-header{position:sticky;top:0;z-index:1000;background:rgba(246,246,243,.96);border-bottom:1px solid rgba(0,0,0,.05);backdrop-filter:blur(16px);color:#0e0e0e;font-family:Inter,Arial,sans-serif}
.sal-header-inner{max-width:1440px;min-height:68px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sal-header a{color:inherit;text-decoration:none}
.sal-brand{display:flex;align-items:center;gap:12px;flex-shrink:0;white-space:nowrap}
.sal-mark{display:grid;place-items:center;width:32px;height:32px;background:#0e0e0e;color:white;border-radius:8px;font-size:13px;font-weight:750}
.sal-brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.sal-brand-text strong{font-size:15px;letter-spacing:-.02em;font-weight:700}
.sal-brand-text small{font-size:10px;color:#777;letter-spacing:1px}
.sal-response{display:flex;align-items:center;gap:8px;margin-left:14px;flex-shrink:0;padding:6px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:white;font-size:10px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.sal-response i{width:6px;height:6px;background:#10b981;border-radius:50%}
.sal-primary{display:flex;align-items:center;gap:4px;margin-left:auto;white-space:nowrap}
.sal-primary>a.sal-pill,.sal-menu>summary.sal-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:14px;line-height:20px;font-weight:500;background:transparent;border:0;cursor:pointer;min-height:36px}
.sal-primary>a.sal-pill:hover,.sal-menu>summary:hover{background:rgba(0,0,0,.05)}
/* Etusivun nykyisen toteutuksen mustat korostukset */
.sal-primary>a.sal-home-pill,.sal-primary>a.sal-blog-pill{background:#000;color:#fff}
.sal-primary>a.sal-home-pill:hover,.sal-primary>a.sal-blog-pill:hover{background:#232323}
.sal-menu{position:relative}
.sal-menu>summary{list-style:none}
.sal-menu>summary::-webkit-details-marker{display:none}
.sal-dropdown{position:absolute;top:100%;left:0;min-width:215px;background:white;border:1px solid #e7e7e7;border-radius:14px;padding:8px;box-shadow:0 12px 32px #0002;display:grid;z-index:1010}
.sal-menu:not([open]) .sal-dropdown{display:none}
.sal-dropdown a{display:block;border-radius:8px;padding:9px 12px;font-size:13px;white-space:nowrap}
.sal-dropdown a:hover{background:#f5f5f5}
.sal-region{flex-shrink:0;border-radius:999px;background:#fef3c7;padding:7px 12px;font-size:11px;line-height:1.2;font-weight:650;max-width:140px}
.sal-cta{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:36px;padding:9px 20px;border-radius:999px;background:#3b82f6!important;color:white!important;font-size:13px;line-height:1.2;font-weight:650;text-align:center}
.sal-cta:hover{background:#2563eb!important}
.sal-mobile{display:none;position:relative;margin-left:auto}
.sal-mobile>summary{cursor:pointer;display:grid;place-items:center;border-radius:999px;background:#111;color:white;width:36px;height:36px;list-style:none}
.sal-mobile>summary::-webkit-details-marker{display:none}
.sal-mobile-links{position:absolute;z-index:1010;right:0;top:calc(100% + 8px);width:245px;max-height:75vh;overflow:auto;display:grid;gap:2px;background:white;border:1px solid #ddd;border-radius:14px;padding:10px;box-shadow:0 12px 32px #0002}
.sal-mobile-links a,.sal-mobile-links b{padding:8px 12px;font-size:13px;color:#111;border-radius:8px}
.sal-mobile-links a:hover{background:#eee}
.sal-mobile-links b{background:#f3f4f6}
/* RESPONSIVE NAVIGATION: maintain CTA visibility, prevent header overflow.
   Main nav switches to compact menu before its children exceed available width.
   Cookiebot banner registration is configured in Cookiebot, not this stylesheet. */
.sal-header-inner{width:100%;max-width:1440px;min-width:0}
.sal-primary{min-width:0}
.sal-cta{white-space:normal}
@media(max-width:1900px){.sal-response{display:none}}
@media(max-width:1510px){.sal-region{display:none}}
@media(max-width:1390px){.sal-primary{display:none}.sal-mobile{display:block}.sal-cta{display:flex}}
@media(max-width:700px){
  .sal-header-inner{padding:8px 12px;gap:8px;min-height:64px}
  .sal-brand{gap:7px}
  .sal-brand-text strong{font-size:12px}
  .sal-brand-text small{font-size:9px}
  .sal-cta{font-size:11px;line-height:1.1;min-height:36px;padding:8px 11px;max-width:135px;margin-left:auto}
  .sal-mobile{margin-left:0;flex-shrink:0}
}
@media(max-width:460px){
  .sal-brand-text strong{font-size:11px;max-width:125px;white-space:normal}
  .sal-brand-text small{display:none}
  .sal-mark{width:28px;height:28px;flex-shrink:0}
  .sal-cta{font-size:10px;max-width:116px;padding:8px 7px}
  .sal-mobile>summary{width:34px;height:34px}
  .sal-mobile-links{width:min(250px,calc(100vw - 22px))}
}
@media(max-width:360px){
  .sal-brand-text{display:none}
  .sal-header-inner{padding:8px 9px}
  .sal-cta{max-width:160px}
}