/*
Theme Name: Kadence Child 02
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.1.43.1695708385
Updated: 2023-09-26 06:06:25
*/

/* Mobile navigation active link color */
@media (max-width: 768px) {
  a[aria-current="page"] {
    color: #84b6c6 !important;
  }
}

.mobile-navigation ul li.current-menu-item > a, 
.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
    color: #84b6c6 !important;
}

/* Row padding */
.kt-row-has-bg>.kt-row-column-wrap {
    padding-left: var(--global-content-edge-padding, 0px)!important;
    padding-right: var(--global-content-edge-padding, 0px)!important;
}

.content-area {
    margin: 0;
}

/* Hero container padding */
/* Desktop and tablet */
@media (min-width: 768px) {
  .entry-hero-container-inner {
    padding-top: 141px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .entry-hero-container-inner {
    padding-top: 80px !important;
  }
}

/* Headings */
h1 {
    margin-top: 15px;
}

/* Disclaimer box */
.disclaimer {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

.disclaimer h3 {
    color: #d9534f;
}

.disclaimer p {
    font-size: 13px;
    color: #333;
}

/* Buttons */
button, .button, .wp-block-button__link, 
input[type="button"], input[type="reset"], input[type="submit"], 
.fl-button, .elementor-button-wrapper .elementor-button {
    padding: 10px 15px;
}

._button_1mpz5_1 {
    max-width: 180px!important;
    width: 180px!important;
}

/* Footer show more functionality */
.site-middle-footer-inner-wrap {
  max-height: 450px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-in-out;
}

#footer-show-more {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 40px;
  height: 40px;
  padding: 5px;
  cursor: pointer;
  background: #ccc;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: calc(50% - 20px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}

#footer-show-more::before {
  content: '↓';
  font-size: 20px;
  color: white;
}

/* Image styling */
.centered-image {
    display: block;
    margin: auto;
    margin-bottom: 35px;
}

.always-show {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img {
    margin-top: 35px;
    margin-bottom: 35px; 
}

/* Slider styling */
.noUi-horizontal .noUi-handle {
    background-color: #fcfcfe;
    width: 37px;
    height: 36px;
    left: -10px;
    top: -4px;
    border-radius: 17px;
    box-shadow: 3px 1px 2px rgba(0, 0, 0, 0.2);
}

.noUi-background {
    background-color: #2607DF;
}

.noUi-handle:after, .noUi-handle:before {
    height: 16px;
    width: 2px;
    background-color: #fcfcfe;
    left: 7px;
    top: 7px;
}

/* RankMath FAQ Styling - Modernimpi ja näyttävämpi versio */
#rank-math-faq {
    margin: 40px 0;
}

#rank-math-faq .rank-math-list {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

#rank-math-faq .rank-math-list-item {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

#rank-math-faq .rank-math-list-item:last-child {
    border-bottom: none;
}

#rank-math-faq .rank-math-question {
    font-weight: 600 !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 20px 60px 20px 25px;
    position: relative !important;
    color: #333;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transition: all 0.3s ease;
}

#rank-math-faq .rank-math-question::after {
    content: "+";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #2607DF;
    transition: all 0.3s ease;
    font-weight: 300;
}

#rank-math-faq .rank-math-list-item.active .rank-math-question {
    color: #2607DF;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
}

#rank-math-faq .rank-math-list-item.active .rank-math-question::after {
    content: "−";
    transform: translateY(-50%) rotate(0deg);
}

/* Elegantimmat vastaukset */
#rank-math-faq .rank-math-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
    padding: 0 25px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

#rank-math-faq .rank-math-list-item.active .rank-math-answer {
    max-height: 1000px;
    padding: 0;
    margin-bottom: 20px;
	margin-top: 20px;
}

/* Vastauksen sisältö */
#rank-math-faq .rank-math-answer p {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

#rank-math-faq .rank-math-list-item.active .rank-math-answer {
    position: relative;
    padding: 5px 35px 25px;
    background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
    border-left: 4px solid #e8f0fe;
}

#rank-math-faq .rank-math-list-item.active .rank-math-answer p {
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 15px;
}

#rank-math-faq .rank-math-list-item.active .rank-math-answer p:last-child {
    margin-bottom: 0;
}

/* Vastauksen sisällön tyylittely */
#rank-math-faq .rank-math-answer a {
    color: #2607DF;
    text-decoration: none;
    border-bottom: 1px dotted #2607DF;
    transition: all 0.2s ease;
}

#rank-math-faq .rank-math-answer a:hover {
    color: #1a05a0;
    border-bottom: 1px solid #1a05a0;
}

#rank-math-faq .rank-math-answer ul, 
#rank-math-faq .rank-math-answer ol {
    padding-left: 20px;
    margin: 15px 0;
}

#rank-math-faq .rank-math-answer li {
    margin-bottom: 8px;
}

/* Hover efektit */
#rank-math-faq .rank-math-list-item:hover .rank-math-question {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
}



/* Responsiiviset tyylit */
@media (max-width: 768px) {
    #rank-math-faq .rank-math-question {
        font-size: 16px !important;
        padding: 15px 50px 15px 20px;
    }
    
    #rank-math-faq .rank-math-question::after {
        right: 20px;
        font-size: 20px;
    }
    
    #rank-math-faq .rank-math-list-item.active .rank-math-answer {
        padding: 5px 25px 20px;
    }
}

/* Custom list styling */
ul.custom-list {
    list-style-type: none;
    padding-left: 0;
    margin: 2px 0 30px 0;
}

ul.custom-list li {
    padding-left: 2.5em;
    position: relative;
    line-height: 28px;
    font-weight: bold;
}

ul.custom-list li::before {
    content: '';
    background-image: url(https://lainanvertaaja.fi/wp-content/uploads/check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 5px;
    transform: none;
    width: 1em;
    height: 1em;
}

/* Kadence column layout */
/* Desktop */
@media (min-width: 1025px) {
  .kadence-column2 {
    flex: 1.25;
    font-size: 18px;
    text-align: left;
    margin-left: -75px;
    padding-right: 65px;
  }
  
  .kadence-row {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  
  .kadence-column {
    flex: 0.75;
    display: flex;
    justify-content: center;
    margin-right: -75px;
    padding: 50px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 90px -40px rgba(0,0,0,.5);
    border-radius: 25px;
    margin-bottom: 50px;
  }
}

/* Tablet and Mobile */
@media (max-width: 1024px) {
  .kadence-column2, .kadence-column {
    flex: 1;
    margin-left: 0;
    margin-right: 0;
    padding: 20px;
    text-align: left;
  }
    
  .kadence-column {
    justify-content: center;
    margin-right: -100px;
    padding: 30px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 90px -40px rgba(0,0,0,.5);
    border-radius: 10px;
  }
}

/* Logo grid */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.logo-heading {
    margin: 35px;
    text-align: center;
}

@media (min-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1780px) {
    .logo-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Button container */
.button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

/* Read more button */
.btn.read-more-btn {
    margin: 35px;
}

@media (max-width: 768px) {
    .btn.read-more-btn {
        margin: 5px;
        margin-top: 40px;
    }
}

/* Archive description */
.archive-description {
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    line-height: 1.5em;
    max-height: 18em;
}

.archive-title {
    margin-top: 68px;
    margin-bottom: 35px;
    text-align: center;
}

@media (min-width: 768px) {
    .archive-title {
        margin-top: 140px;
    }
}

.archive-description::after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3em;
    background: linear-gradient(to bottom, rgba(222, 237, 248, 0), rgba(222, 237, 248, 1));
}

/* Show more functionality */
.show-more {
    display: block;
    cursor: pointer;
    margin: 1em auto;
    padding: 0.5em 1em;
}

.expanded {
    max-height: none;
}

.show-more-content .show-more-fade {
    max-height: 100px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
}

.show-more-content .show-more-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.show-more-button {
    display: block;
    margin: 10px auto;
}

.hide-more-button {
    display: none;
    margin: 10px auto;
    cursor: pointer;
}

/* Responsiiviset taulukkotyylit */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%; /* Varmistaa että taulukko ei ylitä artikkelin leveyttä */
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 30px 0;
    position: relative;
    -webkit-overflow-scrolling: touch; /* Parempi vieritys iOS-laitteilla */
}

table img {
    padding: 10px;
    max-width: 100px;
    height: auto;
}

th, td {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

th {
    background-color: #28B8D9;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    position: sticky;
    top: 0;
}

tr {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

tr:last-of-type {
    border-bottom: 2px solid #28B8D9;
}

tr:hover {
    background-color: #f0f7ff;
}

/* Taulukon responsiivisuus */
@media screen and (max-width: 992px) {
    table {
        font-size: 14px;
    }
    
    th, td {
        padding: 10px 12px;
    }
}

@media screen and (max-width: 768px) {
    .table-container {
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }
    
    table {
        box-shadow: none;
        margin: 0;
    }
    
    table img {
        max-width: 80px;
        padding: 5px;
    }
}

/* Mobiiliresponsiivisuus */
@media screen and (max-width: 600px) {
    .table-container {
        overflow-x: visible;
    }
    
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
    }
    
    td {
        position: relative;
        padding-left: 50%;
        text-align: right;
        border-bottom: 1px solid #eee;
        min-height: 30px;
    }
    
    td:before {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        text-align: left;
    }
    
    /* Lisää data-label attribuutti jokaiselle solulle */
    td:nth-of-type(1):before { content: attr(data-label); }
    td:nth-of-type(2):before { content: attr(data-label); }
    td:nth-of-type(3):before { content: attr(data-label); }
    td:nth-of-type(4):before { content: attr(data-label); }
    td:nth-of-type(5):before { content: attr(data-label); }
    
    /* Kuvien keskitys mobiilissa */
    td img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        padding: 10px 0;
    }
    
    /* Napit mobiilissa */
    td .btn, td .btn-primary {
        display: block;
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
}

/* Vieritysvihjeen tyyli */
.scroll-hint {
    display: none;
    text-align: center;
    padding: 10px;
    background: rgba(40, 184, 217, 0.1);
    color: #28B8D9;
    font-size: 14px;
    border-radius: 0 0 8px 8px;
}

.table-container.overflowing .scroll-hint {
    display: block;
}

/* Article image styling */
.article_img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    width: 105px;
    height: 105px;
    object-fit: contain;
    background: #fff;
}

/* Button styling */
.btn-primary {
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 20px;
    background-color: #001198;
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #2607df;
    transform: scale(1.05);
    color: white;
}

.btn-primary:active {
    background-color: #2607df;
    transform: scale(0.98);
}

/* Responsive table styles */
@media screen and (max-width: 600px) {
    .table, .table thead, .table tbody, .table th, .table tr, .table td {
        display: block;
        width: 100%;
    }

    .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table tr {
        margin-bottom: 20px;
        border: 1px solid #eaeaea;
    }

    .table td {
        text-align: center;
        padding: 15px;
        border-bottom: 0;
    }
  
    .tiedot_link {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 100%;
    }
}

/* Article table */
.article_table thead {
    display: none;
}

.btn.btn-primary.show_more_results {
    display: none;
}

/* Table hover */
table a:hover {
    background-color: #F6A93E;
    color: #000;
}

/* Entry hero container */
.entry-hero-container-inner {
    padding-top: 75px !important;
}

/* Form input styling */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea {
    color: black !important;
}

/* Single container */
.single .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.single .loanscode_table .btn_area {
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    font-size: 20px;
}

/* Artikkelin yhteenveto */
.article-summary-container {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 28px 32px;
    margin: 35px 0;
    position: relative;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #00529b;
}

.article-summary-container::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 32px;
    width: 150px;
    height: 4px;
    background-color: #ffc107;
}

.article-summary-container h3 {
    color: #00529b;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e9f0;
    letter-spacing: -0.5px;
}

.article-summary-container p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 5px;
}

/* Key Points styling - vaikka puuttuu nykyisestä HTML:stä */
.key-points {
    background-color: #f8fafc;
    border-left: 3px solid #00529b;
    padding: 20px 25px;
    margin: 20px 0 10px;
    border-radius: 0 4px 4px 0;
}

.key-points li {
    color: #2c3e50;
    margin-bottom: 12px;
    padding-left: 5px;
    position: relative;
    list-style-type: none;
}

.key-points li::before {
    content: "•";
    color: #00529b;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: -15px;
    top: -2px;
}

/* Päivitysosio */
.update-section-container {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 28px 32px;
    margin: 40px 0;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
}

.update-section-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #00529b;
}

.update-heading {
    color: #1a365d;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaedf2;
}

.update-heading:first-letter {
    color: #00529b;
}

.update-section-container > p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Related content links */
.related-content-link {
    background-color: #f2f7fb;
    padding: 16px 22px;
    margin: 24px 0;
    border-radius: 6px;
    position: relative;
    border-left: 3px solid #00529b;
}

.related-content-link::before {
    content: "💡";
    margin-right: 8px;
    font-size: 16px;
}

.related-content-link a {
    color: #00529b;
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(0, 82, 155, 0.2);
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.related-content-link a:hover {
    color: #003a6d;
    box-shadow: inset 0 -2px 0 rgba(0, 82, 155, 0.6);
}

/* See also section */
.see-also-section {
    background-color: #f8fafc;
    padding: 25px;
    margin-top: 30px;
    border-radius: 6px;
    border: 1px solid #e5e9f0;
}

.see-also-section h3 {
    color: #1a365d;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e9f0;
}

.see-also-links {
    margin: 0;
    padding-left: 5px;
}

.see-also-links li {
    margin-bottom: 10px;
    padding-left: 22px;
    position: relative;
    list-style-type: none;
}

.see-also-links li::before {
    content: "→";
    color: #00529b;
    position: absolute;
    left: 0;
}

.see-also-links a {
    color: #00529b;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s ease;
    font-weight: 500;
}

.see-also-links a:hover {
    color: #003a6d;
    text-decoration: underline;
}

/* Responsiivisuus */
@media (max-width: 768px) {
    .article-summary-container,
    .update-section-container {
        padding: 22px 20px;
    }
    
    .article-summary-container::before {
        width: 100px;
    }
    
    .article-summary-container h3,
    .update-heading {
        font-size: 20px;
    }
    
    .key-points {
        padding: 15px 20px;
    }
    
    .related-content-link {
        padding: 15px 18px;
    }
    
    .see-also-section {
        padding: 20px;
    }
}

/* Lisää tämä teemasi style.css-tiedostoon tai
   WordPressin hallintapaneelista: Ulkoasu > Mukauta > Lisä-CSS */

.custom-shortcode-content-wrapper {
    width: 80%; /* Oletuksena vie koko saatavilla olevan leveyden */
    max-width: 1140px; /* Suurin leveys isommilla näytöillä, säädä tarvittaessa */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;    /* Ylämarginaali */
    margin-bottom: 20px; /* Alamarginaali */
    padding-left: 15px;  /* Sivutäyte vasemmalla */
    padding-right: 15px; /* Sivutäyte oikealla */
    box-sizing: border-box; /* Varmistaa, että padding lasketaan osaksi leveyttä/korkeutta */
    clear: both;         /* Estää float-ongelmia */
}

/* Esimerkki mediakyselystä pienemmille näytöille (esim. alle 768px leveät) */
/* Voit säätää breakpointia (767px) tarpeidesi mukaan */
@media (max-width: 767px) {
    .custom-shortcode-content-wrapper {
        /* Mobiilissa padding voi olla pienempi tai eri, jos tarpeen */
        padding-left: 10px;
        padding-right: 10px;
        /* Voit myös poistaa max-width kokonaan mobiilissa, jos haluat sen
           olevan aina 100% leveä (miinus padding) */
        /* max-width: none; */

        /* Tai jos haluat vähemmän ylä/alamarginaalia mobiilissa */
        /* margin-top: 10px; */
        /* margin-bottom: 10px; */
    }
}

/* Voit lisätä muita breakpointteja tarvittaessa, esim. tableteille */
/*
@media (min-width: 768px) and (max-width: 1023px) {
    .custom-shortcode-content-wrapper {
        // Tyylit tableteille
    }
}
*/