/* ===== Header ===== */
.wdf-warrantti-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background-image: url('../../assets/warrantti-header.svg');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #ffffff;
}

/* Kielipalkki */
.wdf-warrantti-header__kielipalkki {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding-inline: var(--wdf-padding-x);
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--accent-light);
}

.wdf-warrantti-header__kielipalkki-vasen {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wdf-warrantti-header__kielipalkki-ikoni {
    width: 24px;
    height: 24px;
}

.wdf-warrantti-header__kielipalkki-viiva {
    width: 1px;
    height: 14px;
    background: currentColor;
}

.wdf-warrantti-header__kielet {
    display: flex;
	align-items: center;
	gap:8px;
	font-size: 14px;
}

.wdf-warrantti-header__kielet a {
    color: inherit;
    text-decoration: none;
}

.wdf-warrantti-header__kielet a:hover {
    text-decoration: underline;
}

/* Kielipalkin somet piilossa desktopissa */
.wdf-warrantti-header__kielipalkki-some {
    display: none;
}

/* Yläosa: brändi vasemmalla, some oikealla */
.wdf-warrantti-header__ylaosa {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px calc(2 * var(--wdf-padding-x)) 0 calc(2 * var(--wdf-padding-x));
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.wdf-warrantti-header__brandi {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wdf-warrantti-header__logo {
    height: 76px;
    width: auto;
    filter: brightness(0) invert(1); /* logo valkoiseksi */
}
.wdf-warrantti-header__nimi {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}
.wdf-warrantti-header__some {
    display: flex;
    gap: 16px;
    align-items: center;
}
.wdf-warrantti-header__some-linkki {
    color: #ffffff;
	display: flex;
}

.wdf-warrantti-header__some-linkki:hover {
    color: #e5e5e5; /* tehosteväri hoverissa */
}

.wdf-warrantti-header__brandi-linkki {
    display: contents;       /* linkin oma laatikko poistuu → logo ja nimi säilyvät brandi-flexin osina kuten ennen */
    color: inherit;          /* nimi perii headerin tekstivärin, ei accenttia */
    text-decoration: none;
}
/* ===== Navigaatio (wp_nav_menu) ===== */
.wdf-warrantti-header__navigaatio {
    max-width: 1400px;
    margin: 32px auto 0 auto;
    padding: 0 var(--wdf-padding-x);
    box-sizing: border-box;
}
.wdf-warrantti-header__nav-inner {
    background: var(--wp--preset--color--accent);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: none;
}

/* Valikkorivi: linkit levitetään tasaisesti */
.wdf-warrantti-header__navigaatio .wdf-nav {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0 var(--wdf-padding-x);
    width: 100%;
    box-sizing: border-box;
}
.wdf-warrantti-header__navigaatio .wdf-nav .menu-item {
    position: relative; /* alavalikon ankkuri */
}
.wdf-warrantti-header__navigaatio .wdf-nav a {
    display: block;
    color: #ffffff;
    font-weight: 600;
    padding: 24px 32px;
    text-decoration: none;
}

/* Alavalikot (pudotus hoverilla / näppäimistöllä) */
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 100;
}

/* 3. tason alivalikko: lentää 2. tason kohdan oikealle puolelle */
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.wdf-warrantti-header__navigaatio .wdf-nav .menu-item-has-children:hover > .sub-menu,
.wdf-warrantti-header__navigaatio .wdf-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu a {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 20px;
}
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu a:hover {
    background: #e5e5e5;
}

/* Indikaattori: 2. tason kohta, jolla on 3. taso */
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wdf-warrantti-header__navigaatio .wdf-nav .sub-menu .menu-item-has-children > a::after {
    content: "+";
	transform: scale(1.3);
	color: var(--wp--preset--color--accent);
}

/* ===== Hampurilaisnappi — piilossa desktopilla ===== */
.wdf-warrantti-header__hampurilainen {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: #ffffff; /* periytyy ikonin currentColoriin */
    cursor: pointer;
}
.wdf-warrantti-header__hampurilainen-ikoni {
    height: 32px;
    width: auto;
}

/* ===== Mobiilivalikko-paneeli — piilossa desktopilla ===== */
.wdf-mobiilivalikko {
    display: none;
}

/* ===== Tablettiheader (≤1024px) ===== */
@media (max-width: 1024px) {

    /* Kielipalkki: kielivalinta vasemmalle, somet oikealle */
    .wdf-warrantti-header__kielipalkki {
        justify-content: space-between;
		height:40px;
    }
    .wdf-warrantti-header__kielipalkki-some {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Desktop-navigaatiopalkki piiloon — sisältö siirtyy paneeliin */
    .wdf-warrantti-header__navigaatio {
        display: none;
    }

    /* Yläosan some piiloon — somet näkyvät kielipalkissa */
    .wdf-warrantti-header__some {
        display: none;
    }

    /* Yläosa: padding nollataan ja annetaan brandille */
    .wdf-warrantti-header__ylaosa {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .wdf-warrantti-header__some-linkki svg {
        height: 24px;
        width: auto;
    }

    /* Pääheader: logo + nimi vasemmalle, hampurilainen oikealle */
    .wdf-warrantti-header__brandi {
        width: 100%;
        gap: 8px;
        padding: 32px;
        box-sizing: border-box;
    }
    .wdf-warrantti-header__logo {
        height: 64px;
    }
	
	.wdf-warrantti-header__nimi {
		font-weight: 300;
	}
	
    .wdf-warrantti-header__hampurilainen {
        display: inline-flex;
        margin-left: auto; /* työntää napin oikeaan reunaan */
    }

    /* --- Mobiilivalikko-paneeli --- */

    /* Kontaineri: koko ruudun peittävä, piilossa kunnes avataan */
    .wdf-mobiilivalikko {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s; /* piilotus viiveellä */
    }
    .wdf-mobiilivalikko.auki {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease, visibility 0s linear 0s;
    }

    /* Läpikuultava vihreä peitto */
    .wdf-mobiilivalikko__peitto {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--wp--preset--color--dark) 60%, transparent); /* tumma, läpikuultava */
    }

    /* Paneeli: oikeassa reunassa, 50% leveys tabletilla, liukuu sisään */
    .wdf-mobiilivalikko__paneeli {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.2s ease;
    }
    .wdf-mobiilivalikko.auki .wdf-mobiilivalikko__paneeli {
        transform: translateX(0);
    }

    /* Yläosa: brändi (logo + nimi) vasemmalla, sulkurasti oikealla, tehostevihreä tausta */
    .wdf-mobiilivalikko__ylaosa {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 32px;
        background: var(--wp--preset--color--semi-dark);
    }
    /* Brändiryhmä: logo + nimi vierekkäin */
    .wdf-mobiilivalikko__brandi {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .wdf-mobiilivalikko__logo {
        height: 64px;
        width: auto;
        filter: brightness(0) invert(1); /* logo valkoiseksi */
    }
    /* Brändinimi: kaksi riviä allekkain, valkoinen */
    .wdf-mobiilivalikko__nimi {
        display: flex;
        flex-direction: column;
        color: #ffffff;
        font-size: 14px;
        line-height: 1.3;
    }
    .wdf-mobiilivalikko__sulje {
        padding: 0;
        background: none;
        border: none;
        color: #ffffff;
        cursor: pointer;
    }
    .wdf-mobiilivalikko__sulje svg {
        height: 24px;
        width: 24px;
    }

    /* Navigaatio-osio: valkoinen, 32px padding */
    .wdf-mobiilivalikko__nav {
        padding: 32px;
    }

	/* Plus-merkki kohtiin joista aukeaa alavalikko */
	.wdf-mobiilinav .menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wdf-mobiilinav .menu-item-has-children > a::after {
		content: "+";
		color: var(--wp--preset--color--accent);
		transform: scale(1.3);
	}
	/* Avattuna plus → miinus */
	.wdf-mobiilinav .menu-item.auki > a::after {
		content: "−";
	}
	
    /* Listojen nollaus */
    .wdf-mobiilinav,
    .wdf-mobiilinav .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 1. taso pystyyn */
    .wdf-mobiilinav {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    /* Linkit: 20px, oletuspaino, vasemmalle */
    .wdf-mobiilinav a {
        display: block;
        color: #000000;
        font-size: 20px;
        text-decoration: none;
    }

    /* 1. tason kohta: varataan tila vihreälle reunaviivalle (24px väli tekstiin) */
    .wdf-mobiilinav > .menu-item > a {
        border-left: 3px solid transparent;
        padding: 32px 0 32px 24px; /* ylä/ala 32px, vasen 24px (border-väli säilyy) */
    }
    /* Aktiivinen / avattu 1. taso: vihreä reunaviiva + paino 600 */
    .wdf-mobiilinav > .menu-item.auki > a,
    .wdf-mobiilinav > .menu-item.current-menu-item > a,
    .wdf-mobiilinav > .menu-item.current-menu-ancestor > a {
        border-left-color: var(--wp--preset--color--accent);
        font-weight: 600;
    }

    /* Alavalikko piilossa kunnes 1. taso avataan */
    .wdf-mobiilinav .sub-menu {
        display: none;
        margin-top: 24px;
		margin-left: 32px;
        padding-left: 32px;             /* 2. tason sisennys */
        border-left: 2px solid #d9d9d9; /* vaalea harmaa reunaviiva */
    }
    .wdf-mobiilinav .menu-item.auki > .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* 3. taso: syvempi sisennys, muuten sama kaava */
    .wdf-mobiilinav .sub-menu .sub-menu {
        padding-left: 32px;
    }

	/* Aktiivinen 2./3. tason kohta: paksumpi teksti */
	.wdf-mobiilinav .sub-menu .current-menu-item > a {
		font-weight: 600;
	}
	/* Aktiivisen kohdan kohdalta harmaa pystyviiva → tehosteväri (sama 2px koko) */
	.wdf-mobiilinav .sub-menu .current-menu-item {
		border-left: 2px solid var(--wp--preset--color--accent);
		margin-left: -34px;  /* 32px padding + 2px harmaa reuna → kohdistuu täsmälleen viivan päälle */
		padding-left: 32px;  /* 34px - 2px reuna → teksti pysyy paikallaan */
	}	
}

/* ===== Mobiiliheader (≤767px) ===== */
@media (max-width: 767px){

	 .wdf-warrantti-header__some-linkki svg {
     height: 20px;
	}

	.wdf-warrantti-header__logo {
		height: 48px;
    }
	
	.wdf-warrantti-header__nimi {
		font-size: 12px;
		font-weight: 300;
	}

    /* Paneeli täyttää koko leveyden mobiilissa */
    .wdf-mobiilivalikko__paneeli {
        width: 100%;
    }
	
}