/**
 * Surreal Homes - Single Property Page Styles
 * 
 * Contains all custom CSS for single property pages
 * Extracted from: description.php, property-detail.php templates
 * 
 * Version: 1.0.0
 * Last Updated: 2025-11-08
 */

/* =============================================================================
   HIDE "UNDEFINED" TEXT IN DESCRIPTION
   Completely removes the unwanted "undefined" text element
============================================================================= */
div#nav-description p.more-property-description,
p.more-property-description,
.more-property-description {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Ensure real paragraphs display properly */
.tfre-property-info p {
    display: block !important;
}

/* =============================================================================
   PROPERTY TITLE AS H1
   Makes the main property title an H1 for proper SEO hierarchy
   Matches the size of the price on the right side
============================================================================= */
.single-property .entry-title,
.single-real-estate .entry-title,
.tfre-single-property-title h1,
.property-title h1,
.property-main-title,
h1.property-main-title,
h1.property-title-wrapper {
    /* Match the h4.property-price styling */
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    color: inherit;
}

/* Ensure consistent styling across all screen sizes */
.content-left h1.property-title-wrapper,
.content-left h1.property-main-title {
    display: block;
}

/* Mobile responsive sizing */
@media (max-width: 768px) {
    .property-main-title,
    h1.property-main-title,
    h1.property-title-wrapper {
        font-size: 1.5rem;
    }
}

/* =============================================================================
   DESCRIPTION HEADER STYLING
   Makes the h4 headers consistent across sections
============================================================================= */
#nav-description .tfre-property-header h4 {
    font-size: calc(1em + 2pt);
    line-height: 1.4;
    margin-bottom: 30px;
}

/* =============================================================================
   DESCRIPTION CONTENT STYLING
   Enhanced readability with proper spacing and sizing
============================================================================= */
#nav-description .tfre-property-info,
#nav-description .tfre-property-info p,
#nav-description .tfre-property-info ul,
#nav-description .tfre-property-info li {
    font-size: calc(1em + 2pt);
    line-height: 1.8;
    letter-spacing: 0.3px;
}

/* =============================================================================
   PROPERTY DETAIL SECTION STYLING
   Spacing and layout for property details section
============================================================================= */
#nav-property-detail .tfre-property-header {
    margin-bottom: 30px;
}

#nav-property-detail .tfre-property-header h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0 0 30px 0;
}

/* Prevent text wrapping in property detail labels */
#nav-property-detail .property-info-title {
    white-space: nowrap;
    margin-right: 8px;
}

/* Add spacing between label and value using flexbox */
#nav-property-detail .inner {
    display: flex;
    gap: 8px;
}

/* =============================================================================
   OVERVIEW/HIGHLIGHTS SECTION
   Spacing between header and highlights content
============================================================================= */
#nav-overview .tfre-property-header h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

#nav-overview .tfre-property-info {
    margin-top: 30px;
}

/* =============================================================================
   ZODDAK UNITS DROPDOWN SPACING
   Adds proper spacing below the units dropdown/accordion
============================================================================= */
.zoddak-acc,
div.zoddak-acc {
    margin-bottom: 60px !important;
}

/* =============================================================================
   BREADCRUMB STYLING
   Professional breadcrumb navigation styling
============================================================================= */
.surreal-breadcrumb {
    background: #f8f9fa;
    padding: 15px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.surreal-breadcrumb .breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding: 0;
    font-size: 14px;
}

.surreal-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 8px;
    color: #6c757d;
}

.surreal-breadcrumb .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
}

.surreal-breadcrumb .breadcrumb-item a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.surreal-breadcrumb .breadcrumb-item.active {
    color: #6c757d;
}