/* Setup the background, gets applied w/ color overlay based on dark or light theme */
html[data-theme^="forgejo"] body {
  --background-dark: linear-gradient(rgba(19, 25, 32, 1.0), rgba(23, 30, 38, 1.0));
  --background-light: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
  background-color: #141920; /* Based on header bar color after its overlayed */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Blur the background with this css hack that overlays the blur */
html[data-theme^="forgejo"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: -1;
}

/* Less intense blur on small screens */
@media (max-width: 560px) {
  html[data-theme^="forgejo"] body::before {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Handle dark colors on auto and dark themes */
@media (prefers-color-scheme: dark) {
  html[data-theme^="forgejo-auto"] {
    --color-nav-bg: #10161d61;
  }
  
  html[data-theme^="forgejo-auto"] body {
    background-image: var(--background-dark);
  }
}

html[data-theme^="forgejo-dark"] {
  --color-nav-bg: #10161d61;
}

html[data-theme^="forgejo-dark"] body {
  background-image: var(--background-dark);
}

/* Handle light colors on auto and light themes */
@media (prefers-color-scheme: light) {
  html[data-theme^="forgejo-auto"] body {
    background-image: var(--background-light);
  }
}

html[data-theme^="forgejo-light"] body {
  background-image: var(--background-light);
}

/* Global variables for color and other things */
:root {
  --color-footer: transparent !important;
  --color-secondary-nav-bg: var(--color-nav-bg) !important; /* Set unified colors for header */
  --page-spacing: 24px !important; /* Increase gap between header and page content */
}

/* Decrease gap between navbar links to make them slightly more consistent with Nextcloud */
#navbar > .navbar-left.ui.secondary.menu {
  gap: 0;
}

/* Remove border on main navbar if a secondary nav exists */
#navbar:has(+ .page-content .secondary-nav) {
  border-bottom: unset;
}

/* Centers and constrains footer and dashboard context selector */
.page-footer,
.secondary-nav > .ui.secondary.stackable.menu {
  width: 1280px;
  max-width: calc(100% - calc(2 * var(--page-margin-x)));
  margin-left: auto;
  margin-right: auto;
}

.secondary-nav, .secondary-nav > .ui.secondary.stackable.menu > .item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-footer {
  border-top: unset !important;
}