/* ── Tenant landlord landing page — header + hero fixes ─────────────────────── */

/* Sticky header bar (design_1 look) */
.tenancy-landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--gray-200, #eef0f3);
}
.tenancy-landing-header .container {
    max-width: 1200px;
}
.tenancy-landing-header a.text-dark:hover {
    color: var(--primary, #0170ff) !important;
}

/* ── Hero fixes ──────────────────────────────────────────────────────────────
   The shared full_width_hero component is built for a DARK background with
   white text and a fixed 1200px height. On the landlord's light landing that
   left the white text invisible and a huge empty gap. Scope overrides here. */

.full-width-hero-section {
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 64px !important;
    padding-top: 96px !important;
    padding-bottom: 24px !important;
}

/* Light-bg blob behind the hero — keep it subtle, don't force tall height */
.full-width-hero-section__bg-wrapper {
    opacity: 0.6;
}

/* Make hero text readable on the light background */
.full-width-hero-section h1.text-white span,
.full-width-hero-section .text-white {
    color: var(--secondary, #0e2145) !important;
}

/* Upper-CTA pill keeps its blue badge; its main_text sits outside the badge,
   so make that readable too */
.full-width-hero-section .border-primary .text-white {
    color: var(--primary, #0170ff) !important;
}
/* …but text INSIDE the solid blue badge stays white */
.full-width-hero-section .bg-primary .text-white {
    color: #fff !important;
}

/* Description slightly muted dark */
.full-width-hero-section p.text-white {
    color: var(--gray-500, #6b7280) !important;
    opacity: 1 !important;
}

/* Primary button label stays white (button has blue bg) */
.full-width-hero-section .btn-primary .btn-flip-effect__text,
.full-width-hero-section .btn-primary .text-white {
    color: #fff !important;
}

/* Secondary button text -> dark (transparent button on light bg) */
.full-width-hero-section a.btn:not(.btn-primary) .text-white {
    color: var(--secondary, #0e2145) !important;
}

/* Hero visual area: cap height when an image exists; collapse when empty. */
.full-width-hero-section__images-content {
    height: auto !important;
    max-height: 520px;
    overflow: hidden;
}
.full-width-hero-section__images-content img {
    max-height: 520px;
}