/**
 * P'INC Offcanvas - Styles
 * Version: 2.0.0
 */

/* ====================================== */
/* CSS VARIABLES */
/* ====================================== */
:root {
    /* Pill Button – geschlossen */
    --pinc-offcanvas-btn-bg: #000000;
    --pinc-offcanvas-btn-color: #ffffff;
    --pinc-offcanvas-btn-padding: var(--spacing-1) var(--spacing-1);
    --pinc-offcanvas-btn-radius: 999px;
    --pinc-offcanvas-btn-font-size: var(--font-size-base);
    --pinc-offcanvas-btn-font-weight: var(--font-weight);

    /* Pill Button – geöffnet (Close-State) */
    --pinc-offcanvas-btn-open-bg: #ffffff;
    --pinc-offcanvas-btn-open-color: #000000;

    /* Panel */
    --pinc-offcanvas-bg: #d7d6d6;

    /* Circular Reveal */
    --pinc-offcanvas-duration: 1s;
    --pinc-offcanvas-easing: cubic-bezier(0.76, 0, 0.24, 1);
}


/* ====================================== */
/* PILL BUTTON */
/* ====================================== */
.pinc-offcanvas-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pinc-offcanvas-btn-padding);
    background: var(--pinc-offcanvas-btn-bg) !important;
    color: var(--pinc-offcanvas-btn-color);
    border: 0 !important;
    border-radius: var(--pinc-offcanvas-btn-radius);
    font-size: var(--pinc-offcanvas-btn-font-size);
    font-weight: var(--pinc-offcanvas-btn-font-weight);
    cursor: pointer;
    position: relative;
    z-index: 10001;
    transition:
        background-color var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing),
        color var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing);
}

.pinc-offcanvas-burger:hover,
.pinc-offcanvas-burger:active,
.pinc-offcanvas-burger:focus {
    outline: none;
}

/* Open-State: Farbe wechseln */
.pinc-offcanvas-burger[aria-expanded="true"] {
    background: var(--pinc-offcanvas-btn-open-bg) !important;
    color: var(--pinc-offcanvas-btn-open-color) !important;
}

.pinc-offcanvas-burger-label {
    pointer-events: none;
    line-height: 1;
}


/* ====================================== */
/* OFFCANVAS CONTAINER */
/* ====================================== */
.pinc-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--pinc-offcanvas-duration);
}

.pinc-offcanvas.pinc-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}


/* ====================================== */
/* BACKDROP (optional, kann transparent bleiben) */
/* ====================================== */
.pinc-offcanvas-backdrop {
    display: none;
}


/* ====================================== */
/* PANEL – Circular Reveal */
/* ====================================== */
.pinc-offcanvas-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--pinc-offcanvas-bg);
    overflow-y: auto;

    /*
     * clip-path circle(): wächst vom Button-Mittelpunkt aus.
     * --pinc-reveal-x / --pinc-reveal-y werden per JS gesetzt.
     * Geschlossen: Radius 0 → Geöffnet: 150vmax
     */
    clip-path: circle(0px at var(--pinc-reveal-x, 50%) var(--pinc-reveal-y, 100%));
    transition: clip-path var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing);
    will-change: clip-path;
}

.pinc-offcanvas.pinc-open .pinc-offcanvas-panel {
    clip-path: circle(150vmax at var(--pinc-reveal-x, 50%) var(--pinc-reveal-y, 100%));
}


/* ====================================== */
/* CLOSE BUTTON (X im Panel – deaktiviert) */
/* ====================================== */
.pinc-offcanvas-close {
    display: none;
}


/* ====================================== */
/* CONTENT */
/* ====================================== */
.pinc-offcanvas-content {
    
}


/* ====================================== */
/* TRIGGER ELEMENTS */
/* ====================================== */
.pinc-offcanvas-trigger {
    cursor: pointer;
}

/* ====================================== */
/* Z-INDEX FIX */
/* ====================================== */
header {
	z-index: 99999;
}