/*
 * mx-classic-chrome.css
 *
 * Re-asserts the Classic-page chrome (black nav + footer) on product page
 * templates that load their own Bootstrap stack. Must be loaded AFTER any
 * page-level Bootstrap CSS so it wins the cascade.
 *
 * Loaded by:
 *   - Cms/Templates/MatrixTemplate.aspx
 *   - Cms/Templates/DC2ProductsTemplate.aspx
 *   - Cms/Templates/DC2ProductsTemplateGray.aspx
 *
 * Not loaded by Classic pages (their cascade already produces canonical chrome)
 * or DomainHealthScannerTemplate.aspx (no extra BS load).
 *
 * Context: PROD-6426. Contents include rules absorbed from the former
 * A-STYLEFIX and A-STYLEFIX2 HtmlSection rows so individual /c/products/*
 * pages no longer need to include those slots manually.
 */

/* @import must be first. Vendor CSS pulled in by the former A-STYLEFIX2 slot. */
@import url('/public/content/delivery2productpage/css/mxtoolbox/layout.css');
@import url('/public/content/delivery2productpage/css/mxtoolbox/landing.css');

/* ===== FONT FAMILY ===== */

/* BS5 sets --bs-body-font-family on :root to a system-ui font stack, which
 * resolves to Segoe UI on Windows. Classic pages inherit BS3's Helvetica Neue
 * stack from the master page bundle. Re-point the BS5 variable so chrome AND
 * body content on product templates match Classic's typography. */
:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* From A-STYLEFIX: explicit body font-family (redundant with :root variable
 * but bulletproof against rules that don't use the variable). */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ===== LINK UNDERLINES ===== */

/* From A-STYLEFIX: no underline on links globally on product pages. */
a {
    text-decoration: none;
    text-decoration-line: none;
}

/* ===== TOP NAV (.mx-tm-primary) ===== */

/* 14px font on top nav items (AC 1.1 -- match Classic) */
.mx-tm-primary-menu-item,
.mx-tm-primary-menu-item.dropdown-toggle {
    font-size: 14px !important;
}

/* No underline on any top-nav anchor. BS5's reboot adds `a { text-decoration: underline }`
 * by default. mx-top-menu.html only neutralizes it on :hover/:active/:visited/:focus
 * (not the default state), so under BS5 the Resources dropdown toggle and the user
 * email render underlined. Force text-decoration: none across all states. */
.mx-tm a,
.mx-tm a:link,
.mx-tm a:visited,
.mx-tm a:hover,
.mx-tm a:active,
.mx-tm a:focus {
    text-decoration: none;
}

/* ===== BLACK NAV (#black-nav / .mx-tm-secondary / .secondhead) ===== */

/* No underline on nav links (AC 1.2 -- fixes matrixdos underline) */
#black-nav a,
#black-nav a:hover,
#black-nav a:focus {
    text-decoration: none;
}

/* Non-active items: light gray text on transparent bg, no hover change (AC 1.3) */
#black-nav .navbar-nav > li > a,
#black-nav .navbar-nav > li > a:hover,
#black-nav .navbar-nav > li > a:focus {
    color: #9d9d9d;
    background-color: transparent;
}

/* Active item: white text on a darker-than-nav background (the "current page"
 * indicator). Matches BS3 .navbar-inverse's #080808 active background.
 * BS3's own .navbar-inverse .navbar-nav > .active > a rule doesn't match here
 * because the mx-top-menu markup puts .active on the <a>, not the <li>. */
#black-nav .navbar-nav > li > a.active,
#black-nav .navbar-nav > li > a.active:hover,
#black-nav .navbar-nav > li > a.active:focus,
#black-nav .navbar-nav > li.active > a,
#black-nav .navbar-nav > li.active > a:hover,
#black-nav .navbar-nav > li.active > a:focus {
    color: #ffffff;
    background-color: #080808;
}

/* 14px font on black nav items (AC 1.1 -- match Classic) */
#black-nav .navbar-nav > li > a {
    font-size: 14px !important;
}

/* Layout fixes -- moved out of per-template inline <style> blocks */
#black-nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

#black-nav .navbar-nav {
    flex-direction: inherit;
}

#black-nav > div.container-fluid {
    display: unset;
}

/* ===== FOOTER (.mx-footer) ===== */

/* Match Classic: left padding, white text on dark background (AC 1.4) */
.mx-footer {
    padding-left: 15px;
    color: #ffffff;
}

.mx-footer a {
    color: #ffffff;
}

/* ===== ABSORBED FROM A-STYLEFIX2 ===== */
/* The following rules previously lived in the A-STYLEFIX2 HtmlSection
 * referenced on /c/products/features pages. Folding them in here so the
 * HtmlSection slot can be removed from those pages.
 *
 * NOTE: a few of these conflict with rules in the templates' inline <style>
 * blocks. The template inline rules come LATER in source order, so they
 * currently win. Conflicts are flagged inline below. */

/* CONFLICT: template inline has `.jumbotron h1 { color: unset !important }`,
 * which overrides this. If white is intended, remove from template inline. */
.jumbotron h1 {
    color: #fff !important;
}

.container h2 {
    font-size: 2.0rem !important;
}

.container h6 {
    font-size: 1.5rem !important;
}

ul.mx-features li a i {
    font-size: 46px !important;
}

.p-5 {
    padding: 3rem !important;
}

.p-5 h2 {
    font-size: 2.0rem !important;
}

.p-5 h3 {
    font-size: 1.5rem !important;
}

.p-5 ul {
    list-style: disc !important;
}

.section ul.mx-features li a i {
    font-size: 46px !important;
}

/* CONFLICT: template inline has `.container-fluid { padding-left: unset;
 * padding-right: unset }` (only left/right). A-STYLEFIX2 zeroes ALL sides; NOTE: because the rule below uses
 * `!important`, it will override the template inline rule unless the template
 * also uses `!important`. Remove `!important` below if the template should win. */
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.btn-mx {
    background-color: #ff9900 !important;
    color: #ffffff !important;
    background-image: none !important;
}

.btn-group-lg > .btn,
.btn-lg {
    font-size: 1.5rem !important;
}

.product-page {
    background-color: #ffffff;
}

.product-screenshot {
    width: 100%;
}

.product-screenshot-full {
    width: 100%;
}

.mx-features .nav-item {
    cursor: pointer;
}

/* Bootstrap 4 utility backports. BS5 provides equivalents but these were
 * needed by the original A-STYLEFIX2 consumers; keeping them in case the
 * pages depend on these specific declarations. */
.row {
    display: flex;
}

.align-items-center {
    align-items: center !important;
}

.align-middle {
    vertical-align: middle !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: unset !important;
}

.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.p-2 {
    padding: .5rem !important;
}

.nav {
    display: flex;
    flex-wrap: wrap;
}

.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

.tab-content.mx-features {
    margin-top: 35px;
}

.tab-content.mx-features .tab-content-item a.btn-success {
    display: inline-block !important;
}

/* DUPLICATE: also in templates' inline <style>. Kept here so removing the
 * template inline copy doesn't break anything. */
.dropdown-toggle::after {
    display: initial;
    margin-left: initial;
    vertical-align: initial;
    content: initial;
    border-top: initial;
    border-right: initial;
    border-bottom: initial;
    border-left: initial;
}

/* DUPLICATE: also in templates' inline <style>. */
body {
    font-size: initial !important;
}

/* DUPLICATE: chrome CSS already has this scoped to #black-nav (above).
 * The unscoped version below affects ALL .navbar elements -- on product
 * pages that may include their own .navbar in body content, this could
 * have side effects. Folded in as-is from A-STYLEFIX2 for behavioral
 * parity; revisit if it causes regressions. */
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}