/* Eclipse Property Investments Theme Styles */

/* WordPress Admin Bar Compatibility */
body.admin-bar header.sticky {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.sticky {
        top: 46px !important;
    }
}

/* Base Fonts & Selection */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: #0f172a;
    background-color: #fbfbf9;
}

.font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

.font-cinzel {
    font-family: 'Cinzel', Georgia, serif;
}

/* Hero Theme Styling */
.hero-section {
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.hero-section.theme-dark {
    background-color: #020617;
    border-bottom: 1px solid #1e293b;
    color: #f8fafc;
}

.hero-section.theme-light {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}

.hero-section.theme-dark .hero-heading {
    color: #ffffff;
}

.hero-section.theme-light .hero-heading {
    color: #020617;
}

.hero-section.theme-dark .hero-sub {
    color: #94a3b8;
}

.hero-section.theme-light .hero-sub {
    color: #475569;
}

.hero-section.theme-dark .hero-trust-bar {
    background-color: rgba(2, 6, 23, 0.95);
    border-top: 1px solid rgba(30, 41, 59, 0.8);
}

.hero-section.theme-light .hero-trust-bar {
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
}

/* Modal Transition */
.eclipse-modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.eclipse-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.eclipse-modal-overlay .eclipse-modal-card {
    transform: scale(0.96) translateY(10px);
    transition: transform 0.25s ease;
}

.eclipse-modal-overlay.is-active .eclipse-modal-card {
    transform: scale(1) translateY(0);
}

/* FAQ Accordion */
.faq-accordion-item details summary::-webkit-details-marker {
    display: none;
}
.faq-accordion-item details summary {
    list-style: none;
    cursor: pointer;
}
.faq-accordion-item details[open] summary svg.faq-chevron {
    transform: rotate(180deg);
}

/* Aspect Ratios & Visuals */
.aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}
.aspect-16-10 {
    aspect-ratio: 16 / 10;
}

/* Badge Gradients */
.badge-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #d97706;
}

/* Form Styles */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* ==========================================================================
   Grid & Layout Utility Fallbacks (Guarantees layout across all viewports)
   ========================================================================== */
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}
.col-span-1  { grid-column: span 1 / span 1 !important; }
.col-span-2  { grid-column: span 2 / span 2 !important; }
.col-span-3  { grid-column: span 3 / span 3 !important; }
.col-span-4  { grid-column: span 4 / span 4 !important; }
.col-span-5  { grid-column: span 5 / span 5 !important; }
.col-span-6  { grid-column: span 6 / span 6 !important; }
.col-span-7  { grid-column: span 7 / span 7 !important; }
.col-span-8  { grid-column: span 8 / span 8 !important; }
.col-span-9  { grid-column: span 9 / span 9 !important; }
.col-span-10 { grid-column: span 10 / span 10 !important; }
.col-span-11 { grid-column: span 11 / span 11 !important; }
.col-span-12 { grid-column: span 12 / span 12 !important; }

@media (min-width: 640px) {
    .sm\:col-span-1 { grid-column: span 1 / span 1 !important; }
    .sm\:col-span-2 { grid-column: span 2 / span 2 !important; }
    .sm\:col-span-3 { grid-column: span 3 / span 3 !important; }
    .sm\:col-span-4 { grid-column: span 4 / span 4 !important; }
    .sm\:col-span-6 { grid-column: span 6 / span 6 !important; }
    .sm\:col-span-12 { grid-column: span 12 / span 12 !important; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1 / span 1 !important; }
    .md\:col-span-2 { grid-column: span 2 / span 2 !important; }
    .md\:col-span-3 { grid-column: span 3 / span 3 !important; }
    .md\:col-span-4 { grid-column: span 4 / span 4 !important; }
    .md\:col-span-6 { grid-column: span 6 / span 6 !important; }
    .md\:col-span-8 { grid-column: span 8 / span 8 !important; }
    .md\:col-span-12 { grid-column: span 12 / span 12 !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    .lg\:col-span-1  { grid-column: span 1 / span 1 !important; }
    .lg\:col-span-2  { grid-column: span 2 / span 2 !important; }
    .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
    .lg\:col-span-4  { grid-column: span 4 / span 4 !important; }
    .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
    .lg\:col-span-6  { grid-column: span 6 / span 6 !important; }
    .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
    .lg\:col-span-8  { grid-column: span 8 / span 8 !important; }
    .lg\:col-span-9  { grid-column: span 9 / span 9 !important; }
    .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
    .lg\:col-span-11 { grid-column: span 11 / span 11 !important; }
    .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 1280px) {
    .xl\:col-span-1  { grid-column: span 1 / span 1 !important; }
    .xl\:col-span-2  { grid-column: span 2 / span 2 !important; }
    .xl\:col-span-3  { grid-column: span 3 / span 3 !important; }
    .xl\:col-span-4  { grid-column: span 4 / span 4 !important; }
    .xl\:col-span-8  { grid-column: span 8 / span 8 !important; }
    .xl\:col-span-9  { grid-column: span 9 / span 9 !important; }
    .xl\:col-span-12 { grid-column: span 12 / span 12 !important; }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Dedicated Property Listing & Card Styles
   ========================================================================== */
.property-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0.75rem;
    overflow: hidden;
    min-width: 0;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.property-card:hover {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}
.property-card .card-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0f172a;
}
.property-card .card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.property-card:hover .card-thumb-wrap img {
    transform: scale(1.04);
}
.property-card-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.property-card-footer {
    padding: 0.75rem 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid #f1f5f9;
}
.badge-yield {
    background-color: rgba(5, 150, 105, 0.95);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.badge-offer {
    background-color: rgba(217, 119, 6, 0.95);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ==========================================================================
   Hero Search Bar Layout (Matches Mockup Single Row Desktop Presentation)
   ========================================================================== */
.hero-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

@media (min-width: 640px) and (max-width: 859px) {
    .hero-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .hero-search-btn-col {
        grid-column: span 2 / span 2 !important;
    }
}

@media (min-width: 860px) {
    .hero-search-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch;
    }
    .hero-search-btn-col {
        grid-column: span 1 / span 1 !important;
    }
}

/* ==========================================================================
   Hero Trust / Orientation Bar Layout (Matches Mockup 4-Column Single Row)
   ========================================================================== */
.hero-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.hero-trust-col .hero-trust-icon-box {
    border-color: #1e293b;
    background-color: #0f172a;
    color: #fbbf24;
}

.hero-trust-col .hero-trust-title {
    color: #ffffff;
}

.hero-trust-col .hero-trust-desc {
    color: #94a3b8;
}

.hero-section.theme-light .hero-trust-col .hero-trust-icon-box {
    border-color: #e2e8f0;
    background-color: #ffffff;
    color: #1e293b;
}

.hero-section.theme-light .hero-trust-col .hero-trust-title {
    color: #020617;
}

.hero-section.theme-light .hero-trust-col .hero-trust-desc {
    color: #64748b;
}

.hero-section.theme-light .hero-trust-grid {
    border-bottom-color: #f1f5f9;
}

@media (min-width: 640px) and (max-width: 859px) {
    .hero-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem;
    }
    .hero-trust-col {
        padding: 0;
        border: none !important;
    }
}

@media (min-width: 860px) {
    .hero-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        align-items: center;
    }
    .hero-trust-col {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        border-right: 1px solid rgba(30, 41, 59, 0.8);
    }
    .hero-trust-col:first-child {
        padding-left: 0;
    }
    .hero-trust-col:last-child {
        padding-right: 0;
        border-right: none !important;
    }
    .hero-section.theme-light .hero-trust-col {
        border-right-color: #e2e8f0;
    }
}