/* =============================================
   THE UPLOAD DIALOG
   theme.css sets .file-upload-wrapper { top: 127px }. A Bootstrap 4 .modal is
   fixed at top 0 with height 100%, so moving its top down without shortening
   it pushes the whole layer off the bottom of the screen and drags the panel
   out of the centre. That 127 was the old header height, and the panel has
   been anchored to a header that no longer exists ever since, which is why it
   lands over the sidebar and the account bar instead of in the middle of the
   page.

   Put back at top 0 and centred with flex, so the panel sits in the middle of
   the viewport with the backdrop dimming the sidebar and the bar behind it,
   rather than the panel being laid on top of them.
   ============================================= */
.file-upload-wrapper.modal {
    top: 0 !important;
}
/* .modal is display none until Bootstrap adds .show, so the flex centring is
   hung off .show. Putting it on .modal alone would leave the dialog on screen
   permanently. */
.file-upload-wrapper.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.file-upload-wrapper .modal-dialog {
    max-width: 920px;
    width: calc(100% - 4rem);
    margin: 0;
}
/* A tall panel scrolls inside itself instead of running off the screen, which
   is what kept the Options row and the size limit out of reach. */
.file-upload-wrapper .modal-content {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background-color: var(--fe-bg-card);
    border: 1px solid var(--fe-border-color);
    border-radius: 12px;
}

/* =============================================
   THE FOOTER LINKS BAND
   Its own colours rather than the footer's, because it is a band in its own
   right sitting between the page and the stats line, and it reads as one only
   if it is a different tone from both.
   ============================================= */
#footer-links {
    background-color: #323848 !important;
}
#footer-links .footer-links a,
#footer-links .footer-links a:visited {
    color: #d6dbe5 !important;
}
#footer-links .footer-links a:hover {
    color: #ffffff !important;
}
/* The bullet is punctuation, not a link, so it sits back from both. Spacing
   lives here rather than as non breaking spaces in the markup, which is what
   lets the row wrap sensibly on a narrow screen. */
#footer-links .footer-links .sp-sep {
    color: #7d869c;
    padding: 0 0.85em;
    user-select: none;
}

/* =============================================
   THE LAST SECTION HEADING
   theme.css carries .last-section .animated.heading-1 { color: #000 }, three
   classes deep, which beats the .heading-1 in the typography block above and
   painted "What are you waiting for?" black on the dark band it sits on. The
   same selector is answered here rather than a blunter one, so only that
   heading changes.
   ============================================= */
.last-section .animated.heading-1,
.last-section .heading-1,
.homepage-register-section .heading-1 {
    color: var(--fe-text-primary) !important;
}

/* =============================================
   THE PREMIUM PAGE
   theme.css draws the plan table in #ececec, a near white it picked for a
   white page: 1px around .pricing-3, another under .pricing__head, and one
   more under every list row. On a dark page that is a bright wireframe over
   the top of the content, which is the grid in the screenshot.

   Rather than only recolouring those lines, the table is taken apart into
   three cards. The Stack markup joins the columns into one slab by zeroing
   the gutters and squaring the inner corners, which only reads as a table.
   Separated, each plan is a card the eye can compare against its neighbours.
   ============================================= */
.pricing-3,
.pricing-3 .pricing__head,
.pricing-3 ul li:not(:last-child),
.pricing-section-2 div[class*='col-']:last-child .pricing {
    border-color: var(--fe-border-color) !important;
}

/* The internal rules earn their keep as separators, but at full strength they
   compete with the prices. Dropped to a hairline of the border colour. */
.pricing-3 .pricing__head,
.pricing-3 ul li:not(:last-child) {
    border-bottom-width: 1px !important;
}

.pricing-3 {
    background-color: var(--fe-bg-card);
    border-radius: 12px !important;
    overflow: hidden;
}

/* Undo the slab. Every column gets its own gutter back and its own rounded
   corners, instead of the first and last being rounded on one side only and
   the middle being square. */
@media all and (min-width: 990px) {
    .pricing-section-2 div[class*='col-'] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .pricing-section-2 div[class*='col-']:first-child .pricing,
    .pricing-section-2 div[class*='col-']:last-child .pricing,
    .pricing-section-2 div[class*='col-'] .pricing {
        border-radius: 12px !important;
        border-right: 1px solid var(--fe-border-color) !important;
    }
    .pricing-section-2 div[class*='col-'] .pricing .pricing__head {
        border-radius: 12px 12px 0 0 !important;
    }
}

/* The price itself is the thing being compared, so it gets the accent and the
   surrounding furniture steps back. */
.pricing-3 .pricing__head .h1,
.pricing-3 .pricing__head .h2,
.pricing-3 .pricing__head span.h1 {
    color: var(--fe-text-primary);
}
.pricing-3 .pricing__head {
    background-color: var(--fe-bg-elevated);
}
.pricing-3 ul li {
    color: var(--fe-text-secondary);
}

/* =============================================
   LOGO VISIBILITY BY MODE
   ============================================= */

/* The class names read as "the logo for a dark page" and "the logo for a
   light page", but the images behind them are the other way round: logo-dark
   resolves to logo-whitebg.png, which is drawn in dark ink for a white
   background, and logo-light resolves to logo.png, which is drawn in white.
   Following the names put the dark ink logo on the dark page, where the word
   SABER disappeared into the bar. These two rules pick by what the image
   actually looks like rather than by what it is called.

   Both halves of each pair are stated. Hiding one without showing the other
   is what made the logo vanish outright: the theme already hides logo-light
   by default, so a rule that only hid logo-dark in dark mode left nothing
   visible at all. */
[data-mode="dark"] .logo-dark {
    display: none !important;
}
[data-mode="dark"] .logo-light {
    display: inline !important;
}
[data-mode="light"] .logo-light {
    display: none !important;
}
[data-mode="light"] .logo-dark {
    display: inline !important;
}

/* No home page exception is needed here, and one would do harm. The bar
   carries the menu-home class on every page, not only the home page, so a rule
   hung off it would force the white logo onto the near white bar an inner page
   shows in light mode. The home page needs no exception anyway: its twig
   overrides the header image so both logos there resolve to the white one,
   which is what the swap above then shows in either mode. */