/* Public-site-only overrides for the Bootstrap 5 upgrade.
   Loaded after style.css and bootstrap5.min.css, from MainMasterPage.master only --
   AdminMasterPage.Master and DeveloperMasterPage.master do not reference this file
   and stay on Bootstrap 3 + style.css as-is. */

*,
*::before,
*::after {
    /* style.css sets "box-sizing: inherit" site-wide. With nothing above it setting
       border-box, that resolves to the browser default (content-box) and breaks
       Bootstrap 5's grid math. Re-assert border-box for public pages only. */
    box-sizing: border-box;
}

/* The header logo and Google search widget are legacy fixed-pixel components styled
   with background-image sprites (GoogleSearch_field.jpg, btnleft.png/btnright.png).
   Their width/padding math was authored for content-box; under border-box the search
   field's rendered box shrinks by its own padding, cropping the sprite's rounded edge.
   Exempt them from the site-wide border-box reset above. */
#Logo,
#GoogleSearch,
#GoogleSearch * {
    box-sizing: content-box;
}

/* ---- Header: keep the fixed-width logo/search columns from overflowing on phones ---- */
@media (max-width: 767px) {
    #Logo,
    #GoogleSearch {
        float: none;
        width: 100%;
        text-align: center;
    }

    #GoogleSearch {
        margin-top: 10px;
    }
}

/* ---- Mobile nav toggle (hamburger) ----
   SmartMenus (the category dropdown plugin) is mobile-first and already collapses
   individual submenus below 768px, but it deliberately leaves the top-level menu bar
   itself always visible -- a responsive toggle for the whole menu is left to the site
   to build. Without one, all 5 top-level items (Home, Categories, Developer Login,
   Advanced Search, Contact Us) render as a permanently stacked list above the page
   content on mobile. */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 38px;
    margin: 8px 0;
    padding: 0;
    background: #01194a;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.mobile-nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
}

@media (max-width: 767px) {
    .mobile-nav-toggle {
        display: inline-flex;
    }

    /* Higher specificity than sm-core-css.css's ".sm,.sm ul,.sm li{display:block}" (which
       has no ID in its selector), so this reliably wins regardless of stylesheet order. */
    #main-menu.sm {
        display: none;
    }

    #main-menu.sm.mobile-nav-open {
        display: block;
    }
}

/* ---- Product hero card ---- */
.product-hero-card .card-body {
    padding: 1.5rem;
}

.product-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #01194a;
    margin-bottom: 0.25rem;
}

.product-buttons-row {
    margin-bottom: -0.5rem;
}

.product-stat-badges-row {
    margin-bottom: 0;
}

.product-price {
    font-size: 1.25rem;
}

/* ---- Spec list ---- */
.product-spec-list dt {
    color: #5a564d;
    font-weight: 600;
}

.product-spec-list > .row {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.product-spec-list > .row + .row {
    border-top: 1px solid #eee;
}

.product-boxshot {
    max-height: 260px;
}

/* ---- Stat badges ---- */
.stat-badge {
    background-color: #eef3f8;
    color: #01194a;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4em 0.75em;
}

/* ---- Category/search listing cards (softwarelistusercontrol.ascx) ---- */
.software-list-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* The card body is now one big click target (via .stretched-link on the title);
   give it a hover affordance so that's visually obvious. */
.software-list-card {
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.software-list-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(1, 25, 74, 0.12) !important;
    border-color: #b7c6e0;
}

.software-list-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #01194a;
    text-decoration: none;
    margin-right: 0.35rem;
}

.software-list-title:hover {
    text-decoration: underline;
}

.software-list-publisher {
    font-size: 0.95rem;
}

.software-list-description {
    font-size: 0.9rem;
}

.software-list-price {
    font-size: 1rem;
    font-weight: 600;
}

/* The pager's font otherwise inherits body's 12px and reads small; Bootstrap's default
   .page-link padding then makes each page number look oversized next to it. Give the
   pager its own (smaller) scale so it's proportionate to the listing text above. */
.pagination .page-link {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.software-list-pager-top {
    margin-top: 1.1rem;
    margin-bottom: 0.75rem;
}

.software-list-pager-bottom {
    margin-top: 1rem;
    margin-bottom: 1.1rem;
}

/* Bigger tap targets for the page-number list on touch screens */
@media (max-width: 575px) {
    .pagination .page-link {
        padding: 0.45rem 0.65rem;
    }
}