/* ========================================
   HOMES.COM MARKETING DESIGN SYSTEM
   Typography, Color, Cards, Radius
======================================== */

:root {
    /* Font Families */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;

    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;

    /* Primary Colors */
    --color-hdc-orange: #FF850F;
    --color-rust: #EB7100;
    --color-dark-rust: #E66100;
    --color-black: #000000;
    --color-white: #FFFFFF;

    /* Neutral Colors */
    --color-slate-900: #1D1D20;
    --color-slate-800: #2B2B31;
    --color-slate-700: #49494F;
    --color-slate-650: #6F7078;
    --color-slate-600: #858993;
    --color-slate-500: #9FA2AD;
    --color-slate-400: #C6C9D2;
    --color-slate-300: #E0E3EB;
    --color-slate-200: #ECEEF4;
    --color-slate-100: #F4F5F9;
    --color-slate-50: #F7F7F9;

    /* Typography Line Heights */
    --lh-heading: 1.1;
    --lh-body: 1.5;
    --lh-meta: 1.3;
    --lh-button: 1.2;

    /* Letter Spacing */
    --ls-eyebrow: 0.07em;
    --ls-meta: 0.04em;
    --ls-text-xs: 0.02em;
    --ls-button: 0.01em;

    /* Radius */
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 4px;

    /* Borders */
    --border-card: 1px solid var(--color-slate-300);

    /* Shadows */
    --shadow-card-1: 0 4px 14px rgba(0, 0, 0, 0.01);
    --shadow-card-2: 0 12px 16px rgba(0, 0, 0, 0.02);
    --shadow-card: var(--shadow-card-1), var(--shadow-card-2);

    /* Layout */
    --max-width: 1440px;

    /* Section Padding */
    --sp-horizontal: 32px;
    --sp-l: 128px;
    --sp-m: 96px;
    --sp-s: 80px;

    /* Card Padding */
    --cp-l: 48px;
    --cp-m: 32px;
    --cp-sm: 24px;
    --cp-s: 16px;
    --cp-xs: 8px;

    /* Gaps */
    --g-xl: 64px;
    --g-l: 48px;
    --g-m: 32px;
    --g-s: 24px;
    --g-xs: 20px;
    --g-xxs: 16px;

    /* Container Width  */
    --container-xl: 954px;
    --container-l: 624px;
    --container-m: 405.33px;
    --container-s: 296px;

}

@media (max-width: 767px) {
    :root {
        /* Section Padding */
        --sp-horizontal: 24px;
        --sp-l: 80px;
        --sp-m: 64px;
        --sp-s: 48px;

        /* Card Padding */
        --cp-l: 48px;
        --cp-m: 24px;
        --cp-s: 16px;
        --cp-xs: 8px;

        /* Gaps */
        --g-xl: 64px;
        --g-l: 48px;
        --g-m: 32px;
        --g-s: 24px;
        --g-xs: 20px;
        --g-xxs: 16px;

        /* Container Width  */
        --container-xl: 327px;
        --container-l: 327px;
        --container-m: 327px;
        --container-s: 155.5px;

        --max-width: 100%;
    }
}

/* ========================================
   BASE
======================================== */

body {
    font-family: var(--font-body);
    font-weight: var(--font-light);
    color: var(--color-slate-900);
    background-color: var(--color-white);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* ========================================
   TYPOGRAPHY: EYEBROW
======================================== */

.eyebrow {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    /* font-size: 0.75rem;
    /* 12px */
    font-weight: var(--font-regular);
    line-height: var(--lh-button);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-slate-650);
    margin: 0;
}

@media (max-width: 767px) {
    .eyebrow {
        font-size: 0.875rem;
    }
}

/* ========================================
   TYPOGRAPHY: HEADINGS
======================================== */

.h-xxl,
.heading-xxl {
    font-size: 4.5rem;
    /* 72px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-xl,
.heading-xl {
    font-size: 4rem;
    /* 64px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-lg,
.heading-lg {
    font-size: 3.25rem;
    /* 52px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-md,
.heading-md {
    font-size: 3rem;
    /* 48px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-sm,
.heading-sm {
    font-size: 2.5rem;
    /* 40px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-xs,
.heading-xs {
    font-size: 2rem;
    /* 32px */
    line-height: var(--lh-heading);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

.h-xxs,
.heading-xxs {
    font-size: 1.5rem;
    /* 24px */
    line-height: var(--lh-meta);
    font-weight: var(--font-regular);
    margin-bottom: 0;
}

@media (max-width: 767px) {

    .h-xxl,
    .heading-xxl {
        font-size: 3.25rem;
    }

    /* 48px */

    .h-xl,
    .heading-xl {
        font-size: 3rem;
    }

    /* 40px */

    .h-lg,
    .heading-lg {
        font-size: 2.5rem;
    }

    /* 32px */

    .h-md,
    .heading-md {
        font-size: 2rem;
    }

    /* 28px */

    .h-sm,
    .heading-sm {
        font-size: 1.75rem;
    }

    /* 22px */

    .h-xs,
    .heading-xs {
        font-size: 1.375rem;
    }

    /* 20px */

    .h-xxs,
    .heading-xxs {
        font-size: 1.25rem;
    }

    /* 12px */
}

/* ========================================
   TYPOGRAPHY: META TITLE
======================================== */

.meta-title {
    font-size: 0.75rem;
    /* 12px */
    line-height: var(--lh-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
    font-weight: var(--font-regular);
    color: var(--color-slate-650);
}

/* ========================================
   TYPOGRAPHY: FORM SUB TEXT
======================================== */

.form-sub-copy {
    color: var(--color-slate-900);
    font-size: 14px;
    font-weight: 300;
    line-height: 150%; /* 21px */
}

.form-sub-copy strong {
    font-weight: 700;

}

/* ========================================
   TYPOGRAPHY: BODY TEXT
======================================== */

.text-xxl {
    font-size: 2rem;
    /* 32px */
    line-height: var(--lh-body);
    margin-bottom: 0;
}

.text-xl {
    font-size: 1.5rem;
    /* 24px */
    line-height: var(--lh-body);
    margin-bottom: 0;

}

.text-lg {
    font-size: 1.25rem;
    /* 20px */
    line-height: var(--lh-body);
    margin-bottom: 0;
}

.text-md,
.text-base {
    font-size: 1.125rem;
    /* 18px */
    line-height: var(--lh-body);
    margin-bottom: 0;
}

.text-reg {
    font-size: 1rem;
    /* 16px */
    line-height: var(--lh-body);
    margin-bottom: 0;
}

.text-sm {
    font-size: 0.875rem;
    /* 14px */
    line-height: var(--lh-body);
    margin-bottom: 0;
}

.text-xs {
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.4;
    letter-spacing: var(--ls-text-xs);
}

@media (max-width: 767px) {
    .text-xxl {
        font-size: 1.5rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    /* 20px */
    .text-lg {
        font-size: 1.125rem;
    }

    /* 18px */
    .text-md,
    .text-base {
        font-size: 1rem;
    }

    /* 16px */
    .text-sm {
        font-size: 0.875rem;
    }

    /* 14px */
    .text-xs {
        font-size: 0.75rem;
    }

    /* 12px */
}

/* Body text weights */
.text-light {
    font-weight: var(--font-light);
}

.text-regular {
    font-weight: var(--font-regular);
}

.text-medium {
    font-weight: var(--font-medium);
}

.text-tight {
    line-height: 1.4;
}

/* Utility font weights */
.font-light {
    font-weight: var(--font-light);
}

.font-regular {
    font-weight: var(--font-regular);
}

.font-medium {
    font-weight: var(--font-medium);
}

/* ========================================
   BUTTONS
======================================== */

.btn,
.button {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--font-medium);
    line-height: var(--lh-button);
    letter-spacing: var(--ls-button);
}

.btn,
.button {
    display: inline-flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;

}

.btn-primary,
.button-primary {
    color: var(--color-white);
    background-color: var(--color-rust);
    border-radius: var(--radius-sm);

    a {
        color: var(--color-white);
    }
}

.btn-secondary,
.button-secondary {
    color: var(--color-rust);
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-rust);
    padding: 10.5px 18.5px;
    margin: 0;


    a {
        color: var(--color-rust);
    }
}

@media (max-width: 767px) {

    .btn-primary,
    .button-primary,
    .btn-secondary,
    .button-secondary {
        align-self: stretch;
    }

    .btn-primary,
    .button-primary {
        width: 100%;
    }
}

.btn-primary:hover,
.button-primary:hover {
    background-color: var(--color-dark-rust);
}

.btn-secondary:hover,
.button-secondary:hover {
    background-color: var(--color-rust);
    color: var(--color-white);

    a {
        color: var(--color-white);
    }
}

.btn-text,
.button-text {
    border-bottom: 1.5px solid var(--color-rust);
    padding: 0.75rem 0;
    border-radius: 0;
    text-decoration: none;
    margin: 0;
    align-self: flex-start;

    a {
        color: var(--color-slate-900);
        text-decoration: none;
        gap: 0.5rem;
        display: inline-flex;
        align-items: center;
    }
}

.btn-text:hover,
.button-text:hover {
    border-bottom: 1.5px solid var(--color-rust);
}


.button-text a::after {
    background-image: url('/solutions/themes/custom/themekit/dist/assets/images/svg/ss20-right-arrow-slate.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 6px;
    height: 10px;
    content: "";
    align-content: center;
    margin-top: 4px;
}

.button-content {
    display: flex;
    flex-direction: row;
    gap: var(--g-s)
}

@media (max-width: 767px) {
    .button-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--g-xxs);
        align-self: stretch;
    }
}

/* ========================================
   TAB
======================================== */

.tab-child a {
    color: var(--color-slate-650);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
}

.tab-child .is-active{
    color: var(--color-rust);
}

/* ========================================
   COLOR UTILITIES
======================================== */

.color-hdc-orange {
    color: var(--color-hdc-orange);
}

.color-rust {
    color: var(--color-rust);
}

.color-black {
    color: var(--color-black);
}

.color-white {
    color: var(--color-white);
}

.color-slate-900 {
    color: var(--color-slate-900);
}

.color-slate-800 {
    color: var(--color-slate-800);
}

.color-slate-700 {
    color: var(--color-slate-700);
}

.color-slate-650 {
    color: var(--color-slate-650);
}

.color-slate-600 {
    color: var(--color-slate-600);
}

.color-slate-500 {
    color: var(--color-slate-500);
}

.color-slate-400 {
    color: var(--color-slate-400);
}

.color-slate-300 {
    color: var(--color-slate-300);
}

.color-slate-200 {
    color: var(--color-slate-200);
}

.color-slate-100 {
    color: var(--color-slate-100);
}

.color-slate-50 {
    color: var(--color-slate-50);
}

.bg-hdc-orange {
    background-color: var(--color-hdc-orange);
}

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

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

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

.bg-slate-900 {
    background-color: var(--color-slate-900);
}

.bg-slate-800 {
    background-color: var(--color-slate-800);
}

.bg-slate-700 {
    background-color: var(--color-slate-700);
}

.bg-slate-650 {
    background-color: var(--color-slate-650);
}

.bg-slate-600 {
    background-color: var(--color-slate-600);
}

.bg-slate-500 {
    background-color: var(--color-slate-500);
}

.bg-slate-400 {
    background-color: var(--color-slate-400);
}

.bg-slate-300 {
    background-color: var(--color-slate-300);
}

.bg-slate-200 {
    background-color: var(--color-slate-200);
}

.bg-slate-100 {
    background-color: var(--color-slate-100);
}

.bg-slate-50,
.bg-color-alt {
    background-color: var(--color-slate-50);
}

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

/* ========================================
   CARDS
======================================== */

.card {
    background-color: var(--color-white);
    outline: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card-flat {
    background-color: var(--color-white);
    outline: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.card-shadow-1 {
    box-shadow: var(--shadow-card-1);
}

.card-shadow-2 {
    box-shadow: var(--shadow-card-2);
}

.card-shadow-combined {
    box-shadow: var(--shadow-card);
}

.card-border {
    border: var(--border-card);
}

/* Optional card inner layout */
.card-content {
    padding: 1.5rem;
}

/* ========================================
   RADIUS UTILITIES
======================================== */

.radius-lg,
.rounded-lg {
    border-radius: var(--radius-lg);
}

.radius-md,
.rounded-md {
    border-radius: var(--radius-md);
}

.radius-sm,
.rounded-sm {
    border-radius: var(--radius-sm);
}

/* According to the design guide:
   Large radius: 12px, for 1 or 2 column elements
   Medium radius: 8px, for 3 or 4 column elements
   Small radius: 4px, for buttons, tags, and small UI elements
*/

.card-1-col,
.card-2-col {
    border-radius: var(--radius-lg);
}

.card-3-col,
.card-4-col {
    border-radius: var(--radius-md);
}

.tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    color: var(--color-slate-700);
    background-color: var(--color-slate-100);
    font-size: 0.75rem;
    line-height: 1.2;
}