/*
Theme Name: Iiron IT-apu
Theme URI: https://iironitapu.fi
Author: Iiro
Author URI: https://iironitapu.fi
Description: Yksisivuinen WordPress-teema Iiron IT-avun kotikäyntipalvelulle. Sisältää hero-osion, palvelut, hinnaston, tarinan ja yhteydenottolomakkeen.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: iiron-it-apu
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root{
  --navy:#1E2E3F;
  --blue:#2F6FA8;
  --blue-dark:#255A88;
  --green:#4F9A52;
  --green-dark:#3F7E43;
  --cream:#FBF8F2;
  --panel:#F2EFE6;
  --line:rgba(30,46,63,0.12);
  --line-soft:rgba(30,46,63,0.08);
  --muted:#5B6674;
  --amber:#F0A73A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html.large-text{font-size:112.5%;}
body{
  font-family:'Inter', sans-serif;
  background:var(--cream);
  color:var(--navy);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Baloo 2', sans-serif; font-weight:700; letter-spacing:-0.005em;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* NAV */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,242,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.site-nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:12px; font-family:'Baloo 2'; font-weight:700; font-size:1.15rem; color:var(--navy);}
.brand-mark{
  height:88px; width:auto; border-radius:10px; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center;
}
.brand-mark img{height:100%; width:auto; object-fit:contain; display:block;}
.nav-links{display:flex; gap:32px; font-size:.94rem; color:var(--muted); font-weight:500; list-style:none;}
.nav-links a:hover{color:var(--navy);}
.nav-cta{
  background:var(--blue); color:#fff; padding:10px 20px; border-radius:100px;
  font-weight:600; font-size:.88rem;
}
.nav-cta:hover{background:var(--blue-dark);}
.font-toggle{
  background:var(--panel); color:var(--navy); border:1px solid var(--line);
  border-radius:100px; padding:8px 14px; font-weight:700; font-size:.85rem; cursor:pointer;
  font-family:'Inter', sans-serif;
}
.font-toggle:hover{border-color:var(--blue); color:var(--blue);}
.font-toggle[aria-pressed="true"]{background:var(--blue); color:#fff; border-color:var(--blue);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:22px; height:2px; background:var(--navy); display:block;}

/* HERO */
.hero{padding:76px 0 60px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; top:-180px; right:-160px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(79,154,82,0.10), transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; position:relative;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--green-dark); font-family:'IBM Plex Mono';
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:18px; font-weight:600;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green);}
.hero h1{font-size:2.9rem; line-height:1.1; margin-bottom:20px; color:var(--navy);}
.hero h1 span{color:var(--blue);}
.hero p.lead{font-size:1.1rem; color:var(--muted); max-width:46ch; margin-bottom:30px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.trust-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.trust-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line);
  border-radius:100px; padding:7px 14px; font-size:.82rem; color:var(--navy); font-weight:500;
}
.btn{
  padding:14px 24px; border-radius:100px; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, background .15s ease; border:none; cursor:pointer;
}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark); transform:translateY(-1px);}
.btn-ghost{border:1.5px solid var(--line); color:var(--navy); background:transparent;}
.btn-ghost:hover{border-color:var(--blue);}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1EBE57;}
.btn-whatsapp::before{
  content:"";
  width:16px; height:16px; display:inline-block;
  background-color:#fff;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.87.5 3.63 1.44 5.16L2 22l5.06-1.53a9.87 9.87 0 0 0 4.98 1.36h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.86 14.1c-.25.7-1.46 1.35-2.02 1.44-.52.08-1.17.11-1.89-.12-.44-.14-1-.32-1.72-.63-3.03-1.31-5-4.34-5.15-4.55-.15-.2-1.23-1.63-1.23-3.1 0-1.47.77-2.2 1.05-2.5.27-.3.6-.37.8-.37.2 0 .4.002.57.01.18.008.43-.07.68.52.25.6.85 2.08.93 2.23.08.15.13.33.03.53-.1.2-.15.32-.3.5-.15.17-.3.38-.44.51-.15.14-.3.3-.13.6.17.3.77 1.27 1.65 2.05 1.14 1.01 2.1 1.32 2.4 1.47.3.14.48.12.66-.05.18-.17.77-.9.98-1.2.2-.3.4-.25.68-.15.28.1 1.75.83 2.05 1 .3.15.5.23.57.36.08.13.08.75-.17 1.45z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.87.5 3.63 1.44 5.16L2 22l5.06-1.53a9.87 9.87 0 0 0 4.98 1.36h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.86 14.1c-.25.7-1.46 1.35-2.02 1.44-.52.08-1.17.11-1.89-.12-.44-.14-1-.32-1.72-.63-3.03-1.31-5-4.34-5.15-4.55-.15-.2-1.23-1.63-1.23-3.1 0-1.47.77-2.2 1.05-2.5.27-.3.6-.37.8-.37.2 0 .4.002.57.01.18.008.43-.07.68.52.25.6.85 2.08.93 2.23.08.15.13.33.03.53-.1.2-.15.32-.3.5-.15.17-.3.38-.44.51-.15.14-.3.3-.13.6.17.3.77 1.27 1.65 2.05 1.14 1.01 2.1 1.32 2.4 1.47.3.14.48.12.66-.05.18-.17.77-.9.98-1.2.2-.3.4-.25.68-.15.28.1 1.75.83 2.05 1 .3.15.5.23.57.36.08.13.08.75-.17 1.45z'/></svg>");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  margin-right:2px;
}

/* METER WIDGET */
.meter{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px;
  box-shadow:0 30px 50px -35px rgba(30,46,63,0.35);
}
.meter-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.meter-label{font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--muted); letter-spacing:.07em; text-transform:uppercase;}
.meter-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(79,154,82,0.15);}
.meter-display{
  background:var(--navy); border-radius:14px; padding:26px 20px; text-align:right;
}
.meter-number{
  font-family:'IBM Plex Mono'; font-weight:600; font-size:2.7rem; color:var(--amber);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.meter-sub{font-family:'IBM Plex Mono'; font-size:.72rem; color:#9FB0C2; margin-top:6px;}
.meter-rows{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.meter-row{display:flex; justify-content:space-between; font-size:.86rem; color:var(--muted);}
.meter-row b{color:var(--navy); font-weight:600;}
.meter-caption{margin-top:16px; font-size:.8rem; color:var(--muted); font-style:italic;}

/* SECTIONS */
section{padding:76px 0;}
.section-head{max-width:60ch; margin-bottom:46px;}
.section-tag{font-family:'IBM Plex Mono'; font-size:.75rem; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; font-weight:600;}
.section-head h2{font-size:2rem; margin-bottom:14px; color:var(--navy);}
.section-head p{color:var(--muted); font-size:1.02rem;}

/* STEPS */
.steps{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.step{position:relative; padding-top:8px;}
.step-num{font-family:'IBM Plex Mono'; font-size:.85rem; color:var(--blue); margin-bottom:14px; font-weight:600;}
.step h3{font-size:1.2rem; margin-bottom:10px; color:var(--navy);}
.step p{color:var(--muted); font-size:.95rem;}

/* PREP CHECKLIST */
.prep-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px;
}
.prep-item{display:flex; align-items:center; gap:12px; font-size:.98rem; color:var(--navy); font-weight:500;}
.prep-item svg{width:22px; height:22px; flex-shrink:0;}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  transition:border-color .15s ease, transform .15s ease;
}
.service:hover{border-color:var(--blue); transform:translateY(-3px);}
.service-icon{width:38px; height:38px; margin-bottom:16px;}
.service h3{font-size:1.05rem; margin-bottom:8px; color:var(--navy);}
.service p{color:var(--muted); font-size:.9rem;}

/* TESTIMONIALS */
.testimonials{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.testimonial-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px; max-width:680px; margin:0 auto;
  box-shadow:0 30px 50px -35px rgba(30,46,63,0.25);
}
.testimonial-quote{font-size:1.05rem; color:var(--navy); line-height:1.65; margin-bottom:24px;}
.testimonial-quote::before{
  content:"\201C"; font-family:'Baloo 2'; font-size:2.4rem; color:var(--blue); line-height:0;
  display:inline-block; vertical-align:-14px; margin-right:4px;
}
.testimonial-author{display:flex; align-items:center; gap:12px;}
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:'Baloo 2'; font-weight:700; font-size:.9rem;
}
.testimonial-name{font-weight:600;}
.testimonial-meta{color:var(--muted); font-size:.85rem;}

/* SITE REVIEWS -LISÄOSAN INTEGRAATIO
   Lisäosa tukee omia CSS-muuttujia teemoitukseen (glsr-etuliite) — asetetaan ne
   vastaamaan sivuston väripalettia. Lisäksi peitetään yleisimmät lisäosan omat
   luokat varmuuden vuoksi, jos muuttujat eivät riitä kaikkeen.
*/
.testimonials-plugin{
  --glsr-primary-color: var(--blue);
  --glsr-star-color-active: var(--amber);
  --glsr-star-color-inactive: var(--line);
  --glsr-card-background-color: #fff;
  --glsr-card-border-color: var(--line);
  --glsr-card-border-radius: 18px;
  --glsr-font-family: 'Inter', sans-serif;
  --glsr-primary-font-color: var(--navy);
  --glsr-secondary-font-color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
}
.testimonials-plugin-summary{ margin-bottom:24px; text-align:center; }
.testimonials-plugin-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:32px; }
.testimonials-plugin .glsr-review{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  padding:28px !important;
  box-shadow:0 30px 50px -35px rgba(30,46,63,0.25) !important;
  font-family:'Inter', sans-serif !important;
  color:var(--navy) !important;
  width:100% !important;
  box-sizing:border-box !important;
}
/* Sisäiset osat (tähdet, päivämäärä, teksti, kirjoittaja) EIVÄT saa omaa laatikkoaan —
   vain fontti/väri, ei taustaa/reunaa/paddingia, jotta arvostelu ei paloittelu useiksi kortiksi. */
.testimonials-plugin .glsr-review-title,
.testimonials-plugin .glsr-review-author-name{
  font-family:'Baloo 2', sans-serif !important;
  color:var(--navy) !important;
  font-weight:700 !important;
  background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important;
}
.testimonials-plugin .glsr-review-content{
  color:var(--navy) !important;
  line-height:1.65 !important;
  background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important;
}
.testimonials-plugin .glsr-review-date,
.testimonials-plugin .glsr-review-author-title{
  color:var(--muted) !important;
  font-size:.85rem !important;
  background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important;
}
.testimonials-plugin .glsr-review-header,
.testimonials-plugin .glsr-review-author,
.testimonials-plugin .glsr-review-footer,
.testimonials-plugin .glsr-star-rating{
  background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important;
  width:auto !important;
}
.testimonials-plugin .glsr-star-rating svg,
.testimonials-plugin svg.glsr-icon{
  fill: var(--amber) !important;
}
.testimonials-plugin-form{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px;
}
.testimonials-plugin-form input,
.testimonials-plugin-form textarea,
.testimonials-plugin-form select{
  font-family:'Inter', sans-serif !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:var(--cream) !important;
  color:var(--navy) !important;
}
.testimonials-plugin-form button,
.testimonials-plugin-form input[type="submit"]{
  background:var(--blue) !important;
  color:#fff !important;
  border:none !important;
  border-radius:100px !important;
  font-weight:600 !important;
  padding:12px 24px !important;
  cursor:pointer;
}
.testimonials-plugin-form button:hover,
.testimonials-plugin-form input[type="submit"]:hover{
  background:var(--blue-dark) !important;
}

/* PRICING */
.pricing{background:var(--navy); color:#fff;}
.pricing .section-tag{color:var(--amber);}
.pricing .section-head h2{color:#fff;}
.pricing .section-head p{color:#B9C4D1;}
.pricing-card{
  background:#fff; border-radius:20px; padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px;
  box-shadow:0 30px 60px -35px rgba(0,0,0,0.4); color:var(--navy);
}
.price-block h3{font-size:1.4rem; margin-bottom:6px;}
.price-value{font-family:'IBM Plex Mono'; font-size:2.6rem; font-weight:600; color:var(--navy); margin:14px 0 8px;}
.price-note{color:var(--muted); font-size:.88rem;}
.price-list{list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:6px;}
.price-list li{display:flex; justify-content:space-between; font-size:.95rem; border-bottom:1px dashed var(--line); padding-bottom:12px;}
.price-list li b{font-family:'IBM Plex Mono';}
.vat-note{margin-top:22px; font-size:.82rem; color:var(--muted);}

/* STORY */
.story{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
.story-badge{
  font-family:'IBM Plex Mono'; font-size:.75rem; color:#fff; background:var(--green);
  display:inline-block; padding:6px 14px; border-radius:100px; margin-bottom:18px; font-weight:600;
}
.story h2{font-size:1.9rem; margin-bottom:16px; color:var(--navy);}
.story p{color:var(--muted); margin-bottom:16px; font-size:1rem;}
.story-panel{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px;
}
.story-stat{display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line-soft);}
.story-stat:last-child{border-bottom:none;}
.story-stat span:first-child{color:var(--muted); font-size:.9rem;}
.story-stat b{font-family:'IBM Plex Mono'; color:var(--blue); font-size:1.1rem;}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-info h2{font-size:2rem; margin-bottom:16px; color:var(--navy);}
.contact-info p{color:var(--muted); margin-bottom:24px;}
.contact-line{display:flex; gap:12px; align-items:center; margin-bottom:14px; font-size:.98rem;}
.contact-line b{font-family:'IBM Plex Mono'; color:var(--blue); font-size:.85rem; min-width:90px;}
form.contact-form{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px; display:flex; flex-direction:column; gap:16px;}
label{font-size:.82rem; color:var(--muted); margin-bottom:6px; display:block;}
input, textarea{
  width:100%; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  color:var(--navy); font-family:'Inter'; font-size:.92rem;
}
input:focus, textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:transparent;}
textarea{resize:vertical; min-height:90px;}
.form-row{display:flex; flex-direction:column;}
.form-notice{padding:14px 16px; border-radius:10px; margin-bottom:6px; font-size:.9rem;}
.form-notice.success{background:rgba(79,154,82,0.12); color:var(--green-dark); border:1px solid rgba(79,154,82,0.3);}
.form-notice.error{background:rgba(162,59,44,0.1); color:#832F22; border:1px solid rgba(162,59,44,0.3);}

footer.site-footer{border-top:1px solid var(--line); padding:32px 0; color:var(--muted); font-size:.85rem;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

@media (max-width: 860px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .hero-grid, .story, .contact-grid{grid-template-columns:1fr;}
  .steps-grid, .services-grid, .prep-list{grid-template-columns:1fr;}
  .pricing-card{grid-template-columns:1fr; padding:28px;}
  .hero h1{font-size:2.1rem;}
  .nav-cta{padding:8px 14px; font-size:.78rem; white-space:nowrap;}
  .font-toggle{padding:6px 10px; font-size:.75rem;}
  .brand{font-size:.98rem; gap:8px;}
  .brand-mark{height:60px; width:auto; border-radius:8px;}
  nav.site-nav{gap:10px; padding:12px 16px;}
  .nav-links.is-open{
    display:flex; flex-direction:column; position:absolute; top:60px; right:24px;
    background:#fff; padding:20px; border-radius:12px; border:1px solid var(--line);
    box-shadow:0 20px 40px -20px rgba(30,46,63,0.3); z-index:60;
  }
}
@media (prefers-reduced-motion: reduce){
  * {animation:none !important; transition:none !important;}
}