/*
 * Mary Banks ID account console, in the Faith Library's palette and type
 * (see login/resources/css/marybanks.css for the source of these values).
 * Only PatternFly variables and a few structural classes are touched, so the
 * React app itself is unchanged.
 */

@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("../fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("../fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-600.woff2") format("woff2"); }

:root {
  --mb-page: #f7f7f8;
  --mb-ink: #1b1b22;
  --mb-body: #45454f;
  --mb-rule: rgba(24, 24, 32, 0.08);
  --mb-gold: #b8912a;
  --mb-gold-deep: #9c7a1f;
  --mb-gold-soft: rgba(184, 145, 42, 0.10);

  --pf-v5-global--FontFamily--text: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--primary-color--100: var(--mb-gold-deep);
  --pf-v5-global--primary-color--200: #7d6118;
  --pf-v5-global--active-color--100: var(--mb-gold);
  --pf-v5-global--link--Color: var(--mb-gold-deep);
  --pf-v5-global--link--Color--hover: var(--mb-ink);
  --pf-v5-global--BackgroundColor--200: var(--mb-page);
  --pf-v5-global--Color--100: var(--mb-ink);
}

body {
  background: var(--mb-page);
  -webkit-font-smoothing: antialiased;
}

/* Header: white, a hairline under it, and room for the wordmark. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #ffffff;
  border-bottom: 1px solid var(--mb-rule);
}

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

/* Side navigation: gold marker on the current page instead of blue. */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mb-gold);
  --pf-v5-c-nav__link--hover--after--BorderColor: rgba(184, 145, 42, 0.4);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current:hover {
  color: var(--mb-ink) !important;
  font-weight: 600;
}

/* Page titles in the Faith Library's display serif. */
.pf-v5-c-page__main-section h1,
.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  color: var(--mb-ink);
}

/* Buttons: rounded, gold primary with dark ink like the sign-in pages. */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 10px;
  font-weight: 500;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--mb-gold);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--mb-gold-deep);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--mb-gold-deep);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--mb-gold-deep);
  --pf-v5-c-button--m-primary--Color: #1b1408;
  --pf-v5-c-button--m-primary--hover--Color: #ffffff;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--mb-ink);
  --pf-v5-c-button--m-secondary--BorderColor: var(--mb-gold);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--mb-gold-deep);
  --pf-v5-c-button--m-secondary--hover--Color: var(--mb-ink);
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--mb-gold-deep);
  --pf-v5-c-button--m-link--hover--Color: var(--mb-ink);
}

/* Cards and form fields: soft borders and rounded corners. */
.pf-v5-c-card {
  border-radius: 16px;
  border: 1px solid var(--mb-rule);
  box-shadow: 0 1px 2px rgba(24, 24, 32, 0.04);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--mb-gold);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--mb-gold);
  border-radius: 8px;
}

.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--mb-gold);
}

.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--mb-gold-soft);
  --pf-v5-c-label--m-blue__content--Color: var(--mb-gold-deep);
}

/* ---- light sidebar ----------------------------------------------------------
   keycloak.v3 ships PatternFly's dark sidebar; the Faith Library is light
   throughout, so the navigation sits on white with a gold current marker. */

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #ffffff;
  background-color: #ffffff !important;
  border-right: 1px solid var(--mb-rule);
  box-shadow: none !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
  background-color: transparent !important;
  --pf-v5-c-nav__link--Color: var(--mb-body);
  --pf-v5-c-nav__link--hover--Color: var(--mb-ink);
  --pf-v5-c-nav__link--focus--Color: var(--mb-ink);
  --pf-v5-c-nav__link--active--Color: var(--mb-ink);
  --pf-v5-c-nav__link--m-current--Color: var(--mb-ink);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--mb-page);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--mb-page);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--mb-gold-soft);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--mb-gold-soft);
  --pf-v5-c-nav__link--before--BorderColor: var(--mb-rule);
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--after--BorderColor: rgba(184, 145, 42, 0.4);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mb-gold);
  --pf-v5-c-nav__section-title--Color: var(--mb-body);
  --pf-v5-c-nav__item--before--BorderColor: var(--mb-rule);
  --pf-v5-c-nav__subnav--before--BorderColor: var(--mb-rule);
  --pf-v5-c-nav__toggle-icon--Color: var(--mb-body);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  color: var(--mb-body) !important;
  border-radius: 0;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  color: var(--mb-ink) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  background-color: var(--mb-gold-soft) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after {
  border-color: transparent !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after {
  border-left: 3px solid var(--mb-gold) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon,
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle {
  color: var(--mb-body) !important;
}

/* ---- header controls on the light header ---------------------------------- */

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
  color: var(--mb-ink) !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--before--BorderColor: var(--mb-rule);
  border-radius: 10px;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border-color: rgba(24, 24, 32, 0.16) !important;
  border-radius: 10px;
}

/* ---- secondary buttons ("Update", "Link account") -------------------------- */

.pf-v5-c-button.pf-m-secondary {
  color: var(--mb-ink) !important;
}

.pf-v5-c-button.pf-m-secondary::after {
  border-color: var(--mb-gold) !important;
  border-radius: 10px !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--mb-gold-soft) !important;
}

/* "Jump to section" and other small blue markers. */
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link::before {
  border-color: var(--mb-gold) !important;
}