@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Signika:wght@300..700&display=swap');

/*======================================
=            CSS Variables             =
======================================*/

:root {
  /* PMC color palette */
  --pmc-color__orange: #ff8300;
  --pmc-color__blue-dark: #003a70;
  --pmc-color__blue-medium: #4798d3;
  --pmc-color__green: #82ba26;
  --pmc-color__lilac: #cc69a6;
  --pmc-color__yellow: #fab700;
  --pmc-color__beige: #f2edeb;

  --pmc-color__orange-light: #f59f43;
  --pmc-color__blue-light: #8ac3ec;

  --pmc-background-color: white;
  --pmc-footer-background-color: var(--pmc-color__beige);
  --pmc-footer-font-color: var(--pmc-color__blue-dark);

  /* Highlight colors */
  --g3-color__highlight-orange: var(--pmc-color__orange);
  --g3-color__highlight-orange-light: var(--pmc-color__orange-light);

  /* Button colors */
  --g3-primary-btn__bg-color: var(--pmc-color__orange);
  --g3-primary-btn__bg-color--hover: var(--pmc-color__orange-light);
  --g3-secondary-btn__bg-color: var(--pmc-color__blue-medium);
  --g3-secondary-btn__bg-color--hover: var(--pmc-color__blue-light);
}


/*======================================
=            Base Typography           =
======================================*/

body {
  font-family: 'Mulish', sans-serif;
  color: var(--pmc-color__blue-dark);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

.body-typo {
  color: var(--pmc-color__blue-dark);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

h1,
h2 {
  font-family: 'Signika', sans-serif;
  color: var(--pmc-color__orange);
}


/*======================================
=          Global Components           =
======================================*/

/* set default background color */
.protected-content {
  background-color: var(--pmc-background-color);
}

.popup__title {
  background: var(--pmc-color__orange);
}


/*======================================
=               Top Bar                =
======================================*/

.top-bar,
.top-bar__header {
  background-color: var(--pmc-color__orange);
}

.top-icon-button.body-typo {
  background-color: var(--pmc-color__orange);
}

.top-bar__link {
  border-right: 2px solid var(--pmc-color__orange-light);
}

.nav-button.body-typo,
.top-icon-button.body-typo {
  font-size: 16px;
  font-weight: 500;
}

/* larger PMC logo */
.nav-bar__logo-img {
  height: 80px;
  margin: -6px;
}


/*======================================
=           Top Bar Icons              =
======================================*/

/* hide the original icons */
.nav-button__icon {
  visibility: hidden;
}

.nav-button__icon::after {
  visibility: visible;
  content: "";
  display: block;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: -40px 0px 10px 0px;
}

/* dictionary icon */
.nav-bar__link:nth-of-type(1) .nav-button__icon::after {
  
  background-image: url(/custom/images/dictionary.svg);
}

/* explore icon*/
.nav-bar__link:nth-of-type(2) .nav-button__icon::after {
  background-image: url(/custom/images/exploration.svg);
}

/* query icon */
.nav-bar__link:nth-of-type(3) .nav-button__icon::after {
  background-image: url(/custom/images/query.svg);
}

/* profile icon */
.nav-bar__link:nth-of-type(4) .nav-button__icon::after {
  background-image: url(/custom/images/profile.svg);
} 


/*======================================
=              Buttons                 =
======================================*/

.g3-button--primary,
.g3-button--primary:hover,
.g3-button--primary:active {
  font-size: 16px;
  border: 0px solid transparent;
}

.g3-button--secondary,
.g3-button--secondary:hover,
.g3-button--secondary:active {
  font-size: 16px;
  border: 0px solid transparent;
}

.node-popup__button {
  width: 170px;
}


/*======================================
=               Footer                 =
======================================*/

.footer__version-name.h4-typo,
.footer__version-value.body-typo {
  font-family: 'Mulish', sans-serif;
  color: var(--pmc-footer-font-color);
  font-size: 14px;
}

.footer__nav,
.footer-container {
  background-color: var(--pmc-footer-background-color);
}


/*======================================
=            Login Page                =
======================================*/

.login-page__title.h1-typo {
  font-size: 60px;
  font-weight: 600;
  color: var(--pmc-color__orange);
  margin: 300px 0px 20px 0px;
}

.login-page__sub-title.high-light {
  font-size: 18px;
  font-weight: 800;
  color: var(--pmc-color__blue-dark);
}

.login-page__separator {
  width: 400px;
  height: 6px;
  background-color: var(--pmc-color__orange);
  border: var(--pmc-color__orange);
  margin: 20px auto;
}

.login-page__central-content {
  color: var(--pmc-color__blue-dark);
  background-image: url(/custom/images/NL-4C_onlinebanner.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  max-width: 800px;
}

/* change default blue helix to orange */
.login-page__side-box.login-page__side-box--left {
  background-image: url(/custom/images/helix.svg) !important;
  background-position: 0px 135px;
  background-repeat: repeat-y;
}

/* hide admin login button */
.g3-button--default.g3-button.login-page__entry-button {
  display: none;
}

/* hide text above login buttons */
.login-page__entries {
  font-size: 0px;
  margin: 4px auto;
}


/*======================================
=             Home Page                =
======================================*/

.introduction__title.h1-typo {
  color: var(--pmc-color__orange);
}

.introduction__text.high-light {
  font-family: "Mulish", sans-serif;
  color: var(--pmc-color__blue-dark);
}

/* remove "Browse Data" button */
.introduction__icon {
  display: none;
}


/*======================================
=          Home Page Icons             =
======================================*/

/* hide the original icons */
.index-button-bar__icon {
  visibility: hidden;
}

.index-button-bar__icon::after {
    visibility: visible;
    content: "";
    display: block;
    height: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: -90px 0px 10px 0px;
}

.index-button-bar__thumbnail-button:nth-of-type(1) .index-button-bar__icon::after {
  /* define data field icon */
  background-image: url(/custom/images/data-field-define.svg);
}

.index-button-bar__thumbnail-button:nth-of-type(2) .index-button-bar__icon::after {
  /* explore data icon */
  background-image: url(/custom/images/data-explore.svg);
}

.index-button-bar__thumbnail-button:nth-of-type(3) .index-button-bar__icon::after {
  /* access data icon */
  background-image: url(/custom/images/data-access.svg);
}