/*
 * Page generics
 */

:root {
  color-scheme: light dark;
  font-family: "Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
  --fa-width: auto;
}
.huroutes-light, .huroutes-light #sidebar {
  background: #fff;
}
.huroutes-dark, .huroutes-dark #sidebar, .huroutes-dark .modal-content {
  background: #13192e;
  background:
    linear-gradient(90deg,#00000000 93%, #00000034 99%),
    linear-gradient(80deg, #13192e00 60%, #070c149d 100%),
    linear-gradient(0deg, #13192e, #152a33, #0f1926);
  --bs-modal-border-color: #13192e59;
}
.huroutes-dark #menu {
  background: #13192e;
  background:
    linear-gradient(67deg,#0f1926 0%, #0f1825 100%),
    linear-gradient(192deg,#080e16 0%, #0f182500 100%);
}

p {
  margin: 0 0 10px;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  color: #0056b3;
}

/* Restore previous non-underlined sidebar links. */
#sidebar a.btn {
  color: #fff !important;
}

.huroutes-light #sidebar a {
  color: #0078A8;
}
.huroutes-dark #sidebar a {
  color: #8ccbff;
}
.huroutes-dark #sidebar a:hover {
  color: #eee;
}

/* Menu offscreen overflow for language dropdown */
#menu .offcanvas-body {
  overflow: visible;
}

/* Sidebar scrollbar design. */
#sidebar {
  scrollbar-width: auto;
}
.huroutes-light #sidebar {
  scrollbar-color: #3b4c5a #d3d3d3;
}
.huroutes-dark #sidebar {
  scrollbar-color: #7092ad #212c38;
}
#sidebar::-webkit-scrollbar {
  width: 6px;
}
#sidebar::-webkit-scrollbar-track {
  border-radius: 2px;
}
#sidebar::-webkit-scrollbar-thumb {
  border-radius: 2px;
}
.huroutes-light #sidebar::-webkit-scrollbar-thumb {
  background-color:#0e2338;
}
.huroutes-dark #sidebar::-webkit-scrollbar-thumb {
  background-color:#83a5c0;
}

/* Hide Google Translate elements */
#gt-nvframe, #goog-gt-tt, div#goog-gt- {
  display: none !important;
}
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  position: static !important;
}

/*
 * Layout
 */

/* Menu panel layout */
#sidebar {
  left: 0;
  padding: 0;
  overflow-y: auto;
  transition: left 0.25s ease;
  z-index: 1032;
}
#sidebar.closed {
  left: -83.333%; /* 12-column layout; 11-column width; -10-column offscreen when closed */
  overflow-y: hidden;
}

/* Side-by-side menu styles */
@media (min-width: 768px) {
  #sidebar {
    transition: none;
  }
  #sidebar.closed {
    left: 0;
    overflow-y: auto;
  }
}

/* Void panel styles for portrait design */
.panel-void {
  background: #0000007c;
  display: none;
}
#void-close-sidebar {
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1031;
}
#void-close-sidebar.show {
  display: block;
}
#void-open-sidebar {
  left: 0; top: 0;
  width: 100%; height: 9999%; /* % is without parent's overflow :( */
  position: absolute;
  z-index: 1033;
}
#void-open-sidebar.show {
  display: block;
}

/* Void panels are fully hidden in side-by-side view */
@media (min-width: 768px) {
  #void-close-sidebar, #void-close-sidebar.show,
  #void-open-sidebar, #void-open-sidebar.show {
    display: none;
  }
}

/*
 * UI Elements
 */

/* Main menu */
.language-select .dropdown-menu {
  width: 13em !important;
  z-index: 1050;
}
.huroutes-light .language-select .dropdown-menu {
  background: #fff;
}
.huroutes-dark .language-select .dropdown-menu {
  background: #13192e;
}
#navbarSocial {
  font-size: 24px;
}

#sidebar .options-button {
  font-size: 24px;
}

/* sidebar menu look & feel */
.huroutes-light #sidebar .menubox a.dropdown-toggle,
.huroutes-light #sidebar .menubox a.dropdown-toggle:hover {
  color: #000;
}
.huroutes-dark #sidebar .menubox a.dropdown-toggle {
  color: #eee;
}
.huroutes-dark #sidebar .menubox a.dropdown-toggle:hover {
  color: #fff;
}


ul.menu {
  margin-block-end: 0;
  margin-block-start: 0;
}
ul > li > a.dropdown-toggle {
  display: block;
  font-size: 1.1em;
  overflow: hidden;
  padding: 10px;
  padding-right: 25px;
  text-overflow: ellipsis;
}
ul > li > a.dropdown-toggle::after {
  display: block;
  float: right;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
ul ul > li > a.dropdown-toggle {
  padding-left: 20px !important;
}
ul ul ul > li > a.dropdown-toggle {
  padding-left: 40px !important;
}
ul ul ul ul > li > a.dropdown-toggle {
  padding-left: 60px !important;
}
ul ul ul ul ul > li > a.dropdown-toggle {
  padding-left: 80px !important;
}
.huroutes-light ul > li > a.dropdown-toggle {
  color: #2c2c2c;
}
.huroutes-light ul > li > a.dropdown-toggle:hover {
  background: #c6ceeb;
  color: #383966;
}
.huroutes-dark ul > li > a.dropdown-toggle {
  color: #fff;
}
.huroutes-dark ul > li > a.dropdown-toggle:hover {
  background: #1b2342;
  color: #bbbfcf;
}

/* A route's description panel */
.huroutes-light .sidebar .panel {
  background: #eaf4ff;
}
.huroutes-dark .sidebar .panel {
  background: #1e3450;
}

/* Header containing the route's date and rating */
.route-header {
  font-size: 1.1em;
}

.stars-outer {
  position: relative;
}
.stars-inner {
  color: #f8ce0b;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 0;
  white-space: nowrap;
}

/* Route controls toolbar */

.route-ctrls .btn:not(:has(> div.w-100.h-100)),
.route-ctrls .btn > div.w-100.h-100 {
  font-size: 1.3rem;
  padding: .3rem .6rem;
}
.route-ctrls .btn:has(> div.w-100.h-100) {
  padding: 0 0;
}
.route-ctrls span.btn {
  padding: .3rem 0 !important;
}

.huroutes-light .route-ctrls .btn {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.huroutes-light .route-ctrls a.btn:hover,
.huroutes-light .route-ctrls a.btn:focus {
  background-color: #0062ca;
  border-color: #0058b6;
}
.huroutes-light .route-ctrls a.btn:active {
  background-color: #0051a8;
  border-color: #003e80;
}
.huroutes-dark .route-ctrls .btn {
  background-color: #3363a1;
  border-color: #3363a1;
  color: #fff;
}
.huroutes-dark .route-ctrls a.btn:hover,
.huroutes-dark .route-ctrls a.btn:focus {
  background-color: #2e578d;
  border-color: #2a5081;
}
.huroutes-dark .route-ctrls a.btn:active {
  background-color: #264670;
  border-color: #182e4b;
}
.huroutes-dark .route-ctrls .dropdown-menu {
  --bs-dropdown-bg: #13192e;
  --bs-dropdown-border-color: #13192e59;
  --bs-dropdown-link-hover-bg: #2e578d;
}

/*
 * Map view
 */

 /* noop currently */
.map {
  width: 100%; height: 100%;
}

/* Overrides Bootstrap link decoration for leaflet controls. */
.leaflet-bar a:hover {
  text-decoration: none;
}

/* Keeps bottom controls without attribution clear of its variable height (see initCtrls) */
.leaflet-control-container .leaflet-bottom:not(:has(.leaflet-control-attribution)) {
  bottom: var(--attribution-height, 0px);
}

/* Googleesque scale control positioning compared to the zoom controls */
.leaflet-bottom.leaflet-right .leaflet-control-scale {
  bottom: 22px;
  position: absolute;
  right: 44px;
}

/*
 * Map view / Controls themes
 */

/* Dark-theme borders for leaflet buttons */
.maps-dark .leaflet-touch .leaflet-control-layers, .maps-dark .leaflet-touch .leaflet-bar {
	border: 2px solid #9c9c9c33;
}
/* Overrides the default blue link colour for controls */
.maps-light .leaflet-bar a {
  color: #000;
}
/* Overrides the default light leaflet theme for controls */
.maps-dark .leaflet-bar a, .maps-dark .leaflet-control-layers {
  background-color: #13192e;
  color: #fff;
}
/* Overrides the default light leaflet theme for popup bubbles */
.maps-dark .leaflet-popup-content-wrapper, .maps-dark .leaflet-popup-tip {
  background-color: #13192e;
  color: #fff;
  box-shadow: 0 3px 14px #000b;
}
/* Overrides the default light leaflet theme for control backgrounds upon hovering */
.maps-dark .leaflet-bar a:hover {
  background-color: #1e2644;
}
/* Overrides the default light leaflet theme for the attribution control */
.maps-dark .leaflet-container .leaflet-control-attribution {
  background-color: #13192eaf;
  color: #fff;
}
.maps-dark .leaflet-control-scale-line {
  background-color: #13192e80;
  border: 2px solid #9c9c9c;
  border-top: none;
  color: #ccc;
}
/* Inverts the default black location control icons in dark mode */
.maps-dark .leaflet-control-locate:not([class~=active]) .leaflet-control-locate-location-arrow,
.maps-dark .leaflet-control-locate-spinner {
  filter: invert(1);
}

/*
 * Map view / map themes
 */

/* A dark filter set for "normal" map styles */
.maps-dark .tile-openstreetmap, .maps-dark .tile-googlemap, .maps-dark .tile-googleterrain {
  filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  -webkit-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}
/* A dark filter set for OpenTopoMap */
.maps-dark .tile-opentopomap {
  filter: brightness(0.65) invert(0.8) contrast(2.5) hue-rotate(200deg) saturate(0.6) brightness(0.8);
  -webkit-filter: brightness(0.65) invert(0.8) contrast(2.5) hue-rotate(200deg) saturate(0.6) brightness(0.8);
}
/* A slight darkening for satellite maps in dark mode */
.maps-dark .tile-satellite, .maps-dark .tile-googlesatellite {
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}
/* Colour inversion for the DEM in dark mode */
.maps-dark .overlay-dem {
  filter: invert(1);
  -webkit-filter: invert(1);
}

/*
 * Low contrast tooltips
 */

.tooltip {
  /* Invert default bootstrap tooltip color */
  --bs-tooltip-bg: var(--bs-body-bg);
  --bs-tooltip-color: var(--bs-body-color);
  /* Add contrasting tooltip border */
  --bs-tooltip-border-color: rgba(var(--bs-body-color-rgb), 0.35);
  --bs-tooltip-border-width: 1px;
}

.tooltip .tooltip-inner {
  border: var(--bs-tooltip-border-width) solid var(--bs-tooltip-border-color);
}

.huroutes-dark .tooltip {
  --bs-tooltip-bg: #0b0f1b;
  --bs-tooltip-border-color: #0b0f1b59;
}