/* NOTE:
   Brand colours are currently hard-coded across files.
   No central colour system is enforced.
*/

/* NOTE:
   This file contains legacy layout rules for #main-content
   and .container. These should be reviewed later. 
   File is stable and intentionally unchanged during cleanup.
*/

/* -------------------------------------------------
BANG HEADING (NEEDS CONFIRMING), BLURB, BANG LOGO
------------------------------------------------- */

.bang-heading {
	text-align: left;
}

.bang-heading a {
	text-decoration: none;
}
body.scrolled .social a {
	color: #58D1AF;
	transition: color 0.3s ease;
}

.bang-logo h2 {
	text-align: left;
}
.bang-logo i {
	color: #58D1AF;
	width: 92px;
	height: auto;
}

@media screen and (max-width: 650px) {
	.bang-logo {
		position: fixed;
		padding-top: 25px;
		padding-right: 33px;
		text-align: center;
		margin-bottom: 20px;
	}

	.bang-logo h2 {
		text-align: center;
	}
}

/* Default desktop layout: centered content */
#main-content {
  margin: 0 auto; 
  max-width: 1200px; 
  width: 100%; 
  box-sizing: border-box;
}

.content {
	position: relative;
	min-height: 205px;
}
.content.top {
	padding-top: 30px;
}
@media screen and (max-width: 650px) {
	.bp-header__main,
	.bp-nav,
	.bang-logo {
		width: 100%;
		text-align: center;
	}
	
	#main-content {
		margin: 0px;
	}
	body,
	.container {
		height: auto;
		overflow: auto;
	}
	.content.top {
		padding-top: 90px;
	}
	.row.content.top {
		margin-top: 30px; /* Adjust spacing below logo */
	}
}

.blurb {
	margin: 0px 10% 50px;
}
@media screen and (max-width: 650px) {
	.blurb {
		margin: 0px 20px 50px;
	}
}
.blurb h1,
.blurb h2, 
.blurb h3 {
	font-size: 4.0rem;
	line-height: 1.6;
	text-align: center;
	font-weight: 300;
	color: #66cc99;
}
.blurb p {
	font-size: 2.0rem;
	line-height: 39px;
	text-align: center;
  padding-top: 2rem;
}
.blurb p.subhead {
	font-weight: 700;
}
.blurb a {
	color: #66cc99;
}

.bang-logo a {
  position: relative;
  z-index: 300;         /* higher than menu and header image */
  display: inline-block;
  pointer-events: auto;
}
/* Logo must sit above menu and keep fixed position */
.bang-logo {
  position: fixed;
  top: 23px; 
  left: 23px; 
  width: 150px;
  background: transparent;
  z-index: 9999;
}

/* ===================================== */
/* AJ Logo Styles - Consolidated */
/* ===================================== */

/* Base logo styles */
.aj-logo {
  width: 70px;
  height: auto;
  display: block;
  margin: 0;
  transition: filter 0.3s ease;
  max-height: 36px;
}

/* Ensure correct display inside bang-logo wrapper */
.bang-logo img.aj-logo {
  display: block;
  margin: 0; /* remove any auto-centering */
}

/* Hover = dark grey everywhere */
.bang-logo a:hover .aj-logo {
  filter: brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1000%) hue-rotate(163deg) brightness(92%) contrast(90%) !important;
}

/* ========================= */
/* Page-specific logo colors */
/* ========================= */

/* Inner pages: aqua logo */
body:not(.home) .aj-logo {
  filter: invert(27%) sepia(72%) saturate(352%) hue-rotate(110deg) brightness(89%) contrast(82%);
}

/* Homepage: logo starts white */
body.home .aj-logo {
  filter: brightness(0) invert(1);
}

/* Homepage after scroll: logo turns aqua */
body.home.scrolled .aj-logo {
  filter: invert(27%) sepia(72%) saturate(352%) hue-rotate(110deg) brightness(89%) contrast(82%);
}

/* ============================
   Mobile overrides (clean)
   ============================ */
@media (max-width: 900px) {
   
  #main-content {
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  html, body {
    overflow-x: hidden;
  }

  body {
    padding-top: 70px;
  }
}

/* === Desktop ≥975px === */
@media (min-width: 975px) {
  .container {
    max-width: none;
    width: auto;
  }

  #main-content {
    box-sizing: border-box;
    max-width: 1400px;
    width: auto;
    margin-left: clamp(140px, 10vw, 260px);
    margin-right: 3vw;
  }
}

/* === Narrow desktop / large tablet 901–1024px === */
@media (min-width: 901px) and (max-width: 1024px) {
  .container {
    max-width: none;
    width: auto;
  }

  #main-content {
    box-sizing: border-box;
    max-width: 1200px; 
    width: auto;
    margin-left: clamp(120px, 15vw, 240px);
    margin-right: 3vw;
  }
}

/* === Tablet / phablet 601–900px === */
@media (min-width: 601px) and (max-width: 900px) {
  .container {
    max-width: none;
    width: auto;
  }

  /* main content centered with side margins */
  #main-content {
    box-sizing: border-box;
    max-width: 1000px;
    width: auto;
    margin-left: 5vw;
    margin-right: 5vw;
  }
}

/* DUPLICATE RANGE (901–1024)
   Review which version is authoritative */

/* === Mid tablet / small desktop 901–1024px === */
@media (min-width: 901px) and (max-width: 1024px) {
  #main-content {
    box-sizing: border-box;
    max-width: 1200px; 
    width: auto;
    margin-left: clamp(130px, 8vw, 240px);
    margin-right: 3vw;
  }
}

/* === Mobile ≤600px === */
@media (max-width: 600px) {
  .container {
    max-width: none;
    width: auto;
  }

  #main-content {
    box-sizing: border-box;
    width: 100%;
    margin-left: 5vw;
    margin-right: 5vw;
  }
}