/* Restored main page stylesheet (cleaned & fixed) */

html, body {
    height: 100%;
}

body{
    margin: 0;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-logo {
    width: 150px;
    height: auto;
    margin: 16px auto 8px;
    display: block;
}

.about-tagline {
    display: inline-block;
    margin: 0 auto 12px;
    padding: 8px 14px;
    background: #f0f7ff;
    border: 1px solid #cfe3ff;
    border-radius: 999px;
    color: #1e3a5f;
    font-size: 16px;
    font-weight: 600;
}

.logo {
    font-family: 'Poppins', sans-serif; /* clean, modern font */
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 6px;
    letter-spacing: 0.4px;
}

.logo > span:first-child {
    font-weight: 700;
}

.logo .highlight {
    color: #e63946; /* accent color for "online" */
    margin-left: 6px;
    letter-spacing: 0.2px;
}

.search-bar input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Layout order: nav (top), main (middle), footer (bottom) */
nav {
    background-color: hsl(0,0%,25%);
    order: 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 14px;
    display: inline-block;
}

.navbar a:hover {
    background-color: hsl(0,0%,10%);
}

/* main grows to fill available space so footer stays at page bottom */
main {
    margin: 0 20px;
    flex: 1 0 auto;
    order: 1;
    text-align: center;
}

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

.home-links li {
    margin: 6px 0;
}

/* Municipality section list */
.municipality-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.municipality-list li {
    padding-left: 0;
}

/* Homepage visual refresh (scoped to avoid changing other pages) */
body.home-page {
    background:
        linear-gradient(135deg, rgba(37, 140, 83, 0.18), rgba(38, 84, 181, 0.2)),
        linear-gradient(180deg, #0e1f18 0%, #122743 100%);
    color: #e6f2ea;
}

body.home-page header {
    padding-top: 10px;
}

body.home-page .logo {
    color: #eef9f2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.home-page .logo .highlight {
    color: #c79b2a;
}

body.home-page nav,
body.home-page .navbar {
    background: linear-gradient(90deg, #0f3d2e 0%, #0f3d2e 55%, #0e2c74 100%);
    box-shadow: 0 6px 18px rgba(15, 61, 46, 0.24);
}

body.home-page .navbar a {
    color: #f6fff8;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.home-page .navbar a:hover {
    background-color: #14543f;
    color: #ffe8b6;
}

body.home-page main {
    max-width: 960px;
    margin: 24px auto;
    padding: 24px 18px;
    border: 1px solid #315143;
    border-radius: 14px;
    background: #17291f;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

body.home-page .home-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: #effbf3;
}

body.home-page .home-subtitle {
    margin: 10px auto 18px;
    max-width: 760px;
    color: #c1d8cb;
    font-size: 0.98rem;
}

body.home-page .home-links {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.home-page .home-links li {
    margin: 0;
}

body.home-page .home-links a {
    display: block;
    padding: 12px 14px;
    border: 1px solid #3b5d4b;
    border-radius: 10px;
    background: linear-gradient(145deg, #1d362b, #162b22);
    color: #e8f5ed;
    text-decoration: none;
    font-weight: 600;
}

body.home-page .home-links a:hover {
    background: linear-gradient(145deg, #244337, #1b352b);
    border-color: #c79b2a;
}

body.home-page .site-footer {
    background: #0d2b21;
    color: #dfebe4;
}

body.home-page .site-footer h4,
body.home-page .site-footer a:hover {
    color: #ffffff;
}

body.home-page .site-footer a {
    color: #bdd8c9;
}

@media (prefers-color-scheme: dark) {
    body.home-page {
        background: linear-gradient(180deg, #0b1b15 0%, #10223d 100%);
        color: #e6f2ea;
    }

    body.home-page .logo {
        color: #ecf7f0;
        text-shadow: 0 0 0 transparent;
    }

    body.home-page .logo .highlight {
        color: #f0c24f;
    }

    body.home-page nav,
    body.home-page .navbar {
        background: linear-gradient(90deg, #0a241b 0%, #0a241b 55%, #0b214f 100%);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    body.home-page .navbar a {
        color: #e8f6ee;
    }

    body.home-page .navbar a:hover {
        background-color: #14503c;
        color: #ffdca0;
    }

    body.home-page main {
        background: #122018;
        border-color: #2e4a3c;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }

    body.home-page .home-title {
        color: #ebf8ef;
    }

    body.home-page .home-subtitle {
        color: #c1d5c9;
    }

    body.home-page .home-links a {
        background: linear-gradient(145deg, #173127, #132820);
        border-color: #355544;
        color: #e5f3eb;
    }

    body.home-page .home-links a:hover {
        background: linear-gradient(145deg, #224034, #1a3329);
        border-color: #f0c24f;
    }

    body.home-page .site-footer {
        background: #08160f;
        color: #d8e8de;
    }

    body.home-page .site-footer a {
        color: #b8d4c4;
    }
}

/* Footer styles */
footer {
    background: #222;
    color: #eee;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.2;
    flex-shrink: 0;
    order: 2;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

/* Mobile-first: stack footer sections by default (single-column) */
.footer-content,
.footer-links {
    display: block;
    width: 100%;
}

.footer-content h3,
.footer-links h3 {
    margin: 0 0 6px 0;
    font-size: 14px;
    line-height: 1.1;
    text-transform: capitalize;
}

footer p {
    margin: 0 0 6px 0;
    font-size: 13px;
}

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

.footer-links .list li {
    margin: 6px 0;
}

.footer-links a,
footer a {
    color: #cfcfcf;
    text-decoration: none;
}

.footer-links a:hover,
footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-content img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

.footer-social a {
    margin-right: 6px;
    display: inline-block;
}

.footer-bottom {
    text-align: center;
    margin-top: 8px;
    padding-top: 6px;
    color: #aaa;
    width: 100%;
}

/* Wider screens: arrange footer columns side-by-side */
@media (min-width: 768px) {
    .footer-content,
    .footer-links {
        display: inline-block;
        vertical-align: top;
        width: 48%;
    }
    .footer-content img {
        width: 20px;
        height: 20px;
    }
    footer .container {
        gap: 20px;
    }
}

/* Styles for the new site-footer structure */
.site-footer{
    background:#222;
    color:#eee;
    padding:24px 12px 12px;
}
.site-footer .footer-container{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    max-width:1000px;
    margin:0 auto;
    align-items:flex-start;
    justify-content:space-between;
}
.site-footer .footer-section{
    flex:1 1 180px;
    min-width:150px;
    text-align:left;
}
.site-footer h4{margin:0 0 8px;color:#fff;font-size:15px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{color:#cfcfcf;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.site-footer .footer-bottom{margin-top:12px;text-align:center;color:#aaa}

/* Player styles */
.player{max-width:760px;margin:18px auto;padding:12px;border:1px solid #333;background:#111;color:#fff;border-radius:8px}
.player .track-info{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.player .track-title{font-weight:600}
.player .track-actions .btn{background:#2b2b2b;color:#fff;padding:6px 10px;border-radius:4px;border:0;text-decoration:none;margin-right:8px;cursor:pointer}
.player .track-actions .download{background:#444}
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 10px;
    background: #111;
    color: #fff;
    position: sticky;
    bottom: 0;
}

.controls button {
    font-size: clamp(16px, 2vw, 24px);
}
.progress{width:100%}
.times{font-size:13px;color:#ccc;display:flex;justify-content:center;gap:8px}
.volume-wrap{display:flex;align-items:center;gap:8px;justify-content:center}

@media(min-width:600px){
    .times{order:2}
    .volume-wrap{order:3}
    .progress{order:1;flex:1}
}

/* Playlist styles */
.playlist-wrap{margin-top:12px;text-align:left}
.playlist{list-style:none;padding:0;margin:8px 0 0 0;max-height:180px;overflow:auto}
.playlist li{padding:6px 8px;border-bottom:1px solid #222;cursor:pointer;color:#ddd}
.playlist li:hover{background:#222}
.playlist li.active{background:#2b2b2b;color:#fff;font-weight:600}

/* Travel banner component (responsive & mobile-friendly) */
.travel-banner {
  position: relative;
  text-align: center;
  margin-top: 40px;
  border-radius: 12px;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
  padding: 20px;
  max-width: 90%;
}

.banner-content h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: bold;
}

.banner-content p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

/* Tablet styles (768px and down) */
@media (max-width: 768px) {
  .travel-banner {
    min-height: 250px;
    margin-top: 30px;
  }

  .banner-content {
    padding: 15px;
    max-width: 95%;
  }

  .banner-content h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
  }

  .banner-content p {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .cta-button {
    padding: 12px 24px;
    font-size: 0.95em;
  }
}

/* Mobile styles (480px and down) */
@media (max-width: 480px) {
  .travel-banner {
    min-height: 220px;
    margin-top: 20px;
    border-radius: 8px;
  }

  .banner-content {
    padding: 12px;
    max-width: 100%;
  }

  .banner-content h2 {
    font-size: 1.4em;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .banner-content p {
    font-size: 0.85em;
    margin-bottom: 15px;
    line-height: 1.4;
  }

  .cta-button {
    padding: 10px 20px;
    font-size: 0.85em;
  }
}