/**
 * LeVoyageur Blocks - Frontend Styles
 * Based on UX Patterns Library specifications
 */

/* === INFO BOX STYLES === */
.lvb-info-box {
    margin: 20px auto;
    max-width: 85%;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid;
    position: relative;
    overflow: hidden;
}

.lvb-info-box__header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.lvb-info-box__icon {
    font-size: 24px;
    margin-right: 12px;
    line-height: 1;
}

.lvb-info-box__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.lvb-info-box__content {
    font-size: 14px;
    line-height: 1.5;
}

.lvb-info-box__content p:last-child {
    margin-bottom: 0;
}

/* Info Box Variants */
.lvb-info-box--info {
    background-color: #E3F2FD;
    border-left-color: #2196F3;
}

.lvb-info-box--tip {
    background-color: #FFFBEB;
    border-left-color: #F59E0B;
}

.lvb-info-box--warning {
    background-color: #FEF2F2;
    border-left-color: #EF4444;
}

.lvb-info-box--budget {
    background-color: #F0FDF4;
    border-left-color: #22C55E;
}

/* === QUICK ANSWER STYLES === */
.lvb-quick-answer {
    background-color: #F8F9FA;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lvb-quick-answer__question h3,
.lvb-quick-answer__question-text {
    margin: 0 0 16px 0;
    color: #1F2937;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.lvb-quick-answer__content {
    color: #374151;
}

.lvb-quick-answer__answer {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.6;
}

.lvb-quick-answer__answer p:last-child {
    margin-bottom: 0;
}

.lvb-quick-answer__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.lvb-quick-answer__highlight {
    background-color: #F0F8FF;
    color: #1E40AF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #DBEAFE;
}

/* === COMPARISON TABLE STYLES === */
.lvb-comparison-table {
    margin: 24px 0;
}

.lvb-comparison-table__title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

.lvb-comparison-table__wrapper {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lvb-comparison-table__table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.lvb-comparison-table__table th {
    background-color: #F9FAFB;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #E5E7EB;
    font-size: 14px;
}

.lvb-comparison-table__table td {
    padding: 12px 16px;
    border-bottom: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 14px;
    line-height: 1.5;
}

.lvb-comparison-table__table tr:hover {
    background-color: #F9FAFB;
}

.lvb-comparison-table__table tr:last-child td {
    border-bottom: none;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .lvb-info-box {
        padding: 16px;
        margin: 16px 0;
    }
    
    .lvb-info-box__title {
        font-size: 15px;
    }
    
    .lvb-info-box__content {
        font-size: 14px;
    }
    
    .lvb-quick-answer {
        padding: 20px;
        margin: 20px 0;
    }
    
    .lvb-quick-answer__question h3 {
        font-size: 18px;
    }
    
    .lvb-quick-answer__answer {
        font-size: 15px;
    }
    
    .lvb-quick-answer__highlights {
        gap: 6px;
    }
    
    .lvb-quick-answer__highlight {
        font-size: 13px;
        padding: 5px 10px;
    }
    
    .lvb-comparison-table__table th,
    .lvb-comparison-table__table td {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Mobile table scroll indicator */
    .lvb-comparison-table__wrapper::after {
        content: "Swipe to see more →";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0.7;
    }
}

/* === RANK MATH FAQ ACCORDION === */
.rank-math-block .rank-math-list-item {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.rank-math-block .rank-math-question {
    margin: 0;
    padding: 16px 48px 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    cursor: pointer;
    position: relative;
    background: #F9FAFB;
    transition: background 0.2s;
}

.rank-math-block .rank-math-question:hover {
    background: #F3F4F6;
}

.rank-math-block .rank-math-question::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: #9CA3AF;
    transition: transform 0.2s;
}

.rank-math-block .rank-math-question.open::after {
    content: "−";
}

.rank-math-block .rank-math-answer {
    display: none;
    padding: 0 20px 16px 20px;
    color: #374151;
    font-size: 15px;
    line-height: 1.6;
}

.rank-math-block .rank-math-answer.open {
    display: block;
}

/* === ACCESSIBILITY === */
.lvb-info-box:focus-within,
.lvb-quick-answer:focus-within,
.lvb-comparison-table:focus-within {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lvb-info-box {
        border-width: 2px;
        border-style: solid;
    }
    
    .lvb-quick-answer {
        border-width: 2px;
    }
    
    .lvb-comparison-table__table th {
        border-bottom-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lvb-comparison-table__table tr {
        transition: none;
    }
}

/* ========================================
   TRAVEL MAP BLOCK
   ======================================== */

.lvb-travel-map {
    margin: 24px 0;
    font-family: inherit;
}

/* Map container — height set inline via data-map-height */
.lvb-travel-map__map {
    width: 100%;
    min-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #e8e0d8; /* Fallback while Leaflet loads */
    position: relative;
    z-index: 0;
}

/* Info bar (distance / duration) */
.lvb-travel-map__info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 8px 14px;
    background: #f0f6ff;
    border: 1px solid #c3d9f7;
    border-radius: 6px;
    font-size: 14px;
    color: #1e3a5f;
}

.lvb-travel-map__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lvb-travel-map__stat--note {
    color: #b45309;
    font-size: 13px;
}

/* Title / legend */
.lvb-travel-map__title {
    margin: 8px 0 0;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

/* Empty state */
.lvb-travel-map__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    color: #9ca3af;
    font-style: italic;
    font-size: 14px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
}

/* ── Numbered marker icon (pin shape with counter-rotated number) ── */
/* Leaflet divIcon wrapper — reset Leaflet defaults */
.lvb-map-marker {
    background: none !important;
    border: none !important;
}

.lvb-map-marker__bubble {
    width: 38px;
    height: 38px;
    background: #E8734A;
    border-radius: 50% 50% 50% 0; /* teardrop / map-pin shape */
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
}

/* Counter-rotate the number so it reads upright */
.lvb-map-marker__num {
    transform: rotate(45deg);
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1;
    text-align: center;
}

/* Popup customisation */
.lvb-map-popup__desc {
    color: #6b7280;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

/* ── Waypoints list (below the map) ── */
.lvb-travel-map__waypoints {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lvb-travel-map__waypoint-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.lvb-travel-map__waypoint-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #E8734A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lvb-travel-map__waypoint-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lvb-travel-map__waypoint-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.lvb-travel-map__waypoint-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* ── Road name labels (Feature A) ── */
.lvb-road-label {
    background: #fff;
    border: 1.5px solid #888;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.lvb-road-label--shield {
    background: #3a7bd5;
    color: #fff;
    border-color: #2a5ba5;
    border-radius: 3px;
}

/* ========================================
   QUARTIER MAP BLOCK
   ======================================== */

.lvb-quartier-map {
    margin: 24px 0;
    font-family: inherit;
}

.lvb-quartier-map__map {
    width: 100%;
    min-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #e8e0d8;
    position: relative;
    z-index: 0;
}

/* ── Quartier Popup ── */
.lvb-qmap-popup {
    max-width: 260px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 2px 0;
}

.lvb-qmap-popup__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.3;
}

.lvb-qmap-popup__desc {
    margin: 0 0 8px 0;
    color: #4b5563;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
}

.lvb-qmap-popup__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lvb-qmap-popup__meta li {
    color: #374151;
    font-size: 12px;
    line-height: 1.4;
}

.lvb-qmap-popup__meta li strong {
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .lvb-travel-map__map {
        border-radius: 4px;
        min-height: 250px; /* a bit taller on narrow screens */
    }

    .lvb-travel-map__info {
        font-size: 13px;
        gap: 8px;
    }
}