/* MeSoftware (mesoftwareshop.com) – custom theme on top of Bootstrap 5.3 */

/* ---------------------------------------------------------------------------
   Primary color overrides via Bootstrap 5.3 CSS variables
   --------------------------------------------------------------------------- */
:root {
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --muc-primary-hover: #1D4ED8;
    --muc-primary-subtle: #DBEAFE;
}

/* Generic links use the primary color */
a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--muc-primary-hover);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--muc-primary-hover);
    --bs-btn-hover-border-color: var(--muc-primary-hover);
    --bs-btn-active-bg: var(--muc-primary-hover);
    --bs-btn-active-border-color: var(--muc-primary-hover);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--muc-primary-hover);
    --bs-btn-active-border-color: var(--muc-primary-hover);
}

/* ---------------------------------------------------------------------------
   Text / utility helpers bound to the primary color
   --------------------------------------------------------------------------- */
.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary-subtle {
    background-color: var(--muc-primary-subtle) !important;
}

/* ---------------------------------------------------------------------------
   Navbar (sticky)
   --------------------------------------------------------------------------- */
.muc-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.muc-navbar .navbar-brand {
    color: var(--bs-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.muc-navbar .navbar-brand:hover {
    color: var(--muc-primary-hover);
}

.muc-navbar .nav-link {
    color: #334155;
    font-weight: 500;
}

.muc-navbar .nav-link:hover,
.muc-navbar .nav-link.active {
    color: var(--bs-primary);
}

.muc-navbar .nav-link.active {
    font-weight: 600;
}

/* Icon entries on the right (search, cart, account) – JetBrains style, text only
   in the collapsed mobile menu. */
@media (min-width: 992px) {
    .muc-navbar .muc-navbar__icon {
        line-height: 1;
        padding: .5rem .6rem;
        border-radius: .5rem;
    }

    .muc-navbar .muc-navbar__icon > .bi {
        font-size: 1.15rem;
    }

    .muc-navbar .muc-navbar__icon:hover {
        background-color: var(--muc-primary-subtle);
    }
}

.muc-navbar__search {
    width: min(22rem, calc(100vw - 2rem));
    padding: .75rem;
}

/* ---------------------------------------------------------------------------
   Mega menu "Software" – all products grouped by category
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Spans the whole navbar width below the bar (the li is position-static). */
    .muc-navbar .muc-megamenu {
        left: 0;
        right: 0;
        margin-top: 0;
        border: 0;
        border-top: 1px solid #e2e8f0;
        border-radius: 0;
        box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.12);
        padding: 1.75rem 0 1.25rem;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .muc-navbar .muc-megamenu {
        border: 0;
        padding: .5rem 0;
    }
}

.muc-megamenu__heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin: 0 0 .5rem .5rem;
}

.muc-megamenu__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem;
    border-radius: .5rem;
    color: #0f172a;
    text-decoration: none;
}

.muc-megamenu__item:hover,
.muc-megamenu__item:focus-visible {
    background-color: #f0f6ff;
    color: #0f172a;
}

.muc-megamenu__item:hover .muc-megamenu__name {
    color: var(--bs-primary);
}

.muc-megamenu__logo {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    object-fit: contain;
}

.muc-megamenu__logo--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--muc-primary-subtle);
    color: var(--bs-primary);
    font-size: 1.1rem;
}

.muc-megamenu__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.muc-megamenu__name {
    font-weight: 600;
    line-height: 1.3;
}

/* Two lines at most – the menu points the way, the product page explains. */
.muc-megamenu__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .825rem;
    color: #64748b;
}

.muc-megamenu__footer a {
    text-decoration: none;
}

.muc-megamenu__footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Hero section – subtle blue gradient from primary to primary-subtle
   --------------------------------------------------------------------------- */
.muc-hero {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--muc-primary-hover) 45%, var(--muc-primary-subtle) 130%);
    color: #ffffff;
    padding: 5rem 0;
}

.muc-hero .muc-hero-headline {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Wide enough that the German headline stays on one line and the subtext on two from 1024px
   up – as long as the English ones, so switching the language does not make the page jump. */
.muc-hero .muc-hero-subtext {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    max-width: 56rem;
}

.muc-hero .btn-light {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Feature cards (hover shadow)
   --------------------------------------------------------------------------- */
.muc-feature-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}

.muc-feature-card:hover {
    box-shadow: 0 0.75rem 1.75rem rgba(37, 99, 235, 0.15);
    transform: translateY(-3px);
}

.muc-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.75rem;
    background-color: var(--muc-primary-subtle);
    color: var(--bs-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Editions / pricing cards
   --------------------------------------------------------------------------- */
.muc-pricing-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.muc-pricing-card:hover {
    box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.1);
}

/* Highlighted edition with primary border */
.muc-pricing-card.muc-pricing-highlight {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0.75rem 1.75rem rgba(37, 99, 235, 0.18);
    transform: translateY(-4px);
}

.muc-pricing-card .muc-pricing-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
}

.muc-pricing-badge {
    background-color: var(--bs-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Page header – slim title band for all non-Home pages
   --------------------------------------------------------------------------- */
.muc-page-header {
    background-color: #f0f6ff;
    border-bottom: 1px solid #d0e2ff;
    padding: 2rem 0;
}

.muc-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

.muc-page-header .muc-page-header-lead {
    color: #475569;
    font-size: 1.05rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Footer (dark)
   --------------------------------------------------------------------------- */
.muc-footer {
    background-color: #0f172a;
    color: #cbd5e1;
    padding: 2.5rem 0 1.5rem;
}

.muc-footer a {
    color: #e2e8f0;
    text-decoration: none;
}

.muc-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.muc-footer .muc-footer-muted {
    color: #94a3b8;
    font-size: 0.875rem;
}

/* ── Screenshots on product pages ─────────────────────────────────────────
   Thumbnails are buttons (they open the modal); several images share one aspect
   ratio so rows line up, a single image keeps its own. */
.muc-screenshot-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f8fafc;
    cursor: zoom-in;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.muc-screenshot-thumb:hover,
.muc-screenshot-thumb:focus-visible {
    box-shadow: 0 0.75rem 1.75rem rgba(37, 99, 235, 0.15);
    transform: translateY(-3px);
}

.muc-screenshot-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.muc-screenshot-thumb--uniform img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

#mucScreenshotModal .carousel-item img {
    max-height: 85vh;
    object-fit: contain;
}

/* Prev/next sit on light screenshots - give the white arrows a dark disc. */
#mucScreenshotModal .carousel-control-prev,
#mucScreenshotModal .carousel-control-next {
    width: 4.5rem;
    opacity: 1;
}

#mucScreenshotModal .carousel-control-prev-icon,
#mucScreenshotModal .carousel-control-next-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.7);
    background-size: 45%;
}