@import url("https://fonts.googleapis.com/css2?family=Droid+Serif:wght@400;700&family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&display=swap");

:root {
    /* ==========================================================================
       1. BRAND IDENTITY (UniqueHomes.com)
       Aligned with the live site's blue/slate palette.
       ========================================================================== */

    /* Primary brand blue (links, accents)
       Keep aligned with alloy-core fallback token defaults. */
    --brand-primary:     #445E6F;

    /* Deep slate used for headlines and high-contrast UI */
    --brand-secondary:   #1D3759;

    /* Darker action blue for hovers and buttons */
    --brand-accent:      #718797;

    /* Default body text */
    --brand-text:        #333333;


    /* ==========================================================================
       2. TYPOGRAPHY (Block Editor Sync)
       Matches the current UniqueHomes typography stack.
       ========================================================================== */

    /* Heading / serif display */
    --heading-font:      "Droid Serif", serif;
    --poppins-font:      "Lato", sans-serif;

    /* Body / UI sans */
    --body-font:         "Open Sans", sans-serif;
    --roboto-font:       "Open Sans", sans-serif;

    /* Tailwind Aliases */
    --font-heading:      var(--heading-font);
    --font-body:         var(--body-font);


    /* ==========================================================================
       3. SURFACE & BACKGROUNDS
       ========================================================================== */

    /* Pure white site background */
    --brand-background:  #FFFFFF;

    /* Light neutral for section separation */
    --color-surface:     #EAEEF2;


    /* ==========================================================================
       4. LAYOUT & GRID
       ========================================================================== */

    /* Standard content width on the live site */
    --container-content: 1200px;

    /* Form controls on the live site use a subtle radius */
    --radius-standard:   3px;


    /* ==========================================================================
       5. WORDPRESS SPACING PRESETS
       ========================================================================== */

    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;

    /* Flowbite token compatibility so defaults don't fall back to blue. */
    --color-primary: var(--brand-primary);
    --color-primary-500: var(--brand-primary);
    --color-primary-600: var(--brand-accent);
    --color-primary-700: var(--brand-accent);

}

body {
    background-color: var(--brand-background);
    color: var(--brand-text);
    font-family: var(--body-font);
}

a {
    color: var(--brand-primary);
}

a:hover,
a:focus {
    color: var(--brand-accent);
}

/* Shared button system: keep button sizing/typography uniform across templates. */
:root {
    --btn-height: 2.5rem;
    --btn-pad-x: 1rem;
    --btn-font-size: 0.9375rem;
    --btn-font-weight: 600;
    --btn-radius: 3px;
}

body .btn,
body .wp-block-button__link,
body input[type="submit"].btn,
body input[type="button"].btn,
body .wpl-contact-listing-btn .btn,
body .wpl_user_contact_container .btn {
    min-height: var(--btn-height);
    padding: 0.5rem var(--btn-pad-x);
    border-radius: var(--btn-radius);
    font-family: var(--body-font);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    letter-spacing: 0;
}

body .btn-primary,
body .button-primary,
body .wp-block-button__link,
body input[type="submit"].btn-primary,
body .wpl-contact-listing-btn .btn,
body .wpl_user_contact_container .btn-primary {
    background: var(--alloy-button-bg, var(--brand-primary));
    border: 1px solid var(--alloy-button-bg, var(--brand-primary));
    color: var(--alloy-button-text, #fff);
}

body .btn-primary:hover,
body .button-primary:hover,
body .wp-block-button__link:hover,
body input[type="submit"].btn-primary:hover,
body .wpl-contact-listing-btn .btn:hover,
body .wpl_user_contact_container .btn-primary:hover {
    background: var(--alloy-button-hover-bg, var(--brand-accent));
    border-color: var(--alloy-button-hover-bg, var(--brand-accent));
    color: var(--alloy-button-hover-text, #fff);
}

/* Header controls must keep their own sizing and shapes. */
#main-navigation .alloy-header-utility-search-toggle {
    min-height: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 9999px;
}

#main-navigation .alloy-header-utility-cta {
    min-height: var(--btn-height);
    padding: 0.5rem var(--btn-pad-x);
    border-radius: var(--btn-radius);
    background: var(--alloy-button-bg, var(--brand-primary)) !important;
    border: 1px solid var(--alloy-button-bg, var(--brand-primary)) !important;
    font-family: var(--body-font);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    color: #fff !important;
}

#main-navigation .alloy-header-utility-cta:hover,
#main-navigation .alloy-header-utility-cta:focus-visible {
    background: var(--alloy-button-hover-bg, var(--brand-accent)) !important;
    border-color: var(--alloy-button-hover-bg, var(--brand-accent)) !important;
    color: #fff !important;
}

#main-navigation .alloy-header-utility-cta:hover *,
#main-navigation .alloy-header-utility-cta:focus-visible * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Login polish */
body.login .forgetmenot + p,
body.login #nav {
    font-size: 0.8125rem;
}

body.login .wp-pwd .button.wp-hide-pw {
    right: 0.25rem;
}

/* WPL membership login: keep eye icon centered in password input row. */
.wpl_addon_membership_container #wpl_login_form .wpl-login-form-row {
    position: relative;
}

.wpl_addon_membership_container #wpl_login_form #wpl_login_password {
    padding-right: 2.5rem;
}

.wpl_addon_membership_container #wpl_login_form #wpl_show_password_btn {
    position: absolute;
    right: 1.4rem;
    top: 53%;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
}

/* Membership login: reduce "Lost Your Password?" size. */
.wpl_addon_membership_container #wpl_login_form .wpl-default-login .wpl-login-form-row a {
    font-size: 0.875rem;
}

/* WPL membership portal: normalize legacy sidebar/icon layout and spacing. */
body.wpl_addon_membership .wpl_addon_membership_container.wpl_dashboard,
body.wpl_addon_membership .wpl_addon_membership_container.wpl_membership_wrap {
    margin: 0 auto;
    border: 1px solid #d7dce1;
    background: #f7f8fa;
    font-family: var(--body-font) !important;
}

body.wpl_addon_membership .wpl_addon_membership_container.wpl_dashboard *,
body.wpl_addon_membership .wpl_addon_membership_container.wpl_membership_wrap * {
    font-family: inherit;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d7dce1;
    background: #eceff2;
    color: #2b3033;
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_header .administrator_link {
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 600;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_side2 {
    border-right: 1px solid #d7dce1;
    background: #fff;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li::before {
    display: none !important;
    content: none !important;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    color: #127eb8;
    font-family: var(--body-font);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.active > a,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.current-menu-item > a {
    background: #2aa8df !important;
    color: #fff !important;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:hover,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:focus-visible {
    background: #2197cb !important;
    color: #fff !important;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.active > a:hover,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.current-menu-item > a:hover,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.active > a:focus-visible,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li.current-menu-item > a:focus-visible {
    background: #1c89b8 !important;
    color: #fff !important;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:hover i,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:focus-visible i,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:hover [class*="icon-"],
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li > a:focus-visible [class*="icon-"] {
    color: #fff !important;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li a i,
body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li a [class*="icon-"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    min-width: 1.05rem;
    line-height: 1;
    font-size: 1rem;
}

body.wpl_addon_membership .wpl_addon_membership_container #wpl_dashboard_side2_container li a::before {
    position: static !important;
    margin: 0;
    line-height: 1;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_side1 {
    padding: 0.95rem;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_membership_activity_container {
    border: 1px solid #d7dce1;
    background: #fff;
    padding: 0.6rem;
}

body.wpl_addon_membership .wpl_addon_membership_container .wpl_activity_title {
    margin: 0 0 0.55rem;
    color: #2b3033;
    font-family: var(--body-font);
    font-size: 1.05rem;
    font-weight: 700;
}

@media (max-width: 960px) {
    body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_header {
        font-size: 1.6rem;
    }

    body.wpl_addon_membership .wpl_addon_membership_container .wpl_dashboard_side2 {
        border-right: 0;
        border-bottom: 1px solid #d7dce1;
    }
}

/* Legacy single-post cleanup: normalize old editor media/button output. */
body.uh-legacy-article-cleanup .entry-content {
    font-family: var(--body-font);
    color: var(--brand-text);
}

body.uh-legacy-article-cleanup .entry-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

body.uh-legacy-article-cleanup .entry-content figure {
    max-width: 100%;
    margin: 1.25rem 0;
}

body.uh-legacy-article-cleanup .entry-content figure img {
    width: 100%;
}

body.uh-legacy-article-cleanup .entry-content .wp-block-image,
body.uh-legacy-article-cleanup .entry-content .wp-caption {
    max-width: 100%;
}

body.uh-legacy-article-cleanup .entry-content a.alloy-legacy-article-button,
body.uh-legacy-article-cleanup .entry-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0.5rem var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid var(--alloy-button-bg, var(--brand-primary));
    background: var(--alloy-button-bg, var(--brand-primary));
    color: var(--alloy-button-text, #fff);
    font-family: var(--body-font);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    text-decoration: none;
}

body.uh-legacy-article-cleanup .entry-content a.alloy-legacy-article-button:hover,
body.uh-legacy-article-cleanup .entry-content .wp-block-button__link:hover {
    background: var(--alloy-button-hover-bg, var(--brand-accent));
    border-color: var(--alloy-button-hover-bg, var(--brand-accent));
    color: var(--alloy-button-hover-text, #fff);
}

body.uh-legacy-article-cleanup .entry-content .alloy-article-inline-byline {
    display: block;
    width: fit-content;
    margin: 0 auto 1.35rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #d9dee5;
    border-radius: 999px;
    background: #f7f9fb;
    color: #4b5563;
    font-family: var(--body-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* Alloy hero visual: full-width background with container-constrained inner content. */
.entry-content > .alloy-hero-visual,
.is-layout-constrained > .alloy-hero-visual {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* WPL + WPForms color normalization:
   prevent plugin default blues from leaking through when Alloy tokens are set. */
.wpl_loading.spinner {
    background: var(--brand-primary) !important;
    background-image: linear-gradient(
        var(--brand-primary) 50%,
        color-mix(in srgb, var(--brand-primary) 72%, #000 28%) 50%
    ),
    linear-gradient(
        color-mix(in srgb, var(--brand-primary) 50%, #000 50%) 50%,
        color-mix(in srgb, var(--brand-primary) 30%, #000 70%) 50%
    ) !important;
}

.wpl_listing_container a,
.wpl_agent_info a,
.wpl_profile_container a {
    color: var(--brand-primary) !important;
}

.wpl_listing_container a:hover,
.wpl_listing_container a:focus,
.wpl_agent_info a:hover,
.wpl_agent_info a:focus,
.wpl_profile_container a:hover,
.wpl_profile_container a:focus {
    color: var(--brand-accent) !important;
}

.wpforms-container-full .wpforms-form button[type="submit"],
.wpforms-container-full .wpforms-form input[type="submit"],
.wpforms-container-full .wpforms-form input[type="button"] {
    background: var(--alloy-button-bg, var(--brand-primary)) !important;
    border-color: var(--alloy-button-bg, var(--brand-primary)) !important;
    color: var(--alloy-button-text, #fff) !important;
}

.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.wpforms-container-full .wpforms-form button[type="submit"]:focus,
.wpforms-container-full .wpforms-form input[type="submit"]:hover,
.wpforms-container-full .wpforms-form input[type="submit"]:focus,
.wpforms-container-full .wpforms-form input[type="button"]:hover,
.wpforms-container-full .wpforms-form input[type="button"]:focus {
    background: var(--alloy-button-hover-bg, var(--brand-accent)) !important;
    border-color: var(--alloy-button-hover-bg, var(--brand-accent)) !important;
    color: var(--alloy-button-hover-text, #fff) !important;
}