/* ===========================
   imports and variables
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
:root {
    --bg:#0d0d0d;
    --bg-dark:rgba(0,0,0,.92);

    --text:#ffffff;
    --text-dark:#000000;
    --muted:#cccccc;

    --gold:#ffd166;
    --orange:#f5a623;
    --error:#ff6b6b;

    --card:rgba(20,20,20,.90);
    --card-soft:rgba(255,255,255,.08);
    --card-hover:rgba(245,166,35,.07);

    --border:rgba(255,255,255,.10);
    --border-gold:rgba(245,166,35,.30);

    --shadow:0 0 25px rgba(245,166,35,.18);    }

/* ===========================
   reset and base styles
=========================== */
* {    margin:0;   padding:0;   box-sizing:border-box;    }

html {    scroll-behavior:smooth;    }

body {
    font-family:'Oswald',sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top center, var(--card-hover), transparent 35%),
        radial-gradient(circle at bottom right, var(--card-hover), transparent 35%),
        linear-gradient(
            var(--bg-dark),
            var(--bg-dark)
        ),
        url('../images/header-background.jpg');
        background-size:cover;
        background-position:center;
        background-attachment:fixed;    }

img {    max-width:100%;   display:block;    }

a {    color:inherit;    }

ul {    list-style:none;    }

/* ===========================
   header and navigation
=========================== */
header {
    position:absolute;
    width:100%;
    top:0;
    left:0;
    z-index:10000;
    padding:20px;    }

header.scrolled {
    position:fixed;
    padding:8px 20px;
    background:var(--bg-dark);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow);    }

nav {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    position:relative;
    z-index:10001;
    width:100%;
    text-align:center;    }

nav a {
    color:var(--text);
    text-decoration:none;
    font-size:1.15rem;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:12px 14px;
    transition:.3s ease;
    white-space:nowrap;    }

nav a:hover, nav a.active {    color:var(--orange);    }

/* ===========================
   hero
=========================== */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 25px 70px;    }

.hero-content {    max-width:1000px;   margin:auto;    }

.logo {
    width:850px;
    max-width:95%;
    margin:0 auto 25px;
    filter:drop-shadow(var(--shadow));
    animation:floatLogo 5s ease-in-out infinite;    }

.hero h1 {    color:var(--gold);   font-size:4rem;   margin-bottom:15px;    }

.hero p {
    color:var(--muted);
    font-size:1.4rem;
    max-width:800px;
    margin:0 auto 24px;
    line-height:1.6;    }

/* ===========================
   basic text styles
=========================== */
h1 {    color:var(--gold);   font-size:3rem;   text-align:center;   margin-bottom:25px;    }

h2 {    color:var(--gold);   font-size:2rem;   text-align:center;   margin-bottom:20px;    }

h3 {    color:var(--gold);   font-size:1.4rem;   margin-bottom:12px;    }

p {    color:var(--muted);   font-size:1.15rem;   line-height:1.7;    }

.small-text {    font-size:.95rem;   color:var(--muted);    }

.center {    text-align:center;    }

.gold {    color:var(--gold);    }

.orange {    color:var(--orange);    }

/* ===========================
   page sections
=========================== */
.section, .section-small {    width:100%;   margin:0 auto;   padding-left:25px;   padding-right:25px;    }

.section {    max-width:1200px;   padding-top:45px;   padding-bottom:45px;    }

.section-small {    max-width:900px;   padding-top:35px;   padding-bottom:35px;    }

main, header + .section, header + .section-small {    padding-top:135px;    }

.section + .section, .section + .section-small, .section-small + .section, .section-small + .section-small {    padding-top:25px;    }

.section-title {
    color:var(--gold);
    text-align:center;
    font-size:2.6rem;
    margin:0 auto 20px;
    line-height:1.15;    }

.section-subtitle {
    color:var(--muted);
    text-align:center;
    max-width:850px;
    margin:0 auto 30px;
    font-size:1.2rem;
    line-height:1.7;    }

.section h1, .section h2, .section-small h1, .section-small h2 {    margin-top:0;    }

/* ===========================
   buttons
=========================== */
.btn {
    display:inline-block;
    background:var(--orange);
    color:var(--text-dark);
    text-decoration:none;
    font-weight:700;
    padding:15px 30px;
    border-radius:8px;
    transition:.3s ease;
    border:none;
    cursor:pointer;    }

.btn:hover {    background:var(--gold);   transform:translateY(-2px);    }

.btn-outline {
    display:inline-block;
    border:2px solid var(--orange);
    color:var(--orange);
    background:transparent;
    text-decoration:none;
    font-weight:700;
    padding:13px 28px;
    border-radius:8px;
    transition:.3s ease;    }

.btn-outline:hover {    background:var(--orange);   color:var(--text-dark);   transform:translateY(-2px);    }

.btn-row {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:30px;    }

/* ===========================
   grids
=========================== */
.grid {    display:grid;   gap:30px;    }

.grid-2 {    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));    }

.grid-3 {    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));    }

.grid-4 {    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));    }

.grid-tight {    gap:18px;    }

.grid-center {    align-items:center;    }

/* ===========================
    cards
=========================== */
.song-card {    max-width:850px;   margin:25px auto 0;   padding:30px;    }

.song-card h2 {
    color:var(--gold);
    text-align:center;
    font-size:1.6rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    padding-bottom:12px;
    margin-bottom:22px;
    border-bottom:2px solid var(--border-gold);    }

.song-card .table-wrap {    border-radius:12px;   border:1px solid var(--border);   background:var(--bg-dark);    }

.song-card .table {    min-width:0;    }

.song-card .table th {    background:var(--orange);   color:var(--text-dark);   text-align:left;    }

.song-card .table td {    padding:14px 18px;    }

.song-card .table tr:last-child td {    border-bottom:none;    }

.song-card .table th:nth-child(2), .song-card .table td:nth-child(2) {    border-left:1px solid var(--border-gold);    }

.card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:15px;
    padding:30px;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,    
        background .25s ease;    }

.card:hover {    transform:translateY(-6px);   border-color:var(--orange);   background:var(--card-hover);   box-shadow:var(--shadow);    }

.card h2, .card h3 {    color:var(--gold);   text-align:center;    }

.card p {    text-align:center;    }

.card-icon {    color:var(--orange);   font-size:3rem;   text-align:center;   margin-bottom:20px;    }

.card-img {    width:100%;   border-radius:12px;   margin-bottom:20px;    }

.card-info {    padding:10px 0;   text-align:center;    }

/* ===========================
   tables
=========================== */
.table-wrap {
    width:100%;
    overflow-x:auto;
    border-radius:15px;
    border:1px solid var(--border);
    background:var(--card);    }

.table {    width:100%;   min-width:650px;   border-collapse:collapse;    }

.table th {
    background:var(--orange);
    color:var(--text-dark);
    padding:18px;
    text-align:left;
    font-size:.95rem;
    letter-spacing:1px;
    text-transform:uppercase;
    border-left:1px solid var(--border-gold);    }

.table td {
    padding:18px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:.95rem;
    border-left:1px solid var(--border-gold);    }

.table tr:hover {    background:var(--card-hover);    }

/* ===========================
   forms (for contact and booking)
=========================== */
.form {
    width:100%;
    max-width:700px;
    margin:0 auto;
    padding:35px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.form input, .form textarea {
    width:100%;
    padding:16px 18px;
    margin-bottom:16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card-soft);
    color:var(--text);
    font-family:'Oswald', sans-serif;
    font-size:1rem;
    letter-spacing:0.5px;
    transition:border-color 0.3s ease,
                box-shadow 0.3s ease,    
                background 0.3s ease;   }

.form input::placeholder, .form textarea::placeholder {    color:var(--muted);    }

.form input:focus, .form textarea:focus {    outline:none;   border-color:var(--orange);   background:var(--card-hover);   box-shadow:var(--shadow);    }

.form textarea {    min-height:170px;   resize:vertical;    }

.form .btn-row {    display:flex;   justify-content:center;   margin-top:10px;    }

.form button, .form .btn {    font-family:'Oswald', sans-serif;   cursor:pointer;    }

.form button:disabled {    opacity:0.7;   cursor:not-allowed;    }

.form-message {
    margin-top:22px;
    text-align:center;
    font-family:'Oswald', sans-serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:1px;    }

.form-message.success {    color:var(--gold);    }

.form-message.error {    color:var(--error);    }

/* ===========================
   social media links
=========================== */
.socials {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:8px;
    margin-bottom:15px;    }

.socials a {    color:var(--text);   font-size:3.6rem;   text-decoration:none;   transition:.3s ease;    }

.socials a:hover {    color:var(--orange);   transform:translateY(-3px);    }

/* ===========================
   video embeds
=========================== */
.video {
    width:100%;
    max-width:1100px;
    margin:0 auto;
    border-radius:15px;
    overflow:hidden;
    box-shadow:var(--shadow);    }

.video iframe {
    width:100%;
    aspect-ratio:16 / 9;
    min-height:500px;
    border:none;
    display:block;    }

.card .video iframe {    min-height:500px;    }

.playlist-card {    max-width:1150px;   margin:0 auto;   padding:24px;    }

.playlist-card .video {    width:100%;   max-width:1050px;   margin:0 auto;    }

.playlist-card .video iframe {    width:100%;   aspect-ratio:16 / 9;   min-height:560px;    }

/* ===========================
   picture gallery
=========================== */
.gallery {    display:grid;   grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));   gap:25px;    }

.gallery img {    width:100%;   border-radius:12px;   cursor:pointer;   transition:.3s ease;    }

.gallery img:hover {    transform:scale(1.03);   box-shadow:var(--shadow);    }

.band-photo {
    cursor:pointer;
    width:100%;
    max-width:950px;
    margin:0 auto 30px;
    border:3px solid var(--gold);
    border-radius:16px;
    box-shadow:var(--shadow);
    display:block;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        filter .3s ease;    }

.band-photo:hover {    transform:translateY(-5px) scale(1.015);   border-color:var(--orange);   box-shadow:var(--shadow);   filter:brightness(1.08) contrast(1.05);    }

/* ===========================
   image lightbox
=========================== */
.image-lightbox {
    position:fixed;
    inset:0;
    background:var(--bg-dark);
    display:none;
    justify-content:center;
    align-items:center;
    padding:70px 25px 35px;
    z-index:20000;    }

.image-lightbox.active {    display:flex;    }

.image-lightbox img {
    max-width:95%;
    max-height:88vh;
    border:3px solid var(--gold);
    border-radius:16px;
    box-shadow:var(--shadow);
    object-fit:contain;    }

.lightbox-close {
    position:absolute;
    top:20px;
    right:28px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:var(--orange);
    color:var(--text-dark);
    font-size:2rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:.3s ease;    }

.lightbox-close:hover {    background:var(--gold);   transform:scale(1.08);    }

body.lightbox-open {    overflow:hidden;    }

/* ===========================
   show and event details
=========================== */
.event {    display:flex;   gap:25px;   align-items:flex-start;    }

.event-date {
    color:var(--orange);
    font-size:2rem;
    font-weight:700;
    min-width:90px;
    text-align:center;    }

.event-info h3 {    text-align:left;   margin-bottom:5px;    }

.event-info p {    text-align:left;    }

.event-info span {    display:inline-block;   color:var(--orange);   font-weight:600;   margin-top:8px;    }

/* ===========================
   songs and genre lists
=========================== */
.list {
    position:relative;
    columns:2;
    column-gap:30px;
    list-style:none;
    padding:0;
    margin:0;
    text-align:center;    }

.list::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:var(--border-gold);
    transform:translateX(-50%);    }

.list li {
    color:var(--muted);
    font-size:.95rem;
    line-height:1.4;
    padding:6px 8px;
    text-align:center;
    break-inside:avoid;    }

.genre-grid {    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));   }

.genre {    position:relative;   overflow:hidden;    }

.genre h2 {
    color:var(--gold);
    text-align:center;
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:1px;
    padding-bottom:12px;
    margin-bottom:18px;
    border-bottom:2px solid var(--border-gold);    }

.genre:hover h2 {    color:var(--orange);    }

/* ===========================
   contact links
=========================== */
.contact-link {    color:var(--text);   text-decoration:none;   font-size:1.4rem;   transition:.3s ease;    }

.contact-link:hover {    color:var(--orange);    }

/* ===========================
   effects for animations and transitions
=========================== */
.hidden {    opacity:0;   transform:translateY(20px);   transition:.6s ease;    }

.show {    opacity:1;   transform:translateY(0);    }

@keyframes floatLogo {
    0%,100% {    transform:translateY(0);    }
    50% {    transform:translateY(-10px);    }
}

/* ===========================
   footer
=========================== */
footer {    background:var(--bg-dark);   border-top:1px solid var(--border);   text-align:center;   padding:50px 20px;    }

footer h3 {    color:var(--gold);   margin-bottom:10px;    }

footer p {    color:var(--muted);   text-align:center;    }

footer a {    color:var(--gold);   text-decoration:none;   transition:.3s ease;    }

footer a:hover {    color:var(--orange);    }

footer p:last-child {    margin-top:4px;   font-size:.85rem;   color:var(--muted);    }


/* ===========================
    progress bar (scroll indicator)
=========================== */
#progress-bar {
    position:fixed;
    top:0;
    left:0;
    height:4px;
    width:0%;
    background:var(--orange);
    z-index:9999;
    box-shadow:var(--shadow);    }

/* ===========================
   tablet / minimized window 
=========================== */
@media(max-width:950px) {

    header {    padding:14px 10px;    }

    header.scrolled {    padding:8px 10px;    }

    nav {    justify-content:center;   flex-wrap:wrap;   gap:10px;    }

    nav a {    font-size:0.9rem;   padding:8px 9px;   letter-spacing:1.2px;    }

    header + .section, header + .section-small {    padding-top:115px;    }

    .section {    padding-top:38px;   padding-bottom:38px;    }

    .section-small {    padding-top:32px;   padding-bottom:32px;    }

    .section-title {    font-size:2.35rem;    }

    .section-subtitle {    font-size:1.1rem;    }
    
    .genre-grid {    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));    }

    .list {    column-gap:24px;    }

    .list li {    font-size:.9rem;   padding:5px 6px;    }

    .grid {    gap:24px;    }

    .card {    padding:24px;    }

    .video iframe {    min-height:380px;    }
    
    .playlist-card {    max-width:100%;   padding:20px;    }

    .playlist-card .video iframe {    min-height:420px;    }
}

/* ===========================
   mobile(phone) responsive styles
=========================== */
@media(max-width:600px){

    body {    background-attachment:scroll;    }

    header {    padding:10px 8px;    }

    header.scrolled {    padding:7px 8px;    }

    nav {    justify-content:center;   flex-wrap:wrap;   gap:6px;   overflow:visible;   padding:0;    }

    nav a {    font-size:0.72rem;   padding:6px 6px;   line-height:1;   letter-spacing:0.8px;    }

    .hero {    min-height:90vh;   padding:100px 20px 60px;    }

    .logo {    width:320px;    }

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

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

    .section, .section-small {    padding-left:18px;   padding-right:18px;    }

    .section {    padding-top:28px;   padding-bottom:28px;    }

    .section-small {    padding-top:26px;   padding-bottom:26px;    }

    header + .section, header + .section-small {    padding-top:110px;    }

    .section + .section, .section + .section-small, .section-small + .section, .section-small + .section-small {    padding-top:18px;    }

    h1, .section-title {    font-size:2rem;   margin-bottom:14px;   line-height:1.15;    }

    h2 {    font-size:1.5rem;    }

    h3 {    font-size:1.25rem;    }

    p, .section-subtitle {    font-size:1rem;    }

    .section-subtitle {    margin-bottom:24px;    }

    .grid, .grid-2, .grid-3, .grid-4 {    grid-template-columns:1fr;   gap:20px;    }

    .card {    padding:20px 16px;   border-radius:13px;    }

    .song-card {    max-width:100%;   margin:20px auto 0;   padding:20px 16px;    }

    .song-card h2 {    font-size:1.25rem;   margin-bottom:16px;   padding-bottom:10px;    }

    .song-card .table {    min-width:0;    }

    .song-card .table th, .song-card .table td {    padding:12px;   font-size:0.9rem;    }

    .table {    min-width:520px;    }

    .table th, .table td {    padding:13px;   font-size:0.9rem;    }

    .event {    flex-direction:row;   align-items:flex-start;   text-align:left;   gap:10px;    }

    .event-date {    min-width:55px;   width:55px;   text-align:left;   font-size:1.4rem;    }

    .event-info {    min-width:0;   flex:1;    }

    .event-info h3, .event-info p {    text-align:left;    }
    
    .genre-grid {    grid-template-columns:1fr;    }

    .list {    columns:2;   column-gap:18px;    }

    .list li {    font-size:.85rem;   padding:5px 4px;    }

    .video iframe {    min-height:220px;    }

    .card .video iframe {    min-height:220px;    }

    .playlist-card {    padding:14px;    }

    .playlist-card .video iframe {    min-height:260px;    }

    .gallery {    grid-template-columns:repeat(2, 1fr);   gap:12px;    }

    .gallery img {    height:170px;   object-fit:cover;    }

    .band-photo {    margin-bottom:22px;   border-width:2px;   border-radius:12px;    }

    .socials {    gap:14px;    }

    .socials a {    font-size:2.2rem;    }

    .form {    padding:24px 18px;   border-radius:14px;    }

    .form input, .form textarea {    padding:14px 15px;   font-size:0.95rem;    }

    footer {    padding:38px 18px;    }
}