/*
 * Private DevOps branding for Digit. Loaded by includes/hooks/privatedevops_branding.php
 * after Digit's own stylesheets. Colours follow privatedevops.com, violet in dark mode
 * and blue in light mode.
 *
 * Digit paints its accents from two CSS variables, so most of the brand comes from
 * redefining them. The rules after that cover the few places where Digit hard-codes
 * its purple instead of using the variables.
 */

html.pdo-dark,
html.pdo-dark body.body {
  --main-gradient-color: #8b5cf6;
  --secondary-gradient-color: #7c3aed;
}

html.pdo-light,
html.pdo-light body.body {
  --main-gradient-color: #1d4ed8;
  --secondary-gradient-color: #2563eb;
}

/*
 * Logo. Digit sizes its own logo to 33px including 4px padding, which leaves the
 * brand text too small to read. 44px without padding makes the header 56px tall
 * instead of 47px.
 */
html.pdo-branding section#header .logo img.pdo-logo {
  height: 44px;
  max-height: 44px;
  padding: 0;
  margin: 6px 0;
  width: auto;
}

html.pdo-branding .logo-mob img.pdo-logo {
  height: 36px;
  width: auto;
}

/* Digit hides the header logo below 992px. Keep it, on its own row under the search. */
@media only screen and (max-width: 991px) {
  html.pdo-branding section#header .logo {
    display: inline-block;
  }

  html.pdo-branding section#header .logo img.pdo-logo {
    height: 34px;
    max-height: 34px;
    margin: 10px 0;
  }
}

/* Sun/moon mode button added by branding.js, styled like Digit's language icon. */
html.pdo-branding section#header .pdo-mode-toggle {
  display: inline-block;
  font-size: 16px;
  margin-left: 12px;
  text-decoration: none;
  cursor: pointer;
}

html.pdo-dark section#header .pdo-mode-toggle {
  color: #fff;
}

html.pdo-light section#header .pdo-mode-toggle {
  color: #3d4048;
}

html.pdo-branding section#header .pdo-mode-toggle:hover,
html.pdo-branding section#header .pdo-mode-toggle:focus {
  color: var(--main-gradient-color);
}

/* Accents Digit hard-codes in theme-light.css and theme-dark.css. */
html.pdo-branding .btn.btn-primary,
html.pdo-branding .btn.btn-primary:hover,
html.pdo-branding .btn.btn-primary:focus,
html.pdo-branding #frmDomainTransfer .panel-default > .panel-heading,
html.pdo-branding #modalGeneratePassword .panel-primary > .panel-heading {
  background-color: var(--main-gradient-color);
  border-color: var(--main-gradient-color);
}

html.pdo-branding .tab-content.product-details-tab-container .btn-default,
html.pdo-branding .tab-content.product-details-tab-container .btn-default:hover,
html.pdo-branding .tab-content.product-details-tab-container .btn-default:focus {
  background-color: var(--main-gradient-color);
  border-color: var(--main-gradient-color) !important;
}

html.pdo-branding .knb-article a.btn-print {
  color: var(--main-gradient-color);
}