/*
 * Site theme for user-facing pages, based on the home page (home-test.hbs).
 * Loaded last from views/layouts/layout.hbs and scoped to .wp-theme, which wraps
 * page content only (not the shared header/footer). The admin panels use
 * admin-layout.hbs and never load this file.
 *
 * Pages already built on the home page design (.hmt-page, .orr-page) are skipped.
 */

.wp-theme {
    --wp-font-sans: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --wp-font-display: Georgia, 'Times New Roman', serif;
    --wp-text: #000000;
    --wp-text-muted: #333333;
    --wp-blue: #066BBE;
    --wp-navy: #032F55;
    --wp-red: #CC101B;
    --wp-border: #e3e8ee;

    /* Repoint the legacy palette used by style.css / madis-common-pages-style.css / inventory-style.css */
    --black-color: var(--wp-text);
    --aqua-color: var(--wp-blue);

    font-family: var(--wp-font-sans);
    color: var(--wp-text);
}

/* ---------- Body font: Archivo everywhere, except icon fonts and code ---------- */

.wp-theme *:not(i, svg, svg *, pre, code, kbd, samp,
    .fa, [class^="fa-"], [class*=" fa-"], .material-icons, .glyphicon,
    [class^="icon-"], [class*=" icon-"],
    .hmt-page, .hmt-page *, .orr-page, .orr-page *) {
    font-family: var(--wp-font-sans) !important;
}

/* ---------- Display headings: Georgia bold italic, as on the home page ---------- */

.wp-theme :is(h1, h2,
    .title-heading, .section-title, .special-inventory-title, .similar-heading,
    .hms_title, .madis-col-content h3):not(.hmt-page *, .orr-page *) {
    font-family: var(--wp-font-display) !important;
    font-weight: 700 !important;
    font-style: italic !important;
}

/* Outside rich-text (blog posts, builder pages) headings are uppercase like the home page */
.wp-theme :is(h1, h2,
    .title-heading, .section-title, .special-inventory-title, .similar-heading,
    .hms_title, .madis-col-content h3):not(.hmt-page *, .orr-page *, .blog-content *, .pagelayout-wrapper *, .fr-view *) {
    text-transform: uppercase;
    letter-spacing: .5px !important;
}

/* h2 tags that are really card titles / labels: use the home card-title style instead */
.wp-theme :is(.grid-boat-title, .boat-title, .video_title, .modal-title, .contat_us_btn, h2.text-success, h2.text-danger):not(.hmt-page *, .orr-page *) {
    font-family: var(--wp-font-sans) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
}

.wp-theme :is(h3, h4, h5, h6):not(.hmt-page *, .orr-page *) {
    font-weight: 700;
}

/* ---------- Body copy & links ---------- */

.wp-theme p a:not(.hmt-page *, .orr-page *, [class*="btn"]) {
    color: var(--wp-blue);
    font-weight: 500;
}

.wp-theme p a:not(.hmt-page *, .orr-page *, [class*="btn"]):hover {
    color: var(--wp-navy);
}

/* ---------- Buttons: home page red CTA ---------- */

/* :not(img) - the inventory grid/list toggle icons are <img class="black-btn"> */
.wp-theme :is(.madis-black-btn, .black-btn, .event-btn, .first_btn, .customBtn, .featured-btn,
    .listing-blue-btn, .call-now-btn, .redBtn, .boat_load_btn, .lastLoad_btn button, .btn-primary):not(img) {
    background: var(--wp-red) !important;
    border: 1px solid var(--wp-red) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
}

.wp-theme :is(.madis-black-btn, .black-btn, .event-btn, .first_btn, .customBtn, .featured-btn,
    .listing-blue-btn, .call-now-btn, .redBtn, .boat_load_btn, .lastLoad_btn button, .btn-primary):not(img):hover {
    background: var(--wp-navy) !important;
    border-color: var(--wp-navy) !important;
    color: #ffffff !important;
}

/* Text-style CTAs */
.wp-theme .grid-view-details-btn {
    color: var(--wp-blue) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wp-theme .grid-view-details-btn:hover {
    color: var(--wp-navy) !important;
}

/* ---------- Blog listing (blog.hbs / blog-1.hbs) ---------- */

.wp-theme .blog-header .blog-filter-list {
    max-width: 1100px;
    margin: 0 auto;
}

.wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list li {
    list-style: none;
    margin: 0;
}

.wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list li .blog-filter-item {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 20px;
    border: 1px solid var(--wp-border);
    background: #ffffff;
    color: var(--wp-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list li .blog-filter-item:hover {
    border-color: var(--wp-blue);
    color: var(--wp-blue) !important;
}

.wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list li .blog-filter-item.active {
    background: var(--wp-blue);
    border-color: var(--wp-blue);
    color: #ffffff !important;
}

.wp-theme .blog-header .mobile-blog-filter-dropdown {
    height: auto;
    padding: 10px 14px;
    border: 1px solid var(--wp-border);
    border-radius: 0;
    color: var(--wp-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wp-theme :is(.blog-listing-theme-1, .blog-listing-theme-2) .blog-category {
    color: var(--wp-blue);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.wp-theme :is(.blog-listing-theme-1, .blog-listing-theme-2) .blog-title {
    color: var(--wp-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.wp-theme :is(.blog-listing-theme-1, .blog-listing-theme-2) a:hover .blog-title {
    color: var(--wp-blue);
}

.wp-theme .blog-listing-theme-1 .blog-para {
    color: var(--wp-text-muted);
    font-size: 16px;
    line-height: 1.65;
    padding-top: 8px;
}

@media screen and (max-width: 767px) {
    .wp-theme .blog-header .blog-filter-list .desktop-blog-filter-list {
        display: none;
    }

    .wp-theme .blog-header .mobile-blog-filter-dropdown {
        max-width: 280px !important;
    }
}