/*
Theme Name: NEXT Helpdesk
Template: twentytwentyfive
Version: 1.0
*/

/* Global layout */
:root {
    --grey-900: #242424;
    --grey-800: #2E2E2E;
    --grey-700: #383838;
    --grey-600: #999;
    --grey-500: #A6A6A6;
    --primary: #00a8a5;
    --primary-dark:  color-mix(in srgb, var(--primary) 80%, black);
    --secondary: #D25425;
    --lightgrey-500: #CCC;
    --lightgrey-200: #DEDEDE;
    --lightgrey-100: #EDEDED;
    --lightgrey-50: #F7F7F7;

}
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.2s ease;
}

header.wp-block-template-part.is-scrolled {
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.wp-site-blocks {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.wp-site-blocks > main {
    flex: 1;
}

footer {
    a {
        text-decoration: none;
        font-weight: normal;
    }
}

/* Menu */
.helpdesk-menu {
    .wp-block-navigation .wp-block-navigation-item {
        padding: 8px 20px;
        background-color: var(--primary);
        color: white;
        border-radius: 100vmax;
        a {
            text-decoration: none;
        }
        &:hover {
            background-color: var(--primary-dark);
        }
    }
}   

/* Accordions */
.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.wp-block-accordion-heading__toggle::after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: url("assets/icons/plus.svg");
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.wp-block-accordion-item.is-open
    .wp-block-accordion-heading__toggle::after {
        background: url("assets/icons/minus.svg");
        transform: rotate(0deg);
}

/* Tabs */
.tutorial-tabs {
    gap: 2px;
    border-bottom: 1px solid var(--lightgrey-500);
}

.tutorial-tabs a {
    padding: 8px 20px;
    text-decoration: none;
    background-color: #efefef;
    border-radius: 8px 8px 0 0;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: var(--lightgrey-500);
}

.tutorial-tabs a:hover {
    background-color: var(--wp--preset--color--accent-1);
    color: white !important;
}

.tutorial-tabs .current-menu-item > a,
.tutorial-tabs .current-menu-item > a.is-active {
    background-color: var(--wp--preset--color--accent-1);
    color: white !important;;
}

/* Beitragsliste */

.striped > li:nth-child(odd) {
    background-color: #efefef;
}

.striped > li:nth-child(even) {
    background-color: var(--wp--preset--color--base);
}
.striped > li:nth-child(1) {
    border-radius: 8px 8px 0 0;
}
.striped > li:nth-child(1) > div:nth-child(1) {
    border-top-right-radius: 8px;
}

/* Kategorien */
.wp-block-post-terms.taxonomy-category a {
    background-color: var(--wp--preset--color--accent-3);
    color: var(--grey-900);
}
.wp-block-post-terms.taxonomy-category a:hover {
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
    text-decoration: none;
}