/*
 * Better Pricing Mothership theme.
 *
 * Load order is MDB -> Dark.css -> this file. Dark.css is a verbatim copy of the Better
 * Pricing app's stylesheet so both sites share one palette; keep it untouched so it can be
 * re-copied when the app's version changes, and put every Mothership-specific adjustment
 * here instead.
 *
 * Dark.css was written for the app, which is a logged-in tool with a fixed-top navbar and
 * puts nearly all of its content inside .card. A marketing page has neither, so the rules
 * below fill the gaps: full-bleed section backgrounds, and text colour for headings and
 * copy that sit directly on the page rather than in a card.
 */

/* Dark.css offsets the page gradient by the height of the app's fixed-top navbar. The
   marketing navbar scrolls with the page, so that offset would leave a bare strip above
   the gradient. */
html {
    background-position-y: 0;
}

main {
    min-height: 60vh;
}

/* MDB's tertiary background is a light grey used to separate sections. On the dark palette
   it reads as a bright band, so alternate sections get a subtle lift instead. */
.bg-body-tertiary {
    background-color: rgb(18 19 30) !important;
}

/* Copy outside a .card gets no colour from Dark.css. */
body,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li,
.navbar-brand {
    color: #e6e6ea;
}

main .text-muted {
    color: #8b8fa3 !important;
}

/* Navbar. Dark.css restyles header nav.bg-white, but the .nav-link colours come from
   Bootstrap's navbar-light and would be near-black on that dark bar. */
header .navbar .nav-link {
    color: #c3c6d4;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:focus,
header .navbar .nav-link.active {
    color: #ffffff;
}

header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

header .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.navbar-brand img {
    display: block;
}

/* Hero.
   Same treatment as #promotion in the Better Pricing app: the photo goes on a ::before
   layer at low opacity so the heading and button keep their contrast, rather than as a
   background on the section itself where it would fight the text. */
.hero {
    position: relative;
    background-image: linear-gradient(rgb(22 24 40), rgb(4 5 12));
    overflow: hidden;
}

.hero::before {
    content: "";
    background-image: url('../images/promotions/promotion_dk.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.25;
}

/* The photo sits on ::before, so hero content needs its own stacking context to stay
   above it. */
.hero > .container {
    position: relative;
}

.hero .display-3 {
    color: #ffffff;
}

/* logo-large.png is 2000px wide; without a cap it dominates the hero on desktop. */
.hero-logo {
    max-width: 460px;
}

/* FAQ accordion. Dark.css sets .accordion-button to grey, which is too low-contrast for a
   question heading, and leaves the body and the collapsed background unstyled. */
.accordion-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.accordion-body,
.accordion-body p {
    color: #c3c6d4 !important;
}

/* Accounting system logos are supplied by third parties and are usually dark-on-light, so
   give them a light plate rather than letting them disappear. */
#accounting-systems img {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* Footer */
footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

footer p {
    color: #8b8fa3;
}