/*
Theme Name: RaffaelVerlag
Theme URI: https://raffaelverlag.ch
Description: Child-Theme von Neve für eigene Anpassungen
Author: Lukas Naef
Template: neve
Version: 0.1
Text Domain: raffaelverlag
*/



/******  HEADER *********/

/* MENU-POINTS */

.header--row a,
.header-menu-sidebar-inner a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;

    &[aria-current="page"] {
        color: white !important;
        font-weight: 900;
        text-decoration: underline;
    }
}



/****** PRODUCT-OVERVIEW *********/

/* SORT (remove) */
.nv-woo-filters {
    display: none !important;
}

/* Blog Heading */
.blog-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Dropdown Categories */
.custom-filter-dropdown select {
    -webkit-appearance: none;
    /* Für Safari/Chrome */
    -moz-appearance: none;
    /* Für Firefox */
    appearance: none;
    /* Standard */

    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    /* Optional: Eine feine Linie drunter, falls gewünscht */
    border-radius: 0;
    padding: 5px 30px 5px 0;
    /* Rechts Platz für den Pfeil lassen */
    margin: 0;

    /* Text-Styling anpassen (wie eine Überschrift) */
    font-family: inherit;
    /* Nutzt die Schriftart deines Themes */
    font-size: 32px;
    /* Größe einer H3/H4 Überschrift */
    font-weight: 600;
    /* Fettgedruckt */
    color: black;
    /* Deine Wunschfarbe */
    cursor: pointer;

    /* 4. Den dezenten Pfeil als Hintergrundbild einfügen */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    /* Setzt den Pfeil ganz nach rechts */
    background-size: 14px;
    /* Größe des Pfeils */

    &:focus {
        outline: none !important;
    }
}

@media screen and (max-width: 800px) {
    .blog-heading{
        flex-wrap: wrap-reverse;
    }
    .custom-filter-dropdown select {
        font-size: 26px;
    }
}


/* Dropdown perpage */
.woocommerce-perpage select {
    -webkit-appearance: none;
    /* Für Safari/Chrome */
    -moz-appearance: none;
    /* Für Firefox */
    appearance: none;
    /* Standard */

    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    /* Optional: Eine feine Linie drunter, falls gewünscht */
    border-radius: 0;
    padding: 5px 30px 5px 0;
    /* Rechts Platz für den Pfeil lassen */
    margin: 0;

    /* Text-Styling anpassen (wie eine Überschrift) */
    font-family: inherit;
    /* Nutzt die Schriftart deines Themes */
    font-size: 16px;
    /* Größe einer H3/H4 Überschrift */
    font-weight: 500;
    /* Fettgedruckt */
    color: black;
    /* Deine Wunschfarbe */
    cursor: pointer;

    /* 4. Den dezenten Pfeil als Hintergrundbild einfügen */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    /* Setzt den Pfeil ganz nach rechts */
    background-size: 14px;
    /* Größe des Pfeils */
}

/* --- Fix für zu breite Dropdowns in der mobilen Ansicht --- */
@media (max-width: 600px) {
    /* Betrifft die Container, die die Dropdowns (Sortierung / Kategorien) halten */
    .woocommerce-ordering,
    .wc-block-product-categories {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Zwingt das eigentliche Auswahlfeld, innerhalb des Bildschirms zu bleiben */
    .woocommerce-ordering select,
    .wc-block-product-categories select {
        max-width: 100% !important;
        width: 100% !important;
        text-overflow: ellipsis !important; /* Fügt "..." an, wenn ein Text zu lang ist */
        white-space: nowrap !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* Falls die beiden Dropdowns nebeneinander stehen und sich gegenseitig wegdrücken,
       zwingen wir sie mobil untereinander – so ist die "Produkte pro Seite"-Auswahl sofort wieder sichtbar */
    .storefront-sorting, /* Falls dein Theme Storefront ist, sonst greift der allgemeine WooCommerce-Standard */
    .woocommerce-pagination-and-sorting { 
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
}