/* ==========================================================================
   Trophy Africa: the one stylesheet for every page (loaded after bootstrap.min.css).
   Replaces app.css and TrophyAfricaWeb.styles.css. The old Blazor [b-xxxx] scope
   attributes are gone, so selectors are plain and scoped by .sidebar / main instead.

   1. Variables      5. Sidebar menu
   2. Base           6. Buttons
   3. Page layout    7. Home page
   4. Top bar        8. Catalogue and cart
                     9. Text pages (privacy policy)
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
    --brand: #831010;          /* top bar, buttons */
    --brand-light: #a4171c;    /* button hover; bottom of the sidebar gradient */
    --border-w: 40px;          /* width of the white .patternBorder columns */
    --sidebar-w: 250px;
}

/* 2. Base ----------------------------------------------------------------- */
[x-cloak] { display: none !important; }   /* hide Alpine templates until Alpine has started */

html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { margin: 0; background-color: #fff; }

a, .btn-link { color: #006bb7; }
h1, h2, h3, p { color: #000; }
h1:focus { outline: none; }

.form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb; }

/* 3. Page layout ---------------------------------------------------------- */
.page { position: relative; display: flex; flex-direction: column; }
main { flex: 1; }

/* Sidebar | [white border] main [white border] */
.col-container { display: table; width: 100%; }
.col-container > .col { display: table-cell; }
.patternBorder { width: var(--border-w); background-color: #fff; }

/* No padding above the content: the top bar sits directly on it */
.content { padding-top: 0; }
.content > h1:first-child { margin-top: 1rem; }

@media (min-width: 641px) {
    .page { flex-direction: row; }
    .sidebar { width: var(--sidebar-w); height: 100vh; position: sticky; top: 0; }
}

/* 4. Top bar (right of the sidebar) --------------------------------------- */
/* The bar sits in the middle grid column, which is flanked by the two white .patternBorder columns.
   Negative margins pull it out over both, so it runs from the sidebar to the right edge of the screen.
   Left: padding keeps the bar's content where it was. Right: no padding, so the right-aligned content and
   the banner artwork (anchored to the right edge, see banner.svg) move out with the edge.
   The background spans the whole bar (padding-box) so the red gradient starts at the sidebar. */
main .top-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    margin: 0 calc(var(--border-w) * -1);
    padding: 0 0 0 var(--border-w);
    background-color: var(--brand);
    border-bottom: 1px solid #d6d5d5;
    background-image: url(/banner.svg);
    background-repeat: no-repeat;
    background-size: 100% 50px;
    background-position: right center;
    background-origin: padding-box;
}
main .top-row a { white-space: nowrap; text-decoration: none; }
main .top-row a:hover { text-decoration: underline; }
main .top-row a:first-child { overflow: hidden; text-overflow: ellipsis; }
.top-row-spacer { width: 100px; }   /* keeps the link clear of the banner artwork */

@media (max-width: 640.98px) {
    main .top-row { justify-content: space-between; }
}
@media (min-width: 641px) {
    main .top-row { position: sticky; top: 0; z-index: 1; }
}

/* 5. Sidebar menu --------------------------------------------------------- */
.sidebar { background-image: linear-gradient(180deg, #521213 0%, var(--brand-light) 70%); }

.sidebar .top-row { height: 50px; background-color: rgba(0, 0, 0, .4); }
.sidebar .navbar-brand { font-size: 1.1rem; }

/* Hamburger checkbox (small screens only) */
.sidebar .navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: #fff;
    position: absolute;
    top: .5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, .1);
}
.sidebar .navbar-toggler:checked { background-color: rgba(255, 255, 255, .5); }

.sidebar .nav-scrollable { display: none; }
.sidebar .navbar-toggler:checked ~ .nav-scrollable { display: block; }

@media (min-width: 641px) {
    .sidebar .navbar-toggler { display: none; }
    .sidebar .nav-scrollable {
        display: block;                    /* never collapse the sidebar on wide screens */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;                  /* scroll tall menus */
    }
}

.sidebar .nav-item { font-size: .9rem; padding-bottom: .25rem; }
.sidebar .nav-item:first-of-type { padding-top: 1rem; }
.sidebar .nav-item:last-of-type { padding-bottom: 1rem; }

/* Links size to their text, so wrapped names stay tightly spaced */
.sidebar .nav-item .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: .4rem 1rem;
    line-height: 1.3;
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
}
.sidebar .nav-item a.active { background-color: rgba(255, 255, 255, .37); color: #fff; }
.sidebar .nav-item .nav-link:hover { background-color: rgba(255, 255, 255, .1); color: #fff; }

/* Menu icons */
.sidebar .bi {
    display: inline-block;
    position: relative;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .75rem;
    top: -1px;
    background-size: cover;
}
.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* 6. Buttons: site red with white text ------------------------------------ */
.btn-primary, .btn-outline-secondary, .btn-outline-danger {
    color: #fff;
    background-color: var(--brand);
    border: 1px solid var(--brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
    color: #fff;
    background-color: var(--brand-light);
    border-color: var(--brand-light);
}
.btn:focus, .btn:active:focus,
.btn-primary:focus, .btn-outline-secondary:focus, .btn-outline-danger:focus {
    box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem var(--brand);
}
.btn-primary:disabled { color: #fff; background-color: var(--brand); border-color: var(--brand); opacity: .45; }

/* 7. Home page ------------------------------------------------------------ */
.titleSection.container { width: 100%; padding: 30px; }
.home-trophy { float: right; max-width: 100%; height: auto; }
.map { border: 0; max-width: 100%; }

/* 8. Catalogue and cart --------------------------------------------------- */
.status-message { padding: 20px 0; }
.status-message.error { color: #b00020; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    align-items: stretch;
}
.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    background: #fffffff0;
    text-align: center;
}
.product-card .product-title { min-height: 50px; padding: 0 4px; font-weight: bold; }
.product-card .product-code  { font-weight: bold; }
.product-card .product-image {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 20px;
}
.product-card .product-image img.photo { max-width: 100%; max-height: 360px; object-fit: contain; }
.product-card .product-image img.eol   { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-card .product-actions { padding: 8px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.product-card .in-cart { font-size: .85rem; color: #555; }

.cart-badge { margin-left: 6px; }
.cart-table img { width: 56px; height: 56px; object-fit: contain; }
.cart-table .qty { width: 5.5rem; }
.cart-form { max-width: 560px; }

/* 9. Text pages (privacy policy) ------------------------------------------ */
.content.policy { max-width: 60rem; padding-bottom: 3rem; }