/* ---------------------------------------------------------------------------
   Header refresh.

   The site header comes from main_optimize.css, the WordPress theme both sites
   share. Nothing there is edited: this file overrides it, and removing the one
   <link> puts the old header back exactly.

   What it changes, and why:
     * 120px tall down to 74px. The old bar took a fifth of a laptop viewport
       before any content, and it is fixed, so that cost was paid on every page.
     * The logo carries height="80" as an HTML attribute, which no stylesheet
       rule can beat without targeting the element directly. Hence the img rule.
     * The theme puts justify-content:space-between on the nav, which left a
       500px hole between the last link and the account button. The button is
       pushed right on its own instead, and the links stay together.
     * Access My Account was outlined, so the most valuable link in the header
       read as the least important. It is now the only solid element up there.

   SIZES ARE IN PX ON PURPOSE. The theme sets html{font-size:10px}, so rem
   resolves to 62.5% of its intended size. See the note in fdbc-ui.css.
   --------------------------------------------------------------------------- */

:root { --fdbc-hdr-h: 74px; }

body { padding-top: var(--fdbc-hdr-h) !important; }

.header {
  height: var(--fdbc-hdr-h) !important;
  padding: 0 40px !important;
  gap: 40px !important;
  box-shadow: none !important;
  border-bottom: 1px solid #E2E1F0 !important;
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

/* ---------- logo lockup: mark, then the product name set in the site face ---- */
.header > a { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.header > a img { height: 38px !important; width: auto !important; }

/* :has() keeps the wordmark off any other product's header. Browsers without it
   simply show the mark alone, which is what the site had before. */
.header > a:has(img[src*="fusiondbconnect"])::after {
  content: "Fusion DB Connect";
  font-size: 19px; font-weight: 700; letter-spacing: -.017em;
  color: #0A1030; white-space: nowrap;
}

/* ---------- navigation ------------------------------------------------------ */
.header__nav { flex-grow: 1; justify-content: flex-start !important; gap: 30px !important; }
.header__nav > ul { gap: 28px; flex-grow: 0 !important; }
.header__nav a { font-size: 16px !important; font-weight: 500; color: #3E4561 !important; }
.header__nav > ul > li > a { position: relative; padding: 6px 0; }
.header__nav > ul > li > a:hover { color: #0A1030 !important; }
.header__nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: #1A4FE6; transform: scaleX(0); transform-origin: left;
  transition: transform .16s ease;
}
.header__nav > ul > li > a:hover::after { transform: scaleX(1); }
/* two items are wrapped in <Strong> in the markup, which made the nav look
   randomly weighted */
.header__nav a strong { font-weight: 500; }

.header__nav__buttons { margin-left: auto; }
.header__nav__buttons .button.download {
  background: #1A4FE6 !important; border: 1px solid #1A4FE6 !important; color: #fff !important;
  border-radius: 8px !important; padding: 9px 17px !important;
  font-size: 15px !important; font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(10, 16, 48, .12);
  transition: background .15s ease, border-color .15s ease;
}
.header__nav__buttons .button.download:hover {
  background: #0B45C8 !important; border-color: #0B45C8 !important;
}

/* ---------- anchors must clear the shorter bar ------------------------------ */
.fdbc-pricing, .fdbc-lm, .fdbc-doc, .fdbc-lib, .fdbc-page { scroll-margin-top: 92px !important; }

/* ---------- smaller screens ------------------------------------------------- */
@media (max-width: 1200px) {
  .header { padding: 0 24px !important; gap: 24px !important; }
  .header__nav > ul { gap: 20px; }
  .header__nav a { font-size: 15px !important; }
}
@media (max-width: 991px) {
  :root { --fdbc-hdr-h: 62px; }
  .header > a img { height: 34px !important; }
  .header > a:has(img[src*="fusiondbconnect"])::after { font-size: 17px; }
  /* the theme drops the nav into a full-height panel below the bar */
  .header__nav { top: 62px !important; height: calc(100vh - 62px) !important; }
  .header__nav a { color: #fff !important; font-size: 18px !important; }
  .fdbc-pricing, .fdbc-lm, .fdbc-doc, .fdbc-lib, .fdbc-page { scroll-margin-top: 78px !important; }
}
@media (max-width: 600px) {
  .header { padding: 0 16px !important; }
  .header > a:has(img[src*="fusiondbconnect"])::after { display: none; }  /* mark only */
}