/*
Theme Name: SKH 2026
Description: SKH-Isännöinnin sivustoteema. Tyylit johdettu 2026 prototyypistä.
Author: SKH-Isännöinti Oy
Version: 1.0
Text Domain: skh2026
*/

:root{
  --cyan:#01B5DA; --cyan-deep:#046A82; --cyan-darker:#02505F;
  --ink:#0E2A3D; --ink-soft:#3F5666; --band:#12455C;
  --mist:#F2F7F9; --paper:#FFFFFF; --rule:#DCE6EA;
  --display:"Outfit",system-ui,sans-serif;
  --body:"Source Sans 3",system-ui,sans-serif;
  --wrap:1180px; --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.14;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:300}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:400}
h3{font-size:1.28rem;font-weight:500}
h4{font-size:1.05rem;font-weight:600}
p{margin:0}
a{color:var(--cyan-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.stack>*+*{margin-top:18px}

.eyebrow{font-family:var(--display);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-deep);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--cyan);flex:none}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:1rem;font-weight:500;padding:14px 26px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.18s ease}
.btn-main{background:var(--ink);color:#fff}
.btn-main:hover{background:var(--cyan-darker)}
.btn-line{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--cyan);background:var(--mist)}
.btn-cyan{background:var(--cyan);color:var(--ink);font-weight:600}
.btn-cyan:hover{background:#00A3C4}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(255,255,255,.08)}
.btn svg{width:15px;height:15px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:14px}

header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:30px;height:82px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border-bottom:none;flex:none}.brand:hover{text-decoration:none;border-bottom:none;background:transparent}.brand img{height:48px;width:auto;display:block}.brand-tag{font-family:var(--display);font-weight:500;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-deep);white-space:nowrap;text-decoration:none;line-height:1;border-left:1px solid var(--rule);padding-left:12px}header .wrap{max-width:1320px}@media(min-width:961px){#nav ul{gap:18px}}@media(min-width:961px) and (max-width:1099px){#nav ul{gap:10px}nav a{font-size:.88rem}}@media(min-width:961px) and (max-width:1299px){.brand-tag{display:none}}@media(max-width:480px){.brand img{height:38px}.brand-tag{font-size:.48rem;letter-spacing:.1em}}
nav{margin-left:auto}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{font-family:var(--display);font-size:.96rem;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover{border-bottom-color:var(--cyan)}
nav a.on{border-bottom-color:var(--cyan);font-weight:500}
.bar .btn{flex:none;padding:11px 20px;font-size:.95rem}
.burger{display:none;background:none;border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;margin-left:auto}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}


/* puolitumma välipalkki */
.band{background:var(--band);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.band .wrap{position:relative}
.band h2,.band h3,.band h4{color:#fff}
.band p{color:#CFE3EC}
.band .eyebrow{color:#9BDDEE}
.band .eyebrow::before{background:var(--cyan)}
.band .sec-head{margin-bottom:36px}
.band .sec-head p{color:#CFE3EC}
.band .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);overflow:hidden}
.band .task{background:transparent;color:#fff;border-top:0;padding:32px 28px}
.band .task:hover{background:rgba(255,255,255,.07)}
.band .task p{color:#CFE3EC}
.band .task-n,.band .task-go{color:#9BDDEE}
.band .num b{color:#9BDDEE}
.band .num span{color:#CFE3EC}
.band .num-grid{gap:28px}
.band ul.ticks li{color:#CFE3EC}
.band ul.ticks li b{color:#fff}
.band ul.ticks li::before{background:var(--cyan)}
.band .quote p{color:#fff}
.band .mark{color:var(--cyan)}
.band .quotes{gap:28px}
@media (max-width:960px){.band .grid{grid-template-columns:1fr}.band{padding:44px 0}}
/* WP: sivut ovat oikeita sivuja */


.dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--cyan) 1.9px,transparent 2px);background-size:19px 19px;-webkit-mask-image:linear-gradient(105deg,transparent 34%,#000 100%);mask-image:linear-gradient(105deg,transparent 34%,#000 100%);opacity:.5}
.dots-r{-webkit-mask-image:linear-gradient(255deg,transparent 40%,#000 100%);mask-image:linear-gradient(255deg,transparent 40%,#000 100%);opacity:.32}

.hero{position:relative;overflow:hidden}
.hero-in{position:relative;padding:88px 0 96px;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--cyan-deep)}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:34em}
.hero-fig{position:relative}
.hero-fig img{width:100%;height:420px;object-fit:cover;border-radius:var(--r);display:block}
.badge{position:absolute;left:-22px;bottom:26px;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--cyan);padding:16px 22px;max-width:220px}
.badge b{font-family:var(--display);font-size:1.9rem;font-weight:500;display:block;line-height:1}
.badge span{font-size:.86rem;color:var(--ink-soft)}

.phead{position:relative;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--rule);padding:72px 0 68px}
.phead h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:20px}
.phead .lead{font-size:1.16rem}
.phead .wrap{position:relative}

.tasks{background:var(--mist);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tasks .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.task{background:var(--paper);padding:40px 32px 34px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.18s ease;border-top:3px solid transparent}
.task:hover{border-top-color:var(--cyan)}
.task-n{font-family:var(--display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-deep);margin-bottom:14px}
.task h3{margin-bottom:10px}
.task p{color:var(--ink-soft);font-size:1rem;flex:1;margin-bottom:20px}
.task-go{font-family:var(--display);font-weight:500;color:var(--cyan-deep);display:flex;align-items:center;gap:8px}
.task:hover .task-go svg{transform:translateX(4px)}
.task-go svg{width:15px;height:15px;transition:.18s ease}

section{padding:92px 0}
.tight{padding:60px 0}
.sec-head{max-width:40em;margin-bottom:52px}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;margin-top:18px}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pillar{border-top:1px solid var(--rule);padding-top:26px}
.pillar h3{margin-bottom:12px}
.pillar p{color:var(--ink-soft);font-size:1rem}

.card{border:1px solid var(--rule);border-radius:var(--r);padding:34px 32px;background:var(--paper)}
.card h3{margin-bottom:12px}
.card p{color:var(--ink-soft);font-size:1rem}
.card-hi{border-top:3px solid var(--cyan)}

ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding-left:32px;margin-bottom:14px;color:var(--ink-soft)}
ul.ticks li::before{content:"";position:absolute;left:0;top:10px;width:16px;height:16px;border-radius:50%;background:var(--cyan)}
ul.ticks li b{color:var(--ink);font-weight:600}

.numbers{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.numbers .wrap{position:relative}
.numbers h2,.numbers h3{color:#fff}
.numbers .eyebrow{color:var(--cyan)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.num b{font-family:var(--display);font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:300;display:block;line-height:1;color:var(--cyan)}
.num span{display:block;margin-top:12px;color:#B9CBD6;font-size:.97rem}

.quotes{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.quote{background:var(--mist);padding:34px 32px;border-radius:var(--r)}
.quote p{font-family:var(--display);font-size:1.18rem;font-weight:300;line-height:1.5;margin-bottom:20px}
.quote cite{font-style:normal;font-size:.9rem;color:var(--ink-soft)}
.mark{font-family:var(--display);font-size:2.6rem;color:var(--cyan);line-height:.6;display:block;margin-bottom:14px}

.areas{display:flex;flex-wrap:wrap;gap:14px}
.area{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--rule);border-radius:var(--r);padding:16px 24px;font-family:var(--display);font-weight:500;color:var(--ink);transition:.18s}
.area:hover{border-color:var(--cyan);background:var(--mist)}
.area::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan)}

.steps{counter-reset:s;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.step{background:var(--paper);padding:30px 34px;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:1.5rem;font-weight:300;color:var(--cyan)}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:1rem}

.shop{background:var(--mist);border:1px solid var(--rule);border-top:3px solid var(--cyan);border-radius:var(--r);padding:36px 34px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.shop h3{margin-bottom:8px}
.shop p{color:var(--ink-soft);font-size:1rem}

details{border-bottom:1px solid var(--rule);padding:20px 0}
summary{font-family:var(--display);font-size:1.1rem;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--cyan-deep);font-size:1.5rem;font-weight:300;flex:none}
details[open] summary::after{content:"–"}
details p{margin-top:14px;color:var(--ink-soft)}

form .field{margin-bottom:20px}
label{display:block;font-family:var(--display);font-weight:500;font-size:.95rem;margin-bottom:7px}
input,select,textarea{width:100%;font-family:var(--body);font-size:1rem;padding:13px 15px;border:1px solid var(--rule);border-radius:var(--r);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(1,181,218,.18)}
.hint{font-size:.88rem;color:var(--ink-soft);margin-top:6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.cbox{background:var(--paper);padding:32px 30px}
.cbox h3{margin-bottom:12px;font-size:1.12rem}
.cbox p{color:var(--ink-soft);font-size:1rem}
.cbox a{font-weight:600;text-decoration:none}

.cta{background:var(--mist);border-top:1px solid var(--rule)}
.cta-in{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
.cta-in img{width:100%;border-radius:var(--r);display:block}
.cta h2{margin-bottom:20px}
.cta p{color:var(--ink-soft);font-size:1.1rem;margin-bottom:28px}
.call{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule);font-size:1rem}
.call b{font-family:var(--display)}
.call a{font-weight:600;text-decoration:none}

.note{background:#FFF8E6;border-left:4px solid #E5A400;padding:18px 22px;border-radius:var(--r);font-size:.95rem;color:#5A4506}
.note b{display:block;margin-bottom:4px}

footer{background:var(--ink);color:#B9CBD6;padding:72px 0 32px;font-size:.96rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
footer h4{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{color:#B9CBD6;text-decoration:none}
footer a:hover{color:var(--cyan)}
.f-logo{background:#fff;border-radius:50%;width:64px;height:64px;display:block;margin-bottom:20px;object-fit:contain}
.f-bot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.88rem}

@media (max-width:1040px){nav ul{gap:20px}nav a{font-size:.9rem}}
@media (max-width:960px){
  nav,.bar .btn{display:none}
  .burger{display:block}
  nav.open{display:block;position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule);padding:16px 28px 22px}
  nav.open ul{flex-direction:column;gap:0}
  nav.open a{display:block;padding:13px 0;border-bottom:1px solid var(--rule)}
  .hero-in,.cta-in,.quotes,.cols2,.split,.f2{grid-template-columns:1fr}
  .hero-fig{order:-1}
  .hero-fig img{height:280px}
  .badge{left:auto;right:16px;bottom:16px}
  .tasks .grid,.cols3,.num-grid,.f-grid,.contact-grid,.shop{grid-template-columns:1fr}
  .num-grid{gap:28px}
  .step{grid-template-columns:1fr;gap:10px}
  section{padding:62px 0}
  .hero-in{padding:54px 0 62px}
  .phead{padding:52px 0 48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


.tp-teksti h3{font-size:1.2rem;margin:32px 0 12px}
.tp-teksti h3:first-child{margin-top:0}
.tp-teksti p{color:var(--ink-soft);margin-bottom:16px}
.tp-teksti ul.ticks{margin-bottom:20px}
#tplista .task h3{font-size:1.12rem}


/* ===== WordPress-sovitukset ===== */
nav li.current-menu-item>a, nav li.current_page_item>a{border-bottom-color:var(--cyan)}
.entry-content>*:first-child{margin-top:0}
.tp-arkisto{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.tp-arkisto .task h3{font-size:1.12rem}
.tp-artikkeli .eyebrow{margin-bottom:14px}

/* Nappivarmistus: vanhojen lisäosien globaalit tyylit eivät saa vaalentaa tekstiä */
.btn-cyan, .btn-cyan:visited { color: #0E2A3D !important; }
.btn-main, .btn-main:visited { color: #ffffff !important; }
.btn-ghost, .btn-ghost:visited { color: #ffffff !important; }
.btn-line, .btn-line:visited { color: #0E2A3D !important; }

/* Gravity Forms -sovitus SKH 2026 -ilmeeseen */
.gform_wrapper label.gfield_label{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--ink);margin-bottom:6px}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea{width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(1,181,218,.15)}
.gform_wrapper .gform_button{display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:1rem;padding:14px 26px;border-radius:var(--r);border:2px solid transparent;background:var(--cyan);color:#0E2A3D !important;cursor:pointer;transition:.18s ease}
.gform_wrapper .gform_button:hover{background:#00A3C4}
.gform_wrapper .gfield{margin-bottom:18px}
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message{color:#B4231F}

/* Säilytettyjen vanhojen sivujen perustypografia uudessa kehyksessä */
.vanha-sisalto p{margin-bottom:16px}
.vanha-sisalto h2{font-family:var(--display);margin:30px 0 12px}
.vanha-sisalto h3{font-family:var(--display);margin:24px 0 10px}
.vanha-sisalto ul,.vanha-sisalto ol{margin:0 0 16px 22px}
.vanha-sisalto img{max-width:100%;height:auto}
.vanha-sisalto table{width:100%;border-collapse:collapse;margin-bottom:18px}
.vanha-sisalto td,.vanha-sisalto th{border:1px solid var(--rule);padding:10px 12px;text-align:left}
.gform_wrapper .gform_title{font-family:var(--display);font-size:1.5rem;margin-bottom:6px}
.gform_wrapper .gform_description{color:var(--ink-soft);display:block;margin-bottom:18px}