/* Sapphire Estates: demo real estate agency on realty.sapphire-project.pro.
   Shell, brand theme and overrides of the generic RealEstate front styles (icds_front_realestate.css). */

:root {
    --rt-navy: #14284b;
    --rt-navy-deep: #0c1a33;
    --rt-brass: #b88a44;
    --rt-brass-soft: #f3e7d1;
    --rt-sand: #efe8dc;
    --rt-paper: #faf8f4;
    --rt-white: #ffffff;
    --rt-ink: #1b2433;
    --rt-muted: #5d6676;
    --rt-line: rgba(20, 40, 75, .12);
    --rt-shadow: 0 18px 50px rgba(12, 26, 51, .10);
    --rt-width: 1320px;
    color-scheme: light;
    overflow-x: clip;
    background: var(--rt-paper);
}

* {
    box-sizing: border-box;
}

body.realty-layout {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--rt-ink);
    background: var(--rt-paper);
    font: 400 1rem/1.6 "Manrope", system-ui, sans-serif;
}

.realty-skip {
    position: fixed;
    z-index: 1000;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--rt-white);
    background: var(--rt-navy);
    transform: translateY(-170%);
}

.realty-skip:focus {
    transform: none;
}

.realty-topline {
    position: relative;
    z-index: 100;
    min-height: 1px;
}

/* Header */
.realty-header {
    position: sticky;
    z-index: 90;
    inset-block-start: 0;
    border-block-end: 1px solid var(--rt-line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.realty-header__inner {
    display: grid;
    width: min(var(--rt-width), calc(100% - 40px));
    min-height: 78px;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    margin-inline: auto;
}

.realty-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--rt-navy);
    text-decoration: none;
}

.realty-brand__mark {
    display: block;
    width: 44px;
    height: 44px;
}

.realty-brand span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.realty-brand strong {
    font: 600 1.22rem "Fraunces", Georgia, serif;
    letter-spacing: -.01em;
}

.realty-brand small {
    color: var(--rt-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.realty-header__menu {
    min-width: 0;
}

/* Cascade menu inside the header */
.realty-layout .top-nav.sapphire-engine-menu {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (min-width: 901px) {
    .realty-layout .top-nav .cascade-menu__list {
        display: flex;
        gap: 4px;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

/* Phones and tablets: Cascade's own dropdown, recoloured for the light agency theme. */
.realty-layout .cascade-menu {
    --cascade-panel: #ffffff;
    --cascade-border: rgba(20, 40, 75, .14);
    --cascade-panel-hover: rgba(20, 40, 75, .06);
    color: var(--rt-navy);
}

@media (max-width: 900px) {
    .realty-layout .top-nav.sapphire-engine-menu { justify-content: flex-end; position: relative; }
    .realty-layout .cascade-menu__toggle { color: var(--rt-navy); border: 1px solid var(--rt-line); background: var(--rt-white); }
    .realty-layout .cascade-menu--primary > .cascade-menu__list { box-shadow: var(--rt-shadow); }
    .realty-layout .top-nav :is(.cascade-menu__link, .cascade-menu__trigger) { width: 100%; justify-content: flex-start; border-radius: 10px; }
}

.realty-layout .top-nav :is(.cascade-menu__link, .cascade-menu__trigger) {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    color: var(--rt-ink);
    background: transparent;
    font: 700 .88rem "Manrope", sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.realty-layout .top-nav :is(.cascade-menu__link, .cascade-menu__trigger):hover,
.realty-layout .top-nav :is(.cascade-menu__link, .cascade-menu__trigger):focus-visible {
    color: var(--rt-navy);
    background: var(--rt-sand);
}

.realty-layout .top-nav .cascade-menu__item.is-active > :is(.cascade-menu__link, .cascade-menu__trigger) {
    color: var(--rt-white);
    background: var(--rt-navy);
}

.realty-layout .top-nav .cascade-menu__submenu {
    border: 1px solid var(--rt-line);
    border-radius: 14px;
    background: var(--rt-white);
    box-shadow: var(--rt-shadow);
}

/* Language, currency and account */
.realty-header__account {
    display: flex;
    gap: 10px;
    align-items: center;
}

.realty-layout .header-settings__cluster {
    display: flex;
    gap: 8px;
    align-items: center;
}

.realty-layout .setting-card {
    display: grid;
    gap: 2px;
    color: var(--rt-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.realty-layout .setting-card__select {
    min-width: 92px;
    min-height: 38px;
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--rt-line);
    border-radius: 10px;
    color: var(--rt-ink);
    background: var(--rt-white);
    font: 700 .8rem "Manrope", sans-serif;
}

.realty-layout .helixid-widget,
.realty-layout .helixid-widget__menu {
    position: relative;
}

.realty-layout :is(.helixid-widget__summary, .helixid-widget__signin) {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--rt-navy);
    border-radius: 999px;
    color: var(--rt-white);
    background: var(--rt-navy);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
}

.realty-layout .helixid-widget__summary::-webkit-details-marker {
    display: none;
}

.realty-layout .helixid-widget__summary::after {
    content: "\25BE";
}

.realty-layout .helixid-widget__panel {
    position: absolute;
    inset: calc(100% + 8px) 0 auto auto;
    z-index: 130;
    display: grid;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--rt-line);
    border-radius: 14px;
    background: var(--rt-white);
    box-shadow: var(--rt-shadow);
}

.realty-layout .helixid-widget__panel small {
    padding: 6px 9px;
    color: var(--rt-muted);
}

.realty-layout .helixid-widget__action {
    padding: 9px;
    border-radius: 9px;
    color: var(--rt-ink);
    text-decoration: none;
}

.realty-layout .helixid-widget__action:hover,
.realty-layout .helixid-widget__action:focus-visible {
    background: var(--rt-sand);
}

/* Breadcrumbs */
.realty-layout .sapphire-breadcrumb {
    width: min(var(--rt-width), calc(100% - 40px));
    margin: 18px auto 0;
}

.realty-layout .sapphire-breadcrumb__inner {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: .82rem;
}

.realty-layout .sapphire-breadcrumb__item {
    color: var(--rt-muted);
    text-decoration: none;
}

.realty-layout .sapphire-breadcrumb__item:hover {
    color: var(--rt-navy);
}

.realty-layout .sapphire-breadcrumb__current {
    color: var(--rt-ink);
    font-weight: 700;
}

.realty-layout .sapphire-breadcrumb__separator {
    color: #9aa2b1;
}

/* Main content */
.realty-main {
    min-height: calc(100vh - 260px);
}

.realty-content__block + .realty-content__block {
    margin-block-start: 8px;
}

.realty-empty {
    display: none;
    width: min(760px, calc(100% - 40px));
    margin: clamp(48px, 10vw, 120px) auto;
    text-align: center;
}

.realty-content:not(:has(.realty-content__block)) .realty-empty {
    display: block;
}

.realty-empty__mark {
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 20px;
    color: var(--rt-brass);
    background: var(--rt-brass-soft);
    font-size: 1.6rem;
}

.realty-empty h1 {
    margin: 18px 0 8px;
    color: var(--rt-navy);
    font: 600 clamp(1.8rem, 4vw, 2.6rem) "Fraunces", Georgia, serif;
}

.realty-empty p {
    color: var(--rt-muted);
}

/* Brand theme over the generic real-estate styles */
.realty-layout .real-estate-v2 {
    --re-ink: #1b2433;
    --re-ink-soft: #586173;
    --re-evergreen: #1d3a6b;
    --re-evergreen-deep: #12274a;
    --re-copper: #b88a44;
    --re-sand: #efe8dc;
    --re-paper: #faf8f4;
    --re-white: #ffffff;
    --re-line: rgba(20, 40, 75, .13);
    --re-shadow: 0 24px 70px rgba(12, 26, 51, .12);
    max-width: var(--rt-width);
}

.realty-layout .real-estate-v2 :is(h1, h2, h3) {
    font-family: "Fraunces", Georgia, serif;
}

.realty-layout .real-estate-v2 :focus-visible {
    outline-color: var(--rt-brass);
}

.realty-layout .real-estate-v2__hero {
    background:
        radial-gradient(circle at 86% 5%, rgba(214, 170, 96, .26), transparent 25rem),
        linear-gradient(128deg, #0c1a33, #14284b 62%, #24426f);
}

.realty-layout .real-estate-v2__hero--home {
    min-height: clamp(420px, 56vh, 640px);
    background:
        linear-gradient(100deg, rgba(9, 19, 38, .88) 0%, rgba(12, 26, 51, .66) 48%, rgba(12, 26, 51, .12) 100%),
        url("/assets/realty/img/realty-hero-1600.webp") center / cover no-repeat;
}

.realty-layout .real-estate-v2__hero--home .real-estate-v2__hero-art {
    display: none;
}

@media (min-width: 1700px) {
    .realty-layout .real-estate-v2__hero--home {
        background:
            linear-gradient(100deg, rgba(9, 19, 38, .88) 0%, rgba(12, 26, 51, .66) 48%, rgba(12, 26, 51, .12) 100%),
            url("/assets/realty/img/realty-hero-2400.webp") center / cover no-repeat;
    }
}

/* Footer */
.realty-footer {
    margin-block-start: clamp(40px, 6vw, 80px);
    color: #c9d2e3;
    background: var(--rt-navy-deep);
}

.realty-footer__inner {
    display: grid;
    width: min(var(--rt-width), calc(100% - 40px));
    gap: 18px;
    margin-inline: auto;
    padding-block: 40px 24px;
}

.realty-footer__brand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.realty-footer__brand strong {
    color: var(--rt-white);
    font: 600 1.15rem "Fraunces", Georgia, serif;
}

.realty-footer__brand p {
    max-width: 640px;
    margin: 4px 0 0;
    font-size: .9rem;
}

.realty-footer__demo {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    font-size: .84rem;
}

.realty-footer__demo a {
    color: #e9c98a;
    font-weight: 700;
}

.realty-footer .sapphire-platform-credits {
    margin: 0;
    color: #8291ab;
    font-size: .68rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .realty-header {
        position: relative;
    }

    .realty-header__inner {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding-block: 12px;
    }

    .realty-header__menu {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .realty-layout .top-nav.sapphire-engine-menu {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .realty-header__inner,
    .realty-footer__inner,
    .realty-layout .sapphire-breadcrumb {
        width: calc(100% - 28px);
    }

    .realty-header__inner {
        grid-template-columns: 1fr;
    }

    .realty-header__account,
    .realty-layout .header-settings__cluster {
        width: 100%;
    }

    .realty-layout .header-settings__cluster {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .realty-layout .setting-card__select {
        width: 100%;
        min-width: 0;
    }

    .realty-layout .real-estate-v2__hero--home {
        background:
            linear-gradient(180deg, rgba(9, 19, 38, .55) 0%, rgba(12, 26, 51, .92) 70%),
            url("/assets/realty/img/realty-hero-1000.webp") center / cover no-repeat;
    }
}

/* 404 page: shown by the shell when the kernel marks the route unavailable. */
.realty-not-found { display: block; }
.realty-not-found .realty-empty__mark { font: 700 1.1rem "Manrope", sans-serif; }
.realty-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; color: var(--rt-white); background: var(--rt-navy); font-weight: 700; text-decoration: none; }
.realty-button:hover, .realty-button:focus-visible { background: var(--rt-navy-deep); }

/* Buttons rendered as links: '.real-estate-v2 a { color: inherit }' outranks the button variants, so restate them. */
.realty-layout .real-estate-v2 a.real-estate-button--light { color: var(--re-evergreen-deep); }
.realty-layout .real-estate-v2 a.real-estate-button--primary,
.realty-layout .real-estate-v2 a.real-estate-button--reserve { color: #fff; }
.realty-layout .real-estate-v2 a.real-estate-button--quiet { color: var(--re-evergreen); }