html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow-x: hidden; /* prevent horizontal scroll */
}

:root {
  /* fluid spacing and sizes (min, preferred using vw, max) */
  --header-height: clamp(80px, 6vw, 135px);
  --date-height: clamp(60px, 6.5vw, 100px);
  --logo-height: clamp(40px, 3vw, 50px);
  --menu-gap: clamp(12px, 3vw, 46px);
  --menu-padding-vertical: clamp(8px, 2vw, 16px);
  --menu-padding-horizontal: clamp(12px, 3.5vw, 32px);
  --menu-item-gap: clamp(12px, 3vw, 32px);
  --landing-mt: clamp(120px, 12vw, 200px);
  --landing-pt: clamp(12px, 3vw, 20px);
  --boom-logo-width: clamp(200px, 50vw, 822px);
  --info-padding-left: clamp(20px, 6vw, 50px);
  --info-padding-right: clamp(12px, 4vw, 85px);
  --person-img-h: clamp(120px, 15vw, 192px);
  --roster-gap: clamp(20px, 6vw, 90px);
  --time-col: clamp(120px, 18vw, 182px);
  --time-activity-gap: clamp(8px, 2.5vw, 21px);
  --schedule-max-width: clamp(320px, 50vw, 554px);
  --form-input-width: clamp(300px, 80vw, 554px);
  --submit-width: clamp(75px, 10vw, 133px);
  --footer-height: clamp(12vw, 12vw, 15vw);
  --footer-icon-gap: clamp(20px, 10vw, 81px);
  /* additional fluid tokens to replace remaining hard px values */
  --landing-height: clamp(500px, 40vw, 754px);
  --info-max-height: clamp(480px, 60vw, 821px);
  --ghost-right: clamp(120px, 38vw, 700px);
  --sarajevo-height: clamp(360px, 60vw, 821px);
  --info-h3-max-width: clamp(200px, 60vw, 421px);
  --info-p-max-width: clamp(280px, 80vw, 781px);
  --page-side-padding: clamp(12px, 3vw, 20px);
  --person-base: clamp(160px, 20vw, 200px);
  --person-max-width: clamp(160px, 40vw, 232px);
  --person-name-mt: clamp(12px, 3vw, 26px);
  --person-h4-max: clamp(120px, 40vw, 197px);
  --person-p-max: clamp(180px, 50vw, 267px);
  --line-height: clamp(20px, 3.6vw, 29px);
  --schedule-padding-bottom: clamp(80px, 12vw, 150px);
  --schedule-heading-pt: clamp(28px, 5vw, 78px);
  --timeevent-maxwidth: clamp(280px, 50vw, 572px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

button {
  background: none; /* remove default background */
  border: none; /* remove border */
  padding: 0; /* remove default padding */
  margin: 0; /* remove default margin */
  font: inherit; /* inherit font from parent */
  color: inherit; /* inherit text color */
  cursor: pointer; /* keep pointer cursor */
}

a {
  text-decoration: none; /* removes underline */
  color: inherit; /* makes it inherit color from parent */
  cursor: pointer; /* optional: removes pointer cursor */
}

/* FONTS *******************************/

@font-face {
  font-family: "br_omegamedium";
  src: url("./fonts/lexend-v26-latin-500.woff2") format("woff2"),
    url("./fonts/lexend-v26-latin-500.woff") format("woff");
  font-weight: medium;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "br_omegablack";
  src: url("./fonts/lexend-v26-latin-700.woff2") format("woff2"),
    url("./fonts/lexend-v26-latin-700.woff") format("woff");
  font-weight: medium;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "br_omegaregular";
  src: url("./fonts/lexend-v26-latin-regular.woff2") format("woff2"),
    format("woff2"), url("./fonts/lexend-v26-latin-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "br_omega300";
  src: url("./fonts/lexend-v26-latin-300.woff2") format("woff2"),
    format("woff2"), url("./fonts/lexend-v26-latin-300.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "br_omegabold";
  src: url("./fonts/lexend-v26-latin-700.woff2") format("woff2"),
    url("./fonts/lexend-v26-latin-800.woff") format(("woff"));
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "br_omegalight";
  src: url("./fonts/lexend-v26-latin-200.woff2") format("woff2"),
    url("./fonts/lexend-v26-latin-200.woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* FONTS -------------------------------*/

/* HEADER STYLES *******************************/

#header_container {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  width: 100%;
  height: var(--header-height);

  position: fixed; /* sticks to top */
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease; /* smooth hide/show */
  z-index: 100000;
}

#boomHeaderLogo {
  height: var(--logo-height);
  width: auto;
  padding-left: var(--info-padding-left);
}

#menu_container {
  display: flex;
  align-items: center;
  position: relative;
}

#language_flag {
  display: block;
  width: 40px;
  height: auto;
  border-radius: 3px;

  margin-right: 50px;
}

#menuButton {
  margin-right: var(--menu-gap);
  z-index: 1001;
}

#menuHeaderIcon {
  transition: transform 0.3s ease; /* smooth rotation */
  height: clamp(40px, 3vw, 50px);
  width: auto;
}

#menu_items {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: var(--menu-padding-vertical) var(--menu-padding-horizontal);
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

#menu_items.menu-visible {
  opacity: 1;
  pointer-events: all;
  right: calc(100% + 1.25rem);
}

.menu-item {
  font-family: "br_omegaregular", sans-serif;
  font-size: clamp(16px, 3vw, 28px);
  color: #1e1e1e;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  font-size: clamp(16px, 1.5vw, 28px);
}

.menu-item:hover {
  color: #00ade9;
}

#header_date_container {
  display: flex;
  position: fixed;
  top: var(--header-height);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: var(--date-height);
  background-color: #e68a40;
  transition: top 0.3s ease;
  text-align: center;
}

#saveTheDate {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  font-size: clamp(20px, 4vw, 50px);
  padding-left: 20px;
  padding-right: 20px;
  color: #fff !important;
}

#saveTheDate,
#saveTheDate * {
  color: #fff !important;
}

/* HEADER STYLES -------------------------------*/

/* LANDING STYLES *******************************/

#landing_container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--landing-height);
  background-image: url("./images/landing_imgs/landingBackground.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  margin-top: var(--landing-mt);
  padding-top: var(--landing-pt);
}

#landing_container h3 {
  position: absolute;
  top: 10%;
  left: 6vw;
  margin: 0;
  color: #fff;
  font-family: "br_omegalight", "Grotek", sans-serif;
  font-weight: 400;
  font-size: clamp(23px, 2.5vw, 48px);
  text-align: left;
}

#boomLandingLogo {
  width: var(--boom-logo-width);
  height: auto;
  display: block;
  max-width: none; /* remove the cap */
}

/* LANDING STYLES -------------------------------*/

/* INFO STYLES *******************************/

#info_container {
  display: flex;
  position: relative; /* needed for absolute child containment */
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  max-height: 821px;
  background-color: #034c7a;
  overflow: hidden; /* prevent ghost image from causing scroll */
}

#ghost {
  display: contents; /* makes span disappear from layout */
}

#ghost img {
  z-index: 1;
  position: absolute; /* removes it from the normal flow */
  pointer-events: none; /* makes it non-interactive (can’t be clicked/hovered) */

  max-width: 100%;
  height: auto;
  display: block;
  right: var(--ghost-right);
}

#sarajevoWrapper {
  height: auto;
  overflow: hidden;
}

#sarajevo {
  max-width: 100%;
  height: var(--sarajevo-height);
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 10;
}

#info_container div h3 {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  font-size: clamp(20px, 8vw, 59.5px);

  max-width: var(--info-h3-max-width);

  padding-left: var(--info-padding-left);
  padding-right: var(--info-padding-right);
}

#info_container div p {
  font-family: "br_omegalight", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 3vw, 28px);

  max-width: var(--info-p-max-width);

  padding-left: var(--info-padding-left);
  padding-right: clamp(12px, 4vw, 40px);
}

#info_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* INFO STYLES -------------------------------*/

/* MEET STYLES *******************************/
#meet_container {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

#meet_container h3 {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  font-size: clamp(33px, 7vw, 59.5px);
  text-align: center;
}

#roster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roster-gap);
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 70px;
  padding-left: var(--page-side-padding);
  padding-right: var(--page-side-padding);
}

.person {
  flex: 1 1 var(--person-base); /* grow:1, shrink:1, base width from var */
  max-width: var(--person-max-width);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "br_omegaregular", "Grotek", sans-serif;
  font-weight: 400;
  gap: 0;
}

.person img {
  width: 100%;
  height: var(--person-img-h);
  object-fit: contain;
  object-position: center;
  display: block;
}

.person h4 {
  margin: 0;
  margin-top: var(--person-name-mt);
  font-size: clamp(18px, 5vw, 27px);
  max-width: 197px;
}

.person p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity {
  white-space: wrap;
}
/* MEET STYLES -------------------------------*/

/* SCHEDULE STYLES *******************************/

#schedule_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  align-items: center;

  background-color: #231f20;

  max-width: 100%;

  color: #f2f2f3;
  letter-spacing: var(--letter-spacing, 1.2px);
  font-size: clamp(12px, 3vw, 24px);
  font-family: "br_omega300", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: medium;

  line-height: var(--line-height);
  padding-bottom: var(--schedule-padding-bottom);
  padding-left: var(--page-side-padding);
  padding-right: var(--page-side-padding);
}

#schedule_container h3 {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  font-size: clamp(24px, 5vw + 1rem, 59.5px);

  padding-top: var(--schedule-heading-pt);
  color: #00ade9;
}

.dayText1,
.dayText2 {
  font-family: "br_omegamedium", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  font-size: clamp(17px, 5vw, 28px);
}

.dayText1 {
  letter-spacing: 5%;
}

#schedule_day1 {
  margin-bottom: clamp(8px, 3vw, 20px);
}

.timeEventContainer {
  display: flex;
  max-width: var(--timeevent-maxwidth);
  justify-content: flex-start;
  gap: var(--time-activity-gap);
  align-items: flex-start; /* keep time and activity aligned at top */
  width: 100%;
  box-sizing: border-box;
}

.time,
.activity {
  padding: 0;
  margin: 0;
}

.time {
  /* fixed column for times so spacing is consistent per row */
  flex: 0 0 var(--time-col);
  width: auto; /* keep width controlled by flex */
  padding-bottom: clamp(12px, 3vw, 24px);
}

.activity {
  /* activity takes remaining space */
  flex: 1 1 auto;
  max-width: none; /* allow flex to control width */
  padding-bottom: clamp(12px, 3vw, 24px);
}

.blackText {
  font-family: "br_omegablack", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
}

#schedule_day1,
#schedule_day2 {
  width: 100%;
  max-width: var(--schedule-max-width);
  box-sizing: border-box;
  padding-left: clamp(12px, 3vw, 16px);
  padding-right: clamp(12px, 3vw, 16px);
}

/* SCHEDULE STYLES -------------------------------*/

/* FEES STYLES *******************************/

.fees-section {
  font-family: "br_omega300", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: normal;
  font-size: clamp(15.6px, 4vw, 28px);
  line-height: clamp(15.4px, 7vw, 35px);
  background-color: #b9e5fb;
  color: #1e1e1e;
  padding: 20px 20px 6vw;
}

.fees-title {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
  color: #00ade9;
  text-align: center;
  margin-bottom: 48px;
  font-size: clamp(24px, 5vw + 1rem, 59.5px);
}

.fees-container {
  max-width: 900px;
  margin: 0 auto;
}

.fees-block {
  margin-bottom: 60px;
  font-size: clamp(15.6px, 3vw, 28px);
}

.fees-block h3 {
  font-weight: bold;
  margin-bottom: 24px;
  font-size: clamp(15.6px, 4vw, 36px);
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
}

.fees-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 0;
  align-items: flex-start;

  position: relative;
}

.specialBorder::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 75%;
  height: 1px;
  background-color: rgba(30, 30, 30, 0.3);
}

.fees-row-3col {
  grid-template-columns: 2fr 1fr 1fr;
}

.fees-row-special {
  grid-template-columns: 1fr auto;
}

.special-text {
  display: block;
}

.blackTextFees {
  font-family: "br_omegablack", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: bold;
}

.thickBorderBottom {
  border-bottom: 1.5px solid rgba(30, 30, 30, 0.8);
}

.noBorder {
  border-bottom: none;
}

.select-btn {
  background-color: #1e1e1e;
  color: #b9e5fb;
  border: none;
  padding: 8px 20px;
  font-size: clamp(10px, 2vw, 14px);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.select-btn:hover {
  background-color: #333333;
}

.select-btn.selected {
  background-color: #b9e5fb;
  border: 3px solid #1e1e1e;
  color: #1e1e1e;
}

/* FEES STYLES -------------------------------*/

/* FORM STYLES *******************************/

#form_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto; /* allows shrinking */
  padding-bottom: 20px;
}

#form_container h3 {
  font-family: "br_omegaregular", sans-serif;
  font-weight: bold;
  font-size: clamp(24px, 5vw + 1rem, 59.5px);
  line-height: 1;
}

#excelForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#form_container input,
select {
  border: 1px solid #00ade9;
  font-family: "br_omegaregular", sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  color: #1e1e1e;
  width: var(--form-input-width);

  height: clamp(58px, 10vw, 87px);
  margin: 0px;
  padding-left: clamp(12px, 3vw, 33px);
  background-color: transparent;
  box-sizing: border-box;

  outline: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("./arrow.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: clamp(12px, 3vw, 28px);
  background-color: white;
  padding-right: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

select option {
  border: 1px solid #00ade9;
  background-color: white;
  color: #1e1e1e;
}

select:focus {
  border-color: #e68a40;
  box-shadow: 0 0 2px #e68a40;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset; /* override autofill background */
  -webkit-text-fill-color: #1e1e1e; /* override autofill text color */
}

#form_container input::placeholder {
  font-family: "br_omegaregular", sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  color: #bec0c1;
}

#submitContainer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 554px;

  box-sizing: border-box;
}

#form_submit {
  color: #fff;
  background-color: #00aeef;
  width: var(--submit-width);
  height: clamp(58px, 10vw, 87px);
  font-family: "br_omegablack", sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: bold;
  letter-spacing: 1.4px;
  border: none;
  cursor: pointer;
}

input:focus {
  border-color: #e68a40 !important; /* orange border */
  box-shadow: 0 0 2px #e68a40; /* glowing orange shadow */
}

.help_container {
  display: flex;
  justify-content: center;
  font-family: "br_omegaregular", sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  color: #bec0c1;
  max-width: var(--form-input-width);
  margin: 0 auto;
  text-align: center;
  padding-bottom: 55px;
}

/* FORM STYLES -------------------------------*/

/* FOOTER STYLES *******************************/

#footer_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: var(--footer-height);
  box-sizing: border-box;

  background-image: url("./images/footer_imgs/footerbackground.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  text-align: center;
}

#footer_container p {
  font-family: "br_omegaregular", "Grotek", "Styrene", "NN Nouvelle Grotesk STD",
    sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 3vw, 24px);
  letter-spacing: 2px;
  color: #fff;
  padding: 10px;
  padding-bottom: 0px;
}

#footer_icons {
  display: flex;

  gap: var(--footer-icon-gap);
}

.icon {
  width: clamp(20px, 3vw, 30px);
  height: clamp(20px, 3vw, 30px);
}

/* FOOTER STYLES -------------------------------*/

/* MEDIA */

@media only screen and (max-width: 1460px) {
  #info_container {
    flex-direction: column;
    max-height: 100%;
    background-size: 150vw auto;
    background-position: 20vw 70px;
  }

  #info_container div p {
    max-width: 100%;
  }
  #bone_text {
    margin-right: 15%;
    padding-left: 20px;
  }

  #info_container div h3 {
    padding-top: 40px;
    padding-left: 40px;
  }

  #info_container div p {
    padding-left: 40px;
  }
  #sarajevoWrapper {
    width: 100%;
  }

  #sarajevo {
    width: 100%;
    height: auto;
  }

  #ghost img {
    z-index: 1000;

    max-width: 80%;

    right: 0;
    margin-top: 100px;
  }
}

@media only screen and (max-width: 1385px) {
  #menu_items {
    flex-direction: column;
    top: 166%;
    background: rgba(255, 255, 255, 1);
    transform: translateY(-23%);
    padding-top: 20px;
  }

  #footer_container {
    height: 15vw;
  }
}

@media only screen and (max-width: 965px) {
  #ghost img {
    max-width: clamp(90%, 90vw, 95%);
  }
}

@media only screen and (max-width: 725px) {
  /* restore header sizing for small screens */
  #menuHeaderIcon {
    width: auto;
    height: 46px;
    margin-right: 20px;
  }

  #boomHeaderLogo {
    height: auto;
    padding-left: 34px;
  }

  #header_container {
    height: 95px;
  }

  #landing_container {
    margin-top: 145px;
  }

  #header_date_container {
    height: auto;
    top: 95px;
  }
  #schedule_container h3 {
    padding-top: 20px;
  }

  #footer_container {
    height: 25vw;
  }
}

@media only screen and (max-width: 660px) {
  .timeEventContainer {
    gap: 20px;
  }
  #boomLandingLogo {
    width: clamp(200px, 80vw, 822px);
  }
  #boomHeaderLogo {
    height: 40%;
  }
  #menuHeaderIcon {
    height: 35px;
  }

  #menuButton {
    margin-top: 7px;
  }
  #header_container {
    height: 70px;
  }
  #landing_container {
    margin-top: 120px;
  }

  #language_flag {
    width: 30px;
    margin-right: 30px;
    margin-top: 5px;
  }
}

@media only screen and (max-width: 570px) {
  #roster {
    max-width: 349px;
  }

  #menu_items.menu-visible {
    opacity: 1;
    pointer-events: all;
  }

  #menu_items {
    flex-direction: column;
    background: rgba(255, 255, 255, 1);
    transform: translateY(-35%);
    width: 101vw;
    top: 405%;
    border-bottom-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
    padding-right: 0;
    padding-left: 0;
    right: -43%;
    gap: 40px;
  }
  .menu-item {
    font-size: clamp(21px, 1.5vw, 28px);
  }

  #menu_items.menu-visible {
    right: 0;
  }

  #lastItem {
    padding-bottom: 30px;
  }
}

@media only screen and (max-width: 475px) {
  #roster {
    gap: 35px;
  }
  #footer_container {
    height: 25vw;
    padding-bottom: 60px;
    padding-top: 55px;
  }
  #ghost img {
    max-width: 115%;
    right: -80px;
    /* Prevent image from causing horizontal scroll while keeping the overflow visible */
    max-width: min(115%, 100vw);
    width: auto;
    transform: translateX(
      0
    ); /* allows image to overflow container without causing scroll */
  }
  #info_container div p {
    padding-left: 0px;
  }
  #info_container div h3 {
    padding-left: 0px;
  }
  .fees-row {
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid black;
  }
  .fees-row-special {
    grid-template-columns: 1fr auto;
  }
  .specialBorder::after {
    width: 100%;
  }
  .noBorder {
    border-bottom: none;
  }
}