/* ============================================
   MOBILE FIRST - Base styles (240x360+)
   Default design allowing some quirks
   ============================================ */

.sidebar-menu-buttons {
  display: flex;
  flex-direction: column;
  overflow: clip;
  height: auto;
  justify-items: revert-layer;
  align-items: first baseline;
}

.button-three svg {
  width: clamp(40px, 40px + 0.5vw, 3vh);
  color: white;
}

.sidebar-aligned {
  justify-items: flex-end;
  align-items: first baseline;
  transition: height 0.3s ease;
}

#discourse-button {
  fill: white;
}

#discourse-button svg {
  padding: 4px;
}

#open-settings-button {
  fill: white;
}

#open-settings-button svg {
  padding: 6px;
}

.hide-show-menu-caret-button {
  position: absolute;
  right: 5px;
  cursor: pointer;
  padding: 5px 10px;
}

.hide-show-menu-caret-button .caret {
  display: inline-block;
  transition: transform 0.8s ease;
  transform: rotate(90deg);
  font-size: clamp(14px, 14px + 0.5vh, 18px);
}

.hide-show-menu-caret-button.active .caret {
  transform: rotate(-360deg);
}

#cookies-container.overlay-active {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#cookies-container.overlay-active #cookie-popup {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  color: #333;
  position: relative;
}

/* ============================================
   MOBILE PERFECT - 360×540+

   Perfect mobile display from these dimensions
   ============================================ */

/* Add mobile-specific overrides here if needed */

/* ============================================
   TABLET - 768×1024+ (768px+ width)
   Tablet-specific styles
   ============================================ */

@media (min-width: 768px) {
  .hide-show-menu-caret-button {
    display: none;
  }
  .sidebar-menu-buttons {
    flex-direction: row;
  }

  #open-settings-button {
    position: absolute;
    right: 20px;
  }
  .sidebar-aligned {
    width: 100vw;
    flex-direction: column;
    height: 50px;
  }
  #discourse-button {
    position: absolute;
    right: 150px;
  }

  .sidebar-menu-buttons {
    align-items: anchor-center;
    height: 85px;
  }

  #open-settings-button svg {
    position: relative;
    top: -2px;
  }

  #discourse-button svg {
    position: relative;
    top: -2px;
  }

  #sidebar-aligned-container-settings {
    background-color: rgb(10, 85, 117);
    height: 36px;
    flex-direction: row;
    justify-content: center;
    overflow: clip;
  }

  .banner-content {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
}

/* ============================================
   DESKTOP - 1280×720+ (1280px+ width)
   Desktop-specific styles
   ============================================ */

@media (min-width: 1280px) {
  /* Add desktop-specific overrides here if needed */
}

/* HIDE NEW FEATURES BEHIND DEBUG=1 */
/* Hide debug-only features by default */
.hide-show-menu-caret-button,
#discourse-button,
#open-settings-button {
  display: none;
}

/* Show caret when debug is active */
.hide-show-menu-caret-button.debug-active {
  display: block;
}

/* Desktop: hide caret even in debug mode */
@media (min-width: 768px) {
  .hide-show-menu-caret-button.debug-active {
    display: none;
  }
}