/* Hyväksytty Minnan yläpalkin liuku 15.10.2026.
   M-tunnus valkoisella; liuku alkaa logotekstissä, valikko jää tummemmalle taustalle. */
body>header{
  --mm-header-offset:max(0px, calc((100vw - 1080px)/2));
  background:linear-gradient(90deg,
    #ffffff 0,
    #ffffff calc(100px + var(--mm-header-offset)),
    #f4f8fa calc(185px + var(--mm-header-offset)),
    #dae6ee calc(255px + var(--mm-header-offset)),
    #93b2c7 calc(330px + var(--mm-header-offset)),
    #38698e calc(400px + var(--mm-header-offset)),
    #24567c calc(520px + var(--mm-header-offset)),
    #0c3059 calc(780px + var(--mm-header-offset)),
    #0c3059 100%)!important;
  border-bottom:1px solid #d7e0e8!important;
  box-shadow:0 6px 18px rgba(16,54,89,.10)!important;
}
body>header .brand-main{color:#5b6b7a!important}
body>header .brand-focus{color:#092640!important}
body>header nav a,body>header nav a.active{color:#fff!important;text-shadow:0 1px 2px rgba(10,32,58,.23)}
body>header nav a:hover,body>header nav a.active{color:#fff!important;border-bottom-color:#9ed7e8!important}
body>header .menu-toggle{color:#143c68;border:1px solid #cfd9e2;background:#fff}
body>header .menu-toggle:hover{background:#f3f7fa}
/* Kompakti valikko läppäreille: yksirivinen navigaatio ilman linkkien putoamista. */
@media(min-width:861px) and (max-width:1180px){
  body>header .head{gap:12px}
  body>header nav{gap:10px}
  body>header nav a{font-size:13px!important}
  body>header .brand-focus{font-size:15px!important;letter-spacing:.025em!important}
  body>header .brand-logo{width:52px}
}
@media(max-width:860px){
  body>header{background:#fff!important}
  body>header nav[aria-label="Päävalikko"]{background:#143c68;border-radius:8px;padding:8px 12px}
  body>header nav[aria-label="Päävalikko"] a{color:#fff!important}
}
@media(max-width:760px){
  body>header nav[aria-label="Päävalikko"]{border-top:0}
  body>header nav[aria-label="Päävalikko"] a{border-bottom:1px solid rgba(255,255,255,.18)}
}

/* Etusivun hyväksytty käännetty liuku: vaalea Minnan kuvan kohdalla. */
.hero:has(.hero-inner){
  background:linear-gradient(100deg,
    #10334e 0%,
    #164b65 36%,
    #246b83 48%,
    #acd3d9 63%,
    #eef8f8 77%,
    #ffffff 100%);
}
.hero:has(.hero-inner) .hero-copy h1,
.hero:has(.hero-inner) .hero-copy .location-line,
.hero:has(.hero-inner) .hero-copy .lead,
.hero:has(.hero-inner) .hero-copy .price-heading,
.hero:has(.hero-inner) .hero-copy .price,
.hero:has(.hero-inner) .hero-copy .price-duration,
.hero:has(.hero-inner) .hero-copy .regular-price,
.hero:has(.hero-inner) .hero-copy .teacher,
.hero:has(.hero-inner) .hero-copy .teacher strong,
.hero:has(.hero-inner) .hero-copy .preparation-note{color:#f5fafc}
.hero:has(.hero-inner) .hero-copy .location-line,
.hero:has(.hero-inner) .hero-copy .regular-price{color:#d1e7ee}
.hero:has(.hero-inner) .buy-area,
.hero:has(.hero-inner) .consultation-inline{border-top-color:rgba(239,248,251,.45)}
.hero:has(.hero-inner) .primary-actions .action-main{background:#f8fcfd;color:#124764;box-shadow:0 2px 9px rgba(4,30,47,.08)}
.hero:has(.hero-inner) .primary-actions .action-main:hover{background:#e0f4f5;color:#0e4361}
@media(max-width:620px){
 .hero:has(.hero-inner){background:linear-gradient(170deg,#10334e 0%,#164b65 40%,#2a6d86 56%,#eef8f8 78%,#ffffff 100%)}
 .hero:has(.hero-inner) .hero-copy .lead{color:#eff8fa}
}

/* Raikkaammat kurssikortit hyväksyttyjen HTML-mallien mukaisesti. */
.mmc-main{--mmc-navy:#153b54;--mmc-navy2:#126b98;--mmc-text:#2e4859;--mmc-muted:#526b7a;--mmc-border:#d3e3e7;--mmc-cream:#fff5da;background:linear-gradient(180deg,#f8fcfd 0,#fff 250px)}
.mmc-main .mmc-overline{color:#177e8a}
.mmc-main h1,.mmc-main h2,.mmc-main h3{color:#153b54}
.mmc-main .mmc-intro{color:#415e70}
.mmc-card{border-color:#cadfe5;box-shadow:0 8px 24px rgba(18,67,88,.055)}
.mmc-planned-card{background:#f3f9fa;border-color:#d2e5e9}
.mmc-planned-card h3{color:#19445b}
.mmc-btn{background:#126b98;border-color:#126b98}
.mmc-btn:hover{background:#0a5278;border-color:#0a5278}
.mmc-link,.mmc-outline{color:#116b98}
.mmc-outline{border-color:#92bcc7}
.mmc-outline:hover{background:#e7f5f6;border-color:#218c99;color:#0a5278}
.mmc-closing{background:#edf8f9;border-color:#cfe6e8;border-left:4px solid #218c99}
.mmc-closing-actions .mmc-outline{border-color:#92bdc9;background:#fff}
.cd-detail-page{background:linear-gradient(180deg,#f8fcfd 0,#fff 300px)}
.cd-detail-page .cd-eyebrow{color:#167d89}
.cd-detail-page .cd-fact{background:#f2fafb;border-color:#d0e5e9}
.cd-detail-page .cd-action-panel{background:#eef9fa;border-color:#c6e4e7}
.cd-detail-page .cd-btn-primary{background:#126b98;border-color:#126b98}
.cd-detail-page .cd-btn-primary:hover{background:#0b537a;border-color:#0b537a}


/* HYVÄKSYTTY ETUSIVUN SININEN LAATIKKO JA VÄRI 15.10.2026; mallin tarkka CSS */
/* Sinivoittoinen väri: sininen, vain aavistus turkoosia. Yhtenäinen ingressilaatikko. */
:root{--blue:#1d668c;--blue-hover:#174f75;--ink:#173b56;--line:#d8e6ee}
body>header{
 --mm-header-offset:max(0px, calc((100vw - 1080px)/2));
 background:linear-gradient(90deg,
 #fff 0,
 #fff calc(145px + var(--mm-header-offset)),
 #fafcfd calc(210px + var(--mm-header-offset)),
 #f1f7fa calc(255px + var(--mm-header-offset)),
 #d8e7ee calc(295px + var(--mm-header-offset)),
 #9bbbd0 calc(322px + var(--mm-header-offset)),
 #447b9e calc(350px + var(--mm-header-offset)),
 #21597e calc(380px + var(--mm-header-offset)),
 #16466f calc(520px + var(--mm-header-offset)),
 #143f67 calc(750px + var(--mm-header-offset)),
 #143f67 100%)!important;
 box-shadow:0 5px 17px rgba(17,63,98,.10)!important;
 border-bottom:1px solid #c8dce7!important;
}
body>header .brand-main{color:#526879!important}
body>header .brand-focus{color:#0e457b!important}
body>header nav a,body>header nav a.active{color:#fff!important;text-shadow:0 1px 2px rgba(6,38,62,.25)}
body>header nav a:hover,body>header nav a.active{color:#fff!important;border-bottom-color:#96cee0!important}
body>header .menu-toggle{color:#14486f!important;border-color:#bbd0de!important;background:#fff!important}
.hero:has(.hero-inner){background:#f7fafc!important;padding:54px 0 61px}
.hero:has(.hero-inner) .hero-inner{grid-template-columns:minmax(0,1.22fr) minmax(275px,.78fr);gap:46px;align-items:center}
.hero:has(.hero-inner) .hero-copy{
 background:#205d82;
 border:1px solid #1c5679;
 border-radius:12px;
 padding:35px 36px 37px;
 box-shadow:0 10px 25px rgba(19,71,108,.09);
}
.hero:has(.hero-inner) .hero-copy h1,
.hero:has(.hero-inner) .hero-copy .lead,
.hero:has(.hero-inner) .hero-copy .location-line,
.hero:has(.hero-inner) .hero-copy .price-heading,
.hero:has(.hero-inner) .hero-copy .price,
.hero:has(.hero-inner) .hero-copy .price-duration,
.hero:has(.hero-inner) .hero-copy .regular-price,
.hero:has(.hero-inner) .hero-copy .teacher,
.hero:has(.hero-inner) .hero-copy .teacher strong,
.hero:has(.hero-inner) .hero-copy .preparation-note{color:#fff!important}
.hero:has(.hero-inner) .hero-copy .location-line,.hero:has(.hero-inner) .hero-copy .regular-price{color:#dcecf6!important}
.hero:has(.hero-inner) .hero-copy .lead{color:#f0f7fc!important}
.hero:has(.hero-inner) .hero-copy .buy-area{border-top-color:rgba(255,255,255,.34)!important}
.hero:has(.hero-inner) .hero-copy .action-main{background:#fff!important;border:1px solid rgba(255,255,255,.82)!important;color:#164a71!important;box-shadow:none!important}
.hero:has(.hero-inner) .hero-copy .action-main:hover{background:#e7f2fa!important;color:#0c3d62!important}
.hero:has(.hero-inner) .portrait{background:#fff;border:1px solid #d9e5ef}
@media(min-width:861px) and (max-width:1180px){body>header .head{gap:12px}body>header nav{gap:10px}body>header nav a{font-size:13px!important}body>header .brand-focus{font-size:15px!important;letter-spacing:.025em!important}body>header .brand-logo{width:52px}}
@media(max-width:860px){body>header{background:#fff!important}body>header nav[aria-label="Päävalikko"]{background:#174f75!important;border-radius:8px;padding:8px 12px}body>header nav[aria-label="Päävalikko"] a{color:#fff!important}}
@media(max-width:760px){.hero:has(.hero-inner){padding:35px 0 45px}.hero:has(.hero-inner) .hero-inner{gap:25px}.hero:has(.hero-inner) .hero-copy{padding:28px 24px 29px}.hero:has(.hero-inner) .portrait{max-width:325px}}
@media(max-width:620px){.hero:has(.hero-inner) .hero-inner{grid-template-columns:1fr;gap:26px}.hero:has(.hero-inner) .hero-copy{padding:28px 24px}.hero:has(.hero-inner) .hero-copy h1{font-size:clamp(29px,7.4vw,40px)}}