/* overide GP defaults */ 
:root {
  --m4-bronze: #806a39;
  --m4-dark-gray: #2b2d2c;
  --m4-medium-gray: #999b9b;
  --m4-form-input-bg: #e6e6e6;
  --m4-light: #f2f2f2; /* added my MH, TBD */
  --black: #000000;
  --white: #ffffff;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--m4-bronze);
    font-family: trajan-pro-3, aria !important;
    font-weight: normal !important;
}

.site-content {
    flex-direction: column;
}

.grid-container {
    max-width: unset !important;
}

.tab-padding-s {
    padding: 40px;
}

.tab-padding-m {
    padding: 80px;
}

@media only screen and (max-width: 1024px) {
    .tab-padding-m {
        padding: 80px 40px;
    }
}

@media only screen and (max-width: 768px) {
    .tab-padding-m {
        padding: 40px;
    }
}

.tab-white-bg {
    background-color: var(--white);
}

.tab-light-bg {
    background-color: var(--m4-light);
}

.tab-bronze-bg {
    background-color: var(--m4-bronze);
}

.tab-hero-stat-con {
    padding: 20px;
    border: 2px dotted var(--m4-medium-gray);
}


.tab-con {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.tab-grid-con {
    display: flex;
    column-gap: 60px;
    row-gap: 60px;
    flex-wrap: wrap;
}

.tab-flex-center-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.tab-flex-center-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.tab-spilt {
    padding-top: 125px;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .tab-spilt {
        padding-top: 60px;
    }
}

.tab-spilt-white::before {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/m4-div-spilt.png");
    width: 100%;
min-height: 100px;
    bottom: -1px;
    left: 0;
    margin-top: -1px;
    z-index: 5;
}


body:has(.ranch-content-wrapper > div:nth-child(2).tab-search-ranchs, .ranch-content-wrapper > div:nth-child(2).tab-ranch-content-b) .tab-spilt-white::before {
background-image: url("/wp-content/themes/m4_ranch_group/assets/images/m4-div-spilt-light.png") !important;
}

.tab-spilt-dark::before {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/m4-div-spilt.png");
    width: 100%;
    min-height: 200px;
    top: 0;
    left: 0;
    margin-top: -125px;
}

.tab-spilt-bronze::before {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/bronze-divider-e.png");
      width: 100%;
    min-height: 100px;
    top: -90px;
    left: 0;
}

.tab-spilt-bronze-after::after {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/bronze-divider-e.png");
        background-position: bottom;
    width: 100%;
    min-height: 100px;
    left: 0;
    bottom: -90px;
}

.tab-spilt-light::before {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/m4-div-spilt-light.png");
    width: 100%;
    min-height: 100px;
    top: -75px;
    left: 0;
}

.tab-spilt-light-after::after {
    content: "";
    position: absolute;
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/m4-div-spilt-light.png");
    width: 100%;
       background-position: bottom;
    width: 100%;
    min-height: 100px;
    left: 0;
    bottom: -75px;
}



.tab-btn-con {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}

.tab-gold-btn, .alm-btn-wrap .alm-load-more-btn {
    background-color: var(--m4-bronze);
    color: var(--white);
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    width: max-content;
    max-height: 50px;
    display: flex !important;
}

.tab-gold-btn:hover, .tab-gold-btn:active {
    color: var(--white);
}

.tab-gold-btn:hover a, .alm-btn-wrap .alm-load-more-btn:hover {
    color: var(--white);
}

.tab-clear-btn {
    background-color: transparent;
    border: 1px solid var(--m4-bronze);
    padding: 20px;
    color: var(--black);
    text-align: center;
    display: flex;
    align-items: center;
    width: max-content;
    max-height: 50px;
}

.tab-clear-btn:hover {
    background-color: var(--m4-bronze);
    color: var(--white);
}

.tab-clear-btn:hover.tab-btn-plus-bronze::after {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z' fill='white'/%3E%3C/svg%3E%0A");
}

.tab-btn-arrow::after {
    content: "";
    margin-left: 0px;
    opacity: 0;
    transition: 0.2s all ease-in-out;
    width: 10px;
    height: 17px;
    display: block;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%23fff' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
    background-position: center;
}

.tab-btn-arrow:hover.tab-btn-arrow::after {
    margin-left: 10px;
    opacity: 1;
}

.tab-btn-plus-white::after{
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z' fill='white'/%3E%3C/svg%3E%0A");
}

.tab-btn-plus-bronze::after{
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z' fill='%23806a39'/%3E%3C/svg%3E%0A");
}

.tab-border-right {
    border-right: 1px dotted var(--m4-bronze);
    padding-right: 40px;
}

@media only screen and (max-width: 1024px) {
    .tab-border-right {
        border-right: unset;
        padding-right: 0;
    }
}

.no-margin-b {
    margin-bottom: 0 !important;
}

.tab-heading-border {
    position: relative;
    margin-bottom: 30px;
}

.tab-heading-border::after {
    content: "";
    border-bottom: 2px dotted var(--m4-bronze);
    width: 200px;
    display: block;
    padding-top: 15px;
}

.tab-heading-border-center::after {
    left: 50%;
    transform: translate(-50%);
    position: absolute;
}

.tab-image-border {
    max-width: 450px;
    max-height: 525px;
    object-fit: cover;
    padding: 20px;
    border: 1px solid var(--m4-bronze);
    background-color: color-mix(in srgb, var(--m4-medium-gray) 30%, transparent);
}

@media only screen and (max-width: 500px) {
    .tab-image-border {
        max-width: 300px;
    }
}

/* Ranch Grid */
.ranch-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: -10px;
    flex-direction: column;
}

.ranch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 1200px;
}

.ranch-sold-grid {
    display: flex;
    overflow-x: scroll;
    width: 100%;
    max-width: 1200px;
    flex-wrap: nowrap;
    gap: 15px;
    scrollbar-color: #715E32 #5454554D;
}

.ranch-sold-grid .ranch-border-container {
    min-width: 346px;
    margin-bottom: 15px;
}

.ranch-sold-grid .ranch-border-container:before {
    content: "";
    background-image: url(/wp-content/themes/m4_ranch_group/assets/images/sold-banner.png);
    width: 50%;
    height: 50%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    background-size: contain;
    top: 0;
    left: 0;
}

.ranch-sold-grid img {
    filter: grayscale(1);
}

.ranch-sold-grid .ranch-container:hover img {
    filter: grayscale(0);
}

@media only screen and (max-width: 1024px) {
    .ranch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .ranch-grid-container {
        margin-top: 20px;
    }
    
    .ranch-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.ranch-border-container {
    padding: 10px;
    border: 1px solid #715E32;
    position: relative;
}

.ranch-container {
    display: flex;
    flex-direction: column;
    background-color: unset;
    position: relative;
    height: 450px;
}

.ranch-overlay {
    background-color: rgba(19,26,26,0.3);
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.ranch-container:hover .ranch-overlay {
    opacity: 1;
}

.tab-ranch-overlay-banner-1:before {
    content: "";
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/price-reduced-banner.png");
    width: 50%;
    height: 50%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 999999;
    background-size: contain;
    top: 0;
    left: 0;
}

.tab-ranch-overlay-banner-2:before {
    content: "";
    background-image: url("/wp-content/themes/m4_ranch_group/assets/images/under-contract-banner.png");
    width: 50%;
    height: 50%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 999999;
    background-size: contain;
    top: 0;
    left: 0;
}

.ranch-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    position: relative;
}

.ranch-inner {
    width: 100%;
    padding: 0 20px;
    position: absolute;
    bottom: 0;
    color: var(--white);
    z-index: 1;
    background: linear-gradient(to top, rgba(19, 26, 26, 0.5) 0%, rgba(19, 26, 26, 0) 100%);
}

.ranch-title {
    text-align: left;
    color: var(--white);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 32px;
    line-height: 36px;
    font-weight: 500;
    word-wrap: normal;
}

.ranch-location {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--white);
}

.ranch-inner-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
}

.ranch-price {
    font-size: 24px;
    text-align: left; 
    color: var(--white);
    margin-bottom: 10px;
}

.ranch-acres {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.ranch-acres::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4.8949H15.8017V20.6966M20 16.4999H4.19829M4.19829 16.4999V0.698242M4.19829 16.4999L20 0.698242' stroke='white' stroke-width='1.97521' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 20px;
    height: 20px;
    display: block;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.tab-ranch-hover-content ul {
    list-style-position: inside;
    margin-left: 0;
    margin-bottom: 10px;
}

.ranch-categories-con {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 10px;
}



.tab-ranch-category {
    font-size: 12px;
    margin-bottom: 0px;
    font-weight: 500;
}

.tab-ranch-category a {
    color: var(--white);
}

.tab-ranch-category .ranch-category-icon-img {
max-width: 50px;
filter: brightness(0) invert(100%);
}

/*
ranch excerpt removed this can be removed if no longer needed. 
.ranch-content {
    color: #000;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 25px;
    text-align: center;
}*/

.ranch-link {
    margin-top: auto;
    width: 100%;
    text-align: center;
    background-color: var(--m4-bronze);
    text-transform: uppercase;
    font-size: 17px;
    line-height: 29px; 
    color: var(--white);
    padding: 7px 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranch-link:hover {
    color: var(--white);
}

.ranch-link::after {
    content: "";
    margin-left: 0px;
    opacity: 0;
    transition: 0.2s all ease-in-out;
    width: 10px;
    height: 17px;
    display: block;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%23fff' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
}

.ranch-link:hover.ranch-link::after {
    margin-left: 10px;
    opacity: 1;
}