/* === Print (unchanged) === */
@media print {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: white;
    }

    #printContents {
        transform: translateY(-50%);
        position: relative;
        top: 50%;
    }
}

/* === Palette from DropToSend logo (Blue + Black) === */
:root {
    --bg: #ffffff; /* deep black */
    --text: #e8e8e8; /* light text */
    --muted: #a7a7a7;
    /* Blues */
    --blue-700: #0a58ca; /* primary blue (links/buttons) */
    --blue-600: #0b6ef3; /* lighter end of gradient / hover */
    --blue-400: #5aa7ff; /* hover/active accent */

    --border: rgba(11, 110, 243, .25); /* subtle blue border */
}

/* === Base === */
html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* links */
a {
    color: var(--blue-400);
}

    a:hover, a:focus {
        color: #b3d4ff;
        text-decoration: none;
    }

/* content wrappers */
.main-content {
    flex: 1 1 auto;
    margin-bottom: 60px;
    background: var(--bg);
}

.footing, .footer {
    background: var(--bg);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    color: var(--muted);
}

/* borders & shadows */
.border-top {
    border-top: 1px solid var(--border);
}

.border-bottom {
    border-bottom: 1px solid var(--border);
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.35);
}

/* Navbar: black with blue links */
.navbar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    color: var(--blue-600) !important;
}

.navbar .nav-link {
    color: var(--blue-400) !important;
    font-weight: 600;
    letter-spacing: .2px;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: #b3d4ff !important;
    }

    .navbar .nav-link.active,
    .nav-pills .nav
    /* --- DropToSend headings & emphasis --- */
    :root {
        --blue-700: #0a58ca; /* brand dark blue */
        --blue-600: #0b6ef3;
    }

/* --- Readable body copy for DropToSend --- */
:root {
    --blue-700: #0a58ca;
}

/* Global body text (was too light) */
body, p, .lead, .card-text, .modal-body, .list-group-item,
.form-text, .text-body, .text-secondary {
    color: #1f2937 !important; /* slate-800: high contrast on white */
    line-height: 1.55;
}

/* Card-specific */
.card-text {
    color: #1f2937 !important;
}

.card .small, .card .text-muted {
    color: #334155 !important;
}
/* slate-700 */

/* Headings still in brand blue (if not already added) */
h1, h2, h3, h4, h5, h6,
.card-title, .modal-title,
label, .form-label, .control-label {
    color: var(--blue-700) !important;
    font-weight: 700;
}

/* Placeholders (were too pale) */
::placeholder {
    color: #475569 !important;
}
/* slate-600 */

/* Input text & focus ring */
.form-control {
    color: #111827;
}
    /* near-black */
    .form-control:focus {
        border-color: #0b6ef3;
        box-shadow: 0 0 0 .2rem rgba(11,110,243,.25);
    }

/* Force readable body copy inside cards */
.card, .card-body, .card p, .card-text, .card .list-group-item {
    color: #1f2937 !important; /* dark, high-contrast */
    line-height: 1.55;
}

/* Card headings in brand blue */
h1, h2, h3, h4, h5, h6,
.card-title {
    color: #0a58ca !important;
    font-weight: 700;
}

/* Links inside cards: primary blue + clearer hover */
.card a {
    color: #0b6ef3 !important;
    text-decoration: none;
}

    .card a:hover {
        text-decoration: underline;
    }

/* Optional: first-card tweak if you want stronger border/shadow */
.first-card {
    border-color: rgba(11,110,243,.25) !important;
    box-shadow: 0 .25rem .75rem rgba(2,6,23,.12) !important;
}
/* Put in site.css after Bootstrap */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 3rem;
    opacity: .35;
    background: transparent !important;
    border: 0 !important;
    transition: opacity .2s ease;
}

    #heroCarousel .carousel-control-prev:hover,
    #heroCarousel .carousel-control-next:hover {
        opacity: .75;
    }

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-size: 100% 100%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

/* Indicators in brand blue */
#heroCarousel .carousel-indicators li {
    background-color: #0a58ca;
}
/* Hero slide layout (title → image → caption → button) */

.hero-slide {
    max-width: 960px;
    margin: 0 auto;
}

.hero-img {
    display: block;
    max-height: 340px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 .5rem 1rem rgba(2,6,23,.15);
}

@media (max-width:576px) {
    .hero-img {
        max-height: 220px;
    }
}
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 3rem;
    opacity: .35;
    background: transparent !important;
    transition: opacity .2s;
}

    #heroCarousel .carousel-control-prev:hover,
    #heroCarousel .carousel-control-next:hover {
        opacity: .75;
    }

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-size: 100% 100%;
}


/* Don't recolor buttons inside cards */
.card a:not(.btn) {
    color: #007bff;
}
    /* keep your link color */
    .card a:not(.btn):hover {
        color: #0056b3;
    }

/* Ensure primary buttons in cards stay white text */
.card .btn-primary,
.card .btn-primary:hover,
.card .btn-primary:focus,
.card .btn-primary:active {
    color: #fff !important;
}