/* GSI: Keycloak account theme.
 *
 * Supports desktop/mobile and light/dark modes.
 *
 * Requires following files:
 *
 *   * `resources/img/gsi-fair_inline_dark.svg`
 *
 * Modifications to the `keycloak.v3` theme are marked by comments starting with `GSI:`. 
 */

/* GSI: Define color palette. */
:root {
  --gsi-orange: #ffb446;
  --gsi-blue: #00599c;
  --gsi-dark-grey: #333;
  --gsi-medium-grey: #666;
  --gsi-light-grey: #999;
  --gsi-white-grey: #eaeaea;
}

/* GSI: Override link related colors for light mode. */
:root {
  --pf-v5-global--link--Color: var(--gsi-blue);
  --pf-v5-global--link--Color--hover: var(--gsi-blue);
}
/* GSI: Override link related colors for dark mode. */
:root:where(.pf-v5-theme-dark), .pf-v5-c-masthead {
  --pf-v5-global--link--Color: var(--gsi-orange);
  --pf-v5-global--link--Color--hover: var(--gsi-orange);
}

/* GSI: Override button related colors for light mode. */
.pf-v5-c-button {
  --pf-v5-global--link--Color: var(--gsi-blue);
  --pf-v5-global--link--Color--hover: var(--gsi-blue);
}
/* GSI: Override button related colors for dark mode. */
:where(.pf-v5-theme-dark) .pf-v5-c-button {
  --pf-v5-global--link--Color: var(--gsi-orange);
  --pf-v5-global--link--Color--hover: var(--gsi-orange);

  --pf-v5-global--primary-color--100: var(--gsi-orange); 
}

/* GSI: Replace link hover color with underline. */
.pf-m-link:hover {
   text-decoration: underline;
}

/* GSI: Provide logo size befor it is loaded. */
._brand_1gmge_1 {
   width: 192px;
   height: 48px;
}

/* GSI: Stretch title container within toolbox. */
.kc-account-title {
    display: flex;
    width: 100%;
}
/* GSI: Center title within container. */
.kc-account-title div {
    margin: auto;
    text-align: center;
}
/* GSI: Center and increase title text. */
.kc-account-title div h1 {
    margin: auto;
    font-size: larger;
}
/* GSI: Center and decrease title links. */
.kc-account-title div ul {
    margin: auto;
    text-align: center;
    font-size: small;
}
/* GSI: Separate title links. */
.kc-account-title div ul li {
    display: inline;
    margin: 0 .5ch;
}