/* =========================================================================
   Web Stark Custom Functions - public styles
   House & Land listing styled to match crystelehomes.com.au/house-land/
   ========================================================================= */

/* Centuma, copied from the Bricks child theme so light and bold weights
   are available under Divi. */
@font-face {
    font-family: "Centuma";
    src: url("fonts/Centuma.woff2") format("woff2"),
         url("fonts/Centuma.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Centuma";
    src: url("fonts/CENTUMALIGHT.woff2") format("woff2"),
         url("fonts/CENTUMALIGHT.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Centuma";
    src: url("fonts/CENTUMABOLD.woff2") format("woff2"),
         url("fonts/CENTUMABOLD.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Base ------------------------------------------------------------- */
.wscf-hl {
    --wscf-teal: #008083;
    --wscf-navy: #304056;
    --wscf-ink: #1a1a1a;
    --wscf-text: #363636;
    --wscf-grey: #f7f7f7;
    font-family: "Centuma", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: normal;
    color: var(--wscf-text);
}
.wscf-hl *,
.wscf-hl *::before,
.wscf-hl *::after {
    box-sizing: border-box;
}
/* Divi's `.et-l--body ul` adds disc bullets and 1em padding; beat it. */
.wscf-hl ul.wscf-hl-filter-list,
.wscf-hl ul.wscf-hl-meta,
.wscf-hl ul.wscf-hl-filter-list > li,
.wscf-hl ul.wscf-hl-meta > li {
    list-style: none;
}
.wscf-hl ul.wscf-hl-filter-list,
.wscf-hl ul.wscf-hl-meta {
    padding: 0;
}

/* ---- Filter block ----------------------------------------------------- */
.wscf-hl-filter {
    display: flex;
    flex-direction: column;
    row-gap: 21px;
    max-width: 1020px;
    margin: 0 auto;
    padding: 31px 30px 30px;
    background: var(--wscf-navy);
}
.wscf-hl .wscf-hl-filter-title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 32px;
    font-weight: 300;
    line-height: normal;
    text-align: center;
    text-transform: none;
}
.wscf-hl-filter-form {
    margin: 0;
}
.wscf-hl .wscf-hl-filter-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 2.67%;
    row-gap: 17px;
    margin: 15px 0;
    padding: 0;
}
.wscf-hl .wscf-hl-drop {
    position: relative;
    width: 31.5%;
    margin: 0 0 5px;
    padding: 0;
    background: #fff;
    line-height: normal;
}
.wscf-hl-drop fieldset {
    min-width: 0;
    margin: 0 2px;
    padding: 0;
    border: 0;
}
.wscf-hl-drop-label {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 15px 10px 15px 20px;
    color: var(--wscf-text);
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px auto;
}
.wscf-hl-drop-label::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 12.59px;
    height: 13.17px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.wscf-hl-drop--bed .wscf-hl-drop-label::before {
    width: 23px;
    height: 14px;
    background-image: url("images/bed-icon.svg");
}
.wscf-hl-drop--bath .wscf-hl-drop-label {
    padding-left: 22px;
}
.wscf-hl-drop--bath .wscf-hl-drop-label::before {
    background-image: url("images/bathtub.svg");
}
.wscf-hl-drop--car .wscf-hl-drop-label::before {
    width: 22px;
    height: 14px;
    background-image: url("images/cars-icon.svg");
}
.wscf-hl-drop--suburb .wscf-hl-drop-label::before {
    width: 13px;
    height: 18px;
    background-image: url("images/pin-icon1.svg");
}
.wscf-hl-drop--budget .wscf-hl-drop-label::before,
.wscf-hl-drop--type .wscf-hl-drop-label::before {
    width: 15px;
    height: 15px;
    background-image: url("images/money.svg");
}
.wscf-hl-drop-list {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 999;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px;
    background: #fff;
}
.wscf-hl-drop.is-open .wscf-hl-drop-list {
    display: flex;
}
.wscf-hl-drop-list label {
    display: inline-block;
    margin: 0 10px 15px 0;
    color: var(--wscf-text);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
}
.wscf-hl-drop-list input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0 4px 0 0;
    vertical-align: -1px;
    accent-color: var(--wscf-navy);
    cursor: pointer;
}
.wscf-hl-filter-submit {
    display: flex;
    justify-content: center;
}
.wscf-hl .wscf-hl-filter-submit input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 16px 62px 15px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--wscf-navy);
    font-family: inherit;
    font-size: 18.28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: normal;
    text-align: center;
    text-transform: none;
    cursor: pointer;
}

/* ---- Guide button ----------------------------------------------------- */
.wscf-hl-guide {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    padding: 0 20px;
}
.wscf-hl .wscf-hl-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 14px 40px;
    border: 2px solid var(--wscf-teal);
    border-radius: 10px;
    background: var(--wscf-teal);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wscf-hl .wscf-hl-guide-btn:hover {
    background: var(--wscf-navy);
    border-color: var(--wscf-navy);
    color: #fff;
}

/* ---- Sort box ---------------------------------------------------------- */
.wscf-hl-results {
    padding: 60px 0 0;
}
.wscf-hl-sort {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 47px;
    padding: 0 20px;
}
.wscf-hl .wscf-hl-sort-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 302px;
    max-width: 100%;
    margin: 0;
    padding: 16px 40px;
    border: 0;
    border-radius: 0;
    background-color: var(--wscf-grey);
    background-image:
        url("images/money.svg"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 14px center, right 16px center;
    background-size: 15px 15px, 20px 20px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: normal;
    cursor: pointer;
}
.wscf-hl .wscf-hl-sort-select:focus {
    outline: 0;
}

/* ---- Card grid -------------------------------------------------------- */
.wscf-hl-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.wscf-hl-card {
    width: 33.333%;
    margin: 0 0 40px;
    padding: 0 20px;
}
.wscf-hl-card-inner {
    height: 100%;
    background: #fff;
    border-bottom: 5px solid var(--wscf-teal);
}
.wscf-hl .wscf-hl-card-image {
    display: block;
    text-decoration: none;
}
.wscf-hl .wscf-hl-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 423 / 320;
    object-fit: cover;
}
.wscf-hl-card-body {
    padding: 12px 10px 30px;
}
.wscf-hl-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 95px;
    margin: 0 0 8px;
}
.wscf-hl .wscf-hl-card-title {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    color: var(--wscf-ink);
    font-family: inherit;
    font-size: 25.899px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}
.wscf-hl .wscf-hl-card-title a {
    color: inherit;
    text-decoration: none;
}
.wscf-hl .wscf-hl-card-title a:hover {
    color: var(--wscf-teal);
}
.wscf-hl-card-price {
    flex: 0 0 auto;
    width: auto;
    color: var(--wscf-teal);
    font-size: 25.899px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}
.wscf-hl .wscf-hl-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    color: var(--wscf-navy);
    font-size: 18.693px;
    line-height: 1;
}
.wscf-hl .wscf-hl-meta li {
    display: flex;
    align-items: center;
    margin: 0 15px 0 0;
    padding: 0;
    line-height: 1;
}
.wscf-hl .wscf-hl-meta li:last-child {
    margin-right: 0;
}
.wscf-hl-meta-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 22px;
}
.wscf-hl-meta-icon svg {
    display: block;
}
.wscf-hl-meta-val {
    margin-left: 6px;
    color: var(--wscf-ink);
    font-size: 17px;
    line-height: 17px;
}
.wscf-hl-empty {
    padding: 40px 0;
    text-align: center;
}

/* ---- Breakpoints (mirroring the Bricks child theme) ------------------- */
@media screen and (max-width: 1679px) {
    .wscf-hl .wscf-hl-card-title,
    .wscf-hl-card-price { font-size: 24.899px; }
}
@media screen and (max-width: 1580px) {
    .wscf-hl .wscf-hl-card-title,
    .wscf-hl-card-price { font-size: 23.899px; }
    .wscf-hl-card { margin-bottom: 35px; padding: 0 15px; }
    .wscf-hl-sort { padding: 0 15px; }
}
@media screen and (max-width: 1440px) {
    .wscf-hl .wscf-hl-card-title,
    .wscf-hl-card-price { font-size: 21.899px; }
}
@media screen and (max-width: 1350px) {
    .wscf-hl .wscf-hl-card-title,
    .wscf-hl-card-price { font-size: 20.899px; }
}
@media screen and (max-width: 1250px) {
    .wscf-hl .wscf-hl-card-title,
    .wscf-hl-card-price { font-size: 18.899px; }
    .wscf-hl .wscf-hl-meta { font-size: 16px; }
    .wscf-hl .wscf-hl-filter-list { column-gap: 2%; row-gap: 15px; }
}
@media screen and (max-width: 991px) {
    .wscf-hl-card { width: 49.9%; padding: 0 12px; }
    .wscf-hl-sort { padding: 0 12px; }
    .wscf-hl .wscf-hl-filter-submit input[type="submit"] { padding: 10px 25px; font-size: 16px; }
}
@media screen and (max-width: 767px) {
    .wscf-hl-results { padding-top: 40px; }
    .wscf-hl-sort { margin-bottom: 30px; }
    .wscf-hl .wscf-hl-sort-select { width: 250px; }
    .wscf-hl .wscf-hl-guide-btn { padding: 12px 24px; font-size: 15px; }
}
@media screen and (max-width: 680px) {
    .wscf-hl-card { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; padding: 0; }
    .wscf-hl-sort { padding: 0; justify-content: center; }
}
@media screen and (max-width: 600px) {
    .wscf-hl .wscf-hl-drop { width: 48.9%; }
}
@media screen and (max-width: 479px) {
    .wscf-hl-filter { padding: 25px 16px; }
    .wscf-hl .wscf-hl-filter-title { font-size: 26px; }
    .wscf-hl .wscf-hl-filter-list { row-gap: 5px; }
    .wscf-hl .wscf-hl-drop { width: 100%; }
}
@media screen and (max-width: 440px) {
    .wscf-hl .wscf-hl-drop { border: 2px solid var(--wscf-navy); }
}

/* ---- Legacy feature icons (used by the WooCommerce product shortcodes) - */
.wscf-home-design-features {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 8px 0;
}
.wscf-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    color: inherit;
}
.wscf-feature-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--gcid-primary-color, #c49a2a);
}
.wscf-feature-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* =========================================================================
   Shared intro band
   Used by the House & Land page for its heading and lead copy, and by the
   benefits block below the listing. Lives here rather than in
   homedesigns.css because that file only enqueues where the home designs
   shortcodes are, and this page carries the house & land one.
   Measurements taken from the live /house-land/ page.
   ====================================================================== */

.wscf-intro {
    font-family: "Centuma", Helvetica, Arial, sans-serif;
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
}

.wscf-intro h1,
.wscf-intro h2 {
    color: #304056;
    font-size: 48px;
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 19px;
    padding: 0;
    text-transform: none;
}

.wscf-intro h2 {
    font-size: 40px;
    line-height: 1.2;
}

.wscf-intro p {
    color: #304056;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.wscf-intro p + p {
    margin-top: 18px;
}

/* The benefits lead sits under a smaller heading, so it reads smaller too. */
.wscf-intro--sub p {
    font-size: 18px;
    line-height: 1.5;
}

/* Benefit items: icon left, copy right, matching live. */
.wscf-hl-benefit .et_pb_module_header {
    color: #304056;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    padding-bottom: 6px;
}

.wscf-hl-benefit .et_pb_blurb_description {
    color: #5a5b5d;
    font-size: 16px;
    line-height: 1.6;
}

@media screen and (max-width: 1250px) {
    .wscf-intro h1 { font-size: 40px; }
    .wscf-intro h2 { font-size: 34px; }
    .wscf-intro p  { font-size: 20px; }
    .wscf-intro--sub p { font-size: 17px; }
}

@media screen and (max-width: 767px) {
    .wscf-intro h1 { font-size: 32px; }
    .wscf-intro h2 { font-size: 28px; }
    .wscf-intro p  { font-size: 18px; }
    .wscf-intro--sub p { font-size: 16px; }
}

@media screen and (max-width: 478px) {
    .wscf-intro h1 { font-size: 28px; }
    .wscf-intro h2 { font-size: 26px; }
}

/* =========================================================================
   Display home tiles on the homepage
   -------------------------------------------------------------------------
   Live crops all four to project_thumb (453x340, hard crop) and our four image
   modules point at the same files. The ratio is held here as well, so swapping
   an image in the Visual Builder can't put the row back to mismatched heights.
   bands.css does the same thing for the display homes band.
   ========================================================================= */

.wscf-dh-tile .et_pb_image_wrap {
    display: block;
}

.wscf-dh-tile img {
    width: 100%;
    height: auto;
    aspect-ratio: 453 / 340;
    object-fit: cover;
    display: block;
}