/*
 * Geobrugg branding for Keycloak's account and admin consoles: the colors and typeface of the login
 * theme, applied to their PatternFly 5 pages. Keycloak owns the layout; this owns the look. Kept in
 * the login theme, which both console themes import.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

:root {
  --geobrugg-blue: #283583;
  --geobrugg-blue-dark: #1c2660;
  --geobrugg-ink: #3a3a39;
  --geobrugg-grey: #C5C5C6;
  --geobrugg-page: #f4f8fa;
  --geobrugg-error: #a4262c;
  --geobrugg-font: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;

  --pf-v5-global--primary-color--100: var(--geobrugg-blue);
  --pf-v5-global--primary-color--200: var(--geobrugg-blue-dark);
  --pf-v5-global--active-color--100: var(--geobrugg-blue);
  --pf-v5-global--active-color--400: var(--geobrugg-blue);
  --pf-v5-global--link--Color: var(--geobrugg-blue);
  --pf-v5-global--link--Color--hover: var(--geobrugg-blue-dark);
  --pf-v5-global--danger-color--100: var(--geobrugg-error);
  --pf-v5-global--BorderColor--100: var(--geobrugg-grey);
  --pf-v5-global--Color--100: var(--geobrugg-ink);
  --pf-v5-global--FontFamily--text: var(--geobrugg-font);
  --pf-v5-global--FontFamily--heading: var(--geobrugg-font);
  --pf-v5-global--BackgroundColor--light-300: var(--geobrugg-page);
}

body {
  font-family: var(--geobrugg-font);
  color: var(--geobrugg-ink);
}

/* The header band of geobrugg.com: white, logo on the left. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #fff;
  --pf-v5-c-masthead--m-display-inline__content--MinHeight: 80px;
  --pf-v5-c-masthead--item-border-color--base: var(--geobrugg-grey);
  box-shadow: 0 1px 0 var(--geobrugg-grey);
  color: var(--geobrugg-ink);
}

.pf-v5-c-masthead__brand img {
  height: 56px;
  width: auto;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: var(--geobrugg-ink);
  --pf-v5-c-menu-toggle--m-plain--Color: var(--geobrugg-ink);
  color: var(--geobrugg-ink);
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #fff;
  box-shadow: 1px 0 0 var(--geobrugg-grey);
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--geobrugg-ink);
  --pf-v5-c-nav__link--hover--Color: var(--geobrugg-blue);
  --pf-v5-c-nav__link--focus--Color: var(--geobrugg-blue);
  --pf-v5-c-nav__link--m-current--Color: var(--geobrugg-blue);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--geobrugg-page);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--geobrugg-page);
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--geobrugg-grey);
  --pf-v5-c-nav__toggle-icon--Color: var(--geobrugg-ink);
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--geobrugg-page);
}

.pf-v5-c-page__main-section.pf-m-light {
  --pf-v5-c-page__main-section--m-light--BackgroundColor: #fff;
}

.pf-v5-c-title {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.pf-v5-c-button {
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--geobrugg-blue);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--geobrugg-blue-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--geobrugg-blue-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--geobrugg-blue-dark);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--geobrugg-blue);
  --pf-v5-c-button--m-secondary--hover--Color: var(--geobrugg-blue-dark);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--geobrugg-grey);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--geobrugg-blue);
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--geobrugg-blue);
  --pf-v5-c-button--m-link--hover--Color: var(--geobrugg-blue-dark);
}

.pf-v5-c-form-control {
  border-radius: 5px;
}

@media (max-width: 600px) {
  .pf-v5-c-masthead__brand img {
    height: 40px;
  }
}