body{
    background:#f7f3eb;
    font-family:'Cormorant Garamond',serif;
}

.hero{
    min-height:100vh;
    background-image:url('../../img/hero-grandorgano.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
}

.hero-overlay{
    background:linear-gradient(
        90deg,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.60) 40%,
        rgba(0,0,0,0.25) 100%
    );

    min-height:100vh;

    display:flex;
    align-items:center;
}

.hero h1{
    color:#ffffff;
    font-size:5rem;
    line-height:1.1;
    margin-bottom:30px;
    text-shadow:2px 2px 12px rgba(0,0,0,.7);
}

.hero p{
    color:#f1f1f1;
    font-size:1.5rem;
    margin-bottom:35px;
    max-width:500px;
}

.btn-gold{
    background:#b78b3f;
    color:#ffffff;
    border:none;
    padding:14px 35px;
    font-size:1.1rem;
    transition:.3s;
}

.btn-gold:hover{
    background:#9b7534;
    color:#ffffff;
    transform:translateY(-2px);
}

@media (max-width: 992px){

    .hero{
        min-height:80vh;
        background-position:70% center;
    }

    .hero-overlay{
        min-height:80vh;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        font-size:1.2rem;
    }
}

.overlay h1{
    color:white;
    font-size:4rem;
}

.category-card{
    background:#1d1d1d;
    color:white;
    padding:40px;
    margin-bottom:20px;
}

.article-card{
    border:none;
}

.read-more{
    display:inline-block;
    color:#b78b3f;
    font-weight:600;
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:all .3s ease;
}

.read-more:hover{
    color:#8d682b;
    border-bottom:2px solid #b78b3f;
    transform:translateX(4px);
}

.read-more:visited{
    color:#b78b3f;
}

.article-card a,
.article-card a:visited,
.article-card a:hover,
.article-card a:active {
    color: #b78b3f !important;
    text-decoration: none !important;
    font-weight: 600;
}
 
/* Il box principale */
.category-box {
    /* Sfondo: unisce un'overlay nera all'80% di opacità con l'immagine di sfondo */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('percorso-tua-immagine.jpg');
    background-size: cover;
    background-position: center;
    
    color: #ffffff !important; /* !important aiuta se Bootstrap sovrascrive il colore */
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Assicurati che il contenitore padre abbia una flexbox o altezza definita per far funzionare il 100% */
    height: 100%; 
    border-radius: 12px;
    
    /* Per gestire la disposizione verticale degli elementi interni */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Box principale con sfondo scuro fisso (in attesa dell'immagine) */
.category-box {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
    padding: 40px 30px !important;
    text-align: center !important;
    border-radius: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Effetto Hover */
.category-box:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Titolo Oro */
.category-box h2 {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    color: #d8b46a !important;
    font-size: 1.5rem !important;
    font-family: sans-serif; /* O il font del tuo sito */
}

/* Testo descrittivo */
.category-box p {
    margin-bottom: 20px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
}

/* Trasformiamo il link blu in una scritta oro senza sottolineatura */
.category-box .explore-link {
    color: #d8b46a !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

.category-box .explore-link:hover {
    color: #ffffff !important;
}

/* Box 1 */
.category-box.bg-note {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina2.png');
    background-size: c2ver;
    background-position: center;
}

/* Box 2 */
.category-box.bg-vob {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina6.png');
    background-size: cover;
    background-position: center;
}


/* Box 3 */
.category-box.bg-abbandonati {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina3.png');
    background-size: cover;
    background-position: center;
}

/* Box itinerari */
.category-box.bg-itinerari {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina7.png');
    background-size: cover;
    background-position: center;
}

/* Box 4 */
.category-box.bg-pagina {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), 
                url('../../img/copertina4.png');
    background-size: cover;
    background-position: center;
}

/* Box 5 */
.category-box.bg-spartiti {
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), 
                url('../../img/copertina4.png');
    background-size: cover;
    background-position: center;
}

/* Box 6 */
.category-box.bg-spartiti {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina5.png');
    background-size: cover;
    background-position: center;
}

/* Box 7 */
.category-box.bg-canne {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                url('../../img/copertina6.png');
    background-size: cover;
    background-position: center;
}

.logo-navbar{
    height:50px;
    width:auto;
}

@media (max-width: 768px){

    .logo-navbar{
        height:32px;
    }

    .navbar-brand span{
        font-size:1rem;
    }
}

.custom-nav {
    background-color: rgba(75, 46, 26, 0.85) !important; /* marrone semitrasparente */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);                          /* sfoca ciò che scorre sotto */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.custom-nav .navbar-brand,
.custom-nav .nav-link {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.link-arancio,
.link-arancio:visited {
    color: #e8b45a;          /* arancio-oro, simile al titolo */
    text-decoration: none;
}
.link-arancio:hover {
    color: #f5cc82;          /* un po' più chiaro al passaggio del mouse */
    text-decoration: underline;
}

.btn-arancio,
.btn-arancio:visited {
    display: inline-block;
    padding: 10px 28px;
    background-color: #e8b45a;   /* arancio-oro, come il titolo */
    color: #2b1a0c !important;   /* testo marrone scuro, leggibile sull'arancio */
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 6px;
    border: 2px solid #e8b45a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: background 0.2s, color 0.2s;
}
.btn-arancio:hover {
    background-color: transparent;   /* si "svuota" al passaggio del mouse */
    color: #e8b45a !important;
    text-decoration: none;
}

.scroll-down {
  display: inline-block;
  margin-top: 2rem;
  color: #c9a24b; /* l'oro del tuo pulsante */
  animation: rimbalzo 1.8s ease-in-out infinite;
  transition: color .2s;
}
.scroll-down:hover { color: #e6c274; }

@keyframes rimbalzo {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(12px); opacity: 1; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .scroll-down { animation: none; }
}

    /* Bauhaus 93: usa il font installato sul computer oppure il file in fonts/ (vedi nota), altrimenti Righteous */
    @font-face {
        font-family: 'Bauhaus93Web';
        src: local('Bauhaus 93'), local('Bauhaus93'), local('BAUHS93'),
             url('../../fonts/BAUHS93.woff2') format('woff2'),
             url('../../fonts/BAUHS93.ttf') format('truetype');
        font-display: swap;
    }
    
    .section-title.titolo-bauhaus,
    h2.titolo-bauhaus {         /* titolo di sezione: Bauhaus 93, centrato, blu petrolio */
        font-family: 'Bauhaus93Web', 'Righteous', sans-serif;
        font-weight: 400;
        font-size: 2.6rem;
        text-align: center;
        text-transform: uppercase;
        color: #00789d;
        margin-bottom: 28px !important;
    }