/* custom.css */

/* ===== TYPOGRAPHY CLAMP ===== */
html { font-size: 62.5%; }
body {
   
   font-family: "Inter", sans-serif; 
   
   font-size: 1.6rem;
   line-height: 1.6;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: clamp(3.5rem, 2.5rem + 2vw, 5.6rem); line-height: 1.1; }
h2 { font-size: clamp(2.8rem, 2.0rem + 1.4vw, 4.0rem); line-height: 1.2; }
h3 { font-size: clamp(2.2rem, 1.6rem + 1.0vw, 3.0rem); line-height: 1.25; }
h4 { font-size: clamp(1.9rem, 1.4rem + 0.7vw, 2.4rem); line-height: 1.3; }
h5 { font-size: clamp(1.7rem, 1.3rem + 0.4vw, 2.0rem); line-height: 1.35; }
h6 { font-size: 1.6rem; line-height: 1.4; }

/* Hero-otsikko */
.hero h1 {
   font-size: clamp(2.4rem, 1.9rem + 1.5vw, 4.8rem);
   line-height: 1.1;
}

/* ===== Light reset ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
.elementor-widget-heading .elementor-heading-title { margin: 0; line-height: 1.1; }
.elementor a { text-decoration: none; }
.elementor a:hover { text-decoration: underline; }
.e-con, .elementor-container, .elementor-section, .elementor-column { padding: 0; }
.elementor-widget { margin: 0; }

/* ===== Sticky Header logic ===== */
:root {
   --lossa-topbar-z: 9998;
   --lossa-header-z: 9997;
   --header-bar-h: 0px;
   --header-top-h: 0px;
   --header-main-h: 0px;
   --header-total-h: 0px;
}
#lossa-top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--lossa-topbar-z); }
#lossa-header { position: fixed; top: var(--header-bar-h, 0px); left: 0; right: 0; z-index: var(--lossa-header-z); }
body { padding-top: var(--header-total-h, 0px); }

.header-top { position: relative; }
.header-main { position: relative; transition: transform .36s ease, background-color .36s ease; will-change: transform; }
body.hm-hidden .header-main { transform: translateY(calc(-1 * var(--header-main-h, 0px))); }

/* OCM (Mobile Menu) */
:root { --ocm-z: 9999; }
@media (max-width:1024px) {
   .ocm-left, .ocm-right { position: fixed; left: 0; right: 0; z-index: var(--ocm-z); will-change: transform; }
   .ocm-left { bottom: 0; transform: translateY(100%); transition: transform .62s cubic-bezier(.16, 1, .3, 1); }
   .ocm-right { top: 0; transform: translateY(-100%); transition: transform .62s cubic-bezier(.16, 1, .3, 1); }
   body.has-ocm-open .ocm-left { transform: translateY(0); }
   body.has-ocm-open .ocm-right { transform: translateY(0); }
   .ocm-open, .ocm-close { cursor: pointer; touch-action: manipulation; pointer-events: auto; }
}
@media (min-width:1025px) { .ocm-left, .ocm-right { display: none !important; } }

/* AAE nav fixes */
.wcf__nav-menu .wcf-menu-hamburger, .wcf__nav-menu .wcf-menu-close, .wcf__nav-menu .wcf-menu-overlay { display: none !important; }
.wcf__nav-menu .wcf-nav-menu-container { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; height: auto !important; transform: none !important; top: auto !important; }
.wcf__nav-menu .wcf-nav-menu-nav { display: flex !important; flex-direction: column !important; gap: .6rem !important; }
.wcf__nav-menu.mobile-menu-active .wcf-nav-menu-container { display: block !important; }

/* EAEL Dual Color Heading fix */
.hero .eael-dual-header h1.title.eael-dch-title,
.hero .eael-dual-header h1.title.eael-dch-title .eael-dch-title-text {
   font-size: clamp(2.4rem, 1.9rem + 1.5vw, 4.8rem) !important;
   line-height: 1.1 !important;
}
@media (min-width: 2560px) {
   .hero .eael-dual-header .subtext p { font-size: 1.8rem !important; }
   .hero { max-height: 50vh !important; }
}

/* =========================================================
   NAVIGAATION ALAVIIVA
   ========================================================= */
.eael-simple-menu>li>a.menu-link {
   position: relative;
   display: inline-block;
   text-decoration: none;
}

.eael-simple-menu>li>a.menu-link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -2px; 
   width: 100%;
   height: 2px;
   background: #D61E26; /* Lossa punainen */
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .25s ease-out;
}

.eael-simple-menu>li>a.menu-link:hover::after,
.eael-simple-menu>li>a.menu-link:focus-visible::after {
   transform: scaleX(1);
}

.eael-simple-menu>li.current-menu-item>a.menu-link::after,
.eael-simple-menu>li.current_page_item>a.menu-link::after {
   transform: scaleX(1);
}

/* =========================================================
   HEADER DARK GLASS (header-auto-bg)
   ========================================================= */
/* Oletustila: Läpinäkyvä */
.header-auto-bg,
.header-auto-bg > .elementor-container,
.header-auto-bg > .elementor-background-overlay {
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* Scrollattu tila: Tumma lasi */
body.hm-glass .header-auto-bg {
    background-color: rgba(17, 19, 23, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* Poistetaan vanha overlay jos käytössä */
body.hm-glass .header-auto-bg::before { display: none !important; }


/* =========================================
   LOSSA KORTIT (Services, Testimonials, Blog)
   ========================================= */

/* --- 1. Lossa Service Card (Palvelut) --- */
/* Efektit: Nosto ylös, varjo syvenee, kuva zoomaa, otsikko punertuu */

.lossa-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; /* Pitää kuvan zoomin aisoissa */
    
    /* Shadow (Normal) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* Siirtymä */
    transition: all 300ms ease-in-out;
    
    /* Asettelu */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lossa-card:hover {
    transform: translateY(-4px); /* Nosto */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Syvempi varjo */
}

/* Kuvan zoom */
.lossa-card .card-img, 
.lossa-card-minimal .card-img {
    overflow: hidden;
    display: block;
}

.lossa-card .card-img img,
.lossa-card-minimal .card-img img {
    width: 100%;
    height: auto;
    transition: transform 500ms ease;
    display: block;
}

.lossa-card:hover .card-img img {
    transform: scale(1.08); /* 8% Zoom */
}

/* Otsikon värinvaihto */
.lossa-card .card-otsikko .elementor-heading-title,
.lossa-card-minimal .card-otsikko .elementor-heading-title {
    transition: color 300ms ease-in-out;
}

.lossa-card:hover .card-otsikko .elementor-heading-title,
.lossa-card-minimal:hover .card-otsikko .elementor-heading-title {
    color: #D61E26 !important; /* Lossa Red */
}

/* Linkki ja Nuoli */
.lossa-card .card-linkki,
.lossa-card-minimal .card-linkki {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    color: inherit;
    position: relative;
    transition: color 300ms ease;
}

.lossa-card .card-linkki::after,
.lossa-card-minimal .card-linkki::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #D61E26;
    transition: width 300ms ease-in-out;
}

/* Hover-tilat linkille */
.lossa-card:hover .card-linkki,
.lossa-card-minimal:hover .card-linkki {
    color: #D61E26;
}

.lossa-card:hover .card-linkki::after,
.lossa-card-minimal:hover .card-linkki::after {
    width: 100%;
}

.lossa-card .card-nuoli,
.lossa-card-minimal .card-nuoli {
    display: inline-block;
    transition: transform 300ms ease-in-out;
}

.lossa-card:hover .card-nuoli,
.lossa-card-minimal:hover .card-nuoli {
    transform: translateX(5px);
}

/* Sisällön tasaus (valinnainen) */
.lossa-card .elementor-widget-wrap,
.lossa-card-minimal .elementor-widget-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* --- 2. Lossa Testimonial (Asiakaskommentit) --- */
/* Efektit: Hento reunaviiva muuttuu punaiseksi, varjo syvenee */

.lossa-testimonial {
    background-color: #fff;
    border-radius: 8px;
    padding: 2rem;
    
    /* Border (Normal): Valkoinen */
    border: 1px solid #ffffff;
    
    /* Shadow (Normal) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    transition: all 300ms ease-in-out;
    height: 100%; /* Jos haluat laatikoiden olevan tasakorkeita */
}

.lossa-testimonial:hover {
    /* Border (Hover): Tailwind red-100 (#FEE2E2) */
    border-color: #FEE2E2;
    
    /* Shadow (Hover) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}


/* --- 3. Lossa Card Minimal (Tietopankki / Blogi) --- */
/* Efektit: Ei nostoa, pienempi zoom (5%), varjo syvenee */

.lossa-card-minimal {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    
    /* Shadow (Normal) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    transition: box-shadow 300ms ease-in-out;
    
    height: 100%;
    display: flex;
    flex-direction: column;
}

.lossa-card-minimal:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Minimal-kortin kuvan zoom on hillitympi (5%) */
.lossa-card-minimal:hover .card-img img {
    transform: scale(1.05);
}


/* =========================================
   GRADIENT BORDER TOP
   ========================================= */
.gradient-border {
    /* Määritellään gradientti: Vasen (Musta) -> Keskus (Punainen) -> Oikea (Musta) */
    border-image-source: linear-gradient(
        90deg, 
        #111317 0%, 
        #D61E26 50%, 
        #111317 100%
    ) !important;
    
    /* Tämä venyttää kuvan koko reunalle */
    border-image-slice: 1 !important;
    
    /* Varmistetaan, että tyyli on solid, jotta se näkyy */
    border-style: solid !important;
    
    /* pyöristetyllä kulmalla seuraava */
}

/* =========================================
   FADING TOP BORDER (Pyöristetty & Feidaava)
   ========================================= */

.lossa-fade-border {
    position: relative;
    /* Elementorissa asetettu border-radius periytyy tähän */
}

.lossa-fade-border::before {
    content: "";
    position: absolute;
    inset: 0; /* Peittää koko kontin */
    border-radius: inherit; /* TÄRKEÄ: Perii kontin pyöristyksen */
    padding: 2px; /* TÄSTÄ SÄÄDÄT REUNAVIIVAN PAKSUUDEN */
    
    /* Gradientti: 
       0% - 10%: Läpinäkyvä (Kulman pääty)
       10% - 20%: Liukuu punaiseen
       20% - 80%: Täysi Lossa Punainen (#D61E26)
       80% - 90%: Liukuu läpinäkyväksi
       100%: Läpinäkyvä
    */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        transparent 2%, 
        #D61E26 20%, 
        #D61E26 80%, 
        transparent 98%,
        transparent 100%
    );
    
    /* (mask) leikkaa sisällön pois, jättäen vain reunan näkyviin */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* Estää haamureunaa blokkaamasta klikkauksia */
    pointer-events: none;
    z-index: 2; /* Nostetaan sisällön päälle */

}


/* =========================================
   LOSSA TAPERED BORDERS (Kapenevat reunat)
   ========================================= */

/* Yhteiset asetukset kaikille reunoille */
.lossa-border-top,
.lossa-border-left,
.lossa-border-right {
    position: relative;
    /* Elementorissa asetettu border-radius periytyy tähän */
}

.lossa-border-top::before,
.lossa-border-left::before,
.lossa-border-right::before {
    content: "";
    position: absolute;
    inset: 0; /* Peittää koko kontin */
    border-radius: inherit; /* TÄRKEÄ: Seuraa kontin pyöristystä */
    pointer-events: none; /* Ei estä klikkauksia */
    border-color: #D61E26; /* Lossa Punainen */
    border-style: solid;
    border-width: 0; /* Oletuksena 0, luokat lisäävät paksuuden */
}

/* --- 1. YLÄREUNA (Top) --- */
.lossa-border-top::before {
    border-top-width: 4px; /* SÄÄDÄ PAKSUUS TÄSTÄ */
    
    /* Maski: Häivyttää vasemman ja oikean reunan (0% - 20px matkalla) */
    -webkit-mask-image: linear-gradient(
        90deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
}

/* --- 2. VASEN REUNA (Left) --- */
.lossa-border-left::before {
    border-left-width: 4px; /* SÄÄDÄ PAKSUUS TÄSTÄ */
    
    /* Maski: Häivyttää ylä- ja alareunan */
    -webkit-mask-image: linear-gradient(
        180deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
}

/* --- 3. OIKEA REUNA (Right) --- */
.lossa-border-right::before {
    border-right-width: 4px; /* SÄÄDÄ PAKSUUS TÄSTÄ */
    
    /* Maski: Häivyttää ylä- ja alareunan */
    -webkit-mask-image: linear-gradient(
        180deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg, 
        transparent 0%, 
        black 20px, 
        black calc(100% - 20px), 
        transparent 100%
    );
}


/* =========================================
   STICKY SIDEBAR (Oikea palsta)
   ========================================= */

@media (min-width: 1025px) {
    .lossa-sticky-col {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 140px !important; /* Etäisyys yläreunasta */
        
        /* Nämä varmistavat, ettei boksi veny */
        height: fit-content !important;
        align-self: flex-start !important;
        
        z-index: 5;
    }
}

/* =========================================
   TIETOPANKKI KUVAN OVERLAY (TUMMA ALAREUNA)
   ========================================= */

/* Varmistetaan, että kuva-alue on "asemointipiste" overlaylle */
.lossa-card .card-img {
    position: relative; 
}

/* Luodaan haamuelementti kuvan päälle */
.lossa-card .card-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Miten korkealle tummennus nousee */
    height: 30%; 
    
    /* Gradientti: Lossa musta (#111317) 80% peittävyydellä -> täysin läpinäkyvä */
    background: linear-gradient(to top, rgba(17, 19, 23, 0.8) 0%, transparent 100%);
    
    /* Tärkeä: Hiiri menee tästä läpi, eli ei estä kuvan klikkaamista */
    pointer-events: none; 
    
    /* Varmistetaan että on kuvan päällä */
    z-index: 2; 
}