/* -----------------------------------------------
  BRAND COLOR SYSTEM (RBM)


  yellow - #fffb00
  blue - #33aaff
  green - #00bf6c
  orange - #ff6a00
  pink - #f4b8ff
  black - #000000
  white - #ffffff

------------------------------------------------ */
:root {
  /* -----------------------------------------------
    CORE BRAND COLORS (NEW)
  ------------------------------------------------ */
  --rbm-yellow: #fffb00;
  --rbm-blue: #33aaff;
  --rbm-green: #00bf6c;
  --rbm-orange: #ff6a00;
  --rbm-pink: #f4b8ff;

  --rbm-black: #000000;
  --rbm-white: #ffffff;

  /* -----------------------------------------------
    DERIVED / UI COLORS
  ------------------------------------------------ */

  /* Backgrounds */
  --rbm-bg-dark: var(--rbm-black);
  --rbm-bg-light: var(--rbm-white);

  /* Text */
  --rbm-text-dark: var(--rbm-black);
  --rbm-text-light: var(--rbm-white);

  /* Accent defaults */
  --rbm-accent: var(--rbm-blue);
  --rbm-accent-alt: var(--rbm-orange);

  /* Existing layout vars (unchanged) */
  --nav-height: 42px;
  --pixel-art-size: 64px;
  --scenery-width: 1920px;
  --scenery-height: 128px;
}

@media (max-width: 575.98px) {
  :root {
    --pixel-art-size: calc(64px / 4 * 3);
    --scenery-width: calc(1920px / 4 * 3);
    --scenery-height: calc(128px / 4 * 3);
  }
}

/* -----------------------------------------------
  GLOBAL TYPOGRAPHY
------------------------------------------------ */
html,
body {
  font-family:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: var(--rbm-black);
  color: var(--rbm-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: bolder;
}

nav {
  font-family: "Poppins", sans-serif;
}

p,
li,
div {
  /* font-size: 1rem; */
  /* font-weight: bold; */
}

a {
  /* font-weight: bold; */
  text-decoration: underline;
  color: var(--rbm-blue);
  overflow-wrap: anywhere;
  word-break: break-word;
}

a:hover,
a:focus {
  color: var(--rbm-yellow);
}

h1,
h2 {
  margin-bottom: 1.5rem;
}

.section-inner > h2 {
  /* font-size: 1.5rem; */
  /* margin: 2.5rem 0 1.5rem 0; */
}

h3 {
  /* margin: 2.5rem 0 1.5rem 0; */
}

/* -----------------------------------------------
  NAVBAR
------------------------------------------------ */
.navbar {
  height: var(--nav-height);
  padding: 0.1rem 0.4rem;
  background: var(--rbm-black);
  color: var(--rbm-white);
  backdrop-filter: blur(8px);
}

.navbar-toggler {
  height: calc(var(--nav-height) - 10px);
  padding: 0.1rem 0.4rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.navbar-toggler-icon {
  width: 1.2em;
  height: 1.2em;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav-link {
  font-weight: 600;
}

.navbar .nav-link,
.navbar {
  color: var(--rbm-white);
}

.navbar .nav-link.active,
#mainMenu .active > .nav-link {
  color: var(--rbm-orange);
}

@media (max-width: 767.98px) {
  .navbar-collapse {
    background: var(--rbm-black);
    padding: 1rem;
    border-radius: 0.75rem;
    margin-top: 0.5rem;
  }
}

.navbar-brand > .icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 50%; */
}

.brand-logo {
  width: auto;
  user-select: none;
  height: calc(var(--nav-height) - 10px);
  padding: 2px;
}

/* default (fallback) */
#mainNav .navbar-brand span {
  color: var(--rbm-green);
}

#mainNav .icon-bg {
  background: var(--rbm-green);
}

/* per section */

#mainNav.home .navbar-brand {
  color: var(--rbm-green);
}
#mainNav.home .icon-bg {
  background: var(--rbm-green);
}

#mainNav.about .navbar-brand span {
  color: var(--rbm-pink);
}
#mainNav.about .icon-bg {
  background: var(--rbm-pink);
}

#mainNav.calendar .navbar-brand span {
  color: var(--rbm-yellow);
}
#mainNav.calendar .icon-bg {
  background: var(--rbm-yellow);
}

#mainNav.events .navbar-brand span {
  color: var(--rbm-blue);
}
#mainNav.events .icon-bg {
  background: var(--rbm-blue);
}

#mainNav.partners .navbar-brand span {
  color: var(--rbm-orange);
}
#mainNav.partners .icon-bg {
  background: var(--rbm-orange);
}

/* -----------------------------------------------
  SECTION STYLING
------------------------------------------------ */

.section {
  text-align: center;
}

.section-inner {
  /* max-width: 900px; */
  margin: 0 auto;
  /* padding: 2rem; */
}

/* -----------------------------------------------
  HOME STYLING
------------------------------------------------ */
.home-section {
  background: var(--rbm-green);
  color: var(--rbm-black);
}
.home-section h1 {
  color: var(--rbm-yellow);
}
.home-section a {
  color: var(--rbm-yellow);
}
.home-section a:hover {
  color: var(--rbm-pink);
}

/* -----------------------------------------------
  ABOUT STYLING
------------------------------------------------ */
.about-section {
  background: var(--rbm-pink);
  color: var(--rbm-black);
}

.about-section a {
  color: var(--rbm-blue);
}
.about-section a:hover {
  color: var(--rbm-green);
}

.os-contact > a {
  text-decoration: none !important;
}

.about-section {
  position: relative;
  padding-bottom: var(--nav-height);
}

.about-footer {
  background-color: var(--rbm-black);
  color: var(--rbm-white);
  height: var(--nav-height);

  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
}

.about-footer p {
  font-size: clamp(0.72rem, 0.6rem + 0.4vw, 0.875rem);
  line-height: 1.1;
  margin: 0;
}

.about-footer a {
  text-decoration: none;
}

.os-logo {
  max-width: 160px;
}

@media (max-width: 768px) {
  .os-logo {
    max-width: 120px;
  }
}

/* -----------------------------------------------
  CALENDAR STYLING
------------------------------------------------ */
.calendar-section {
  background: var(--rbm-yellow);
  color: var(--rbm-black);
}
.calendar-section a {
  color: var(--rbm-blue);
}
.calendar-section a:hover {
  color: var(--rbm-orange);
}

/* -----------------------------------------------
  EVENTS STYLING
------------------------------------------------ */
.events-section {
  /* background: linear-gradient(135deg, var(--rbm-green) 0%, var(--rbm-blue) 100%); */
  /* background: linear-gradient(135deg, var(--rbm-blue) 0%, var(--rbm-green) 100%); */
  background: var(--rbm-blue);
  color: var(--rbm-white);
}
.events-section a {
  color: var(--rbm-yellow);
}
.events-section a:hover {
  color: var(--rbm-pink);
}

/* -----------------------------------------------
  PARTNERS STYLING
------------------------------------------------ */
.partners-section {
  background: var(--rbm-orange);
  color: var(--rbm-white);
}
.partners-section a {
  color: var(--rbm-yellow);
}
.partners-section a:hover {
  color: var(--rbm-pink);
}

@media (min-width: 992px) {
  .row-cols-lg-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
  }
}

.partner-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  /* padding: 1rem; */
  border: 0;
  border-radius: 1rem;
  background: transparent;
  cursor: pointer;
  outline: none;
  width: 100%;
  color: var(--rbm-white);
}

.partner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.partner-logo-wrap {
  width: 100%;
  height: 80px; /* same height for every logo area */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.partner-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.grid-label {
  font-size: 0.8rem;
  line-height: 1.2;
}

#sponsorsGrid .grid-label {
  color: black;
}

.partner-tile:hover .partner-logo,
.partner-tile:focus .partner-logo,
.partner-tile[aria-expanded="true"] .partner-logo {
  transform: scale(1.03);
}

.partner-tile:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
}

.partner-popover-root {
  position: fixed;
  z-index: 9999;
  width: min(320px, calc(100vw - 24px));
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: var(--rbm-white);
  color: var(--rbm-black);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: left;
  pointer-events: auto;
}

.partner-popover-root[hidden] {
  display: none;
}

.partner-popover-root::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
}

.partner-popover-root[data-placement="top"]::after {
  top: 100%;
  border-top-color: var(--rbm-white);
}

.partner-popover-root[data-placement="bottom"]::after {
  bottom: 100%;
  border-bottom-color: var(--rbm-white);
}

.partner-popover-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.partner-popover-desc {
  font-size: 0.875rem;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.partner-popover-link {
  font-size: 0.875rem;
  text-decoration: none;
}

.partner-popover-link:hover,
.partner-popover-link:focus {
  text-decoration: underline;
}

/* -----------------------------------------------
  EVENTS STYLING
------------------------------------------------ */
.events-section.prepositioning .event-slide-content {
  opacity: 0;
}

.events-section .event-slide-content {
  transition: opacity 0.15s ease;
}

.event-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  padding: 0px;
}

.event-image {
  display: block;
  max-width: 100%;
  max-height: 45vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .event-image {
    max-height: 30vh;
  }
}

.event-details {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.events-section {
  position: relative;
}

.events-section .slide {
  padding-top: var(--scenery-height);
  margin: 0 auto;
}

.events-section .bike-overlay {
  position: absolute;
  top: calc(var(--nav-height));
  left: 0;
  right: 0;
  height: var(--scenery-height);
  width: 100%;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rbm-blue);
}

.event-details ol,
.event-details ul {
  text-align: left;
}

/* -----------------------------------------------
  BIKE ANIMATION STYLING
------------------------------------------------ */

.bike-sprite {
  position: absolute;
  top: calc(var(--scenery-height) - var(--pixel-art-size) - 4px);
  left: calc(50% - var(--pixel-art-size) / 2);
  z-index: 1;

  width: var(--pixel-art-size);
  height: var(--pixel-art-size);

  background-repeat: no-repeat;
  background-position: 0 top;
  background-size: auto var(--pixel-art-size);

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  will-change: background-position;
  transform-origin: center center;
}

.bike-overlay.going-forward .bike-sprite {
  transform: scaleX(1);
}

.bike-overlay.going-backward .bike-sprite {
  transform: scaleX(-1);
}

.bike-overlay.idle .bike-sprite {
  background-image: url("assets/animation/bike_idle_red.png");
  /* total animation is 1.2s in 4 steps */
  animation: bike-idle 1.2s steps(4) infinite;
}

.bike-overlay.pedaling .bike-sprite {
  background-image: url("assets/animation/bike_pedal_red.png");
  animation: bike-pedal 0.6s steps(16) 4;
}

.bike-overlay.no-bike-transition .bike-sprite {
  transition: none;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--scenery-height);
  z-index: 0;

  background-repeat: repeat-x;
  background-position: 0 top;
  background-size: var(--scenery-width) var(--scenery-height);

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;

  --bg-start-x: 0px;
}

.scenery-layer {
  background-image: url("assets/animation/scenery.png");
  animation-duration: 20s;
}

.sky-layer {
  background-image: url("assets/animation/sky.png");
  animation-duration: 80s;
}

.bike-overlay.going-forward .scenery-layer {
  animation-name: scenery-scroll-forward;
}

.bike-overlay.going-backward .scenery-layer {
  animation-name: scenery-scroll-backward;
}

.bike-overlay.going-forward .sky-layer {
  animation-name: sky-scroll-forward;
}

.bike-overlay.going-backward .sky-layer {
  animation-name: sky-scroll-backward;
}

.bike-overlay.pedaling .background-layer {
  animation-play-state: running;
}

.bike-overlay.idle .background-layer {
  animation-play-state: paused;
}

@keyframes bike-idle {
  from {
    background-position: 0 0;
  }
  to {
    /* background-position: -256px 0; */
    background-position: calc(-1 * var(--pixel-art-size) * 4) 0;
  }
}

@keyframes bike-pedal {
  from {
    background-position: 0 0;
  }
  to {
    /* background-position: -1024px 0; */
    background-position: calc(-1 * var(--pixel-art-size) * 16) 0;
  }
}

@keyframes scenery-scroll-forward {
  from {
    background-position: var(--bg-start-x) top;
  }
  to {
    background-position: calc(var(--bg-start-x) - var(--scenery-width)) top;
  }
}

@keyframes scenery-scroll-backward {
  from {
    background-position: var(--bg-start-x) top;
  }
  to {
    background-position: calc(var(--bg-start-x) + var(--scenery-width)) top;
  }
}

@keyframes sky-scroll-forward {
  from {
    background-position: var(--bg-start-x) top;
  }
  to {
    background-position: calc(var(--bg-start-x) - var(--scenery-width)) top;
  }
}

@keyframes sky-scroll-backward {
  from {
    background-position: var(--bg-start-x) top;
  }
  to {
    background-position: calc(var(--bg-start-x) + var(--scenery-width)) top;
  }
}

/* -----------------------------------------------
  CALENDAR STYLING
------------------------------------------------ */

:root {
  /* FullCalendar variables */
  --fc-border-color: var(--rbm-white);
  --fc-page-bg-color: var(--rbm-white);
  --fc-neutral-bg-color: var(--rbm-black);
  --fc-neutral-text-color: var(--rbm-white);

  --fc-event-bg-color: var(--rbm-blue);
  --fc-event-border-color: var(--rbm-white);
  --fc-event-text-color: var(--rbm-black);

  --fc-today-bg-color: rgba(255, 251, 0, 0.18);
  --fc-list-event-hover-bg-color: rgba(0, 191, 108, 0.12);

  --fc-button-bg-color: var(--rbm-blue);
  --fc-button-border-color: var(--rbm-white);
  --fc-button-text-color: var(--rbm-black);
  --fc-button-hover-bg-color: var(--rbm-orange);
  --fc-button-active-bg-color: var(--rbm-green);
}

#calendar-container {
  margin: 0rem 1rem 3rem 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--rbm-orange);
  background: black;
}

.fc {
  font-family: "Poppins", sans-serif;
}

.fc .fc-toolbar {
  display: none;
}

.fc .fc-daygrid-day-frame {
  background: var(--rbm-black);
  color: var(--rbm-white);
}

.fc .rbm-dow {
  background: var(--rbm-blue);
  color: var(--rbm-white);
}

/* Shared event styling for month + list view */
.fc .fc-daygrid-event,
.fc .fc-h-event,
.fc .fc-list-event {
  background: var(--rbm-blue);
  color: var(--rbm-white);
  border: 2px solid var(--rbm-black);
  border-radius: 10px;
  /* font-weight: 600; */
  font-weight: normal;
}

.fc .fc-daygrid-event {
  padding: 2px 6px;
}

.fc .fc-list-event {
  cursor: pointer;
}

.fc .fc-event-title {
  font-weight: 500; /* slightly emphasized */
}

.fc .fc-event-time {
  font-weight: 400; /* normal */
}

/* Make inner event text follow the event color */
.fc .fc-daygrid-event a,
.fc .fc-daygrid-event .fc-event-main,
.fc .fc-h-event .fc-event-main,
.fc .fc-h-event .fc-event-title,
.fc .fc-list-event-title a,
.fc .fc-list-event-time {
  color: inherit;
  text-decoration: none;
}

/* Month view weekday labels */
.fc .fc-col-header-cell-cushion,
.fc .fc-col-header-cell-cushion:link,
.fc .fc-col-header-cell-cushion:visited,
.fc .fc-col-header-cell-cushion:hover,
.fc .fc-col-header-cell-cushion:focus {
  color: var(--rbm-white);
  text-decoration: none;
}

/* Month view day numbers */
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-day-number:link,
.fc .fc-daygrid-day-number:visited,
.fc .fc-daygrid-day-number:hover,
.fc .fc-daygrid-day-number:focus {
  color: var(--rbm-white);
  text-decoration: none;
  font-weight: 700;
}

/* List view date headers */
.fc .fc-list-day-text,
.fc .fc-list-day-text:link,
.fc .fc-list-day-text:visited,
.fc .fc-list-day-text:hover,
.fc .fc-list-day-text:focus,
.fc .fc-list-day-side-text,
.fc .fc-list-day-side-text:link,
.fc .fc-list-day-side-text:visited,
.fc .fc-list-day-side-text:hover,
.fc .fc-list-day-side-text:focus {
  color: var(--rbm-white);
  text-decoration: none;
  /* font-weight: 700; */
}

/* Shared hover styling for current single-color setup */
.fc .fc-daygrid-event:hover,
.fc .fc-h-event:hover,
.fc .fc-list-event:hover {
  background: var(--rbm-orange);
  color: var(--rbm-white);
}

.fc .fc-daygrid-event-dot {
  display: none;
}

@media (max-width: 767px) {
  .calendar-shell {
    padding: 0.75rem;
  }

  .fc .fc-list {
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .fc .fc-list-event-title {
    font-size: 1rem;
    /* font-weight: 700; */
  }

  .fc .fc-list-event-time {
    white-space: nowrap;
    /* font-weight: 600; */
  }
}

/* Future per-event color classes */
.event-blue {
  background: var(--rbm-blue);
  color: var(--rbm-white);
}

.event-green {
  background: var(--rbm-green);
  color: var(--rbm-black);
}

.event-orange {
  background: var(--rbm-orange);
  color: var(--rbm-white);
}

.event-pink {
  background: var(--rbm-pink);
  color: var(--rbm-black);
}

.event-blue:hover {
  background: var(--rbm-white);
  color: var(--rbm-black);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--rbm-blue);
}

.event-green:hover {
  background: var(--rbm-black);
  color: var(--rbm-white);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--rbm-green);
}

.event-orange:hover {
  background: var(--rbm-black);
  color: var(--rbm-white);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--rbm-orange);
}

.event-pink:hover {
  background: var(--rbm-black);
  color: var(--rbm-white);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--rbm-pink);
}

/* Modal */
.hidden {
  display: none !important;
}

.event-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Poppins", sans-serif;
}

.event-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.event-modal-card {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--rbm-black);
  color: var(--rbm-white);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border: 2px solid white;
}

.event-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.event-modal-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.event-modal-body {
  padding: 1.25rem;
}

.event-modal-card a {
  color: var(--rbm-blue);
  text-decoration: underline;
}

.event-modal-card a:visited {
  color: var(--rbm-pink);
}

.event-modal-card a:hover {
  color: var(--rbm-yellow);
}

.event-modal-card a:focus {
  outline: 2px solid var(--rbm-yellow);
  outline-offset: 2px;
}