/* --- Global Styles --- */

/* Style for code blocks on a dark background */
pre {
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
}

/* Consistent navbar logo size */
.navbar-brand .navbar-item img {
    max-height: 2rem; /* 32px */
}

/* Make navbar background consistent with the rest of the dark theme */
.navbar.is-black {
    background-color: hsl(0, 0%, 12%); /* Corresponds to Bulma's $black-bis */
}

/* --- Component Styles --- */

/* App store button images */
.store-button-img {
    height: 55px;
    width: auto;
}

/* Pricing card tag styling */
.price-tag {
    font-size: 0.5em;
    font-weight: 400;
    vertical-align: middle;
    margin-left: 0.25em;
}

/* Remove top border from card footers for a cleaner look on the dark theme */
.card .card-footer {
    border-top: none;
}

/* --- Utility Classes --- */

/*
 * To make elements like boxes or cards take up the
 * full height of a flex parent.
 * Useful with .column.is-flex to create equal-height cards.
*/
.is-full-height {
    height: 100%;
}

/* Dark theme for form elements */
.input,
.textarea {
    background-color: hsl(0, 0%, 21%); /* grey-darker */
    border-color: hsl(0, 0%, 29%); /* grey-dark */
    color: hsl(0, 0%, 96%); /* white-ter */
}

.input::placeholder,
.textarea::placeholder {
    color: hsl(0, 0%, 48%); /* grey */
}

.input:focus,
.textarea:focus {
    border-color: hsl(204, 86%, 53%); /* info */
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}