/* BlueCat look for MyPeek. Loaded after the old site's stylesheets (style-mortar.css and the plug-in ones) and overrides them, so those stay untouched.
   Colors were sampled from the corporate site (bluecatnetworks.com); the font is Inter (SIL Open Font License, static/fonts/LICENSE-Inter.txt). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --bc-navy: #0F1F39;        /* footer, buttons, headings */
  --bc-logo: #16284D;        /* the logo's own navy */
  --bc-blue: #246DEA;        /* links, accents */
  --bc-blue-dark: #1B55BC;   /* link hover */
  --bc-blue-mid: #2364D9;    /* middle of the gradient */
  --bc-violet: #432DCD;      /* end of the gradient */
  --bc-night: #0E2240;       /* start of the gradient */
  --bc-text: #0F1F39;
  --bc-muted: #5D677B;
  --bc-line: #DCE3EE;
  --bc-soft: #F4F7FC;
  --bc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- type */
html body, body button, body input, body select, body textarea,
body h1, body h2, body h3, body h4, body h5, body h6, body .tablepress th, body .tablepress td,
#global_header a, .site-footer, .site-footer a {
  font-family: var(--bc-font);
  letter-spacing: 0;
}
body { color: var(--bc-text); font-size: 16px; line-height: 1.6; background: #fff; }
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--bc-navy); font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: -0.01em; }
body h2 { font-size: 32px; line-height: 1.2; }
body h3 { font-size: 22px; font-weight: 600; }
body p, body li, body td, body th { color: var(--bc-text); }
a { color: var(--bc-blue); text-decoration: none; }
a:hover, a:focus { color: var(--bc-blue-dark); text-decoration: underline; }

/* ---- header: white, like the corporate site */
#global_header .secondary_header { background-color: #fff; border-bottom: 1px solid var(--bc-line); }
#global_header .secondary_header .secondary_nav a { font-family: var(--bc-font); font-size: 13px; font-weight: 500; color: var(--bc-muted); letter-spacing: 0; }
#global_header .secondary_header .secondary_nav a:hover { color: var(--bc-blue); text-decoration: none; }
#global_header .secondary_header .other_items > ul > li i,
#global_header .secondary_header .js-search i { color: var(--bc-navy); }
#global_header .secondary_header .cta-button a {
  font-family: var(--bc-font); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.2;
  background: var(--bc-navy); color: #fff; padding: 9px 16px; border-radius: 8px; margin-left: 8px;
}
#global_header .secondary_header .cta-button a:hover { background: var(--bc-blue); color: #fff; text-decoration: none; }

#global_header .primary_header { background-color: #fff; box-shadow: 0 1px 0 var(--bc-line); }
#global_header .primary_header .primary_nav ul li a {
  font-family: var(--bc-font); font-size: 16px; font-weight: 500; color: var(--bc-navy); text-transform: none; letter-spacing: 0;
}
#global_header .primary_header .primary_nav ul li:hover > a { color: var(--bc-blue); }
#global_header .primary_header .primary_nav ul li.menu-item-has-children > a:after { color: var(--bc-navy); }
#global_header .primary_header .primary_nav ul li:hover > a:after { color: var(--bc-blue) !important; }
#global_header .primary_header .primary_nav ul li.menu-item-has-children ul { border: 1px solid var(--bc-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 31, 57, .14); overflow: hidden; }
#global_header .primary_header .primary_nav ul li.menu-item-has-children ul li { border-bottom: 1px solid var(--bc-line); }
#global_header .primary_header .primary_nav ul li.menu-item-has-children ul li a {
  font-family: var(--bc-font); font-size: 15px; font-weight: 500; color: var(--bc-navy); text-transform: none; letter-spacing: 0;
}
#global_header .sub-menu li:hover { background-color: var(--bc-soft) !important; }
#global_header .sub-menu li:hover a { color: var(--bc-blue) !important; }
#global_header .primary_header .primary_nav ul li.menu-item-has-children:before,
#global_header .primary_header .primary_nav ul li.menu-item-has-children:after,
#global_header .secondary_header .menu-item-has-children:before,
#global_header .secondary_header .menu-item-has-children:after { display: none; }
.custom-logo { height: 30px; width: auto; }
.logo .custom-logo-link { display: inline-flex; align-items: center; }
.mobile_menu_icon span, .mobile_menu_icon span:before, .mobile_menu_icon span:after { background-color: var(--bc-navy); }

/* ---- page title band */
.solutions_overview, .solutions_overview .so_hero_section { background: #fff none !important; }
.solutions_overview .so_hero_title,
.solutions_overview .so_hero_title.background-text {
  font-family: var(--bc-font); color: var(--bc-navy); text-transform: none; font-weight: 700; letter-spacing: -0.02em;
  font-size: 44px; line-height: 1.1; text-align: left; padding: 8px 0 0;
}

/* ---- inner pages: title band, breadcrumb, left menu */
.single_header, .single_header.sav_teal_background { background: #fff none !important; }
.single_header .hero_title, .hero_title.background_text, .hero_title {
  font-family: var(--bc-font); color: var(--bc-navy); text-transform: none; font-weight: 700; letter-spacing: -0.02em;
  font-size: 40px; line-height: 1.15; text-align: left; margin: 0 0 8px;
}
.hero_breadcrumb ul li, .hero_breadcrumb ul li a, .hero_breadcrumb h1 {
  font-family: var(--bc-font); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--bc-muted);
}
.hero_breadcrumb ul li a:hover { color: var(--bc-blue); text-decoration: none; }
.hero_breadcrumb ul li.breadcrumb_page_title, .hero_breadcrumb h1 { color: var(--bc-navy); font-weight: 600; margin: 0; }
.networking_glossary_archive_title { border-bottom: 2px solid var(--bc-blue); }
.networking_glossary_archive_link, a.networking_glossary_archive_link {
  font-family: var(--bc-font); color: var(--bc-navy); text-transform: none; font-size: 18px; font-weight: 600; letter-spacing: 0;
}
.networking-glossary_menu li a, .networking-glossary_menu li a:link {
  font-family: var(--bc-font); color: var(--bc-navy); text-transform: none; font-size: 15px; font-weight: 500; letter-spacing: 0;
}
.networking-glossary_menu li a:hover, .networking-glossary_menu li.current_page_item a { color: var(--bc-blue); text-decoration: none; }

/* ---- content bands */
.solution_slider_module {
  background: linear-gradient(110deg, var(--bc-night) 0%, var(--bc-blue-mid) 58%, var(--bc-violet) 100%) !important;
  border-radius: 24px; max-width: 1230px; margin: 24px auto 40px; color: #fff;
}
.solution_slider_module h2, .solution_slider_module h3, .solution_slider_module p, .solution_slider_module a { color: #fff; }
.solution_slider_module a { text-decoration: underline; }
.savvius_module.sav_gray_background { background: var(--bc-soft); }
.savvius_module h3, .savvius_module h3 a, .savvius_module h2 { color: var(--bc-navy); }
.savvius_module .link a, .page-template-page-homepage a { color: var(--bc-blue); }

/* ---- buttons */
body input[type="submit"], body input[type="button"], body button, body .button, body a.button, body .btn {
  font-family: var(--bc-font); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0;
  background: var(--bc-navy); color: #fff; border: 1px solid var(--bc-navy); border-radius: 8px; padding: 11px 20px; line-height: 1.2; cursor: pointer;
}
body input[type="submit"]:hover, body input[type="button"]:hover, body button:hover, body .button:hover, body a.button:hover, body .btn:hover {
  background: var(--bc-blue); border-color: var(--bc-blue); color: #fff; text-decoration: none;
}
body input[type="text"], body input[type="password"], body input[type="email"], body select, body textarea {
  font-family: var(--bc-font); border: 1px solid var(--bc-line); border-radius: 8px; padding: 10px 12px; color: var(--bc-navy);
}
body input[type="text"]:focus, body input[type="password"]:focus, body input[type="email"]:focus, body select:focus, body textarea:focus {
  outline: 2px solid rgba(36, 109, 234, .35); border-color: var(--bc-blue);
}

/* ---- footer: navy, white mark */
.site-footer { background-color: var(--bc-navy); border-top: 0; padding: 56px 0 28px; color: #C5CFE0; }
.site-footer .footer_logo .custom-logo { width: 62px; height: auto; }
.site-footer .footer_menu ul a, .site-footer .sec_footer_menu ul a, .site-footer a { color: #C5CFE0; font-weight: 400; }
.site-footer .footer_menu ul a:hover, .site-footer .sec_footer_menu ul a:hover, .site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer .footer_menu .column_title > a, .site-footer .sec_footer_menu .column_title > a { color: #fff; font-weight: 600; text-transform: none; font-size: 18px; letter-spacing: 0; }
.site-footer .site-info, .site-footer .site-info a { color: #9AA8C2; font-size: 13px; font-weight: 400; }

/* ---- leftovers of the old accent color (orange) */
.networking_glossary_archive_title, .mobile_ng_menu_icon_wrapper { border-bottom-color: var(--bc-blue) !important; }
.mm-title, a.mm-title, .accordion_status { color: var(--bc-blue) !important; }
[class*="menu_icon"] span, [class*="menu_icon"] span:before, [class*="menu_icon"] span:after { background-color: var(--bc-navy); }
[class*="menu_icon"] span, [class*="menu_icon"] span:before, [class*="menu_icon"] span:after { background-color: var(--bc-navy) !important; }
body #primary .container-1000 h3, body #primary .content_container h3 { color: var(--bc-navy); }
body #primary .solution_slider_module h2, body #primary .solution_slider_module h3 { color: #fff; }
body #primary h2 { color: var(--bc-navy); }
body #primary .solution_slider_module h2 { color: #fff; }
body select, body select.floated-right {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230F1F39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
[class*="menu_icon"]:before, [class*="menu_icon"]:after { background-color: var(--bc-navy) !important; }

/* ---- logo vertically centered in the bar (the old stylesheet padded it 10px above and 20px below) */
#global_header .primary_header .header_container { align-items: center; min-height: 70px; }
#global_header .primary_header .logo { padding: 0; align-self: center; }
#global_header .primary_header .primary_nav { padding-top: 0.7px; }

/* ---- popdown dialogs (activate, add/edit/delete a note) */
#popdown-dialog { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 31, 57, .35); }
#popdown-dialog div.popdown-content header { background: var(--bc-soft); border-bottom: 1px solid var(--bc-line); padding: 20px 30px; }
#popdown-dialog div.popdown-content header h2 {
  font-family: var(--bc-font); color: var(--bc-blue); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; margin: 0; background: transparent; padding: 0;
}
/* Cancel / No: the quiet twin of the navy button next to it (same shape, size and type; outlined, as "Get support" is on the corporate site) */
#popdown-dialog a.close-popdown, a.close-popdown, a.close-popdown:link, a.close-popdown:visited {
  display: inline-block; box-sizing: border-box; font-family: var(--bc-font); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
  background: #fff none; color: var(--bc-navy); border: 1px solid var(--bc-navy); border-radius: 8px; padding: 11px 20px; height: auto; width: auto; min-width: 0; margin: 0; vertical-align: middle; cursor: pointer;
}
#popdown-dialog a.close-popdown:before, #popdown-dialog a.close-popdown:after, a.close-popdown:before, a.close-popdown:after { display: none !important; content: none !important; }
#popdown-dialog a.close-popdown:hover, a.close-popdown:hover { background: var(--bc-soft); border-color: var(--bc-blue); color: var(--bc-blue); text-decoration: none; }
#popdown-dialog input[type="submit"] { vertical-align: middle; }
#popdown-dialog input[type="checkbox"], body input[type="checkbox"] { margin: 0 8px 0 6px; vertical-align: middle; accent-color: var(--bc-navy); }

/* ---- tooltips (the Contract Color Key and other hover help: the "cluetip" plugin) */
#cluetip, #cluetip.cluetip-default { background: transparent !important; border: 0 !important; }
#cluetip > div[style*="opacity"] { display: none !important; }   /* the plugin's own stacked shadow layers */
.cluetip-arrows { display: none !important; }                    /* picture arrows of the old theme */
#cluetip #cluetip-outer, .cluetip-default #cluetip-outer {
  background: #fff !important; border: 1px solid var(--bc-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 31, 57, .18); overflow: hidden;
}
#cluetip h3#cluetip-title, .cluetip-default h3#cluetip-title {
  background: var(--bc-navy) !important; color: #fff !important; font-family: var(--bc-font); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0;
  text-transform: none; margin: 0; padding: 10px 14px;
}
#cluetip #cluetip-inner, .cluetip-default #cluetip-inner { padding: 12px 14px; font-family: var(--bc-font); font-size: 13.5px; line-height: 1.5; color: var(--bc-text); }

/* ---- form fields keep the case that is typed or written (the old stylesheet forced capitals on values, drop-downs and placeholders) */
body input, body select, body textarea, body option, body optgroup { text-transform: none !important; }
body ::placeholder, body input::placeholder, body textarea::placeholder, body ::-webkit-input-placeholder, body ::-moz-placeholder, body :-ms-input-placeholder {
  text-transform: none !important; letter-spacing: 0; color: var(--bc-muted); opacity: 1;
}
body input::-webkit-input-placeholder, body textarea::-webkit-input-placeholder { text-transform: none !important; }