/**
 * MFX Conditional Sticky Sidebar
 *
 * Compact card system for the secondary sidebar block on single posts and
 * single property pages. Styling intentionally mirrors the HVLR article-body
 * card system at a sidebar-width scale.
 *
 * Sticky containment: the block is rendered as a sibling of the standard
 * <aside>, inside .col-4.sidebar-content (posts) or .rh-ultra-property-sidebar
 * (properties). Those wrappers are tall enough for position:sticky to follow
 * the reader through the full article column.
 */

:root {
    --mfx-sb-navy: #0f1a2e;
    --mfx-sb-gold: #c9a84c;
    --mfx-sb-gold-soft: #d4b865;
    --mfx-sb-cream: #faf8f2;
    --mfx-sb-slate: #5a6578;
    --mfx-sb-text: #2d3243;
    --mfx-sb-white: #ffffff;
    --mfx-sb-border: #e0ddd5;
}

/* ---- Sticky wrapper -------------------------------------------------- */

.mfx-sidebar-sticky {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin-top: 32px;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mfx-sb-text);
    line-height: 1.5;
}

.mfx-sidebar-sticky::-webkit-scrollbar {
    width: 0;
    display: none;
}

@media (max-width: 1023px) {
    .mfx-sidebar-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-top: 24px;
    }
}

/* ---- Card frame ------------------------------------------------------ */

.mfx-sb-card {
    background: var(--mfx-sb-cream);
    border: 1px solid var(--mfx-sb-border);
    border-left: 3px solid var(--mfx-sb-gold);
    border-radius: 4px;
    padding: 18px 18px 20px;
    margin: 0;
    box-shadow: 0 2px 6px rgba(15, 26, 46, 0.04);
}

.mfx-sb-card + .mfx-sb-divider {
    margin-top: 24px;
}

.mfx-sb-divider + .mfx-sb-card {
    margin-top: 24px;
}

/* ---- Eyebrows and titles -------------------------------------------- */

.mfx-sb-eyebrow {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mfx-sb-gold);
}

.mfx-sb-card__title {
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mfx-sb-navy);
}

/* ---- Property card -------------------------------------------------- */

.mfx-sb-prop-card {
    padding: 0;
    overflow: hidden;
}

.mfx-sb-prop-card__media {
    display: block;
    line-height: 0;
    border-bottom: 1px solid var(--mfx-sb-border);
}

.mfx-sb-prop-card__media img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.mfx-sb-prop-card__body {
    padding: 16px 18px 20px;
}

.mfx-sb-prop-card__title {
    margin: 0 0 6px;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mfx-sb-navy);
}

.mfx-sb-prop-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mfx-sb-prop-card__title a:hover,
.mfx-sb-prop-card__title a:focus-visible {
    color: var(--mfx-sb-gold);
}

.mfx-sb-prop-card__specs {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--mfx-sb-slate);
    letter-spacing: 0.2px;
}

.mfx-sb-prop-card__context {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--mfx-sb-slate);
    font-style: italic;
}

.mfx-sb-prop-card__price {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mfx-sb-navy);
}

/* ---- Contact / booking ---------------------------------------------- */

.mfx-sb-contact-card,
.mfx-sb-booking-card {
    background: var(--mfx-sb-navy);
    color: var(--mfx-sb-cream);
    border-left-color: var(--mfx-sb-gold);
}

.mfx-sb-contact-card .mfx-sb-eyebrow,
.mfx-sb-booking-card .mfx-sb-card__title {
    color: var(--mfx-sb-gold);
}

.mfx-sb-booking-card .mfx-sb-card__title {
    font-size: 20px;
}

.mfx-sb-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--mfx-sb-gold);
    text-decoration: none;
}

.mfx-sb-phone:hover,
.mfx-sb-phone:focus-visible {
    color: var(--mfx-sb-gold-soft);
}

/* ---- Buttons -------------------------------------------------------- */

.mfx-sb-btn {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mfx-sb-btn--primary {
    background: var(--mfx-sb-white);
    color: var(--mfx-sb-navy);
    border-color: var(--mfx-sb-white);
}

.mfx-sb-prop-card .mfx-sb-btn--primary {
    background: var(--mfx-sb-navy);
    color: var(--mfx-sb-cream);
    border-color: var(--mfx-sb-navy);
}

.mfx-sb-btn--primary:hover,
.mfx-sb-btn--primary:focus-visible {
    background: var(--mfx-sb-gold);
    color: var(--mfx-sb-navy);
    border-color: var(--mfx-sb-gold);
}

.mfx-sb-prop-card .mfx-sb-btn--primary:hover,
.mfx-sb-prop-card .mfx-sb-btn--primary:focus-visible {
    background: var(--mfx-sb-gold);
    color: var(--mfx-sb-navy);
    border-color: var(--mfx-sb-gold);
}

.mfx-sb-btn--ghost {
    background: transparent;
    color: var(--mfx-sb-cream);
    border-color: rgba(250, 248, 242, 0.4);
}

.mfx-sb-btn--ghost:hover,
.mfx-sb-btn--ghost:focus-visible {
    color: var(--mfx-sb-gold);
    border-color: var(--mfx-sb-gold);
}

/* ---- Area highlights ------------------------------------------------ */

.mfx-sb-highlights__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfx-sb-highlights__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dotted var(--mfx-sb-border);
    font-size: 13px;
}

.mfx-sb-highlights__list li:last-child {
    border-bottom: 0;
}

.mfx-sb-highlights__label {
    color: var(--mfx-sb-text);
}

.mfx-sb-highlights__distance {
    color: var(--mfx-sb-slate);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    margin-left: 12px;
    white-space: nowrap;
}

/* ---- Related articles ----------------------------------------------- */

.mfx-sb-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfx-sb-related__list li {
    position: relative;
    padding: 4px 0 4px 16px;
    font-size: 13px;
    line-height: 1.4;
}

.mfx-sb-related__list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--mfx-sb-gold);
    font-size: 14px;
    line-height: 1.4;
}

.mfx-sb-related__list a {
    color: var(--mfx-sb-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mfx-sb-related__list a:hover,
.mfx-sb-related__list a:focus-visible {
    color: var(--mfx-sb-gold);
}

/* ---- Divider -------------------------------------------------------- */

.mfx-sb-divider {
    width: 40px;
    height: 0;
    margin: 24px auto;
    border: 0;
    border-top: 1px solid var(--mfx-sb-gold);
    opacity: 0.85;
}

/* ---- Trust badge ---------------------------------------------------- */

.mfx-sb-trust {
    margin: 16px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mfx-sb-gold);
    text-align: center;
}