/* Nav/header (black background, white text) -- see also .site-10 vars in helmet.css */
body.site-10 .pre-nav {
    background-color: #414141;
}

body.site-10 .section-nav {
    background-color: #1b1b1b;
}

body.site-10 .pre-nav-link,
body.site-10 .section-nav .navbar-light .navbar-nav .nav-link,
body.site-10 .section-nav .nav-min-search,
body.site-10 .section-nav .search-link {
    color: #fff;
}

/* Cart icon + newsletter subscribe button accent, per client spec */
body.site-10 .section-nav .nav-cart-wrap,
body.site-10 .section-nav .nav-cart {
    color: var(--accent-color);
}

body.site-10 .new-newsletter-signup button[type="submit"] {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #333333;
}

/* Typography -- Proxima Nova (client spec) not licensed/sourced yet, using the Poppins
   fallback already loaded in the Macna eg_templates row until then. */
body.site-10 {
    --heading-font: 'Poppins', sans-serif;
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 400;
    color: #333333;
}

body.site-10 h1 { font-family: var(--heading-font); font-weight: 700; font-size: 48px; }
body.site-10 h2 { font-family: var(--heading-font); font-weight: 700; font-size: 36px; }
body.site-10 h3 { font-family: var(--heading-font); font-weight: 300; font-size: 36px; }
body.site-10 h4 { font-family: var(--heading-font); font-weight: 700; font-size: 24px; }
body.site-10 h5 { font-family: var(--heading-font); font-weight: 700; font-size: 18px; }

body.site-10 a {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 14px;
    color: #3e517b;
}

body.site-10 a:hover {
    color: #999999;
}

/* PLP product card text */
body.site-10 .list-product-brand {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: #999999;
}

body.site-10 .product-name {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}

body.site-10 .product:hover .product-name {
    font-weight: 700;
    color: #3e517b;
}

/* .price = regular listed price; .price.price-color = active sale/clearance price */
body.site-10 .price {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: #333333;
}

body.site-10 .price.price-color {
    color: #a20000;
}

/* struck-through original price shown next to a sale/clearance price */
body.site-10 .product-msrp del {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #999999;
    text-decoration: line-through;
}

/* "X% Off" savings label */
body.site-10 .text-info {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}

/* Right-align search + cart icons in the main nav row. .section-nav-item (logo,
   nav-full-search, section-nav-last) all get flex-grow:1 from the shared base CSS, which
   was stretching those boxes to fill the leftover space -- the cart icon itself was never
   actually right-aligned, it just sat at the LEFT edge of its own now-very-wide stretched
   box. On Kriega this is invisible because their nav has enough content to leave little
   leftover space; our sparse 2-item nav has a lot, so the empty stretch was obvious.
   Fix: stop all of them from growing, then push the icon group as a unit via margin-left:
   auto on whichever search variant is visible (nav-min-search / nav-full-search swap by
   breakpoint). */
body.site-10 .section-nav .section-nav-main,
body.site-10 .section-nav .nav-full-search,
body.site-10 .section-nav .section-nav-last {
    flex-grow: 0;
}

body.site-10 .section-nav .nav-min-search,
body.site-10 .section-nav .nav-full-search {
    margin-left: auto;
}

/* Drop the nav bar height 100px -> 80px (driven by the logo wrapper's fixed height) */
body.site-10 .section-nav-main {
    height: 80px;
}

/* Find a Dealer in the announcement bar shouldn't inherit the bold link style */
body.site-10 .pre-nav-link {
    font-weight: 400;
}

/* Dropdown menus: black, regular-weight, all-caps links on a light gray background
   (Firefox's 'lightgray' keyword = #d3d3d3). border-top mimics the nav bar's own black
   so the dropdown visually starts right at the bottom edge of the (now 80px) nav instead
   of a few px lower against the toggle link's own baseline. */
body.site-10 .dropdown-menu {
    background-color: #d3d3d3;
    margin-top: 0;
    border-top: 18px solid #1b1b1b;
}

body.site-10 .dropdown-item {
    color: #3b3b3b;
    font-weight: 400;
    text-transform: uppercase;
    padding-top: 0.56rem;
    padding-bottom: 0.56rem;
}

body.site-10 .dropdown-item:hover,
body.site-10 .dropdown-item:focus {
    color: #3b3b3b;
    background-color: #c2c2c2;
}

/* Main nav item font size, matching Kriega's sizing */
body.site-10 .main-navbar .navbar-nav .nav-link {
    font-size: 16px;
}

@media (min-width: 1200px) {
    body.site-10 .main-navbar .navbar-nav .nav-link {
        font-size: 18px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Show the full search bar from 992px up instead of the icon-only state Kriega uses up
   to 1400px -- Macna's nav has far fewer items so there's room to spare earlier. */
@media (min-width: 992px) {
    body.site-10 .nav-min-search {
        display: none !important;
    }
    body.site-10 .nav-full-search {
        display: block !important;
    }
}

/* Primary/gold buttons -- no explicit button spec given for Macna yet (unlike
   Kiddimoto's PRIMARY/SECONDARY spec), using --accent-color (cart icon, newsletter
   subscribe button) so it's at least not the default gold. Adjust once real specs land. */
body.site-10 .btn-primary,
body.site-10 .btn-gold {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #333333;
}

body.site-10 .btn-primary:hover,
body.site-10 .btn-primary:focus,
body.site-10 .btn-primary:not(:disabled):not(.disabled):active,
body.site-10 .btn-gold:hover,
body.site-10 .btn-gold:focus,
body.site-10 .btn-gold:not(:disabled):not(.disabled):active {
    background-color: #d6c93b;
    border-color: #d6c93b;
    color: #333333;
}

/* Links using the brand blue (matches the Links typography spec) */
body.site-10 .btn-link {
    color: var(--main-color);
}

/* Selected/checked product-option buttons -- accent, matching Kriega's own choice of its
   accent color (not its base --main-color) for this same interactive-selected state */
body.site-10 .btn-check:checked + .btn-option {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Nav link hover/active shouldn't be the default gold -- use the brand accent instead,
   matching Kriega's own choice of accent (not main-color) for this state */
body.site-10 .main-navbar .navbar-nav .nav-link.active,
body.site-10 .main-navbar .navbar-nav .nav-link:hover {
    color: var(--accent-color);
}

/* Logo sizing -- height comes from the nav bar's fixed height (80px, set above), width
   scales via each image's real aspect ratio so it isn't stretched/squashed. */
body.site-10 .main-nav-logo {
    height: 100%;
    width: auto;
    aspect-ratio: 1424 / 320;
}

body.site-10 .main-nav-logo-mobile {
    aspect-ratio: 1228 / 320;
}

body.site-10 .footer-logo {
    width: 160px;
    height: auto;
    aspect-ratio: 495.69 / 292.27;
}

/* Logo is a full-frame image (includes its own #1b1b1b background), so it should touch
   the left edge, not float centered with the base theme's 10px auto margin. Also need to
   zero out the nav's own horizontal padding, which otherwise insets everything (including
   the logo) from the true left edge. */
body.site-10 .main-nav-logo {
    margin: 0;
}

body.site-10 .section-nav {
    padding-left: 0;
}

body.site-10 .section-nav-main {
    padding-left: 0;
}

/* Override the base theme's fixed width/max-width on the logo's wrapping link, which was
   clipping the logo (it computes wider than 250px at our 80px nav height given its real
   aspect ratio), and kill the auto-centering margin so it's genuinely left-aligned. */
body.site-10 .section-nav-main {
    width: auto;
    max-width: none;
    margin: 0;
}

/* Dropdowns weren't absolutely positioned, so opening one pushed the nav taller/shifted
   items instead of overlaying -- same issue Sidi/Shoei hit before, fixed the same way. */
body.site-10 .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
    top: 42px;
}

/* Restore the base theme's 20px horizontal nav padding on mobile only -- we zeroed it out
   above so the desktop logo could sit flush left, but that's not needed below 992px. */
@media (max-width: 991.98px) {
    body.site-10 .section-nav {
        padding-left: 20px;
    }
}

/* Search icon +20% (24px base -> ~29px) */
body.site-10 .search-link {
    font-size: 29px;
}

/* Mobile nav panel was starting at the very top of the viewport (top: 0), covering the
   toggle button so there was no way to close it once opened. Same fix as Kriega -- offset
   it to start below our (80px) nav bar instead. */
body.site-10 .menu-wrap {
    top: 80px;
    min-height: calc(100vh - 80px);
}

/* Mobile logo needs to be able to shrink narrower on small phone widths (otherwise the
   cart icon gets pushed off the right edge). Flex items default to min-width:auto, which
   floors them at their intrinsic content size and blocks shrinking below that -- min-width:0
   opts back in. flex-basis gives the container an explicit starting size to shrink FROM
   (needed since letting the image drive sizing via percentages caused a circular reference
   and collapsed to 0 width). The image just fills whatever box the container ends up being;
   object-fit:contain keeps it proportional (and centered) as that box shrinks. Scoped to
   mobile only since the desktop logo shares this same .section-nav-main container. */
@media (max-width: 991.98px) {
    body.site-10 .section-nav-main {
        min-width: 0;
        flex-basis: 307px; /* natural width of the mobile logo at our 80px nav height (aspect-ratio 1228/320) */
        flex-shrink: 1;
    }

    body.site-10 .main-nav-logo-mobile {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }
}

/* Footer copyright bar defaults to #333 (base theme), should be true black to match.
   Text was inheriting our base body color (#333333), too dark to read against black. */
body.site-10 .footer-copyright {
    background-color: #000;
    color: #fff;
}