@font-face {
    font-family: "Omnes Regular";
    src: url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.eot");
    src: url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.eot?#iefix") format("embedded-opentype"),
         url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.ttf") format("truetype"),
         url("https://db.onlinewebfonts.com/t/0c098ce56cd105e2723ca6b42ca24407.svg#Omnes Regular") format("svg");
}

body {
    background-image: url("/images/laurea-kudos-tausta.svg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: "Omnes Regular", Arial;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: block;
    height: auto;
}

/* Säilytetään vanha .container jos sitä käytetään jossain muussa näkymässä */
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    max-width: 600px;
    max-height: 750px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luukku-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.luukku-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.sposti {
    text-align: center;
    font-family: 'Omnes Regular';
    font-size: 18px;
}

.sposti a{
  color: #005a9c;
  text-decoration: underline;
  border-bottom: 2px solid #005a9c;
  display: inline-block;
}

.sposti a:hover,
.sposti a:focus,
.sposti a:focus-visible{
  color: #004070;
  border-bottom-color: #004070;
}


.logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    height: auto;
}

.valikkolevea {
    width: 100%;
    max-width: 700px;
    font-size: 16px;
    border-color: #019dd5;
    box-sizing: border-box;
}

h3 {
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul li {
    margin: 5px 0;
    color: #555;
}

p {
    color: #666;
}

.button-container {
    border: solid #019dd5 4px;
    transition-duration: 0.25s;
    text-align: center;
    font-size: 18px;
    font-family: 'Omnes Regular';
}

button {
    color: #000;
    border: none;
    width: 100%;
    max-width: 594px;
    vertical-align: middle;
    padding: 20px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    text-align: center;
    margin-bottom: 20px;
}

.button-luovuta {
    border: solid #019dd5 4px;
    background-color: #FFFFFF;
    transition-duration: 0.25s;
    vertical-align: middle;
    font-size: initial;
    font-family: 'Omnes Regular';
    height: 65px;
    width: 97%;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.button-luovuta:hover,
.button-luovuta:focus {
    background-color: #019dd5;
}

.button-luovuta:focus {
    box-shadow: 0 0 0 4px rgba(240, 120, 170, .15);
}

.button-luovuta:active {
    background-color: #019dd5; 
    box-shadow: none;
}

.button-haka {
    border: solid #f078aa 4px;
    background-color: #FFFFFF;
    transition-duration: 0.25s;
    vertical-align: middle;
    font-size: initial;
    font-family: 'Omnes Regular';
    height: 65px;
    width: 100%;
    max-width: 700px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    box-sizing: border-box;
}


.button-haka:hover,
.button-haka:focus {
    background-color: #f078aa;
}

.button-haka:focus {
    box-shadow: 0 0 0 4px rgba(240, 120, 170, .15);
}

.button-haka:active {
    background-color: #f078aa;
    box-shadow: none;
}

@media only screen and (min-width: 320px) and (orientation:landscape) {
    .taulukko {
        margin: 0 auto;
        border: solid 1px #b6b6b6;
        border-radius: 25px;
        width: 95%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .laureasolu2 {
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 600px;
    }

    .hakalogo {
        height: 40px;
        width: 125px;
    }

    .normi {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }

    .sposti {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }
}

@media only screen and (min-width: 320px) {
    .taulukko {
        margin: 0 auto;
        border: solid 1px #b6b6b6;
        border-radius: 25px;
        width: 95%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .laureasolu2 {
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 500px;
    }

    .hakalogo {
        height: 40px;
        width: 125px;
    }

    .normi {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }

    .sposti {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }
}

@media (min-width: 480px) {
    .taulukko {
        margin: 0 auto;
        border: solid 1px #b6b6b6;
        border-radius: 25px;
        width: 95%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .laureasolu2 {
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 500px;
    }

    .hakalogo {
        height: 40px;
        width: 125px;
    }

    .normi {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }

    .sposti {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }
}

@media (min-width:801px) {
    .taulukko {
        margin: 0 auto;
        border: solid 1px #b6b6b6;
        border-radius: 25px;
        width: 95%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 14px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 450px;
    }

    .hakalogo {
        height: 56px;
        width: 175px;
    }

    .normi {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }

    .sposti {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }
}

@media (min-width: 961px) {
    .taulukko {
        margin: 0 auto;
        border: solid 1px #b6b6b6;
        border-radius: 25px;
        width: 95%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-top: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 14px;
        padding-top: 12px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 350px;
    }

    .hakalogo {
        height: 56px;
        width: 175px;
    }

    .normi {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }

    .sposti {
        text-align: center;
        font-family: 'Omnes Regular';
        font-size: 18px;
    }
}

@media (min-width:1025px) {
    .taulukko {
        margin: 0 auto;
        border: solid 2px #9b9b9b;
        border-radius: 25px;
        width: 50%;
        height: auto !important;
        background-color: #FFFFFF;
    }

    .laureasolu {
        border: solid #019dd5 4px;
        transition-duration: 0.25s;
        text-align: center;
        vertical-align: middle;
        font-size: 18px;
        font-family: 'Omnes Regular';
        height: 100px;
        width: 90%;
        margin-bottom: 10px;
    }

    .guestsolu {
        border: solid #00a6b9 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        font-family: 'Omnes Regular';
        height: 100px;
        width: 90%;
        margin-bottom: 10px;
    }

    .hakasolu {
        border: solid #f078aa 4px;
        transition-duration: 0.25s;
        text-align: center;
        font-size: 18px;
        font-family: 'Omnes Regular';
        margin-bottom: 10px;
        height: 320px;
    }

    .hakalogo {
        height: 72px;
        width: 225px;
    }
}

/* ===== YLEISET KORJAUKSET ===== */

/* Taulukko: täyttää koko näkymän korkeuden */
.taulukko {
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

/* Kaikki suorat lapset voivat pienentyä */
.taulukko > div,
.taulukko > .row {
    flex-shrink: 1;
    min-height: 0;
}

/* Login-sivulla boksit jakautuvat tasaisesti ylhäältä alas */
.taulukko {
    justify-content: space-between;
}

/* / ja canvas-sivuilla sisältö alkaa ylhäältä */
.index-page .taulukko,
.canvas-page .taulukko {
    justify-content: flex-start !important;
}

/* Topbar pysyy kiinteänä */
.taulukko .luukku-topbar {
    flex-shrink: 0;
}

/* Hakasolu-wrapper */
.taulukko > div:has(.hakasolu) {
    min-height: 0;
    overflow: hidden;
}

/* Hakasolu */
.hakasolu {
    height: 100% !important;
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 15px !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Laureasolu: tasainen padding ylä/ala, nostetaan ylemmäs */
.laureasolu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 0;
    margin-top: -10px !important;
}

/* Override inline margin-right:100px Laurea-logolla */
.laureasolu img[alt="Laurea"] {
    margin-right: 30px !important;
}

/* Kirjaudu vieraana — lisää väliä boksien 2 ja 3 välille */
.ahovgue {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
    flex: none !important;
    max-width: none !important;
    height: auto !important;
    padding: 14px 18px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Alalinkit — kompakti, pysyvät alhaalla */
.taulukko > .row:last-child {
    flex-shrink: 0;
    padding-top: 6px;
    padding-bottom: 10px;
}

/* ===== CANVAS-SIVUT ===== */

/* Canvas-sivuille kapeampi kortti */
.canvas-page .taulukko {
    width: 45% !important;
    min-width: min(620px, 92%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Canvas-sisältö topbarin alla saa sivupaddingit */
.canvas-page .taulukko > div:not(.luukku-topbar),
.canvas-page .taulukko > .luukku-row {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Haka-logo vasemmalle */
.haka-area {
    width: 100%;
    margin: 10px 0 18px;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

.haka-area img {
    width: 225px;
    height: auto;
    display: block;
}

/* Lomake vasemmalle */
#navigationForm {
    width: 100%;
    text-align: left;
}

/* Canvas yhteystiedot: contact-row tasaus */
.contact-row {
    height: auto !important;
    padding-top: 20px;
    padding-bottom: 15px;
    align-items: flex-start;
}

.contact-row .luukku-col {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Sposti a: ei venytä koko leveydelle */
.sposti a {
    display: inline !important;
    border-bottom: none !important;
    text-decoration: underline;
}


.luukku-container{
    width: 50%;
    min-width: min(700px, 92%);
    margin: 0 auto;
    background: #fff;
    border: 1px solid #b6b6b6;
    border-radius: 25px;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Register-sisältö topbarin alla */
.luukku-container > *:not(.luukku-topbar) {
    padding-left: 35px;
    padding-right: 35px;
    box-sizing: border-box;
    width: 100%;
}

.luukku-container > h1:first-of-type,
.luukku-container > .luukku-msg:first-of-type,
.luukku-container > form,
.luukku-container > .luukku-result {
    padding-top: 10px;
}

.luukku-logo{
    display: block;
    max-height: 60px;
    margin: 0 auto 25px;
}

.luukku-form{
    text-align: center;
}

.luukku-form section {
    margin: 0;
    padding: 0;
}

.luukku-form h2 {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.luukku-container ul{
    width: min(650px, 95%);
    margin: 4px auto 8px;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.luukku-container li{
    margin: 3px 0;
    font-size: 15px;
}

.luukku-container p {
    margin: 4px auto;
    font-size: 15px;
}

/* Linkit */
.luukku-link{
    text-decoration: underline;
}

.luukku-button{
    border: 4px solid #019dd5;
    background: #fff;
    padding: 12px 18px;
    width: min(700px, 95%);
    margin: 12px auto 0;
    display: block;
    cursor: pointer;
    font-size: 18px;
    box-sizing: border-box;
}

.luukku-button:hover{
    background: #019dd5;
    color: #000;
}

.luukku-result{
    text-align: center;
    padding: 40px 10px 10px;
}

.luukku-msg{
    width: min(650px, 95%);
    margin: 18px auto 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 10px;
}

.luukku-msg--error{
    background: #fff6f6;
    border-left: 6px solid #d9534f;
}

.luukku-msg--result{
    background: #f7f7f7;
    border-left: 6px solid #019dd5;
}

.luukku-msg a{
    text-decoration: underline;
}

.canvas-page{ display: block; }


.luukku-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}

.luukku-topbar-left,
.luukku-topbar-right {
  display: flex;
  align-items: center;
}

.luukku-topbar-right {
  justify-content: flex-end;
}

.luukku-topbar img{
  max-height: 60px;
  height: auto;
  width: auto;
}

/* Canvas-logo on suhteellisesti suurempi kuin Laurea-vaakalogo —
   pienennetään se visuaalisesti tasapainoiseksi */
.luukku-topbar-left img {
    max-height: 38px !important;
}

/* Kielivaihto-liput vierekkäin canvas-sivuilla */
.lang-flags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    padding-left: 4px;
}

.lang-flags img {
    height: 20px;
    width: auto;
}

/* Lippurivit vierekkäin canvas-sivuilla */
.canvas-page .taulukko .luukku-row[style*="justify-content"] .luukku-col {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 4px;
    padding: 0;
}

.canvas-page .taulukko .luukku-row[style*="justify-content"] .luukku-col img {
    height: 20px;
    width: auto;
    display: inline-block;
}


/* Saavutettavuus */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

:focus-visible{
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.skip-link{
  position:absolute;
  left: 8px;
  top: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  transform: translateY(-200%);
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible{
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.laurea-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

/* ========== HOVER-LUOKAT KIRJAUTUMISPAINIKKEILLE ========== */

.hovlau {
    font-style: normal;
    color: black;
    text-decoration: none;
    font-family: 'Omnes Regular', Arial;
}

.hovlau:hover {
    background-color: #019dd5;
    color: black;
    text-decoration: none;
}

a.hovlau {
    color: inherit;
}

.hovgue {
    font-style: normal;
    color: black;
    text-decoration: none;
    font-family: 'Omnes Regular', Arial;
}

.hovgue:hover {
    background-color: #00a6b9;
    color: black;
    text-decoration: none;
}

a.hovgue {
    color: inherit;
}

.hovhaka {
    font-style: normal;
    color: black;
    font-family: 'Omnes Regular', Arial;
}

.hovhaka:hover {
    background-color: #f078aa;
    color: black;
}

/* Vieraskirjautumisen painikealue */
.ahovgue {
    border: solid #00a6b9 4px !important;
    transition-duration: 0.25s;
    text-align: center;
    font-size: 18px;
    font-family: 'Omnes Regular', Arial;
    height: 100px;
    width: 90%;
    margin: 0 auto 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hovgue:hover .ahovgue {
    background-color: #00a6b9;
}

/* Linkkityyli Haka-osiossa */
.linkki {
    text-align: center;
    font-family: 'Omnes Regular', Arial;
    font-size: 15px;
}

.linkki a {
    color: #005a9c;
    text-decoration: underline;
    border-bottom: 2px solid #005a9c;
}

.linkki a:hover,
.linkki a:focus,
.linkki a:focus-visible {
    color: #004070;
    border-bottom-color: #004070;
}

/* Virheviesti-luokka */
.luukku-error {
    background: #fff6f6;
    border-left: 6px solid #d9534f;
    padding: 12px 14px;
    border-radius: 6px;
    margin: 10px auto;
    width: 90%;
    box-sizing: border-box;
}

/* ========== UUSI LAUREA-VÄRITEEMA 2026 ========== */

/* --- Ylin painike: Kirjaudu Laurean tunnuksella / Kirjautumissivulle --- */
.laureasolu {
    background-color: #1A5336 !important;
    border: none !important;
    border-radius: 10rem !important;
    color: #DEEB9C !important;
}

.laureasolu .laurea-text,
a:has(.laureasolu),
a:has(.laureasolu) * {
    color: #DEEB9C !important;
}

/* Hover ylimmälle painikkeelle */
.hovlau:hover,
.hovlau:focus,
a:has(.laureasolu):hover .laureasolu,
a:has(.laureasolu):focus .laureasolu {
    background-color: #0F331F !important;
    color: #DEEB9C !important;
}

.hovlau:hover .laureasolu,
.hovlau:focus .laureasolu {
    background-color: #0F331F !important;
}

/* --- Keskimmäinen painike: Haka-laatikko --- */
.hakasolu {
    border: solid #1A5336 4px !important;
    border-radius: 10rem !important;
    padding: 20px 40px !important;
}

/* Haka-osion linkit: tumma vihreä + alleviivaus */
.linkki a,
.hakasolu a {
    color: #1A5336 !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

.linkki a:hover,
.linkki a:focus,
.linkki a:focus-visible,
.hakasolu a:hover,
.hakasolu a:focus,
.hakasolu a:focus-visible {
    color: #0F331F !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

/* --- Alin painike: Kirjaudu vieraana --- */
.ahovgue {
    background-color: #1A5336 !important;
    border: none !important;
    border-radius: 10rem !important;
    color: #DEEB9C !important;
}

.ahovgue,
.ahovgue .laurea-text,
a.hovgue,
a.hovgue * {
    color: #DEEB9C !important;
}

/* Hover alimmalle painikkeelle */
.hovgue:hover,
.hovgue:focus,
.hovgue:hover .ahovgue,
.hovgue:focus .ahovgue {
    background-color: #0F331F !important;
    color: #DEEB9C !important;
}

/* --- Canvas-sivun "Siirry Canvasiin" -painike sama tyyli --- */
.button-haka {
    background-color: #1A5336 !important;
    border: none !important;
    border-radius: 10rem !important;
    color: #DEEB9C !important;
    height: 65px !important;
}

.button-haka:hover,
.button-haka:focus,
.button-haka:active {
    background-color: #0F331F !important;
    color: #DEEB9C !important;
    box-shadow: none !important;
}

/* --- Yleiset linkit (Apua kirjautumiseen, servicedesk-osoite) --- */
.sposti a {
    color: #1A5336 !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

.sposti a:hover,
.sposti a:focus,
.sposti a:focus-visible {
    color: #0F331F !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

/* --- Register-lomakkeen "Luovuta tiedot" -painike --- */
.luukku-button {
    background-color: #1A5336 !important;
    color: #DEEB9C !important;
    border: none !important;
    border-radius: 10rem !important;
}

.luukku-button:hover,
.luukku-button:focus,
.luukku-button:active {
    background-color: #0F331F !important;
    color: #DEEB9C !important;
    box-shadow: none !important;
}

/* --- Register-lomakkeen "Laurean käyttösäännöt" -linkit --- */
.luukku-link {
    color: #1A5336 !important;
    text-decoration: underline !important;
}

.luukku-link:hover,
.luukku-link:focus,
.luukku-link:focus-visible {
    color: #0F331F !important;
    text-decoration: underline !important;
}

/* --- Register-submit-sivun result- ja error-laatikoiden linkit --- */
.luukku-result a,
.luukku-msg a {
    color: #1A5336 !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

.luukku-result a:hover,
.luukku-result a:focus,
.luukku-result a:focus-visible,
.luukku-msg a:hover,
.luukku-msg a:focus,
.luukku-msg a:focus-visible {
    color: #0F331F !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

/* ---  Haka-laatikon <p>-kappaleet tiiviiksi --- */
/* HTML on nyt <p>-rakenteinen, mutta globaali p { color:#666 } */
/* antaa kappaleille selaimen oletusmarginaalit (16px+16px) */
.hakasolu .linkki p {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

.hakasolu .linkki p:last-child {
    margin-bottom: 0 !important;
}

.hakasolu .linkki {
    line-height: 1.35;
}

/* --- Mobiili: maltillisempi pyöristys etteivät reunat leikkaa sisältöä --- */
@media (max-width: 600px) {
    .laureasolu,
    .hakasolu,
    .ahovgue,
    .button-haka,
    .luukku-button {
        border-radius: 30px !important;
    }
    
    /* Ylimmän painikkeen alle hengitystilaa Haka-laatikkoon */
    .laureasolu {
        margin-bottom: 15px !important;
    }

    
    /* Body-tausta täyttää koko alueen vaikka sisältö venyy */
    body {
        background-attachment: scroll !important;
    }
    
    /* Mobiilissa kortti ei ole enää lukittu 100vh:hon — saa venyä sisällön mukaan
       jotta sisältö ei leikkaudu pois näkyvistä */
    .taulukko {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Kaikki .taulukon suorat lapset: ei pakkokutistusta, korkeus sisällön mukaan */
    .taulukko > div,
    .taulukko > .row {
        flex-shrink: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Hakasolu-wrapperilta pois overflow joka leikkasi sisällön */
    .taulukko > div:has(.hakasolu) {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Hakasolu itse: korkeus joustavaksi mobiilissa, EI 100vh */
    .hakasolu {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Topbar säilyy kiinteänä mutta ei vie ylimääräistä tilaa */
    .taulukko .luukku-topbar {
        flex-shrink: 0 !important;
        height: auto !important;
    }
=======

}