/* ==============================
   BUTTONS
================================ */
.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
  width: 100px;
}



/* ==============================
   WELCOME MESSAGE OVER VIDEO
================================ */
.welcome-message-home {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0 25px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
}
.welcome-message-home h2 span {
  color: #fff;
  font-size: 3vw;
  text-align: right;
  font-weight: 500;
}
.welcome-message-home h2 {
  color: #fff;
  font-size: 2.2vw;
  text-align: right;
  font-weight: 200 !important;
}
.welcome-message-home p {
  color: #fff;
  font-size: 1.47vw;
  text-align: right;
  font-weight: 200 !important;
  margin-top: -30px;
}
@media screen and (max-width: 992px) {
  .welcome-message-home h2 span { font-size: 22px; }
  .welcome-message-home h2 { font-size: 18px; }
  .welcome-message-home p { font-size: 15px; }
}

/* ==============================
   SLIDE-IN ANIMATION
================================ */
.slide-in-from-right {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1.5s ease-out, opacity 0.5s ease-out;
}
.slide-in-from-right.active {
  transform: translateX(0);
  opacity: 1;
}

/* ==============================
   CTA BUTTON STYLE
================================ */
.euBiGU {
  border: solid 4px #582c83 !important;
  background-color: #582c83 !important;
  color: #fff !important;
}
.euBiGU:hover {
  color: #582c83 !important;
  background-color: #fff !important;
  border: solid 4px #582c83 !important;
}

/* ==============================
   HOUSEPOINTS
================================ */
.housepoints { margin: 60px 0 40px; }
.housepoints a { text-decoration: none; }
.housepoints h2 {
  color: var(--pink);
  font-weight: 900;
}

.sl-housepoints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0 10px;
}

.sl-hp-entry {
  flex: 1 1 calc(25% - 20px);
  max-width: 25%;
  min-width: 220px;
  padding: 20px;
  text-align: center;
  position: relative;
}
.sl-hp-house {
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 10px;
}
.sl-hp-points {
  font-size: 2em;
  margin-top: 10px;
}

/* Winner highlight */
.sl-hp-entry.winner::before { animation: pulse-winner 1.5s infinite; }
@keyframes pulse-winner {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Place label above box */
.place-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  background: #ffd700;
  color: #000;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9em;
  line-height: 1;
  z-index: 10;
  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.place-label::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: #ffd700;
}
.place-label.show {
  display: inline-block;
  animation: fadeInLabel 0.5s ease-in forwards;
}
@keyframes fadeInLabel {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* House images */
[data-housename="Cambridge Tigers"]::before,
[data-housename="Loughborough Eagles"]::before,
[data-housename="Oxford Magpies"]::before,
[data-housename="Warwick Alligators"]::before {
  content: "";
  display: inline-block;
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 5px auto;
}
[data-housename="Cambridge Tigers"]::before { background-image: url('/webcontent/webimage/tigers-house.png'); }
[data-housename="Loughborough Eagles"]::before { background-image: url('/webcontent/webimage/eagles-house.png'); }
[data-housename="Oxford Magpies"]::before { background-image: url('/webcontent/webimage/magpies-house.png'); }
[data-housename="Warwick Alligators"]::before { background-image: url('/webcontent/webimage/alligators-house.png'); }

[data-housename="Cambridge Tigers"] .sl-hp-house { color: #1fa3fe; }
[data-housename="Loughborough Eagles"] .sl-hp-house { color: #8535bc; }
[data-housename="Oxford Magpies"] .sl-hp-house { color: #fdd60c; }
[data-housename="Warwick Alligators"] .sl-hp-house { color: #f11823; }

/* Responsive */
@media screen and (max-width: 991px) {
  .sl-hp-entry { flex: 1 1 calc(50% - 20px); max-width: 50%; }
}
@media screen and (max-width: 575px) {
  .sl-hp-entry { flex: 1 1 100%; max-width: 100%; }
  .full-screen-video-container { height: 40vh; }
  .place-label { font-size: 0.8em; transform: translate(-50%, -115%); }
}

/* ==============================
   HOMEPAGE SECTIONS
================================ */
.home-content { width: 100%; position: relative; }
.home-welcome {
  flex: 1;
  background: #582c83 !important;
  padding: 20px 40px;
  color: #fff;
}
.home-vision {
  flex: 1;
  background: #f2f4ff;
  padding: 20px 40px;
  color: #582c83;
}
.home-calendar {
  flex: 1;
  background: var(--orange);
  padding: 20px 40px;
  color: #fff;
}
.home-calendar ul { list-style: none; }
.home-calendar a { color: #fff; }
.home-calendar ul li:before {
  content: "\f073";
  font-family: 'FontAwesome';
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1em;
}
.home-news {
  flex: 1;
  background: var(--purple);
  padding: 20px 40px;
  color: #fff;
}
.home-news ul { list-style: none; }
.home-news a { color: #fff; padding-left: 7px; }
.home-news ul li:before {
  content: "\f1ea";
  font-family: 'FontAwesome';
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1em;
}
@media screen and (min-width: 992px) {
  .home-content { display: flex; align-items: stretch; }
  .home-content > div { display: flex; flex-direction: column; }
}

/* ==============================
   QUICKLINKS PULSE BUTTONS
================================ */
.home-quicklinks { position: relative; top: -50px; }
.home-quicklinks .pulse-button-upper { position: relative; top: -60px; }
@media screen and (max-width: 768px) {
  .home-quicklinks, .home-quicklinks .pulse-button-upper {
    top: 0; position: relative;
  }
}
.pulse-button {
  position: relative;
  font-size: 1.4em;
  width: 175px; height: 175px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #3361b9;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 20px 0;
}
.pulse-button:hover {
  animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes pulse { to { box-shadow: 0 0 0 45px rgba(232, 76, 61, 0); } }

/* ==============================
   SLIDESHOW
================================ */
.slideshow-box {
  margin-top: 80px;
  width: 80%;
  border: 5px solid #66564E;
}
.fill {
  width: 100%;
  height: 800px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .fill { height: 300px; }
}
#myCarousel { position: relative; width: 100%; z-index: 0; }
.carousel-inner, .item, .active { height: 100%; }
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; }
.carousel-fade .carousel-inner .active { opacity: 1; }

/* ==============================
   HOVER BOXES
================================ */
.home-content .hover-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.5s ease, filter 0.5s ease;
  color: #fff;
}
.hover-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: background 0.5s ease;
  z-index: 1;
}
.bg-calendar { background-image: url('/webcontent/webimage/brierley-28.jpg'); }
.bg-news { background-image: url('/webcontent/webimage/brierley-25.jpg'); }
.bg-calendar::before { background: rgba(254, 50, 0, 0.5); }
.bg-news::before { background: rgba(132, 2, 154, 0.5); }
.bg-calendar:hover::before { background: rgba(254, 50, 0, 0.9); }
.bg-news:hover::before { background: rgba(132, 2, 154, 0.9); }
.hover-bg:hover {
  transform: scale(1.05) rotate(1.5deg);
  filter: brightness(1.1);
  z-index: 10;
}
.hover-bg > * { position: relative; z-index: 2; }

/* ==============================
   MISC
================================ */
#breadcrumbnav { display: none; }
body { padding-bottom: 10px; }
.gradient-border-top { margin-left: -15px; }
.container-fluid { padding: 0 !important; }

/* == Language Selector == */ .fa-language { color: #fff; margin-top: 3px; font-size: 30px !important; }  
#gtranslate { position: fixed; left: 0; bottom: 0; top: 150px; z-index: 9999; } 
#gtranslate-tab { position: fixed; right: 15px; float: right; cursor: pointer; text-align: center; width: 60px; height: 60px; background-color: #582c83; border-radius: 50%; border: solid 4px #582c83; } 
#gtranslate-tab svg { padding-top: 22px; } 
#gtranslate-tab:hover { background-color: #fff; border: solid 4px #582c83; } 
#gtranslate-tab:hover .fa-language { color: #582c83; } 
#gtranslate-form { position: fixed; float: right; background-color: transparent; width: 167px; margin-right: 80px; margin-top: 28px; right: 0; height: inherit; z-index: 9999 !important; padding-left: 5px; padding-right: 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .fa-language { margin-top: 5px; } 

/* == Site Search Button == */ .fa-search { color: #fff; margin-top: 3px; font-size: 30px !important; }  
#sitesearch { position: fixed; left: 0; top: 80px; bottom: 0; z-index: 9999; } 
#sitesearch-tab { position: fixed; right: 15px; float: right; cursor: pointer; text-align: center; width: 60px; height: 60px; background-color: #582c83; border-radius: 50%; border: solid 4px #582c83; } 
#sitesearch-tab svg { margin-top: 9px; padding: 15px; color: #582c83; } 
#sitesearch-form { position: fixed; float: right; background-color: transparent; width: 167px; margin-right: 75px; margin-top: 25px; right: 0; height: inherit; z-index: 9999 !important; padding-left: 5px; padding-right: 10px; background-clip: 'padding-box'; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } 
#sitesearch-tab svg { padding-top: 22px; color: #fff !important; } 
#sitesearch-tab:hover { background-color: #fff; border: solid 4px #582c83; } 
#sitesearch-tab:hover .fa-search { color: #582c83; } .fa-search { margin-top: 5px; } .fas { padding-top: 5px; } .fa-search { color: #fff; } .fa-language { color: #fff; } 

/* == Site login Button == */ .fa-user { color: #fff; margin-top: 3px; font-size: 30px !important; } 
#sitelogin { position: fixed; left: 0; top: 220px; bottom: 0; z-index: 9999; } 
#sitelogin-tab { position: fixed; right: 15px; float: right; cursor: pointer; text-align: center; width: 60px; height: 60px; background-color: #582c83; border-radius: 50%; border: solid 4px #582c83; } 
#sitelogin-tab svg { padding-top: 22px; } 
#sitelogin-tab:hover { background-color: #fff; border: solid 4px #582c83; } 
#sitelogin-tab:hover .fa-user { color: #582c83; } 
#sitelogin-form { position: fixed; float: right; background-color: transparent; width: 167px; margin-right: 80px; margin-top: 28px; right: 0; height: inherit; z-index: 9999 !important; padding-left: 5px; padding-right: 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } 

/* == Site facebook Button == */ .fa-facebook-f { color: #fff; margin-top: 10px; font-size: 30px !important; } 
#facebook-link { position: fixed; left: 0; top: 290px; bottom: 0; z-index: 9999; } 
#facebook-link-tab { position: fixed; right: 15px; float: right; cursor: pointer; text-align: center; width: 60px; height: 60px; background-color: #582c83; border-radius: 50%; border: solid 4px #582c83; } 
#facebook-link-tab svg { padding-top: 22px; } 
#facebook-link-tab:hover { background-color: #fff; border: solid 4px #582c83; } 
#facebook-link-tab:hover .fa-facebook-f { color: #582c83 !important; } 
#facebook-link-form { position: fixed; float: right; background-color: transparent; width: 167px; margin-right: 80px; margin-top: 28px; right: 0; height: inherit; z-index: 9999 !important; padding-left: 5px; padding-right: 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

/* Hide items from the 4th onwards */
.only-first-3 > li:nth-child(n+4) {
  display: none;
}
.btn-warning {
	position: relative;
	bottom: 0;
}
/* Make the content boxes flex columns on all screen sizes */
.home-content > div {
  display: flex;
  flex-direction: column;
}

/* Push the 'More Info' buttons to bottom-left with 10px margin */
.home-welcome > a:last-of-type,
.home-vision > a:last-of-type,
.home-calendar > a:last-of-type,
.home-news > a:last-of-type {
  margin-top: auto;        /* pushes the link to the bottom */
  align-self: flex-start;  /* keeps it left-aligned (prevents stretching) */
  margin-left: 10px;
  margin-bottom: 10px;
}
.full-screen-video-container {
  position: relative;
  height: 88vh;
  overflow: hidden;
	margin-top: 55px;
}

/* Target the iframe that YouTube injects */
#yt-player,
#yt-player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.welcome-message-home{
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 10;
}

/* 🔊 Sound Button */
.video-sound-btn{
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 20;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s ease;
}

.video-sound-btn:hover{
  background: #f0ad4e; /* your warning button colour */
  color: #000;
}
/* MOBILE: make the hero the correct height (16:9) */
@media (max-width: 767px){
  .full-screen-video-container{
    height: 56.25vw;      /* 16:9 based on width */
    min-height: 220px;    /* stops it getting too small */
    max-height: 70vh;     /* stops it getting too tall */
  }
}