/* VARIABLES */
:root {
  --navyblue: #1e2c7b;
  --backgroundhover: #9ba2ff;
  --backgroundtexthover:#323232;
  --navbarcolor: #232323;
  --linkcolor: rgb(217, 156, 85);
  --navheight: 1.7rem;
  --background: #3c3c3c;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}


body {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  font-family: 'Space Mono', monospace;
  background-color: var(--background);
}

h4 {
  font-family: inherit;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

h5 {
  font-family: inherit;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.link {
  color:var(--linkcolor)
}

/* LOGO AT THE TOPPPPP LOGO AT THE TOPPPPP */

.logo-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  align-content: center;
  padding: 1rem;
  align-items: center; 
  /* background-color: blue; */
  background-color: var(--navbarcolor);
  height: auto;       
  
}

.slogan {
  font-size: 1rem;
  color: white;
  justify-self: right;
  align-self: center;
  /* background-color: yellow; */
}

.logo {
  width: 16rem;
  height: fit-content;
  border:0;
  background-color: var(--navbarcolor);
  justify-self: center;
}

.logo:hover {cursor: pointer}

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

.navbar {
  height: fit-content;
  top: 0;
  position: sticky;
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  background-color: var(--navbarcolor);
  color: white;
  z-index: 1000;
  gap: 5px; 
  padding: 0.5rem;
  border-bottom: white 2px solid;
  /* border: 1px solid #ccc; */
  text-align: center;
}

.navbar button { 
  background-color: var(--navyblue);
  color: inherit;

  display: flex;
  text-align: center;
  justify-content: center;
  border: 0;
  height: var(--navheight);
  font-size: 0.8rem;
  padding: 5px 5px;
  cursor: pointer;
  align-items: center;
}

.navbar button:hover {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
}

.navbar button.navbar-active {
  /* COLOURS */
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
  vertical-align: center;
  display: flex;
  text-align: center;
  justify-content: center;
  border: 0;
  height: var(--navheight);
  font-size: 0.8rem;
  padding: 5px 5px;
  cursor: pointer;
}

/* PAGE STRUCTURES */

/* 
  
    
  PAGE TITLE -> EVENTS / EQUIPMENT / TECHNICIANS ETC 

  PAGE CONTAINER { - ALL PAGE CONTENT GOES HERE

    PAGE BLURB - OPENING STATEMENT 

    PAGE-SQUARE - BLUE BACKGROUND BOXES FOR CLARITY

  }
  
*/ 

.page-title {
  height: fit-content;
  padding: 1rem 2rem;
  width: fit-content;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: 1rem auto;
  justify-content: center;    
  align-items: center;
  font-size: 2rem;
  color: rgb(255, 255, 255);
  background-color: var(--navyblue);
}

.page-container {
  /* background-color: rgb(198, 198, 198); */
  /* background-color: var(--backgroundhover); */
  /* color: var(--backgroundtexthover); */
  color: white;
  outline: white 2px solid;
  
  width: 70vw;
  margin: 0 auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  
  gap: 1rem;
  justify-content: center;;
  flex: 1;
  
  padding-bottom: 3rem;
  padding: 1rem;
}

.services {
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
  text-align: center;
  gap: 1rem;
}

.service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; 
  padding: 0.5rem;
  padding-bottom: 1rem;
  flex: 1;
  background-color: var(--navyblue);
}

.service h5 {
  flex: 1; /* Take up equal space */
  display: flex;
  align-items: center;   /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  text-align: center;    /* Handle long text wrapping */
  margin: 0 0 1rem 0;   
}

.service img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: white;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.service-btn {
  background-color: var(--navyblue);
  color: white;
  border: 0;
  outline: 0;
  font-size: larger;
  text-align: center;
  cursor: pointer;
  height: auto;
  flex: 1;
  padding: 1rem; 
}

.service-btn:hover {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
}

.client-title {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  text-align: center;        
  padding: 1rem;  
  background-color: var(--navyblue);
  color: white;
  margin-bottom: 0.5rem;
}

.page-blurb {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  text-align: left;        
  padding: 1rem;  
  background-color: var(--navyblue);
  color: white;
}

.page-blurb p {
  font-family: inherit;
  margin-bottom: 1rem;
}

.page-blurb p:last-child {margin-bottom: 0}

.page-blurb-back {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.page-blurb-back :last-child {margin-bottom: 0}

.index-client {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  margin: 1rem 0;
}

.event-bubble {
  background-color: rgb(173, 173, 173);
  color: var(--backgroundtexthover);
  padding: 0.5rem;
  margin: 1rem 0;
  text-align: center;
  font-size: 1.2rem;
}

.event-button {
  background-color: var(--navyblue);
  color: white;
  border: 0;
  outline: 0;
  font-size: larger;
  
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  height: auto;
  width: fit-content;
  padding: 1rem; 
}

.event-button:hover {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
}

/* CONTACT */

.contact-div {
  font-size: 1rem;
  display: flex;
  flex-direction: row;
  text-align: left;
  gap: 1rem;
}

.contact-header {
  font-size: 1.5rem;
}

.contact-req {
  background-color: var(--navyblue);
  color: white;
  display: block;
  flex: 2 auto;
  padding: 1rem;
}

.contact-times {
  background-color: var(--navyblue);
  color: white;
  /* outline: white 2px solid; */
  display: block;
  flex: 2 auto;
  padding: 1rem;
  text-align: center;
}

.contact-bubble-header {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 1.5rem;
  color: white;
}

.opening-hours {
  display: flex;
  justify-content: space-between; /* pushes boxes to opposite ends */
  flex-direction: row;
  align-items: center;
}

.contact-form {
  background-color: var(--navyblue);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* background-color: rgb(125, 125, 125); */
  
  padding: 1rem;
}

.contact-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  text-align: left;
}

.contact-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Force width for mobile mode */
.contact-field input {
  width: 100%;
  box-sizing: border-box;
}

/* Force consistent styling across mobile browsers */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  color: #000;
  display: block;
  width: 100%;
  /* padding: 0.5rem; */
  font-family: inherit;
  box-sizing: border-box;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0); /* Keeps icon visible on dark backgrounds */
  opacity: 1;
}

.contact-row textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;          /* disables the drag handle */
  max-width: 100%;       /* prevents overflow */
  min-height: 130px;     /* gives it a stable height */
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem;
  border: 2px solid #fff;
  background-color: #fff;
  color: #000;
  display: block;
}

.contact-row input {
  flex: 1;
}

.contact-row select {
  flex: 1;
}

#field {
  flex: 1;
}





.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/* IMAGE BANNERS */

.banner {
  height: 400px; 
}

#home1.banner {background-size: 140% auto; background-position: 50% 30%;}
#home2.banner {background-size: 100% auto; background-position: 50% 50%;}
#home3.banner {background-size: 100% auto; background-position: 50% 50%;}

#about1.banner {background-size: 100% auto; background-position: 50% 75%;}

#services1.banner {background-size: 130% auto; background-position: 50% 50%;}
#services2.banner {background-size: 100% auto; background-position: 50% 68%;}

#contact1.banner {background-size: 100% auto; background-position: 50% 65%;}

.image-div {
  display: block;
  margin:auto;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background-color: green;
  
}

.image-div img {
  width: 100%;
  height: 200px;
  object-fit: fill;
}

.event-types {
  display:grid;
  grid-row: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.event {
  background-color: red;
  border: 5px;
  text-align: center;
}

.content-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  /* background-color: yellow; */
}

.about-bubble {
  background-color: var(--navyblue);
  color: white;
  padding: 0.5rem;
  margin: 1rem auto;
  text-align: center;
  font-size: 1.5rem;
 
  justify-self: center;
}

/* EQUIPMENT TABLE EQUIPMENT TABLE EQUIPMENT TABLE */

.table-container {
  display: flex;
  justify-content: center;
  width: 100%;
  
}

.table {
  width: 80%;
  background-color: #5e5e5e;
  padding: 0.5rem;
}

/* TYPES / ITEM / COST */
.table-categories {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
  border-collapse: separate;
  border-spacing: 40px;
}

/* ALL / AUDIO / VIDEO / NETWORKING */
.table-filter {
  padding: 0 0.5rem 0 0.5rem;
  cursor: pointer;
  color:white;
}

.table-filter:hover {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
}

/* SM58, F218 ETC */
.table-item {
  padding: 0 0.5rem 0 0.5rem;
  cursor: pointer;
  color:white;
}
/* £100 / £20 / £5 ETC */
.table-cost {
  padding: 0 0.5rem 0 0.5rem;
  color: white;
  text-align: right;
}

.table-item:hover {
  background-color: var(--backgroundhover);
  color: var(--backgroundtexthover);
}

.poster-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: 1rem;
}

.poster {
  width: 100%;
  aspect-ratio: 2.1 / 3;
  object-fit: cover;
  justify-self: center;
  gap: 1rem;
}

.page-kicker {
  position: relative;
  background-color: var(--navbarcolor);
  color: white;
  text-align: center;
  padding: 1rem 3rem;
}

.page-kicker p {
  margin: 0;
  flex: 1;
  text-align: center;
}

.icon-container {
  position: absolute;
  right: 3rem; /* adjust to control horizontal spacing */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.75rem;
  
}

.icon {
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

/* MEDIA QUERY */
@media screen and (max-width: 1440px) and (max-height: 3040px) {
  /* NAV AND ICONS BAR */
  .navbar button {height: 4rem; vertical-align: middle;}
  .navbar button.navbar-active {height: 4rem}
  #icon1 {margin-right: 0; justify-self: center}
  #icon2 {margin-left: 0; justify-self: center}
  
  /* PAGE MANAGEMENT */
  .page-title {padding: 1rem; font-size: 1.5rem;}
  .page-container {width: 90vw}
  .event-bubble {font-size: 1rem}
  .page-kicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
  }

  .page-kicker p {
    flex: none;       /* Prevent stretching */
  }

  .icon-container {
    position: static;     
    transform: none;      
  }

  /* PAGES */
    
    /* BANNERRS */
    .banner {height: 10rem};
    #home2.banner {background-size: 200% auto; background-position: 40% 40%;}
    #services1.banner {background-size: 150% auto; background-position: 50% 40%;}
    #services2.banner {background-size: 140% auto; background-position: 50% 68%;}

    /* HOME */
    .event-types {grid-template-columns: repeat(2, 1fr); gap: 0}
    .event-bubble {
      margin: 0;
      margin-left: 5%;
      vertical-align: center;
      width: 90%;
      gap: 1rem;
    }


    /* ABOUT */
    .poster-container {grid-template-columns: none; grid-template-rows: repeat(2, 1fr)}

    /* SERVICES */

    .services {flex-direction: column}

    /* EQUIPMENT */
    .table {width: 90%}

    /* TECHNICIANS */

    /* CONTACT */
    .contact-div {
      display: flex;
      flex-direction: column;
      text-align: left;   
    }
    .contact-times {align-self: center; width: 100%}
    .opening-hours {justify-items: center}
    .contact-row {flex-direction: column}

}