/**
 * Theme Name: Nikki
 * Template:   twentytwentyfive
 */

 /*
 ##### HEADER
 */

/* .nk-header-logo.wp-block-site-logo {
    margin-bottom: -15px;
} */

 /*
 ##### NAVIGATION
 */

.nk-navigation > ul.nk-navigation,
ul.nk-navigation {
    list-style: none;
    display: flex;
    gap: 0;
    align-items: center;
}

.nk-navigation > li {
    display: flex;
    align-items: center;
}

.nk-navigation > li .wp-block-navigation-item__content {
    transition: color 0.1s ease;
}

.nk-navigation > li:hover .wp-block-navigation-item__content {
    color: #000000 !important;
}

.nk-navigation > li:not(:last-child)::after {
    content: "•";
    /* font-size: 1.8rem; */
    line-height: 1;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.nk-navigation > li:hover:not(:last-child)::after {
    color: var(--wp--preset--color--accent-1);
}

 /*
 ##### NAVIGATION | Submenu
 */

 .nk-navigation ul.nk-navigation ul.wp-block-navigation-submenu {
    padding: 0.2rem 0rem;
    border: none;
}

.nk-navigation li.has-child > ul.wp-block-navigation-submenu > li.wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 0.025rem 0rem;
}

.nk-navigation ul ul li a span {
    font-size: 12px;
    font-weight: 500;
}

.nk-navigation ul ul li a span::before {
    content: ">";
    margin-right: 0.5rem;
    color: #000000;
    font-weight: 900;
    display: inline-block;
}

 /*
 ##### NAVIGATION | ALWAYS VISIBLE Submenu
 */

/* .nk-navigation li.has-child.open-always ul.wp-block-navigation-submenu {
    position: absolute;
    left: -1px;
    top: 100%;
    background-color: transparent!important;
    padding-top: 0.2rem;
}

.nk-navigation li.has-child.open-always ul.wp-block-navigation-submenu > li {
    justify-content: start;
} */

 /*
 ##### NAVIGATION | Language Switcher
 */

ul.nk-lang-switcher {
    list-style: none;
    text-align: right;
}

ul.nk-lang-switcher li {
    line-height: 1.35rem;
}


ul.nk-lang-switcher a {
    font-size: small;
    text-decoration: none;
    text-transform: uppercase;
}

ul.nk-lang-switcher li.current-lang {
    font-weight: 900;
}


ul.nk-lang-switcher .lang-item-en a,
ul.nk-lang-switcher .lang-item-fr a {
    pointer-events: none;
}

 /*
 ##### NAVIGATION | Contact Icons
 */

div.nk-div-gallery-icons {
    padding-bottom: 0;
}

/* ----- Gallery Container: Right-aligned with max-width ----- */
.nk-gallery-icons {
    display: flex !important;
    justify-content: flex-end !important;  /* Align icons to the right */
    gap: 1.5rem !important;                /* Space between icons */
    flex-wrap: wrap !important;            /* Wrap on smaller screens */
    max-width: 400px !important;           /* Limit the total width */
    margin-left: auto !important;          /* Push the entire gallery to the right */
    padding-top: 10px;
}

.nk-gallery-icons.nk-footer-icons {
    justify-content: center !important;
    margin: auto !important;
}

/* ----- Each figure: Fixed size, not stretching ----- */
.nk-gallery-icons .wp-block-image {
    flex: 0 0 auto !important;             /* Don't grow or shrink */
    width: 40px !important;                /* Fixed width – adjust as needed */
    height: 40px !important;               /* Fixed height */
    margin: 0 !important;                  /* Remove default margins */
}

/* ----- Images inside: Perfectly fit the figure ----- */
.nk-gallery-icons .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;        /* Ensures the icon stays inside */
    display: block !important;
}

 /*
 ##### HEADER
 */

.nk-header-upside-down {
    transform: rotate(180deg);
    transform-origin: center center;   /* Drehpunkt in der Mitte */
    text-transform: uppercase;
    letter-spacing: 0.6rem;
    font-weight: 500;
    margin: 20px 0;
}

/*
##### TEXT
*/

.nk-flow-text h4,
.nk-flow-text p {
    display: inline;            
    font-family: inherit;       /* Gleiche Schriftart wie Container (oder bestimmte) */
}

/*
##### FOOTER
*/

/* ----- Logo überlappt den Separator (Bild deckt Linie ab) ----- */
.nk-footer-logo {
    margin-bottom: -55px !important;      /* Bild nach unten schieben */
    position: relative;
    z-index: 2;                           /* Bild liegt über der Linie */
    background: #ffffff;                /* Hintergrundfarbe – verdeckt die Linie hinter dem Bild */
    padding: 0 10px;                      /* Etwas Platz links/rechts vom Bild */
    display: inline-block;                /* Nur so breit wie das Bild */
}

/* ----- Separator: Unter dem Bild ----- */
.wp-block-separator {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
##### FOOTER | Separator
*/

.nk-footer-separator {
    border-bottom-width: 2px;
    margin-bottom: 40px !important;
}

/*
##### MAIN CONTENT
*/

/*
##### MAIN CONTENT | text alignment
*/

.nk-text-alignment-left {
    text-align: left;
}

p, li, blockquote {
    -webkit-hyphens: auto; /* Für ältere Safari-Versionen (vor 17) */
    hyphens: auto;         /* Der Standard für alle modernen Browser */
}


/*
##### MAIN CONTENT | Separator
*/

/* ----- Trennlinie mittig ausrichten ----- */
.nk-section {
    position: relative;
}

.wp-block-columns .wp-block-separator {
    position: absolute;
    left: 50%;                        /* In der Mitte */
    top: 0%;                         /* Etwas Abstand von oben */
    /* bottom: 90%; */                      /* Etwas Abstand von unten */
    width: 1px;                       /* Dicke der Linie */
    height: 200px;
    border: none;
    background: #000000;              /* Farbe der Linie */
    transform: translateX(-50%);
    margin: 0;
    opacity: 1;
}

/*
##### MAIN CONTENT | Details
*/

/* ----- Entfernt den Standard-Pfeil in allen Browsern ----- */
.nk-details-module summary {
    list-style: none;                    /* Firefox */
    cursor: pointer;                     /* Zeigt an, dass es klickbar ist */
    text-decoration: underline;
    text-align: center;
}

/* ----- WebKit-Browser (Chrome, Safari, Edge) ----- */
.nk-details-module summary::-webkit-details-marker {
    display: none;                       /* Entfernt den Pfeil */
}

/* ----- Liste, keine Punkte ----- */

.nk-list-style-type {
    list-style-type: none;
    padding-left: 0;
}

/*
##### MAIN CONTENT | References
*/

/* ----- Box um das Bild: 210 × 145 px, mit Rahmen ----- */
.nk-column-2 .nk-column-1-2 figure.wp-block-image.aligncenter {
    margin-right: 20px;
}

.nk-column-2 .nk-column-2-2 figure.wp-block-image.aligncenter {
    margin-left: 20px;
}

.nk-column-2 .nk-item-heading-image figure.wp-block-image {
    width: 210px !important;               /* Box-Breite */
    height: 145px !important;              /* Box-Höhe */
    display: flex !important;
    justify-content: center !important;    /* Bild horizontal zentrieren */
    border: 1px solid #000000 !important;  /* Rahmen – Farbe/Dicke anpassen */
    padding: 1rem !important;              /* Innenabstand, damit Bild nicht am Rahmen klebt */
    box-sizing: border-box !important;     /* Rahmen wird in Größe eingerechnet */
    overflow: hidden !important;
}

details.wp-block-details:focus, 
details.wp-block-details summary:focus,
:where(.wp-site-blocks :focus) {
    border: none !important;
    outline: none !important;
    outline-width: 0;
    outline-style: none;
}

.cb-carousel-block .swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0); /* Nur ein Beispiel, um das Präfix zu erzwingen */
    -webkit-backface-visibility: hidden; /* Hilft oft bei Rendering-Problemen */
}

/* Erlaubt jedem Slide, nur so hoch wie sein Inhalt zu sein */
.cb-carousel-block .swiper-slide {
    height: auto !important;
}

.cb-button-prev, .cb-button-next {
    z-index: 100 !important;
}

/*
##### MAIN CONTENT | contact form
*/

.wpforms-field:has(.wpforms-field-required) {
    display: grid;
    grid-template-columns: auto 1fr;
    /* column-gap: 0.5rem; */
    row-gap: 0.25rem;
    align-items: center;
}

.wpforms-field:has(.wpforms-field-required)::before {
    content: "*";
    color: #e53e3e;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1;
    grid-column: 1;
    grid-row: 1;
    margin-left: -25px;
}

.wpforms-field:has(.wpforms-field-required) input,
.wpforms-field:has(.wpforms-field-required) textarea {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}

.wpforms-field:has(.wpforms-field-required) em.wpforms-error {
    grid-column: 2;    /* automatisch unter dem Feld */
    grid-row: 2;
    margin: 0;
    font-size: 0.875em;
    font-style: normal;
}

/*
##### MOBILE
*/

/*
##### MOBILE | Tablet
*/

/*
##### MOBILE | Tablet | Navigation
*/

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:50%!important;
    }
}

@media (max-width: 640px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:100%!important;
        text-align: center;
    }
    .wp-container-core-columns-is-layout-87724155 {
        gap: 0;
    }

    .is-layout-flex > :is(*, div) {
        margin: auto;
    }
}

.nk-header-column-2 

/*
##### MOBILE | Tablet | Mobile Overlay, Burger Menu
*/

/* ----- 1. Desktop-Ansicht ab 1025px erzwingen ----- */
@media (min-width: 1024px) {
    /* Hamburger-Button ausblenden */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    /* Normales Menü anzeigen */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
    }
}

/* ----- 2. Mobile Ansicht bis 1024px erzwingen ----- */
@media (max-width: 1023px) {
    /* Hamburger-Button anzeigen */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
    /* Normales Menü ausblenden */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}