/*
 * IPDJ branding for Keycloak's React consoles (account keycloak.v3, admin keycloak.v2).
 * Only PatternFly 5 variables, fonts and the masthead: layout stays Keycloak's.
 * Fonts are served from this theme; the consoles' CSP blocks external font hosts.
 */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/noto-sans-latin-700-normal.woff2') format('woff2');
}

:root {
  --ipdj-accent: #f2f235;
  --ipdj-ink: #020022;
  --ipdj-ink-hover: #1d1a3d;

  --pf-v5-global--FontFamily--text: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pf-v5-global--FontFamily--heading: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pf-v5-global--primary-color--100: var(--ipdj-ink);
  --pf-v5-global--primary-color--200: var(--ipdj-ink-hover);
  --pf-v5-global--link--Color: var(--ipdj-ink);
  --pf-v5-global--link--Color--hover: var(--ipdj-ink-hover);
  /* "Current" indicators: tabs on white use ink; the always-dark side nav uses the accent. */
  --pf-v5-global--active-color--100: var(--ipdj-ink);
  --pf-v5-global--active-color--400: var(--ipdj-accent);
}

/* Dark mode: the ink colour would vanish on dark surfaces, so primary actions use the accent. */
:root.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--ipdj-accent);
  --pf-v5-global--primary-color--200: #d9d91f;
  --pf-v5-global--link--Color: var(--ipdj-accent);
  --pf-v5-global--link--Color--hover: #d9d91f;
  --pf-v5-global--primary-color--300: var(--ipdj-accent);
  --pf-v5-global--active-color--100: var(--ipdj-accent);
  --pf-v5-global--active-color--300: var(--ipdj-accent);
}

/* PatternFly's dark theme takes the primary button colour from other variables; set it directly. */
:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ipdj-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #d9d91f;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #d9d91f;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #d9d91f;
  --pf-v5-c-button--m-primary--Color: var(--ipdj-ink);
  --pf-v5-c-button--m-primary--hover--Color: var(--ipdj-ink);
  --pf-v5-c-button--m-primary--focus--Color: var(--ipdj-ink);
  --pf-v5-c-button--m-primary--active--Color: var(--ipdj-ink);
}

/* Masthead: white with the design's yellow rule; dark navy in dark mode. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #ffffff;
  --pf-v5-c-masthead--Color: var(--ipdj-ink);
  --pf-v5-c-masthead--item-border-color--base: #d2d2d2;
  border-bottom: 4px solid var(--ipdj-accent);
  color: var(--ipdj-ink);
}

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

:root.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ipdj-ink-hover);
  --pf-v5-c-masthead--Color: #ffffff;
  color: #ffffff;
}

:root.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button,
:root.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-button--m-plain--Color: #ffffff;
  --pf-v5-c-menu-toggle--Color: #ffffff;
  --pf-v5-c-menu-toggle--m-plain--Color: #ffffff;
  color: #ffffff;
}

/* The masthead toolbar paints its own background; let the masthead colour show through. */
.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  background-color: transparent;
}

/* The logo's wordmark is black; on the dark masthead render the logo (only — not user avatars) in white. */
:root.pf-v5-theme-dark .pf-v5-c-masthead__brand img,
:root.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-brand {
  filter: brightness(0) invert(1);
}

.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead__brand img {
  height: 40px;
  width: auto;
}