/**
 * Homepage CSS - Public Homepage Styles
 *
 * Bootstrap 5.3 compatible with dark mode support
 * Extracted from homepublic.php for browser caching
 *
 * @see /php/ide/data/webpages/homepublic.php
 */

/* ============================================
   CSS Custom Properties for Light/Dark Themes
   Bootstrap 5.3 data-bs-theme compatible
   ============================================ */

/* Light mode (default) */
:root, [data-bs-theme="light"] {
    --hp-content-bg: #f8f9fa;
    --hp-content-border: #dee2e6;
    --hp-map-bg: #e9ecef;
    --hp-card-bg: #ffffff;
    --hp-card-shadow: rgba(0,0,0,0.06);
    --hp-card-shadow-hover: rgba(0,0,0,0.1);
    --hp-card-header-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --hp-card-header-border: #dee2e6;
    --hp-hero-bg: linear-gradient(135deg, #1a5f2a 0%, #2d8a3e 50%, #1a5f2a 100%);
    --hp-hero-text: #ffffff;
    --hp-footer-bg: linear-gradient(135deg, #1a5f2a 0%, #145224 100%);
    --hp-footer-text: #ffffff;
    --hp-footer-accent: #90EE90;
    --hp-featured-border: #198754;
    --hp-contact-border: #0d6efd;
    --hp-map-overlay-bg: rgba(255,255,255,0.95);
    --hp-map-overlay-title: #1a5f2a;
    --hp-map-overlay-text: #666666;
    --hp-scrollbar-track: #f1f1f1;
    --hp-scrollbar-thumb: #c1c1c1;
    --hp-scrollbar-thumb-hover: #a1a1a1;
    --hp-mobile-map-shadow: rgba(0,0,0,0.1);
    --hp-text-primary: #212529;
    --hp-text-secondary: #6c757d;
}

/* Dark mode */
[data-bs-theme="dark"] {
    --hp-content-bg: #1a1d21;
    --hp-content-border: #343a40;
    --hp-map-bg: #212529;
    --hp-card-bg: #2b3035;
    --hp-card-shadow: rgba(0,0,0,0.2);
    --hp-card-shadow-hover: rgba(0,0,0,0.35);
    --hp-card-header-bg: linear-gradient(135deg, #343a40 0%, #2b3035 100%);
    --hp-card-header-border: #495057;
    --hp-hero-bg: linear-gradient(135deg, #145224 0%, #1a5f2a 50%, #145224 100%);
    --hp-hero-text: #ffffff;
    --hp-footer-bg: linear-gradient(135deg, #145224 0%, #0d3d18 100%);
    --hp-footer-text: #e9ecef;
    --hp-footer-accent: #90EE90;
    --hp-featured-border: #20c997;
    --hp-contact-border: #6ea8fe;
    --hp-map-overlay-bg: rgba(43,48,53,0.95);
    --hp-map-overlay-title: #90EE90;
    --hp-map-overlay-text: #adb5bd;
    --hp-scrollbar-track: #2b3035;
    --hp-scrollbar-thumb: #495057;
    --hp-scrollbar-thumb-hover: #6c757d;
    --hp-mobile-map-shadow: rgba(0,0,0,0.3);
    --hp-text-primary: #e9ecef;
    --hp-text-secondary: #adb5bd;
}

/* ============================================
   Split-Screen Layout
   Map visible without scrolling on desktop
   ============================================ */

.homepage-split {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (min-width: 992px) {
    .homepage-split {
        flex-direction: row;
        top: 110px;
        overflow: hidden;
    }
    /* Hide the PageWrap footer on homepage */
    body:has(.homepage-split) > .container > footer.page-footer {
        display: none;
    }
}

/* ============================================
   Left Panel - Content
   ============================================ */

.content-panel {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: var(--hp-content-bg);
    color: var(--hp-text-primary);
}

@media (min-width: 992px) {
    .content-panel {
        flex: 0 0 42%;
        max-width: 42%;
        padding: 1.5rem;
        border-right: 1px solid var(--hp-content-border);
    }
}

/* ============================================
   Right Panel - Map
   ============================================ */

.map-panel {
    display: none;
    background: var(--hp-map-bg);
}

@media (min-width: 992px) {
    .map-panel {
        display: flex;
        flex: 0 0 58%;
        max-width: 58%;
        position: relative;
    }
    .map-panel iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .map-panel #mapcontainer,
    .map-panel #map {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ============================================
   Mobile Map Toggle
   ============================================ */

.mobile-map-toggle {
    display: block;
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    .mobile-map-toggle { display: none; }
}

.mobile-map-container {
    display: none;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--hp-mobile-map-shadow);
}

.mobile-map-container.show {
    display: block;
}

.mobile-map-container iframe {
    width: 100%;
    height: 350px;
    border: none;
}

/* ============================================
   Hero Section - Compact for split layout
   ============================================ */

.homepage-hero-compact {
    background: var(--hp-hero-bg);
    color: var(--hp-hero-text);
    padding: 1.25rem;
    margin: -1rem -1rem 1rem -1rem;
    text-align: center;
    border-radius: 0 0 12px 12px;
}

.homepage-hero-compact h1 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.homepage-hero-compact .tagline {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
    .homepage-hero-compact { padding: 1.5rem; }
    .homepage-hero-compact h1 { font-size: 1.5rem; }
    .homepage-hero-compact .tagline { font-size: 0.9rem; }
}

/* ============================================
   Quick Actions - Compact
   ============================================ */

.quick-actions-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.quick-actions-compact .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
}

/* ============================================
   Section Cards - Compact
   ============================================ */

.homepage-card {
    background: var(--hp-card-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--hp-card-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.homepage-card:hover {
    box-shadow: 0 4px 16px var(--hp-card-shadow-hover);
}

.homepage-card .card-header {
    background: var(--hp-card-header-bg);
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--hp-card-header-border);
    color: var(--hp-text-primary);
}

.homepage-card .card-body {
    padding: 1rem;
    color: var(--hp-text-primary);
}

/* Collapsible card header as button */
.homepage-card button.card-header {
    background: var(--hp-card-header-bg);
    color: var(--hp-text-primary);
}

.homepage-card button.card-header:hover {
    filter: brightness(0.95);
}

.homepage-card button.card-header:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* Featured Property - Highlighted */
.featured-card {
    border-left: 3px solid var(--hp-featured-border);
}

/* Contact Card */
.contact-card {
    border-left: 3px solid var(--hp-contact-border);
}

/* ============================================
   Scrollbar Styling
   ============================================ */

.content-panel::-webkit-scrollbar {
    width: 6px;
}

.content-panel::-webkit-scrollbar-track {
    background: var(--hp-scrollbar-track);
}

.content-panel::-webkit-scrollbar-thumb {
    background: var(--hp-scrollbar-thumb);
    border-radius: 3px;
}

.content-panel::-webkit-scrollbar-thumb:hover {
    background: var(--hp-scrollbar-thumb-hover);
}

/* ============================================
   Map Overlay Info
   ============================================ */

.map-overlay {
    position: absolute;
    top: 1rem;
    left: 60px;
    background: var(--hp-map-overlay-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    font-size: 0.85rem;
}

.map-overlay h6 {
    margin: 0 0 0.25rem 0;
    color: var(--hp-map-overlay-title);
}

.map-overlay p {
    margin: 0;
    color: var(--hp-map-overlay-text);
    font-size: 0.8rem;
}

/* ============================================
   Footer - Improved readability and layout
   ============================================ */

.office-footer-compact {
    background: var(--hp-footer-bg);
    color: var(--hp-footer-text);
    padding: 1.25rem;
    margin: 1rem -1rem -1rem -1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    border-radius: 12px 12px 0 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.office-footer-compact strong {
    color: var(--hp-footer-accent);
    font-size: 0.95rem;
}

.office-footer-compact a {
    color: var(--hp-footer-accent);
    text-decoration: none;
}

.office-footer-compact a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.office-footer-compact table {
    width: 100%;
    font-size: 0.8rem;
}

.office-footer-compact td {
    vertical-align: top;
    padding: 0.25rem 0.5rem 0.25rem 0;
}

.office-footer-compact hr {
    border-color: rgba(255,255,255,0.2);
    margin: 0.5rem 0;
}

/* ============================================
   Dark Mode Form Adjustments
   ============================================ */

[data-bs-theme="dark"] .homepage-card .form-select,
[data-bs-theme="dark"] .homepage-card .form-control {
    background-color: #343a40;
    border-color: #495057;
    color: #e9ecef;
}

[data-bs-theme="dark"] .homepage-card .form-select:focus,
[data-bs-theme="dark"] .homepage-card .form-control:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 0.2rem rgba(32,201,151,0.25);
}

/* ============================================
   Dark Mode Story Text
   ============================================ */

[data-bs-theme="dark"] .default-story,
[data-bs-theme="dark"] .snowshoe-story,
[data-bs-theme="dark"] .mls-story {
    color: var(--hp-text-primary);
}

[data-bs-theme="dark"] .default-story a,
[data-bs-theme="dark"] .snowshoe-story a {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .default-story a:hover,
[data-bs-theme="dark"] .snowshoe-story a:hover {
    color: #9ec5fe;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.homepage-split { animation: fadeIn 0.3s ease; }

/* ============================================
   Fireworks Canvas (New Year celebration)
   ============================================ */

#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}