/* =====================================================
   GHOST FEED NAVIGATION - EXACT MATCH
   ===================================================== */

/* Home button gets pill background */
.navigation-sidebar > ul > .nav-item:has(> .collapse) > .collapse-toggle {
    background-color: var(--color-background-200);
}

/* Collapse toggle chevron setup */
.navigation-sidebar .collapse-toggle {
    --collapse--icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L13 10L8 5" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --collapse--icon--rotate: 90deg;
    --collapse--icon--size: var(--navigation-sidebar--icon--size, 1.5rem);
    --collapse-open--icon--rotate: -90deg;
}

.navigation-sidebar .collapse-toggle > svg {
    transition: opacity 0.15s ease;
}

.navigation-sidebar .collapse-toggle::after {
    content: "";
    display: block;
    width: var(--collapse--icon--size);
    height: var(--collapse--icon--size);
    background-color: currentColor;
    mask-image: var(--collapse--icon);
    -webkit-mask-image: var(--collapse--icon);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    position: absolute;
    left: var(--navigation-sidebar--link--padding-h, 0.75rem);
    top: var(--navigation-sidebar--link--padding-v, 0.625rem);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.2s ease;
    transform: rotate(var(--collapse--icon--rotate));
}

.navigation-sidebar .collapse-toggle:focus-visible > svg,
.navigation-sidebar .collapse-toggle:hover > svg,
.navigation-sidebar .nav-item:hover > .collapse-toggle > svg {
    opacity: 0;
}

.navigation-sidebar .collapse-toggle:focus-visible::after,
.navigation-sidebar .collapse-toggle:hover::after,
.navigation-sidebar .nav-item:hover > .collapse-toggle::after {
    opacity: 1;
}

.navigation-sidebar .collapse-toggle[aria-expanded="true"]::after {
    transform: rotate(var(--collapse-open--icon--rotate));
}

/* Collapse container */
.navigation-sidebar .collapse {
    --navigation-sidebar--gap: var(--spacing-1, 0.125rem);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.navigation-sidebar .collapse.show {
    grid-template-rows: 1fr;
}

/* =====================================================
   CRITICAL FIX: Remove border-left from UL, use ::before
   ===================================================== */

/* Override the base CSS border-left on collapse > ul */
.navigation-sidebar .collapse > ul {
    display: flex;
    flex-direction: column;
    gap: var(--navigation-sidebar--gap);
    list-style: none;
    margin: 0;
    margin-left: 0 !important;
    padding: 0 0 0 calc(var(--navigation-sidebar--icon--size, 1.5rem) + var(--navigation-sidebar--link--gap, 0.75rem));
    position: relative;
    overflow: hidden;
    border-left: none !important; /* REMOVE the problematic border-left */
}

.navigation-sidebar .collapse > ul > li:first-child {
    padding-top: var(--spacing-2, 0.25rem);
}

/* =====================================================
   VERTICAL LINE - Using ::before like Ghost Feed
   ===================================================== */

.navigation-sidebar .collapse > ul::before {
    content: "";
    display: block;
    position: absolute;
    left: calc(var(--navigation-sidebar--link--padding-h, 0.75rem) + var(--navigation-sidebar--icon--size, 1.5rem) * 0.5);
    top: 0;
    bottom: var(--navigation-sidebar--link--padding-v, 0.625rem);
    width: 0;
    border-left: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

/* =====================================================
   ACTIVE/CURRENT NAV LINK - Pill background
   ===================================================== */

/* Sub-nav links (inside collapse) */
.navigation-sidebar .collapse > ul > .nav-item > .nav-link.nav-link-current {
    background-color: var(--color-background-200, #f5f5f5) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--color-contrast) !important;
}

/* Main nav links (Properties, Amenities, Location, Contact) */
.navigation-sidebar > ul > .nav-item > a.nav-link.nav-link-current {
    background-color: var(--color-background-200, #f5f5f5) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--color-contrast) !important;
}

/* Hover states */
.navigation-sidebar .collapse .nav-item .nav-link:hover,
.navigation-sidebar > ul > .nav-item > a.nav-link:hover {
    background-color: var(--color-background-200, #f5f5f5) !important;
}

/* =====================================================
   NAV SUBMENU - Expanded Style for Internal Pages
   ===================================================== */

.nav-item-expanded {
    margin-bottom: 0.5rem;
}

.nav-item-expanded .nav-label {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-foreground-300, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-left: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    margin-left: 1rem;
}

.nav-submenu li {
    margin: 0;
}

.nav-submenu .nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-foreground-200, #555);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-submenu .nav-link:hover {
    background-color: var(--color-background-200, #f5f5f5);
    color: var(--color-contrast, #000);
}

.nav-submenu .nav-link.nav-link-current {
    background-color: var(--color-background-200, #f5f5f5);
    font-weight: 500;
    color: var(--color-contrast, #000);
}

/* =====================================================
   BREADCRUMBS - SEO Optimized Navigation
   ===================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--color-foreground-300, #666);
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.breadcrumbs a {
    color: var(--color-foreground-200, #555);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs a:hover {
    color: var(--color-accent, #b79b6f);
    text-decoration: underline;
}

.breadcrumbs .separator {
    color: var(--color-foreground-400, #999);
    font-size: 0.7rem;
}

.breadcrumbs .current {
    color: var(--color-contrast, #000);
    font-weight: 500;
}

/* Home icon in breadcrumbs */
.breadcrumbs .home-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumbs .home-icon svg {
    width: 14px;
    height: 14px;
}

/* =====================================================
   WIDGET IMPROVEMENTS - Consistent Styling
   ===================================================== */

.widget {
    margin-bottom: 1.5rem;
}

.widget-title,
.widget-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-contrast, #000);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.widget-heading svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent, #b79b6f);
}

/* Widget TOC */
.widget-toc .toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-toc .toc-nav li {
    margin: 0;
}

.widget-toc .toc-nav a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--color-foreground-200, #555);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}

.widget-toc .toc-nav a:hover {
    background-color: var(--color-background-200, #f5f5f5);
    border-left-color: var(--color-accent, #b79b6f);
    color: var(--color-contrast, #000);
}

/* Widget Posts List */
.widget-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.widget-post-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--color-background-200, #f8f8f8);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.widget-post-item:hover {
    background: var(--color-background-300, #f0f0f0);
    transform: translateX(4px);
}

.widget-post-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-contrast, #000);
}

.widget-post-meta {
    font-size: 0.75rem;
    color: var(--color-foreground-300, #666);
}

/* Widget CTA */
.widget-cta .cta-card {
    padding: 1.25rem;
    background: var(--color-background-200, #f8f8f8);
    border-radius: 10px;
    text-align: center;
}

.widget-cta h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-contrast, #000);
}

.widget-cta p {
    font-size: 0.85rem;
    color: var(--color-foreground-200, #555);
    margin-bottom: 1rem;
}

.widget-cta .cta-disclaimer {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: var(--color-foreground-300, #666);
}

/* Lead Form Widget */
.widget-lead-form {
    background: var(--color-background-200, #f8f8f8);
    border-radius: 12px;
    padding: 1.25rem;
}

.widget-lead-form h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-contrast, #000);
}

.widget-lead-form .form-subtitle {
    font-size: 0.8rem;
    color: var(--color-foreground-300, #666);
    margin-bottom: 1rem;
}

.widget-lead-form form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.widget-lead-form input,
.widget-lead-form select,
.widget-lead-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--color-background, #fff);
    transition: border-color 0.15s ease;
}

.widget-lead-form input:focus,
.widget-lead-form select:focus,
.widget-lead-form textarea:focus {
    outline: none;
    border-color: var(--color-accent, #b79b6f);
}

.widget-lead-form button {
    padding: 0.875rem;
    background: linear-gradient(135deg, var(--color-accent, #b79b6f) 0%, #9a7f5a 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.widget-lead-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(183, 155, 111, 0.3);
}

.widget-lead-form .form-trust {
    font-size: 0.7rem;
    color: var(--color-foreground-300, #666);
    text-align: center;
    margin: 0.5rem 0 0;
}

/* Widget Contact */
.widget-contact-content {
    padding: 1rem;
    background: var(--color-background-200, #f8f8f8);
    border-radius: 10px;
}

.widget-contact-content p {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-foreground-200, #555);
}

.widget-contact-content a {
    color: var(--color-accent, #b79b6f);
    text-decoration: none;
}

.widget-contact-content a:hover {
    text-decoration: underline;
}

.widget-contact-content .rera-note {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    font-size: 0.75rem;
    color: var(--color-foreground-300, #666);
}