/* ==========================
   TESTOEACCORDI 2026
   HOME CSS
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f5f5f5;
color:#333;
line-height:1.6;
}

/* ==========================
   HEADER
========================== */

header{
background:#ffffff;
padding:15px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.site-brand{
text-align:center;
}

.site-logo{
max-width:320px;
width:100%;
height:auto;
}

.site-title h1{
font-size:28px;
color:#1d4e89;
margin-top:10px;
}

.site-title p{
color:#666;
font-size:16px;
}

/* ==========================
   MENU
========================== */

nav{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin-top:15px;
}

nav a{
background:#1d4e89;
color:#fff;
text-decoration:none;
padding:10px 14px;
border-radius:8px;
font-weight:bold;
font-size:14px;
}

nav a:hover{
background:#163b68;
}

/* ==========================
   RICERCA
========================== */

.search-box{
padding:20px;
text-align:center;
}

.search-box form{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.search-box input{
padding:12px;
width:320px;
max-width:90%;
border:1px solid #ccc;
border-radius:8px;
}

.search-box button{
padding:12px 20px;
background:#1d4e89;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}

/* ==========================
   ALFABETO
========================== */

.alphabet{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
padding:15px;
}

.alphabet a{
background:#fff;
color:#1d4e89;
text-decoration:none;
padding:8px 12px;
border-radius:6px;
font-weight:bold;
box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.alphabet a:hover{
background:#1d4e89;
color:#fff;
}

/* ==========================
   MAIN
========================== */

main{
max-width:1200px;
margin:auto;
padding:15px;
}

/* ==========================
   ADSENSE
========================== */

.banner{
max-width:728px;
height:90px;
margin:20px auto;
border:2px dashed #bbb;
background:#eee;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:#666;
}

/* ==========================
   CANZONE IN EVIDENZA
========================== */

.featured-song{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 1px 6px rgba(0,0,0,.08);
margin-bottom:20px;
text-align:center;
}

.featured-song img{
width:100%;
max-width:500px;
border-radius:10px;
margin-bottom:15px;
}

.featured-label{
display:inline-block;
background:#ffd700;
padding:6px 12px;
border-radius:20px;
font-weight:bold;
margin-bottom:10px;
}

.artist-name{
font-weight:bold;
color:#1d4e89;
margin-bottom:10px;
}

.featured-button{
display:inline-block;
margin-top:10px;
padding:10px 18px;
background:#1d4e89;
color:#fff;
text-decoration:none;
border-radius:8px;
}

/* ==========================
   ULTIME CANZONI
========================== */

.latest-songs{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 1px 6px rgba(0,0,0,.08);
margin-bottom:20px;
}

.latest-songs h2{
margin-bottom:15px;
color:#1d4e89;
text-align:center;
}

.song-list{
columns:2;
list-style:none;
}

.song-list li{
margin-bottom:10px;
}

.song-list a{
text-decoration:none;
color:#1d4e89;
font-weight:bold;
}

/* ==========================
   BOX HOME
========================== */

.promo-box{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:12px;
box-shadow:0 1px 6px rgba(0,0,0,.08);
text-align:center;
}

.promo-icon{
font-size:40px;
margin-bottom:10px;
}

.promo-box h2{
color:#1d4e89;
margin-bottom:10px;
}

.promo-box p{
margin-bottom:15px;
}

.promo-button{
display:inline-block;
padding:10px 18px;
background:#1d4e89;
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:bold;
}

.promo-button:hover{
background:#163b68;
}

/* ==========================
   ARTISTI PIU SUONATI
========================== */

.top-artists{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:12px;
box-shadow:0 1px 6px rgba(0,0,0,.08);
}

.top-artists h2{
text-align:center;
color:#1d4e89;
margin-bottom:15px;
}

.artist-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
}

.artist-link{
display:block;
background:#f8f8f8;
padding:12px;
text-align:center;
text-decoration:none;
color:#1d4e89;
font-weight:bold;
border-radius:8px;
}

.artist-link:hover{
background:#1d4e89;
color:#fff;
}


/* ==========================
   FOOTER
========================== */

.site-footer{
background:#fff;
padding:25px 15px;
margin-top:20px;
text-align:center;
}

.site-footer p{
margin-bottom:12px;
}

.site-footer a{
color:#1d4e89;
text-decoration:none;
font-weight:bold;
}

.site-footer a:hover{
text-decoration:underline;
}

.legal-note{
max-width:900px;
margin:15px auto 0 auto;
font-size:13px;
line-height:1.6;
color:#666;
}

/* ==========================
   MOBILE
========================== */

@media screen and (max-width:768px){

.site-logo{
max-width:220px;
}

.site-title h1{
font-size:22px;
}

nav a{
font-size:13px;
padding:8px 10px;
}

.song-list{
columns:1;
}

.banner{
height:120px;
}

}