/*
 * Return account theme, on top of keycloak.v3 (PatternFly 5 Account Console).
 * Same palette and type as the login theme (theme/return/login): navy top
 * bar with the white wordmark, light page in Return's light gray, Host
 * Grotesk, pill buttons.
 */

@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/HostGrotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --return-blue: #1c2641;
  --return-muted-blue: #333c54;
  --return-muted: #7f8eb6;
  --return-light-blue: #c3d1dc;
  --return-light-blue-2: #e1e8ed;
  --return-light-gray: #f2f2f1;
  --return-soft-glow: #f9daad;

  --pf-v5-global--FontFamily--text: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pf-v5-global--FontFamily--sans-serif: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pf-v5-global--primary-color--100: var(--return-blue);
  --pf-v5-global--primary-color--200: var(--return-muted-blue);
  --pf-v5-global--link--Color: var(--return-muted-blue);
  --pf-v5-global--link--Color--hover: var(--return-blue);
  --pf-v5-global--BackgroundColor--light-300: var(--return-light-gray);
}

body {
  font-family: var(--pf-v5-global--FontFamily--text);
}

/* Top bar: Return blue with a touch of the soft glow, white wordmark. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--return-blue);
  background:
    radial-gradient(600px 160px at 90% -40%, rgba(249, 218, 173, 0.22), transparent 70%),
    var(--return-blue);
}

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

/* Page and navigation. */
.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  --pf-v5-c-page--BackgroundColor: var(--return-light-gray);
  --pf-v5-c-page__main-section--BackgroundColor: var(--return-light-gray);
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #fff;
  background: #fff;
  border-right: 1px solid var(--return-light-blue-2);
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--return-muted-blue);
  --pf-v5-c-nav__link--hover--Color: var(--return-blue);
  --pf-v5-c-nav__link--m-current--Color: var(--return-blue);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--return-light-blue-2);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--return-light-blue-2);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--return-blue);
}

.pf-v5-c-nav__link {
  border-radius: 10px;
}

/* Headings in Return blue. */
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
  color: var(--return-blue);
  letter-spacing: -0.01em;
}

/* Cards: softly rounded (page sections stay square, or their corners
   notch against the header). */
.pf-v5-c-card,
.pf-v5-c-data-list {
  border-radius: 16px;
}

.pf-v5-c-card {
  box-shadow: 0 1px 2px rgba(28, 38, 65, 0.06), 0 8px 24px rgba(28, 38, 65, 0.06);
}

/* Buttons: pills, as on return.energy. */
.pf-v5-c-button {
  border-radius: 100px;
  font-weight: 500;
}

.pf-v5-c-button::after {
  border-radius: 100px;
}

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

.pf-v5-c-button:focus-visible {
  outline: 3px solid var(--return-soft-glow);
  outline-offset: 2px;
}

/* Inputs. */
.pf-v5-c-form-control,
.pf-v5-c-form-control::after {
  border-radius: 10px;
}