/*
 * Page Category Navigator — Foglio di stile
 * Plugin:  Page Category Navigator v1.6.0
 * Author:  De Marchi — https://www.de-marchi.com
 *
 * Design: bordi 1px #ccc, spigoli vivi, niente ombre.
 * Breadcrumb a chevron orizzontali.
 * Icona cartella per categorie, icona documento per pagine.
 *
 * =========================================================
 * SEZIONI PERSONALIZZABILI
 * 1. VARIABILI
 * 2. CONTENITORE
 * 3. BREADCRUMB A CHEVRON
 * 4. COLONNA CORRENTE
 * 5. VOCI CATEGORIA
 * 6. VOCI PAGINA PRODOTTO
 * 7. PAGINA CORRENTE
 * 8. ICONE
 * 9. RESPONSIVE MOBILE
 * =========================================================
 */

/* =========================================================
   1. VARIABILI — modifica qui per personalizzare
   ========================================================= */
:root {
    --pcn-border:           #cccccc;
    --pcn-bg:               #ffffff;
    --pcn-bg-crumb:         #f0f0f0;     /* sfondo breadcrumb */
    --pcn-bg-crumb-hover:   #e0e0e0;     /* hover crumb cliccabile */
    --pcn-bg-active:        #174080;     /* sfondo crumb attivo — colore brand */
    --pcn-bg-hover:         #f7f7f7;     /* hover voci lista */
    --pcn-text:             #1a1a1a;
    --pcn-text-muted:       #888888;
    --pcn-text-crumb:       #555555;
    --pcn-text-active:      #ffffff;     /* testo crumb attivo */
    --pcn-icon-color:       #888888;     /* colore icone a riposo */
    --pcn-icon-hover:       #444444;     /* colore icone su hover */
    --pcn-accent-left:      #1a1a1a;     /* bordo sinistro voce corrente */
    --pcn-arrow-color:      #bbbbbb;     /* freccia › nelle voci */
    --pcn-font-size:        13px;
    --pcn-font-size-crumb:  12px;
    --pcn-crumb-height:     40px;        /* altezza riga breadcrumb */
    --pcn-chevron-w:        11px;        /* larghezza punta chevron */
}

/* =========================================================
   2. CONTENITORE
   ========================================================= */
.pcn-navigator {
    width: 100%;
    font-family: inherit;
    font-size: var(--pcn-font-size);
    color: var(--pcn-text);
    border: 1px solid var(--pcn-border);
    background: var(--pcn-bg);
    border-radius: 0;
    margin-bottom: 1.5rem;
    overflow: visible;
}

/* =========================================================
   3. BREADCRUMB A CHEVRON
   =========================================================
   Ogni elemento ha due pseudo-elementi ::before/::after
   che formano la punta triangolare destra (chevron).
   ::before = bordo del chevron (colore #ccc)
   ::after  = riempimento del chevron (stesso colore del crumb)
   ========================================================= */
.pcn-crumbs {
    display: flex;
    align-items: stretch;
    min-height: var(--pcn-crumb-height);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--pcn-bg-crumb);
    border-bottom: 1px solid var(--pcn-border);
    flex-wrap: nowrap;
}
.pcn-crumbs::-webkit-scrollbar { display: none; }

/* Singolo elemento breadcrumb */
.pcn-crumb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 calc(var(--pcn-chevron-w) + 10px) 0 22px;
    min-height: var(--pcn-crumb-height);
    font-size: var(--pcn-font-size-crumb);
    color: var(--pcn-text-crumb);
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--pcn-bg-crumb);
    user-select: none;
    cursor: default;
    line-height: 1;
}
.pcn-crumb:first-child {
    padding-left: 14px;
}

/* Bordo chevron (layer inferiore) */
.pcn-crumb::before {
    content: '';
    position: absolute;
    right: calc(-1 * var(--pcn-chevron-w) - 2px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top:    calc(var(--pcn-crumb-height) / 2 + 1px) solid transparent;
    border-bottom: calc(var(--pcn-crumb-height) / 2 + 1px) solid transparent;
    border-left:   calc(var(--pcn-chevron-w) + 2px) solid var(--pcn-border);
    z-index: 1;
}
/* Riempimento chevron (layer superiore, copre il bordo) */
.pcn-crumb::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--pcn-chevron-w));
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top:    calc(var(--pcn-crumb-height) / 2) solid transparent;
    border-bottom: calc(var(--pcn-crumb-height) / 2) solid transparent;
    border-left:   var(--pcn-chevron-w) solid var(--pcn-bg-crumb);
    z-index: 2;
}
/* Ultimo elemento: niente chevron */
.pcn-crumb:last-child::before,
.pcn-crumb:last-child::after {
    display: none;
}

/* Stato: cliccabile (crumb intermedi navigabili) */
.pcn-crumb.pcn-crumb-clickable {
    cursor: pointer;
}
.pcn-crumb.pcn-crumb-clickable:hover {
    background: var(--pcn-bg-crumb-hover);
    color: var(--pcn-text);
}
.pcn-crumb.pcn-crumb-clickable:hover::after {
    border-left-color: var(--pcn-bg-crumb-hover);
}

/* Stato: bloccato (primo crumb da preselezione URL, non cliccabile) */
.pcn-crumb.pcn-crumb-locked {
    cursor: default;
    opacity: 0.75;
}

/* Stato: attivo (crumb corrente, colorato) */
.pcn-crumb.pcn-crumb-active {
    background: var(--pcn-bg-active);
    color: var(--pcn-text-active);
    font-weight: 500;
}
.pcn-crumb.pcn-crumb-active::after {
    border-left-color: var(--pcn-bg-active);
}
.pcn-crumb.pcn-crumb-active .pcn-icon {
    color: var(--pcn-text-active);
    opacity: 0.85;
}

/* =========================================================
   4. COLONNA CORRENTE
   =========================================================
   Il titolo della categoria NON viene ripetuto qui
   (già visibile nel breadcrumb — eliminato in v1.5).
   ========================================================= */
.pcn-col {
    width: 100%;
    padding: 4px 0;
}

.pcn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================================
   5. VOCI CATEGORIA
   ========================================================= */
.pcn-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: var(--pcn-font-size);
    line-height: 1.35;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
    color: var(--pcn-text);
}
.pcn-item:hover {
    background: var(--pcn-bg-hover);
    border-left-color: var(--pcn-border);
}
.pcn-item:hover .pcn-icon {
    color: var(--pcn-icon-hover);
}

.pcn-item-label {
    flex: 1;
    min-width: 0;
}

.pcn-item-arrow {
    font-size: 12px;
    color: var(--pcn-arrow-color);
    flex-shrink: 0;
    line-height: 1;
}

/* =========================================================
   6. VOCI PAGINA PRODOTTO
   ========================================================= */
.pcn-item.pcn-item-page {
    cursor: pointer;
}

/* =========================================================
   7. PAGINA CORRENTE
   ========================================================= */
.pcn-item.pcn-item-current {
    border-left-color: var(--pcn-accent-left);
    font-weight: 500;
    cursor: default;
}
.pcn-item.pcn-item-current .pcn-icon {
    color: var(--pcn-accent-left);
    opacity: 1;
}

/* Messaggio lista vuota */
.pcn-empty-msg {
    padding: 10px 14px;
    font-size: var(--pcn-font-size);
    color: var(--pcn-text-muted);
    font-style: italic;
}

/* =========================================================
   8. ICONE
   =========================================================
   Dimensione fissa 14×14, colore ereditato dal testo.
   ========================================================= */
.pcn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--pcn-icon-color);
    display: inline-block;
    vertical-align: middle;
    transition: color 0.1s;
}

/* =========================================================
   9. RESPONSIVE MOBILE (≤ 600px)
   ========================================================= */
@media ( max-width: 600px ) {

    .pcn-crumbs {
        flex-wrap: wrap;
    }

    .pcn-crumb {
        /* Su mobile i chevron tra righe diverse si sovrapporrebbero.
           Disabilitiamo i pseudo-elementi se il crumb va a capo. */
        padding: 8px 12px;
    }
    .pcn-crumb::before,
    .pcn-crumb::after {
        display: none;
    }
    /* Separatore testuale al posto del chevron */
    .pcn-crumb + .pcn-crumb::before {
        display: none;
    }

    .pcn-item {
        padding: 11px 14px;
    }
}