/**
 * edas-dashboard.css
 *
 * eReefs visual identity for CSIRO's Environmental Data Application Stack (EDAS) Dashboards
 * these styles are designed to override the default EDAS dashboard theme styles.
 *
 */
:root {
  /* EDAS Theme variables */
  --home-bg-img-url: none;  /* because the relative URL causes issues when used by the EDAS stylesheet */
  --logo-height: var(--ereefs-logo-min-height);
  --text-light: var(--ereefs-text-light);
  --text-dark: var(--ereefs-text-dark);

  /* EDAS and Bootstrap Theme fonts */
  --font-family-brand: var(--ereefs-brand-font-family);
  --font-size-brand: var(--ereefs-brand-font-size);
  --font-weight-brand: var(--ereefs-brand-font-weight);
  --font-family-headings: var(--ereefs-headings-font-family);
  --font-family-monospace: var(--ereefs-code-font-family);
  --font-family-sans-serif: var(--ereefs-text-font-family);

  /* Bootstrap Theme Colors */
  --primary: var(--ereefs-dark-blue);
  --secondary: var(--ereefs-darkest-blue);
  --light: var(--ereefs-light-blue);
  --dark: var(--ereefs-dark-blue);
  --info: var(--cyan);
  --gray-400: var(--ereefs-light-grey);
  --gray-600: var(--ereefs-dark-grey);

  /* Derive the other greys... */
  --gray-100: color-mix(in srgb, var(--gray-400) 25%, #fff);
  --gray-200: color-mix(in srgb, var(--gray-400) 50%, #fff);
  --gray-300: color-mix(in srgb, var(--gray-400) 75%, #fff);
  --gray-500: color-mix(in srgb, var(--gray-400) 50%, var(--gray-600));
  --gray-700: color-mix(in srgb, var(--gray-500) 75%, #000);
  --gray-800: color-mix(in srgb, var(--gray-500) 50%, #000);
  --gray-900: color-mix(in srgb, var(--gray-500) 25%, #000);
}

/* Try to make the navbar logo not flash huge as the page renders */
.Nav .brand {
  max-height: var(--ereefs-logo-min-height);
  overflow: hidden;
}
.Nav .navbar .brand img {
  width: var(--ereefs-logo-min-height);
  height: var(--ereefs-logo-min-height);
}

/* hide external icon in nav links */
.Nav .offcanvas-collapse .nav-link i.fa {
    display: none !important;
}

/* Make the relative background image work by using the relative URL in-situ */
.HomePage,
.Nav .offcanvas-collapse.open .navCardsContainer {
  background-image: var(--ereefs-bg-img);
}