/* GBA pages only */

html,
body { 
	 font-family: Roboto, Microsoft YaHei !important;
	  max-width: 100%;
  overflow-x: hidden;
  background-image: url("https://mmc.metro.hk/wp-content/uploads/2024/02/gba_bg7.jpg");
  background-size: cover;
  background-position: bottom left;
  background-repeat: no-repeat;
  background-color:#000;
  background-attachment: fixed; 
	color:#fff;

}


@media (max-width: 500px) {
body {
    background: url(https://mmc.metro.hk/wp-content/uploads/2024/02/gba_mobile_bg10.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: right center;
	
}
}



            :root {
                --wpforms-field-border-radius: 3px;
                --wpforms-field-border-style: solid;
                --wpforms-field-border-size: 1px;
                --wpforms-field-background-color: #ffffff;
                --wpforms-field-border-color: rgba(0, 0, 0, 0.25);
                --wpforms-field-border-color-spare: rgba(0, 0, 0, 0.25);
                --wpforms-field-text-color: rgba(0, 0, 0, 0.7);
                --wpforms-field-menu-color: #ffffff;
                --wpforms-label-color: rgba(0, 0, 0, 0.85);
                --wpforms-label-sublabel-color: rgba(0, 0, 0, 0.55);
                --wpforms-label-error-color: #d63637;
                --wpforms-button-border-radius: 3px;
                --wpforms-button-border-style: none;
                --wpforms-button-border-size: 1px;
                --wpforms-button-background-color: #066aab;
                --wpforms-button-border-color: #066aab;
                --wpforms-button-text-color: #ffffff;
                --wpforms-page-break-color: #066aab;
                --wpforms-background-image: none;
                --wpforms-background-position: center center;
                --wpforms-background-repeat: no-repeat;
                --wpforms-background-size: cover;
                --wpforms-background-width: 100px;
                --wpforms-background-height: 100px;
                --wpforms-background-color: rgba(0, 0, 0, 0);
                --wpforms-background-url: none;
                --wpforms-container-padding: 0px;
                --wpforms-container-border-style: none;
                --wpforms-container-border-width: 1px;
                --wpforms-container-border-color: #000000;
                --wpforms-container-border-radius: 3px;
                --wpforms-field-size-input-height: 43px;
                --wpforms-field-size-input-spacing: 15px;
                --wpforms-field-size-font-size: 16px;
                --wpforms-field-size-line-height: 19px;
                --wpforms-field-size-padding-h: 14px;
                --wpforms-field-size-checkbox-size: 16px;
                --wpforms-field-size-sublabel-spacing: 5px;
                --wpforms-field-size-icon-size: 1;
                --wpforms-label-size-font-size: 16px;
                --wpforms-label-size-line-height: 19px;
                --wpforms-label-size-sublabel-font-size: 14px;
                --wpforms-label-size-sublabel-line-height: 17px;
                --wpforms-button-size-font-size: 17px;
                --wpforms-button-size-height: 41px;
                --wpforms-button-size-padding-h: 15px;
                --wpforms-button-size-margin-top: 10px;
                --wpforms-container-shadow-size-box-shadow: none;
				  --gutter: 24px; /* change spacing here */

            }


            .elementor-widget-wpforms.elementor-element-db67d8b {
                --wpforms-field-background-color: #ffffff1a;
                --wpforms-field-border-color: #ffffff70;
                --wpforms-field-border-color-spare: #ffffff70;
                --wpforms-field-text-color: #ffffffb3;
                --wpforms-label-color: #ffffffd9;
                --wpforms-button-background-color: #888888cf;
                --wpforms-field-size-input-height: 43px;
                --wpforms-field-size-input-spacing: 15px;
                --wpforms-field-size-font-size: 16px;
                --wpforms-field-size-line-height: 19px;
                --wpforms-field-size-padding-h: 14px;
                --wpforms-field-size-checkbox-size: 16px;
                --wpforms-field-size-sublabel-spacing: 5px;
                --wpforms-field-size-icon-size: 1;
                --wpforms-label-size-font-size: 16px;
                --wpforms-label-size-line-height: 19px;
                --wpforms-label-size-sublabel-font-size: 14px;
                --wpforms-label-size-sublabel-line-height: 17px;
                --wpforms-button-size-font-size: 17px;
                --wpforms-button-size-height: 41px;
                --wpforms-button-size-padding-h: 15px;
                --wpforms-button-size-margin-top: 10px;
				width: 100%; 
            }


.container { width: 100%; max-width: 1100px; margin: 0 auto; }
.container-inner { width: 100%; max-width: 880px; margin:0 auto;}


/* Row */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

/* Columns base */
[class^="col-"],
[class*=" col-"]{
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  width: 100%;
  min-width: 0; /* prevents overflow with long content */
  box-sizing: border-box;
}

/* LG breakpoint like Bootstrap (≥ 992px) */
@media (min-width: 992px) {

  .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }

}

/* =========================================================
   GBA HEADER (NON-STICKY, TRANSPARENT)
   ========================================================= */
header.gba-header {
  padding: 24px 0;
  position: relative;
  z-index: 10;
}

/* FLEX LAYOUT — THIS IS THE KEY */
header.gba-header .container {
  display: flex;
  align-items: center;
	padding-bottom:10px;
	border-bottom: 0.5px solid #666;
}

.sponsor-img { float:right;  margin-top:20px; text-align:right; }
.sponsor-img img { height: 60px; width: auto; margin-left:20px;
			filter: drop-shadow(1px 0 0 white) 
            drop-shadow(0 1px 0 white) 
            drop-shadow(-1px 0 0 white) 
            drop-shadow(0 -1px 0 white);}
/* =========================================================
   LOGO (LEFT)
   ========================================================= */
.header-logo {
  width: 260px;
  flex-shrink: 0;
}

.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   MAIN MENU (RIGHT)
   ========================================================= */
.gba-menu {
  margin-left: auto;            
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* TOP-LEVEL LINKS */
.gba-menu > li > a {
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  padding: 5px 21px;
  display: inline-block;
  white-space: nowrap;
	font-weight:700;
	border-bottom: 4px solid transparent; 
}

.gba-menu > li > a:hover {
border-bottom: 4px solid #efefef; 
}

/* Parent menu link */
.gba-menu > li.menu-item-has-children > a {
  position: relative;
  padding-right: 18px; /* space for arrow */
	margin-right: 20px;
	
}

/* Arrow — remove from text flow */
.gba-menu > li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 40%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   DROPDOWN MENU (DESKTOP)
   ========================================================= */
.gba-menu li {
  position: relative;
}

.gba-menu .sub-menu {
  position: absolute;
  left: 0;
  min-width: 240px;
  background: rgba(30, 30, 30, 0.95);
  list-style: none;
  padding: 12px 0;
  margin: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 99;
}

.gba-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
}

.sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   MOBILE MENU TOGGLE
   ========================================================= */
.gba-menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: #ffffff;
  font-size: 26px;
  margin-left: auto;
  cursor: pointer;
}

/* =========================================================
   RESPONSIVE (MOBILE)
   ========================================================= */
@media (max-width: 991px) {

	.container { 
		width: 94.5%; 
		padding:6px 0;
	}
	
	.container-inner { width: 94.5%; }
	
  header.gba-header .container {
    flex-wrap: wrap;
	  
  }
	.sponsor-img { float:left;  margin-top:20px;margin-bottom:20px}
.sponsor-img img { height: 40px; width: auto; margin-left:0; margin-right:10px;  }
	
	
	.header-logo {
  width: 100px;
  flex-shrink: 0;
}

.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}
	
	
	header.gba-header {
  padding: 10px 0;
}
	
	

  .gba-menu-toggle {
    display: block;
  }

  .gba-menu {
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
    display: none; /* hidden by default */
  }

  .gba-menu > li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .gba-menu > li > a {
    padding: 14px 0;
  }

  .gba-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    padding-left: 16px;
  }

  .gba-menu .sub-menu a {
    padding: 8px 0;
  }

  .gba-header.menu-open .gba-menu {
    display: flex;
  }
}

.chart-title {
	
	margin-top:20px;
}
.chart-title img {
	height: 100px;
	border-bottom:6px solid #6a52e2;
	
}

.chart-week h2 { 
font-size: 16pt; font-weight:600; font-style:italic;color:#d9d9d9; margin-top:5px;  }
.gba-content { border: 1px solid #fff; padding:40px 20px; position:relative; }
.gba-content ol { margin-left:0; padding-left:0; }
.gba-content ol li { margin-bottom:30px;padding-left:0; margin-left:0;  }
.gba-content ol li:last-child {
  margin-bottom: 0;
}
/* OUTER WRAPPER */
.gba-content {
  border: 1px solid rgba(255,255,255,0.6); /* outer line */
  padding: 12px;                            /* space between borders */
  margin-bottom: 24px;
	margin-top:10px;
}

/* INNER CONTENT */
.gba-content-inner {
  border: 1px solid rgba(255,255,255,0.25); /* inner line */
  background: rgba(0,0,0,0.75);
  padding: 30px 40px;
	  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

.song-title { font-size: 18pt; color:#fff; font-weight:700;margin-bottom:10px; }
.singer { font-size: 14pt; color:#d9d9d9   }
.gba-week-list { border:1px solid rgba(255,255,255,0.25); background:rgba(0,0,0,0.75); padding:30px 50px; scrollbar-gutter: stable;
 height: 350px; overflow-y: scroll; overflow-x: hidden; position: relative; margin-bottom:40px;  }

.gba-week-list::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 2px;
  width: 7px;
  height: calc(100% - 24px);
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
  pointer-events: none;
}

.gba-menu-toggle { font-size:28pt; padding:0;  }


.gba-week-list ul { margin-left:0; padding-left:0; list-style:none; }
.gba-week-list ul li:last-child {
  margin-bottom: 0;
}
.gba-week-list ul li { margin-bottom: 30px;  }
.gba-week-list ul li a { color:#d9d9d9; margin-bottom:30px; font-size:16pt; font-weight:600; font-style: italic; font-family: Roboto, sans-serif }
h2.gba-archive-title { font-size: 20pt; font-weight:700; font-style:italic; }
.gba-week-list ul li a:hover { color: #6a52e2; text-decoration:none; }

.gba-form { border:1px solid rgba(255,255,255,0.25); background:rgba(0,0,0,0.75); padding:0px 15px; margin-bottom:30px; }
.gba-form button[type="submit"] {  width: 60%!important; background:#666!important; }
.gba-form button[type="submit"]:hover {  opacity: 0.8 }
.wpforms-field-label { color:#fff!important; }

a.btn_redirect { background:#b32678; padding:10px 20px; color:#fff; border-radius:5px; }