/* mypointb marketing site — collapsed CSS bundle (docs/mypointb-3.5-inventory.md step 1).
   Combines the recovered mkt-custom.css + blog.css + signin.css + pricing.css + carousel.css +
   jumbotron-narrow.css onto hnr1's existing Bootstrap 5 (cmedia/css/bootstrap.min.css), which the
   public layout (includes/mkt-head.cfm) loads alongside this file. Changes from the recovered
   source, all CSP/BS5-driven:
   - No Google Fonts / CDN @import (EB Garamond, Oswald) — dropped, falls back to serif/sans-serif.
   - .navbar-inverse (BS3) -> hnr1 navbar uses .navbar-dark.bg-mkt-orange (BS5 dark-nav pattern);
     selectors below renamed to match.
   - .panel-* (BS3, blog cards) -> .card/.card-body (BS5); selectors renamed.
   - collapse/dropdown/carousel still use the same class names in BS5 (navbar-collapse,
     dropdown-menu, carousel-*) — those selectors are unchanged. */

/* ==== base / layout (mkt-custom.css) ==== */
html, body {
    margin: 0;
    padding: 0;
    color: #5a5a5a;
}

/* Sticky footer (issue #131) — the marketing half of the same fix applied to body.crm in
   crm.css. mkt-head.cfm opens <main> and mkt-footer.cfm closes it, so <main> and
   <footer class="mkt-footer"> are direct children of <body>: making the body a full-viewport
   flex column lets <main> absorb the leftover height and pushes the footer to the bottom of
   the screen on short pages (index.cfm, applogin.cfm, appregistration.cfm — all short).
   On pages taller than the viewport the column overflows and the footer scrolls below the
   content as normal; it is NOT fixed to the glass.

   100dvh with a 100vh fallback: on mobile 100vh is the height with the URL bar hidden, which
   would push the footer below the fold. Unlike body.crm this shell has no fixed top bar and
   no padding-top, so no box-sizing adjustment is needed. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

main {
    display: block;
    /* absorb the spare viewport height (issue #131) */
    flex: 1 0 auto;
}

.mkt-footer,
.mkt-page-footer {
    /* never compress once <main> has taken the leftover height (issue #131) */
    flex-shrink: 0;
}

.mkt-footer {
    background-color: #7b7468;
    color: #fff;
    text-align: center;
}

.mkt-footer-container {
    padding-top: 10px;
}

.mkt-footer-left {
    text-align: left;
    padding-left: 30px;
}

.mkt-footer-right {
    text-align: right;
    padding-right: 30px;
    padding-bottom: 10px;
}

.padded-container {
    padding-top: 0;
    padding-bottom: 40px;
}

.underline { text-decoration: underline; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.red { color: red; }

.padded-text {
    padding-top: 10px;
    padding-bottom: 2px;
}

.search-container { text-align: center; }
.search-container label { display: none; }
.search-container input[type="text"] {
    width: 480px;
    padding: 3px 12px;
    height: 30px;
}

.page-header {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 20px;
}

a.plain-link:link,
a.plain-link:visited,
a.plain-link:hover,
a.plain-link:active {
    text-decoration: none;
    color: #777;
}

a.decorated-link:link,
a.decorated-link:visited,
a.decorated-link:hover,
a.decorated-link:active {
    text-decoration: underline;
    color: #777;
}

.text-video { color: #777; }

.btn-orange {
    background-color: #ff933c;
    border-color: #ff933c;
    color: #fff;
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: #e56b08;
    border-color: #e56b08;
    color: #fff;
}

.blog-image {
    padding-bottom: 15px;
    height: auto;
    max-width: 100%;
}

.user-mini {
    display: block;
    font-size: 12px;
    margin-top: -6px;
}

.user-mini > span.welcome { font-weight: bold; }
.user-mini > span.caret { margin-top: -12px; }

.sidebox {
    box-shadow: none;
    padding: 18px;
    margin-top: 26px;
    border: 1px solid rgb(235, 235, 235);
    border-radius: 5px;
    line-height: 24px;
    color: rgb(51, 51, 51);
}

.sidebar { padding-top: 23px; }

.sidebox-title {
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 40px;
    color: rgb(51, 51, 51);
}

.sidebox a { color: rgb(208, 88, 3); }

/* mypointb logo styles (Google Font EB Garamond dropped — self-hosted serif fallback per CSP) */
.mypointb-white-large,
.mypointb-orange-large,
.mypointb-gray-large,
.mypointb-white-medium,
.mypointb-orange-medium,
.mypointb-gray-medium,
.mypointb-orange-medium-plus,
.mypointb-gray-medium-plus,
.mypointb-orange-small,
.mypointb-gray-small {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 1px;
}

.mypointb-white-large { color: #fff; font-size: 52px; }
.mypointb-orange-large { color: #ff7709; font-size: 52px; }
.mypointb-gray-large { color: #525252; font-size: 52px; }
.mypointb-white-medium,
.mypointb-white-medium:hover { color: #fff; font-size: 32px; text-decoration: none; }
.mypointb-orange-medium { color: #ff7709; font-size: 32px; }
.mypointb-gray-medium { color: #525252; font-size: 32px; }
.mypointb-orange-medium-plus { color: #ff7709; font-size: 42px; }
.mypointb-gray-medium-plus { color: #525252; font-size: 42px; }
.mypointb-orange-small { color: #ff7709; font-size: 22px; }
.mypointb-gray-small { color: #525252; font-size: 22px; }

/* the navbar/footer wordmark's "b" accent (inline style= not permitted under CSP) */
.mypointb-gray-accent { color: #525252; }
.mypointb-orange-accent { color: #ff7709; }

/* navbar (BS3 .navbar-inverse -> BS5 .navbar-dark.bg-mkt-orange) */
.navbar { border-radius: 0; }

.bg-mkt-orange {
    background-color: #ff7709;
    border-color: #ff7709;
}

.navbar-dark.bg-mkt-orange .navbar-brand {
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    letter-spacing: 1px;
}

.navbar-dark.bg-mkt-orange .navbar-nav > li > a,
.navbar-dark.bg-mkt-orange .nav-link {
    color: #fff;
    position: relative;
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all 0.1s linear;
}

.navbar-dark.bg-mkt-orange .nav-link:after {
    position: absolute;
    bottom: 7px;
    left: 50%;
    content: '';
    width: 12px;
    height: 0;
    margin-left: -5px;
    background-color: #fff;
    transition: all 0.1s linear;
}

.navbar-dark.bg-mkt-orange .nav-link:hover:after,
.navbar-dark.bg-mkt-orange .nav-item.active .nav-link:after,
.navbar-dark.bg-mkt-orange .nav-link.active:after,
.navbar-dark.bg-mkt-orange .nav-link.active:hover:after,
.navbar-dark.bg-mkt-orange .nav-link.active:focus:after {
    position: absolute;
    bottom: 9px;
    left: 50%;
    content: '';
    width: 20px;
    height: 2px;
    margin-left: -10px;
}

.navbar-dark.bg-mkt-orange .nav-link.active,
.navbar-dark.bg-mkt-orange .nav-link.active:hover,
.navbar-dark.bg-mkt-orange .nav-link.active:focus,
.navbar-dark.bg-mkt-orange .dropdown-menu.show ~ .nav-link,
.navbar-dark.bg-mkt-orange .nav-item.show .nav-link {
    background-color: #ff7709;
}

.navbar-dark.bg-mkt-orange .navbar-toggler {
    border-color: #ff7709;
}

.navbar-dark.bg-mkt-orange .navbar-toggler:hover,
.navbar-dark.bg-mkt-orange .navbar-toggler:focus {
    background-color: #fff;
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    color: #fff;
}

.dropdown-menu {
    background-color: #7b7468;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item.active:focus,
.dropdown-menu .dropdown-item.active:hover {
    background-color: #525252;
    color: #fff;
}

.navbar-wrapper {
    margin-top: 0;
}

/* jumbotron / marketing buttons */
.btn-primary,
.jumbotron .btn {
    background-color: #ff7709;
    border-color: #ff7709;
    padding: 10px 40px;
    font-weight: 200;
    font-size: 18px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #e56b08;
    border-color: #e56b08;
}

.carousel-caption p {
    margin-bottom: 10px;
    font-size: 24px;
}

.carousel-caption {
    text-shadow: 0 2px 2px rgba(0, 0, 0, .8);
}

.jumbotron-home {
    padding: 0 10px 30px;
    background-color: #fff;
    border-bottom: 0;
}

.jumbotron p {
    font-size: 18px;
    font-weight: 200;
}

.jumbotron {
    background-color: #fff;
    border-bottom: 0;
    padding: 2rem 1rem;
    border-radius: 0.3rem;
}

#jumbo { padding: 0; }

/* footer menu list */
.mkt-list-simple li {
    display: inline;
    padding: 0 10px;
    border-left: solid 1px #fff;
}

.mkt-list-simple a { color: #fff; }
.mkt-list-simple li:first-child { border-left: none; }

.social-icon {
    font-size: 36px;
    margin: 0;
    color: #c5c5c5;
}

.social-icon:hover { color: #fff; }

/* featurettes */
.featurette-divider { margin: 60px 0; }
.featurette { padding-top: 0; overflow: hidden; }
.featurette-image { margin-top: 0; vertical-align: middle; }
.featurette-image.float-start { margin-right: 40px; }
.featurette-image.float-end { margin-left: 40px; }
.featurette-heading { font-size: 50px; font-weight: 300; line-height: 1; letter-spacing: -1px; }
.featurette-subheading { font-size: 35px; font-weight: 300; line-height: 1; letter-spacing: -1px; }
.center-text { text-align: center; }

/* blog */
.sidebar-module { padding: 15px; margin: 0 -15px 15px; }
.blog-heading { margin-top: 90px; margin-bottom: 20px; margin-left: 10px; font-size: 45px; }
.mkt-box { border: 1px solid #dfdfdf; margin-bottom: 15px; }
.read-full-entry { text-align: right; padding-right: 50px; }
.blog-small { padding-bottom: 10px; }
.blog-title { margin-top: 2px; }
a.blog-title:link, a.blog-title:visited, a.blog-title:hover, a.blog-title:active { color: #525252; }
.circle-100 { width: 100px; height: 100px; }
.blog-post { margin-top: 20px; margin-bottom: 20px; }
.blog-post > ul, .blog-post > ul > ul, .blog-post > ul > ul > ul { padding-left: 40px; }
.admin > ul, .admin > ul > ul, .admin > ul > ul > ul { padding-left: 40px; }

/* video/tutorial thumbnails + panels (BS3 .panel -> BS5 .card) */
.img-container { overflow: hidden; height: 170px; }
.img-container img { min-width: 280px; min-height: 180px; max-width: 380px; max-height: 280px; }
.txt-container { overflow: hidden; height: 100px; }
.card .lead { overflow: hidden; height: 90px; }

/* forum/qa detail indents */
.indent1 { margin-left: 40px; }
.indent2 { margin-left: 80px; }
.indent3 { margin-left: 120px; }
.indent4 { margin-left: 160px; }

/* about-us columns */
@media (min-width: 992px) {
    .syncrowheight { display: table; }
    .syncrowheight [class*="col-"] { float: none; display: table-cell; vertical-align: top; }
    .inner-div { padding: 10px; }
    .container-tutorial { width: 970px; }
}

@media (min-width: 766px) {
    .container-help { width: 700px; }
}

@media (min-width: 1200px) {
    .container-blog {
        width: 1170px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* narrow / hamburger width overrides */
@media (max-width: 767px) {
    .navbar-dark.bg-mkt-orange .nav-link:after,
    .navbar-dark.bg-mkt-orange .nav-link:hover:after {
        height: 0 !important;
    }

    .navbar-dark.bg-mkt-orange .nav-link.active,
    .navbar-dark.bg-mkt-orange .nav-link.active:hover,
    .navbar-dark.bg-mkt-orange .nav-link.active:focus {
        background-color: #ff933c;
    }

    .navbar-dark.bg-mkt-orange .dropdown-menu .dropdown-item.active {
        background-color: #ff933c;
    }

    .navbar-dark.bg-mkt-orange .dropdown-menu .dropdown-item {
        color: #fff;
    }

    .navbar-dark.bg-mkt-orange .dropdown-divider {
        background-color: #ff933c;
        height: 3px;
    }

    .mkt-footer-left,
    .mkt-footer-right {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .featurette { padding-top: 0; text-align: center; }
}

@media (max-width: 991px) {
    .mkt-box { margin-left: 10px; margin-right: 10px; }
}

/* ==== jumbotron-narrow.css ==== */
.mkt-header,
.mkt-marketing,
.mkt-page-footer {
    padding-right: 15px;
    padding-left: 15px;
}

.mkt-header {
    border-bottom: 1px solid #e5e5e5;
}

.mkt-header h3 {
    padding-bottom: 19px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
}

.mkt-page-footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

.container-narrow > hr { margin: 30px 0; }

.mkt-marketing { margin: 40px 0; }
.mkt-marketing p + h4 { margin-top: 28px; }

@media screen and (min-width: 768px) {
    .mkt-header,
    .mkt-marketing,
    .mkt-page-footer {
        padding-right: 0;
        padding-left: 0;
    }
    .mkt-header { margin-bottom: 30px; }
}

/* ==== carousel.css ==== */
body.mkt-full { padding-bottom: 40px; }

/* The navbar is IN NORMAL FLOW on every marketing page, carousel or not (2026-08-05).

   It used to be position:absolute on .has-carousel pages, inherited from the recovered
   carousel.css, so it floated OVER the carousel image. That is what made the header look
   like a layer covering the top of the image — the image started at the top of the viewport
   and the navbar sat on top of it. Adjusting margin-top only moved the overlay up or down;
   it could not fix it, because the overlay is what position:absolute does.

   In normal flow the navbar occupies its own height at the top of the page and the carousel
   begins immediately below it, which is the intended look: header flush to the top, image
   fully visible underneath.

   (The earlier fix this replaces had scoped position:absolute to .has-carousel because on
   carousel-LESS pages the absolute navbar took up no height and covered the page content —
   on applogin.cfm it hid the "mypointb" wordmark. Putting every page in normal flow makes
   that scoping unnecessary: no page has an out-of-flow navbar now.) */

.navbar-wrapper > .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.carousel {
    height: 500px;
    margin-bottom: 60px;
}

.carousel-caption { z-index: 10; }

.carousel .carousel-item {
    height: 500px;
    background-color: #777;
}

.carousel-inner > .carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
    object-fit: cover;
}

/* carousel/hero background images (moved off inline style= for CSP: style-src 'self', no
   unsafe-inline). One class per recovered background image, index/learn/aboutus. */
.bg-family { background: url(/cmedia/images/mkt/family.jpg) no-repeat center center; background-size: cover; }
.bg-realbusiness { background: url(/cmedia/images/mkt/realbusiness.jpg) no-repeat center center; background-size: cover; }
.bg-learn { background: url(/cmedia/images/mkt/learn.jpg) no-repeat center center; background-size: cover; }
.bg-about-us { background: url(/cmedia/images/mkt/about-us.jpg) no-repeat center center; background-size: cover; }
.bg-tutorials { background: url(/cmedia/images/mkt/tutorials.jpg) no-repeat center center; background-size: cover; }

.mkt-home .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
}

.mkt-home h2 { font-weight: normal; }
.mkt-home .col-lg-4 p { margin-right: 10px; margin-left: 10px; }

@media (min-width: 768px) {
    /* No margin-top on .navbar-wrapper (2026-08-05). This was an unconditional 20px inset
       from the ported marketing site's floating-navbar look. The navbar is now in normal
       flow on every marketing page (see the .navbar-wrapper block above), so it sits flush
       to the top of the viewport and any top margin is just a gap above the header. */
    .navbar-wrapper .navbar { border-radius: 4px; }
    .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; }
}

/* ==== signin.css ==== */
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

.form-signin .form-signin-heading,
.form-signin .form-check {
    margin-bottom: 10px;
}

.form-signin .form-control {
    position: relative;
    height: auto;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus { z-index: 2; }

.form-signin input[type="text"],
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ==== pricing.css ==== */
.mkt-full-page {
    background: url(/cmedia/images/mkt/bridge.jpg) no-repeat center center fixed;
    background-size: cover;
}

.mkt-pricing li { list-style: none; }

.bundle {
    text-align: center;
    font-size: 16px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #e9e9e9;
    margin-bottom: 80px;
    padding: 20px;
    transition: all ease 0.5s;
}

.bundle-title h3 {
    line-height: 50px;
    margin-top: 0;
    margin-bottom: 0;
}

.price {
    margin-top: 0;
    margin-bottom: 0;
    padding: 15px 0 20px;
    color: #ff7709;
}

.price .month {
    display: block;
    margin-top: 0;
    line-height: 1;
    font-size: 15px !important;
    font-weight: 200;
}

.bundle-list {
    padding-top: 10px;
    margin-bottom: 20px;
}

.bundle-list li {
    margin-top: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
}

.bundle-list li span { margin-right: 10px; }
.bundle .button { margin-bottom: 20px; }
