/* =================================================================
   NO WAKE MARINE — inventory restyle

   The boat listing (boats.hbs) and boat detail (boat_detail.hbs,
   boat_detail_sold.hbs) keep the Madis markup and behaviour; this
   file only re-skins them with the design's tokens (nwm-style.css :root)
   — accent colour, Archivo type, square buttons and tags.
   Everything is scoped to the .nwm-inv wrapper on those templates.
   Loaded after nwm-style.css from layout.hbs.
   ================================================================= */

/* ---- colours: the Madis variables point at the design palette ---- */
.nwm-inv {
    --aqua-color: var(--nwm-accent);
    --black-color: var(--nwm-ink);
    --gray-color: var(--nwm-line);
    --lightest-gray-color: var(--nwm-mist);
    color: var(--nwm-ink);
}

/* ---- type: Archivo everywhere (icon fonts excluded) ---- */
.nwm-inv :not(i):not(.fa):not([class*="fa-"]):not(.material-icons) {
    font-family: 'Archivo', 'Helvetica Neue', sans-serif !important;
}

/* display headings: the design's expanded uppercase */
.nwm-inv .boatsHeading,
.nwm-inv .boat-details-title,
.nwm-inv .boat-title,
.nwm-inv .boat-title a,
.nwm-inv .grid-boat-title,
.nwm-inv .grid-boat-title a {
    font-stretch: 125%;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--nwm-ink);
}

.nwm-inv .boatsHeading {
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: .95;
}

/* the detail title sits in the narrow sidebar column: keep it inside it */
.nwm-inv .boat-details-title {
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1;
    overflow-wrap: anywhere;
}

.nwm-inv .similar-heading,
.nwm-inv .inq-form-head h3,
.nwm-inv .accordion-header h3 {
    font-stretch: 125%;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--nwm-ink);
}

/* card titles: one or two lines in the list and grid views */
.nwm-inv .boat-title,
.nwm-inv .boat-title a {
    font-size: 24px;
    line-height: 1.05;
}

.nwm-inv .grid-boat-title,
.nwm-inv .grid-boat-title a {
    font-size: 18px;
    line-height: 1.1;
}

.nwm-inv .boat-title a:hover,
.nwm-inv .grid-boat-title a:hover {
    color: var(--nwm-accent);
}

/* ---- prices ---- */
.nwm-inv .card-text,
.nwm-inv .grid-price-item,
.nwm-inv .callForprice {
    color: var(--nwm-ink);
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: 0;
}

/* wide price type + Madis's 30px side padding overshot the card by 1px at 320px */
@media (max-width: 360px) {
    .nwm-inv .grid-price-item {
        padding-right: 18px;
    }
}

/* ---- buttons: accent fill / ink outline, square, display type ---- */
.nwm-inv .listing-blue-btn,
.nwm-inv .grid-view-details-btn,
.nwm-inv .lastLoad_btn button,
.nwm-inv .load_more_action,
.nwm-inv .redBtn,
.nwm-inv .call-now-btn,
.nwm-inv .details-form-btn,
.nwm-inv .apply-box button {
    background: var(--nwm-accent);
    color: var(--nwm-black);
    border: 0;
    border-radius: 0;
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
}

.nwm-inv .listing-blue-btn:hover,
.nwm-inv .grid-view-details-btn:hover,
.nwm-inv .lastLoad_btn button:hover,
.nwm-inv .load_more_action:hover,
.nwm-inv .redBtn:hover,
.nwm-inv .call-now-btn:hover,
.nwm-inv .details-form-btn:hover,
.nwm-inv .apply-box button:hover {
    background: var(--nwm-ink);
    color: #fff;
}

/* the grid / similar-listings link is inline text in Madis: give it a button box */
.nwm-inv .grid-view-details-btn {
    display: inline-block;
    padding: 8px 16px;
}

.nwm-inv .details-form-btn,
.nwm-inv .apply-box button {
    padding: 12px 28px;
}

.nwm-inv .listing-skyblue-btn {
    background: transparent;
    border: 2px solid var(--nwm-ink);
    border-radius: 0;
    color: var(--nwm-ink);
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: 0;
}

.nwm-inv .listing-skyblue-btn:hover {
    background: var(--nwm-ink);
    color: #fff;
}

/* ---- filter sidebar ---- */
.nwm-inv .filter-accordion-header,
.nwm-inv .desktop-accordion-header {
    background: var(--nwm-mist);
    color: var(--nwm-ink);
    font-weight: 800;
    letter-spacing: .04em;
}

.nwm-inv .filter-accordion-header i.fa,
.nwm-inv .desktop-accordion-header i.fa,
.nwm-inv .sqr-checkBox .fa-square,
.nwm-inv .fa-square-check,
.nwm-inv .fa-check-square {
    color: var(--nwm-accent);
}

.nwm-inv input[type="checkbox"],
.nwm-inv input[type="radio"],
.nwm-inv input[type="range"] {
    accent-color: var(--nwm-accent);
}

/* jQuery UI range sliders used by the length / year / price filters */
.nwm-inv .ui-slider-range {
    background: var(--nwm-accent);
}

.nwm-inv .ui-slider-handle {
    border-color: var(--nwm-ink);
}

/* ---- pending sale banner: the design's leaf-shaped tag ---- */
.nwm-inv .pending_sale_banner,
.nwm-inv .grid-pending_sale_banner {
    background: var(--nwm-accent);
    color: var(--nwm-black);
    border-radius: .9em 0 .9em 0;
    font-weight: 800;
    text-transform: uppercase;
}

/* ---- links ---- */
.nwm-inv .read-more,
.nwm-inv .breadcrumb-item a {
    color: var(--nwm-accent);
}

/* ---- search box: live suggestions (.nwm-suggest in nwm-style.css) ----
   The box sits at the right of the listing header and is narrow, so the
   results hang from its right edge at a readable width. (Below 991px
   inventory-style.css hides this box; the header search covers phones.) */
.nwm-inv .lisitng-search-box {
    position: relative;
}

.nwm-inv .lisitng-search-box:focus-within {
    border-color: var(--nwm-accent);
}

.nwm-inv .lisitng-search-box .nwm-suggest {
    top: calc(100% + 6px);
    left: auto;
    right: -1px;
    width: max(100%, 440px);
}