/* Remove browser default spacing */
body {
  margin: 0;                              /* no default margin */
  background: #fffaf0;                   /* background color */
  font-family: Arial, Helvetica, sans-serif; 
}


/* page width control */
.page {
	padding: 10px;  
	width: 100%;     /* allow it to grow */	
	max-width: 100%; /* default until breakpoints apply */
}


/* topbar layout */
.topbar {
  display: flex;                 /* modern, reliable layout */
  align-items: center;           /* vertical alignment */
  gap: clamp(12px, 2vw, 24px);   /* scales spacing */
  flex-wrap: nowrap;             /* keep horizontal */
}


/* Logo image styling */
.logo img {
  display: block;                        /* prevents inline spacing */
  width: clamp(120px, 18vw, 200px);	 /* scales from small --> desktop cap */
  height: auto;                          /* maintain aspect ratio */
}


  /*
  ============================
  = NAV BAR
  ============================*/


/* Nav Bar Styling */
.nav { white-space: nowrap; 
  margin-left: 20px;             /* space between logo and nav */
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;              /* remove bullets */
}

.nav li {
  display: inline-block;               /* horizontal links */
  margin-right: clamp(10px, 1.8vw, 16px);
}

.nav a {
  text-decoration: none;
  color: #000000;
  font-size: clamp(20px, 1.6vw, 22px);  /* navbar text scaling */
}

.nav a:hover {
  text-decoration: underline;    
}

#themeToggle {
  background: none;
  border: 1px solid #000;
  font-size: clamp(20px, 1.6vw, 22px);
  cursor: pointer;
  padding: 2px 8px;
  font-family: inherit;
}

  /*
  ============================
  = MARQUEE
  ============================*/


/* Marquee container in topbar */
.marquee-box {
  margin-left: auto;        /* pushes it to the right side */
  border: 1px solid #ccc;   
  padding: 6px 10px;
  background: #fff;
  max-width: 280px;         /* prevents it from stretching forever */
  overflow: hidden;
}

/* Marquee text styling */
#siteMarquee {
  font-size: 12px;
  white-space: nowrap;
}


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


/* Main Styles */

.content {
  margin-top: 28px;
  max-width: 820px;     /* right-column width */
  margin-left: clamp(160px, 20vw, 320px);    /* pushes main content to the right, grows with screen size, and stops growing after 320px */
  margin-right: auto;
  padding-right: 10px;
}


.panel {
  border: 1px solid #ccc;
  width: 100%;
  max-width: 860px;
  padding: 18px;
  background: #fff;
}

  /*
  ============================
  = Geolocation map
  ============================*/

#geoMap {
  width: 100%;
  height: 400px;
  margin-top: 16px;
  border: 1px solid #ccc;
}

  /*
  ============================
  = CONTACT FORM
  ============================*/


/* Contact form styling */
.contact-form input,
.contact-form textarea{
  width: 100%;            
  padding: 8px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.contact-form button{
  padding: 6px 12px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.contact-form button:hover{
  background: #f5f5f5;
}

/* Contact Form Errors*/

.form-errors{
  margin: 0 0 12px 0;
  padding: 8px;
  border: 1px solid #cc6666;
  background: #fff;
  color: #990000;
  font-size: 13px;
  display: none;
}

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


/* Footer Styles */

.footer {
  margin-top: 40px;
  padding: 10px 0;
  border-top: 1px solid #ccc;   /* divider */
  font-size: 13px;
  color: #555;
}

.footer-text {
  margin: 0 0 6px 0;
}


/* Footer Soundcloud */

.footer-soundcloud {
  display: inline-block;
}

.footer-soundcloud img {
  display: block;
  width: 40px;                 /* small badge */
  height: auto;
}

/* Footer Youtube */

.footer-youtube {
  display: inline-block;
}

.footer-youtube img {
  display: block;
  width: 40px;                 /* small badge */
  height: auto;
}



  /*
  ============================
  = MEDIA QUERY
  ============================*/


/* media query break points */

@media (max-width: 480px) {
  .page { max-width: 100%; }
  
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  
  .content {max-width: 100%;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  
  .nav {
    margin-left: 0;
    width: 100%;                   /* nav drops under logo */
  }
  
  .nav li {
    display: block;                /*vertical links */
    margin: 6px 0;
  }

  .nav a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* 720p */
@media (min-width: 481px) and (max-width: 720px) {
  .page { max-width: 720px;}


  .content {max-width: 100%;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* 1080p */
@media (min-width: 721px) and (max-width: 1080px) {
  .page {max-width: 1100px;}
}

 .content {max-width: 640px;
    grid-template-columns: 1fr minmax(360px, 640px);
  }

/* 1440p */
@media (min-width: 1081px) and (max-width: 1440px) {
  .page {max-width: 1280px;}
}

 .content {max-width: 720px;
    grid-template-columns: 1fr minmax(400px, 720px);
  }

/* 4K and above */
@media (min-width: 1441px) {
  .page {max-width: 1400px;}
}

 .content {max-width: 760px;
    grid-template-columns: 1fr minmax(420px, 760px);
  }
  
/*
  ============================
  = DARK MODE
  ============================*/
  
  html.dark body {
	  background: #1a1a1a;
	  color: #e8e8e8;
  }
  
  html.dark .panel {
	  background: #2a2a2a;
	  border-color: #444;
	  color: #e8e8e8;
  }
  
  html.dark .topbar {
	  background: #1a1a1a;
  }
  
  html.dark .nav a {
	  color: #e8e8e8;
  }
  
  html.dark .marquee-box {
	  background: #2a2a2a;
	  border-color: #444;
  }
  
  html.dark a {
  color: #e8e8e8 !important;
}

  html.dark a:visited {
  color: #aaaaaa !important;
}
  
  html.dark .footer {
	  border-color: #444;
	  color: #aaa;
  }
  
  html.dark .contact-form input,
  html.dark .contact-form textarea,
  html.dark .contact-form select {
	  background: #2a2a2a;
	  border-color: #444;
	  color: #e8e8e8;
  }
  
    html.dark .contact-form button {
		background: #2a2a2a;
		border-color: #e8e8e8;
		color: #e8e8e8;
	}
	
	html.dark .contact-form:hover {
		background: #3a3a3a;
	}
	
	html.dark .form-errors {
		background: #2a2a2a;
		border-color: #cc6666;
		color: #ff9999;
	}
	
	html.dark #themeToggle {
		border-color: #e8e8e8;
		color: #e8e8e8;
	}