:root {
    /* Mettiamo 'Times New Roman' o 'serif' come fallback */
    --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* TODO:: modificare font --> helvetica neue light */
/* TODO:: girare X su navbar */

@media (min-width: 992px) {
    #offcanvasNavbar {
        /* Bootstrap di base usa 400px.
           Mettiamo 45% per occupare quasi metà pagina.
           Puoi usare 50% per la metà esatta.
        */
        width: 40%; 
    }
}

/* --- ANIMAZIONE TASTO CHIUSURA MENU --- */

.btn-close-rotate {
    /* Rimuove l'alone di focus standard se non ti piace, opzionale */
    box-shadow: none !important; 
    
    /* Prepara la transizione: durerà 0.5 secondi e sarà morbida */
    transition: transform 0.5s ease-in-out;
    
    /* Opzionale: se la vuoi un po' più grande */
    /* transform: scale(1.2); */
}

.btn-close-rotate:hover {
    /* Quando passi col mouse, ruota di 360 gradi (un giro completo) */
    transform: rotate(360deg);
    
    /* Opzionale: se vuoi che diventi anche rossa o più scura */
    /* opacity: 1; */
}

body {
    font-family: var(--font-main);
}

/* Forza anche i titoli (Bootstrap a volte è testardo) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-main);
}

.logo-yellow, .logo-grey {
    font-family: var(--font-main);
    font-weight: 400; /* Sottile */
    font-size: 0.8rem; /* Molto piccolo */
    letter-spacing: 1px; /* Spaziatura elegante */
    text-decoration: none;
}
.logo-yellow {
    color: #ff8813;
}
.logo-grey {
    color: #2E2E2E;
}
.logo-img{
    height: 45px;
    width: auto;
}

.navbar-text-yellow, .navbar-text-grey {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 2rem;
    /* letter-spacing: 2px; */
    text-decoration: none;
}
.navbar-text-yellow {
    color: #ff8813;
}
.navbar-text-grey {
    color: #2E2E2E;
}

.text-product-portfolio {
    font-family: var(--font-main);
    font-weight: 200;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-decoration: none;
    color: white
}
.h1-product-custom{
    font-family: var(--font-main);
    font-weight: 100;
    font-size: 1.6rem;
    letter-spacing: 3px;
    text-decoration: none;
}
.text-product-category {
    font-family: var(--font-main);
    font-weight: 100;
    font-size: 1.2rem;
    text-decoration: none;
}
.text-product-category-content {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 1rem;
    text-decoration: none;
}
.text-product-description {
    font-family: var(--font-main);
    font-weight: 200;
    font-size: 1.2rem;
    text-decoration: none;
}

/* Link inseriti dall'editor di testo nelle descrizioni */
.text-product-description a,
.text-product-description a:visited,
.text-product-description a:hover,
.text-product-description a:focus {
    color: #ff8813;
}
/* assets/styles/app.css */

.text-go-back-btn {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 1.1rem;
    text-decoration: none !important; /* Toglie sottolineatura forzatamente */
    
    /* Colore base (toglie il blu standard) */
    color: #2E2E2E; 
    
    /* Allineamento Icona-Testo */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Spazio tra la freccia e la scritta */
    
    transition: all 0.3s ease;
}

/* 2. Numeri di pagina minimali (solo testo) */
.pagination-number {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 1.1rem;
    color: #2E2E2E;
    text-decoration: none;
    padding: 0 5px;
    transition: color 0.3s ease;
}

/* Il numero attivo è solo più "bold" o colorato, senza sfondi */
.pagination-number.active {
    font-weight: 600; 
    color: #2E2E2E; /* O mustard se preferisci evidenziarlo col colore */
    cursor: default;
}

/* Colore specifico per le icone social */
.social-icon {
    /* Usa la tua variabile o il codice colore antracite */
    color: #2E2E2E; 
    transition: color 0.3s ease;
}

/* Effetto Hover: diventano gialle quando ci passi sopra */
.social-icon:hover {
    color: #ff8813; 
}

.product-item {
    overflow: hidden; /* Mantiene tutto dentro i bordi (utile se metti border-radius) */
    cursor: pointer;
}

/* Stile dell'immagine base */
.product-item img {
    display: block;
    transition: transform 0.3s ease; /* Opzionale: piccolo zoom */
}

/* Il livello scuro con il testo */
.product-overlay {
    position: absolute; /* Si sgancia dal flusso e si sovrappone */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Colore nero al 60% di opacità */
    background-color: rgba(0, 0, 0, 0.6); 
    
    /* Invisibile all'inizio */
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* --- EFFETTO HOVER --- */

/* Quando passi sopra l'item, l'overlay diventa visibile */
.product-item:hover .product-overlay {
    opacity: 1;
}

/* Opzionale: piccolo zoom dell'immagine sotto */
.product-item:hover img {
    transform: scale(1.05);
}

/* assets/styles/app.css */

.product-img-grid {
    width: 100%;              /* Occupa tutta la larghezza della colonna */
    aspect-ratio: 1 / 1;      /* Forza un rapporto 1:1 (Quadrato perfetto) */
    
    /* LA MAGIA: */
    object-fit: cover;        /* Riempie il quadrato tagliando l'eccedenza, NIENTE deformazioni */
    object-position: center;  /* Se l'immagine viene tagliata, mantieni il centro visibile */
    
    display: block;           /* Rimuove spazi bianchi indesiderati sotto le img */
    background-color: #f8f9fa; /* (Opzionale) Colore di sfondo mentre carica */
}

/* assets/styles/app.css */

.profile-image-container {
    width: 100%;
    /* Calcola l'altezza: 100% dello schermo meno l'altezza della navbar e un po' di margine */
    height: 70vh; 
    overflow: hidden;
}

/* Su mobile riduciamo l'altezza altrimenti bisogna scrollare troppo */
@media (max-width: 768px) {
    .profile-image-container {
        height: 50vh;
    }
}

/* Foto a sinistra e testo a destra (col-md-6): la foto resta ferma e scorre solo il testo */
@media (min-width: 768px) {
    .profile-image-container {
        position: sticky;
        top: 8rem; /* Coincide con la posizione iniziale della foto, sotto la navbar fissa */
        /* Altezza legata alla larghezza: con i soli vh sui tablet verticali diventa una striscia */
        height: auto;
        aspect-ratio: 4 / 5;
        max-height: min(70vh, calc(100vh - 9rem));
    }

    /* Fascia bianca fino alla linea superiore della foto: il testo che scorre sparisce lì */
    .profile-image-container::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 8rem;
        background-color: #fff;
        z-index: 1020; /* Sotto la navbar fixed-top (1030) e il menu offcanvas (1045) */
    }
}

.profile-image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* FONDAMENTALE: Taglia l'immagine per riempire il box */
    object-position: center; /* La centra se viene tagliata */
    display: block;
}

/* assets/styles/app.css */

/* --- PAGINAZIONE CUSTOM --- */

/* 1. Stile base del bottone (numeri e frecce) */
.page-link {
    color: #2E2E2E;      /* Testo grigio scuro */
    background-color: transparent;       /* Sfondo trasparente */
    border: 1px solid #e0e0e0;           /* Bordino grigio chiarissimo */
    border-radius: 4px;                  /* Angoli leggermente smussati */
    margin: 0 3px;                       /* Spazio tra un bottone e l'altro */
    font-family: var(--font-main);       /* Font Barlow */
    font-weight: 400;
    transition: all 0.3s ease;           /* Animazione fluida */
}

/* 2. Quando passi sopra col mouse (Hover) */
.page-link:hover {
    color: var(--color-mustard);         /* Diventa Giallo */
    background-color: transparent;       /* Resta trasparente o metti #f9f9f9 */
    border-color: var(--color-mustard);  /* Anche il bordo diventa giallo */
}

/* 3. La pagina corrente (Attiva) */
.page-item.active .page-link {
    background-color: #2E2E2E; /* Sfondo Scuro */
    border-color: #2E2E2E;
    color: #fff;                               /* Testo bianco */
    font-weight: 600;
}

/* 4. Togliamo l'alone blu fastidioso quando clicchi (Focus) */
.page-link:focus {
    box-shadow: none;
    color: var(--color-mustard);
    background-color: transparent;
}

/* 5. Stile per i bottoni disabilitati (es. "Indietro" se sei a pag 1) */
.page-item.disabled .page-link {
    color: #ccc;
    background-color: transparent;
    border-color: #f0f0f0;
}

/* --- LOGIN PAGE STYLES --- */

/* 1. Stile degli Input (Squadrati e minimal) */
.form-control {
    border-radius: 0 !important;     /* Forza angoli vivi */
    border: 1px solid #e0e0e0;       /* Bordo grigio chiaro */
    font-family: var(--font-main);
    color: #2E2E2E;
}

/* Quando clicchi nell'input */
.form-control:focus {
    box-shadow: none;                /* Rimuove l'alone blu di Bootstrap */
    border-color: #2E2E2E; /* Bordo scuro */
}

/* 2. Bottone Login Custom */
.btn-login {
    background-color: #ff8813;
    color: #fff;
    border: none;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.contact-title-grey {
    font-family: var(--font-main);
    font-weight: 200;
    font-size: 1.4rem;
    letter-spacing: 6px;
}


/* Stile per input più pulito (simile alla foto) */
.border-secondary-subtle {
    border-color: #ced4da !important;
}

.border-secondary-subtle:focus {
    border-color: var(--color-anthracite) !important; /* Diventa scuro al focus */
    box-shadow: none !important; /* Rimuove l'alone blu di bootstrap */
}

/* Bottone scuro come nella foto */
.btn-dark-custom {
    background-color: #2E2E2E; /* O #333 se non hai la var */
    color: white;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.text-grey {
    color: #2E2E2E;
}

/* --- BASE (Cellulari) --- */
.product-info-gap {
    gap: 35px; 
}

.text-product-category, 
.text-product-category-content {
    font-size: 0.85rem; /* Rimpicciolisce il font solo su schermi piccoli */
}

/* --- DESKTOP (Da tablet in su) --- */
@media (min-width: 768px) {
    .product-info-gap {
        gap: 100px; /* Ripristina la distanza originale */
    }
    
    .text-product-category{
        font-weight: 100;
        font-size: 1.2rem;
        
    }
    .text-product-category-content {
        font-weight: 300;
        font-size: 1rem;
    }
}

/* --- ESPERIENZE (pagina profilo) --- */
.profile-experiences {
    margin-top: 3rem;
}

.profile-experiences-heading,
.profile-experience-title {
    font-family: var(--font-main);
    font-weight: 400;
    color: #ff8813;
}

.profile-experiences-heading {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    text-decoration: underline;
    text-decoration-color: #ff8813;
    text-underline-offset: 0.25em;
}

.profile-experience-list {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

.profile-experience {
    margin-bottom: 1.5rem;
}

.profile-experience::marker {
    color: #ff8813;
}

.profile-experience-subtitle {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.profile-experience-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}