/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			pycode
	Based on style:		prosilver (the default phpBB 3.2.x style)
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		anceban ( http://www.github.com/danceban )
    --------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
@import url("base.css?hash=7c5543be");
@import url("buttons.css?hash=56f0d25f");
@import url("colours.css?hash=ebe7fbee");
@import url("common.css?hash=a9741ba1");
@import url("content.css?hash=d0e24377");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
@import url("links.css?hash=18286e16");
@import url("normalize.css?hash=a9d1d9d0");
@import url("responsive.css?hash=91525548");
@import url("utilities.css?hash=d8f72c42");  

/* =====================================================
   JERSEY MUSIC HERO HEADER (BOXED VERSION)
   ===================================================== */

/* ===== RESET phpBB HEADER ===== */
.headerbar,
.headerbar .inner {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* ===== FIXED WIDTH LAYOUT ===== */
#wrap {
  max-width: 1200px !important;
  margin: 0 auto;
}

/* CONTENT netjes gecentreerd */
#page-body {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== HERO HEADER (zelfde breedte als forum) ===== */
#header-hero {
  max-width: 1200px;
  width: 100%;
  margin: 10px auto;   /* kleine spacing boven */
  height: 420px;

  position: relative;
  overflow: hidden;

  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* ===== BACKGROUND IMAGE ===== */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("./images/banner.jpg") center/cover no-repeat;
  z-index: 1;
}

/* ===== OVERLAY ===== */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.7)
  );
  z-index: 2;
}

/* ===== SEARCH CENTERED ===== */
#search-box {
  position: absolute !important;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 10;
  float: none !important;
}

/* ===== SEARCH INPUT ===== */
#search-box input {
  width: 360px;
  padding: 12px 20px;

  border-radius: 40px;
  border: none;

  text-align: center;
  font-size: 15px;

  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  color: white;

  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

/* ===== PLACEHOLDER ===== */
#search-box input::placeholder {
  color: rgba(255,255,255,0.7);
}
``