diff --git a/assets/css/find-trainer.css b/assets/css/find-trainer.css new file mode 100644 index 00000000..bd3f0cd3 --- /dev/null +++ b/assets/css/find-trainer.css @@ -0,0 +1,1562 @@ +/** + * Find a Trainer Page Styles + * Matches the specification mockups exactly + * + * @package HVAC_Plugin + * @since 1.0.0 + */ + +/* ======================================== + Page Layout & Container Structure + ======================================== */ + +.hvac-find-trainer-page { + background: #fff; + padding: 20px 0; + width: 100%; + clear: both; +} + +.hvac-find-trainer-page .ast-container { + max-width: 1200px !important; + margin: 0 auto !important; + padding: 0 20px !important; + width: 100% !important; + box-sizing: border-box !important; + /* Single column layout */ + display: block !important; +} + +/* Page Title */ +.hvac-page-title { + font-size: 32px; + font-weight: 600; + margin: 0 0 20px 0; + color: #333; +} + +/* ======================================== + Container 1: Summary + ======================================== */ + +.hvac-summary-container { + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; +} + +.hvac-summary-container p { + margin: 0; + font-size: 16px; + line-height: 1.6; + color: #333; +} + +/* ======================================== + Container 2: Map & Filters Layout (SINGLE ROW) + ======================================== */ + +.hvac-map-filters-container { + display: flex !important; + gap: 20px; + margin-bottom: 40px; + min-height: 500px; + width: 100%; + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 20px; + box-sizing: border-box; +} + +/* Map Section (LEFT - 2/3 width) */ +.hvac-map-section { + flex: 2; + min-width: 0; + position: relative; + min-height: 450px; + overflow: hidden !important; + max-width: 100% !important; +} + +/* MapGeo Integration - Force map to display properly */ +.hvac-map-section .map_wrapper { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + width: 100% !important; + max-width: 100% !important; + height: 450px !important; + position: relative !important; + overflow: hidden !important; + box-sizing: border-box !important; +} + +/* Ensure map render div is visible even with loading class */ +.hvac-map-section .map_render, +.hvac-map-section .map_loading { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + background: transparent !important; +} + +/* Make sure the map container and box are visible with proper width */ +.hvac-map-section .map_box { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + width: 100% !important; + max-width: 100% !important; + overflow: hidden !important; + box-sizing: border-box !important; +} + +.hvac-map-section .map_container { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +/* Ensure SVG inside map is visible */ +.hvac-map-section .map_render svg { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +/* Hide ONLY the sidebar content area if MapGeo creates one */ +.hvac-find-trainer-page .igm_content_right_1_3 { + display: none !important; +} + +/* Prevent MapGeo from showing any trainer profiles in its own containers */ +.igm_content_right_1_3 .hvac-trainer-card, +.igm_content_left_2_3 .hvac-trainer-card, +.map_wrapper .hvac-trainer-card { + display: none !important; +} + +/* Force MapGeo containers to have dimensions */ +.hvac-map-section .map_box, +.hvac-map-section .map_aspect_ratio { + width: 100% !important; + height: 450px !important; + min-height: 450px !important; + position: relative !important; + display: block !important; +} + +.hvac-map-section .map_container { + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; +} + +.hvac-map-section .map_render { + width: 100% !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; +} + +/* Force the map ID to show */ +.hvac-map-section #map_5872 { + display: block !important; + width: 100% !important; + height: 100% !important; + min-height: 450px !important; +} + +/* Override MapGeo aspect ratio if needed */ +.hvac-map-section .map_aspect_ratio { + padding-top: 56% !important; /* 16:9 aspect ratio */ + position: relative !important; + max-width: 100% !important; + overflow: hidden !important; +} + +/* Ensure map canvas is visible and constrained */ +.hvac-map-section canvas { + max-width: 100% !important; + width: 100% !important; + height: auto !important; + overflow: hidden !important; +} + +/* Comprehensive MapGeo element constraints */ +.hvac-map-section svg, +.hvac-map-section g, +.hvac-map-section path, +.hvac-map-section circle { + max-width: 100% !important; + overflow: visible !important; +} + +/* Prevent any MapGeo elements from overflowing */ +.hvac-map-section * { + box-sizing: border-box !important; +} + +.hvac-map-section .map_render, +.hvac-map-section .map_wrapper, +.hvac-map-section .map_box, +.hvac-map-section .map_container, +.hvac-map-section .map_aspect_ratio { + max-width: 100% !important; + overflow: hidden !important; + contain: layout size style !important; +} + +.hvac-map-placeholder { + width: 100%; + height: 450px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; + border-radius: 4px; +} + +.hvac-map-placeholder img { + max-width: 100%; + height: auto; +} + +/* Filters Section (RIGHT - 1/3 width) */ +.hvac-filters-section { + flex: 1; + display: flex; + flex-direction: column; + gap: 15px; + min-width: 250px; + padding-left: 20px; + border-left: 1px solid #e0e0e0; +} + +/* Search Box */ +.hvac-search-box { + position: relative; + width: 100%; +} + +.hvac-search-box input { + width: 100%; + padding: 12px 40px 12px 15px; + border: 2px solid #e0e0e0; + border-radius: 25px; + font-size: 14px; + background: #fff; + transition: all 0.3s; +} + +.hvac-search-box input:focus { + outline: none; + border-color: #0073aa; + box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); +} + +.hvac-search-box input::placeholder { + color: #999; +} + +.hvac-search-box .dashicons { + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + color: #666; + font-size: 18px; + pointer-events: none; +} + +/* Filters Header */ +.hvac-filters-header { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 0 5px 0; +} + +/* Filters Label */ +.hvac-filters-label { + font-weight: 600; + font-size: 16px; + color: #333; +} + +/* Clear Filters Button */ +.hvac-clear-filters { + padding: 6px 12px; + background: #dc3545; + color: white; + border: none; + border-radius: 4px; + font-size: 13px; + cursor: pointer; + transition: all 0.3s; + font-weight: 500; +} + +.hvac-clear-filters:hover { + background: #c82333; + transform: translateY(-1px); +} + +.hvac-clear-filters:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25); +} + +/* Filter Buttons */ +.hvac-filter-btn { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 12px 15px; + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 25px; + font-size: 14px; + color: #333; + cursor: pointer; + transition: all 0.3s; + text-align: left; +} + +.hvac-filter-btn:hover { + background: #f8f9fa; + border-color: #0073aa; +} + +.hvac-filter-btn:focus { + outline: none; + border-color: #0073aa; + box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); +} + +.hvac-filter-btn .dashicons { + font-size: 16px; + color: #666; + margin-left: auto; +} + +/* Active Filters */ +.hvac-active-filters { + margin-top: 10px; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.hvac-active-filter { + display: inline-flex; + align-items: center; + padding: 6px 12px; + background: #0073aa; + color: white; + border-radius: 20px; + font-size: 13px; + gap: 8px; +} + +.hvac-active-filter button { + background: none; + border: none; + color: white; + cursor: pointer; + font-size: 16px; + padding: 0; + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background 0.2s; +} + +.hvac-active-filter button:hover { + background: rgba(255, 255, 255, 0.2); +} + +/* ======================================== + Container 3: Trainer Directory + ======================================== */ + +.hvac-trainer-directory-container { + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; + width: 100%; + display: block; + box-sizing: border-box; +} + +/* Trainer Grid - 2 columns */ +.hvac-trainer-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 20px; +} + +/* Trainer Card */ +.hvac-trainer-card { + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 20px; + background: #f8f8f8; + transition: all 0.3s; +} + +/* Only trainers (not champions) should have hover effects and cursor */ +.hvac-trainer-card:not(.hvac-champion-card) { + cursor: pointer; +} + +.hvac-trainer-card:not(.hvac-champion-card):hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +/* Champion cards have a different visual treatment */ +.hvac-trainer-card.hvac-champion-card { + cursor: default; + opacity: 0.85; +} + +/* Certified measureQuick Trainer cards - green styling */ +.hvac-trainer-card.hvac-trainer-card-certified { + background-color: rgba(137, 201, 46, 0.5); /* #89c92e @ 50% transparency */ + border-color: rgba(137, 201, 46, 0.3); +} + +.hvac-trainer-card.hvac-trainer-card-certified:hover { + background-color: #89c92e; /* Solid green on hover */ + border-color: #7bb528; + box-shadow: 0 4px 12px rgba(137, 201, 46, 0.3); +} + +.hvac-trainer-card-content { + display: flex; + gap: 15px; + align-items: flex-start; +} + +/* Trainer Image/Avatar */ +.hvac-trainer-image { + width: 80px; + height: 80px; + flex-shrink: 0; +} + +.hvac-trainer-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + background: #ddd; +} + +.hvac-trainer-avatar { + width: 100%; + height: 100%; + background: #6c757d; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.hvac-trainer-avatar .dashicons { + font-size: 40px; + color: white; +} + +/* mQ Certified Trainer Badge Overlay */ +.hvac-trainer-image, +.hvac-modal-image { + position: relative; /* Enable positioning for overlay */ +} + +.hvac-mq-badge-overlay { + position: absolute; + top: -5px; /* Slightly outside the circle */ + right: -5px; /* Positioned in top-right corner */ + width: 35px; + height: 35px; + z-index: 10; /* Ensure it appears above the profile image */ + pointer-events: none; /* Don't interfere with clicks */ +} + +.hvac-mq-badge { + width: 100%; + height: 100%; + object-fit: contain; + filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Add subtle shadow for visibility */ +} + +/* Trainer Details */ +.hvac-trainer-details { + flex: 1; +} + +.hvac-trainer-name { + margin: 0 0 8px 0; + font-size: 18px; + font-weight: 600; +} + +.hvac-trainer-name a { + color: #333; + text-decoration: none; + font-weight: 600; /* Bold for clickable trainers */ +} + +.hvac-trainer-name a:hover { + color: #0073aa; +} + +/* Champion names - not clickable, not bold */ +.hvac-champion-name { + color: #333; + font-weight: 400; /* Normal weight for champions */ + cursor: default; +} + +.hvac-trainer-location { + margin: 0 0 8px 0; + font-size: 14px; + color: #666; +} + +.hvac-trainer-certification { + margin: 0; + font-size: 14px; + color: #0073aa; + font-weight: 500; +} + +.hvac-see-events { + display: inline-flex; + align-items: center; + gap: 5px; + margin-top: 10px; + color: #333; + text-decoration: none; + font-size: 14px; +} + +.hvac-see-events:hover { + color: #0073aa; +} + +.hvac-see-events .dashicons { + font-size: 16px; +} + +/* Pagination */ +.hvac-pagination { + text-align: center; + margin-top: 20px; +} + +.hvac-pagination a, +.hvac-pagination span { + display: inline-block; + padding: 8px 12px; + margin: 0 3px; + border: 1px solid #dee2e6; + border-radius: 4px; + color: #333; + text-decoration: none; + transition: all 0.3s; +} + +.hvac-pagination a:hover { + background: #0073aa; + color: white; + border-color: #0073aa; +} + +.hvac-pagination .current { + background: #0073aa; + color: white; + border-color: #0073aa; +} + +/* No Results */ +.hvac-no-trainers { + text-align: center; + padding: 60px 20px; + color: #666; +} + +.hvac-no-trainers p { + font-size: 16px; + margin: 0; +} + +/* ======================================== + Container 4: CTA Section + ======================================== */ + +.hvac-cta-container { + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 8px; + padding: 30px; + text-align: center; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + width: 100%; + box-sizing: border-box; +} + +.hvac-cta-text { + margin: 0; + font-size: 18px; + font-style: italic; + color: #333; + flex: 1; + text-align: left; +} + +.hvac-cta-button { + display: inline-block; + padding: 12px 30px; + background: #333; + color: white; + border-radius: 25px; + text-decoration: none; + font-size: 16px; + font-weight: 600; + transition: all 0.3s; + white-space: nowrap; +} + +.hvac-cta-button:hover { + background: #555; + color: white; + text-decoration: none; + transform: translateY(-2px); +} + +/* ======================================== + Filter Modal + ======================================== */ + +.hvac-filter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999998; + display: none; + align-items: center; + justify-content: center; + padding: 20px; +} + +.hvac-filter-modal.active, +.hvac-filter-modal.show { + display: flex; +} + +.hvac-filter-modal-content { + background: white; + border-radius: 8px; + padding: 30px; + width: 90%; + max-width: 450px; + max-height: 70vh; + overflow-y: auto; + position: relative; +} + +.hvac-filter-modal-title { + margin: 0 0 25px 0; + font-size: 22px; + font-weight: 600; + color: #333; +} + +.hvac-filter-options { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 25px; +} + +.hvac-filter-option { + display: flex; + align-items: center; + padding: 12px 15px; + border: 1px solid #dee2e6; + border-radius: 6px; + cursor: pointer; + transition: all 0.3s; +} + +.hvac-filter-option:hover { + background: #f8f9fa; + border-color: #0073aa; +} + +.hvac-filter-option input { + margin-right: 12px; + cursor: pointer; +} + +.hvac-filter-option label { + cursor: pointer; + margin: 0; + flex: 1; +} + +.hvac-filter-apply { + width: 100%; + padding: 12px; + background: #0073aa; + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: background 0.3s; +} + +.hvac-filter-apply:hover { + background: #005a87; +} + +/* ======================================== + Trainer Profile Modal + ======================================== */ + +.hvac-trainer-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 999999; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.hvac-trainer-modal-content { + background: white; + border-radius: 8px; + width: 100%; + max-width: 700px; + max-height: 90vh; + overflow-y: auto; + position: relative; + padding: 30px; +} + +/* Close Button */ +.hvac-modal-close { + position: absolute; + top: 15px; + right: 15px; + background: white; + border: 2px solid #333; + border-radius: 50%; + width: 32px; + height: 32px; + cursor: pointer; + padding: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; +} + +.hvac-modal-close:hover { + background: #333; +} + +.hvac-modal-close .dashicons { + font-size: 20px; + color: #333; +} + +.hvac-modal-close:hover .dashicons { + color: white; +} + +/* Modal Title */ +.hvac-modal-title { + margin: 0 0 25px 0; + font-size: 28px; + font-weight: 600; + color: #333; + text-align: center; +} + +/* Container 1: Profile Info */ +.hvac-modal-profile { + display: flex; + gap: 20px; + padding: 20px; + background: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 6px; + margin-bottom: 20px; +} + +.hvac-modal-image { + width: 120px; + height: 120px; + flex-shrink: 0; +} + +.hvac-modal-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + background: #dee2e6; +} + +.hvac-modal-info { + flex: 1; +} + +.hvac-modal-info p { + margin: 0 0 10px 0; + font-size: 16px; + color: #333; +} + +.hvac-modal-location { + font-size: 18px !important; + color: #666 !important; +} + +.hvac-modal-certification { + color: #0073aa !important; + font-weight: 500; +} + +.hvac-modal-business { + color: #666; +} + +.hvac-modal-events span { + font-weight: 600; +} + +/* Container 2: Training Details */ +.hvac-modal-training { + padding: 20px; + border: 1px solid #dee2e6; + border-radius: 6px; + margin-bottom: 20px; +} + +.hvac-training-row { + margin-bottom: 15px; + font-size: 16px; +} + +.hvac-training-row strong { + display: inline-block; + min-width: 150px; + color: #333; +} + +.hvac-training-events { + margin-top: 20px; +} + +.hvac-training-events strong { + display: block; + margin-bottom: 10px; + font-size: 16px; + color: #333; +} + +.hvac-events-list { + margin: 0; + padding-left: 20px; +} + +.hvac-events-list li { + margin-bottom: 8px; + color: #666; +} + +.hvac-events-list a { + color: #0073aa; + text-decoration: none; +} + +.hvac-events-list a:hover { + text-decoration: underline; +} + +/* Container 3: Contact Form */ +.hvac-modal-contact { + padding: 20px; + background: #f8f9fa; + border-radius: 6px; +} + +.hvac-modal-contact h3 { + margin: 0 0 20px 0; + font-size: 20px; + font-weight: 600; + text-align: center; + color: #333; +} + +.hvac-contact-form { + display: flex; + flex-direction: column; + gap: 15px; +} + +.hvac-form-row { + display: flex; + gap: 15px; +} + +.hvac-form-row input { + flex: 1; +} + +.hvac-form-full { + width: 100%; +} + +.hvac-contact-form input, +.hvac-contact-form textarea { + width: 100%; + padding: 10px 15px; + border: 2px solid #dee2e6; + border-radius: 25px; + font-size: 14px; + font-family: inherit; + background: #fff; + transition: all 0.3s; +} + +.hvac-contact-form textarea { + border-radius: 15px; + resize: vertical; + min-height: 100px; +} + +.hvac-contact-form input:focus, +.hvac-contact-form textarea:focus { + outline: none; + border-color: #0073aa; + box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); +} + +.hvac-contact-form input::placeholder, +.hvac-contact-form textarea::placeholder { + color: #999; +} + +.hvac-form-submit { + padding: 12px 40px; + background: #333; + color: white; + border: none; + border-radius: 25px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + align-self: center; + margin-top: 10px; +} + +.hvac-form-submit:hover { + background: #555; + transform: translateY(-2px); +} + +.hvac-form-submit:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +/* Form Messages */ +.hvac-form-message { + margin-top: 15px; + padding: 12px; + border-radius: 6px; + text-align: center; +} + +.hvac-form-success { + background: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.hvac-form-error { + background: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +/* ======================================== + Mobile Responsive + ======================================== */ + +@media (max-width: 768px) { + /* Stack map and filters vertically */ + .hvac-map-filters-container { + flex-direction: column; + } + + .hvac-map-section { + width: 100%; + margin-bottom: 20px; + } + + .hvac-filters-section { + width: 100%; + } + + /* Single column trainer grid on mobile */ + .hvac-trainer-grid { + grid-template-columns: 1fr; + } + + /* Stack CTA content */ + .hvac-cta-container { + flex-direction: column; + text-align: center; + } + + .hvac-cta-text { + text-align: center; + } + + /* Stack form fields on mobile */ + .hvac-form-row { + flex-direction: column; + } + + /* Adjust modal padding */ + .hvac-trainer-modal-content { + padding: 20px; + } + + .hvac-modal-profile { + flex-direction: column; + text-align: center; + } + + .hvac-modal-image { + margin: 0 auto; + } +} + +@media (max-width: 480px) { + .hvac-page-title { + font-size: 24px; + } + + .hvac-trainer-card-content { + flex-direction: column; + text-align: center; + } + + .hvac-trainer-image { + margin: 0 auto 15px auto; + } +} + +/* ======================================== + Loading States + ======================================== */ + +.hvac-loading { + position: relative; + opacity: 0.5; + pointer-events: none; +} + +.hvac-loading::after { + content: "Loading..."; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + padding: 10px 20px; + border-radius: 4px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +/* ======================================== + Direct Profile Display + ======================================== */ + +.hvac-direct-profile-container { + margin-bottom: 40px; +} + +.hvac-direct-profile-header { + margin-bottom: 20px; +} + +.hvac-back-to-directory { + display: inline-flex; + align-items: center; + gap: 8px; + color: #0073aa; + text-decoration: none; + font-size: 16px; + font-weight: 500; + transition: color 0.3s; +} + +.hvac-back-to-directory:hover { + color: #005a87; + text-decoration: none; +} + +.hvac-back-to-directory .dashicons { + font-size: 18px; +} + +.hvac-direct-profile-card { + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 12px; + padding: 40px; + max-width: 800px; + margin: 0 auto; +} + +.hvac-direct-profile-content { + display: flex; + align-items: center; + gap: 40px; +} + +.hvac-direct-profile-image { + width: 200px; + height: 200px; + flex-shrink: 0; + position: relative; +} + +.hvac-direct-profile-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + background: #ddd; +} + +.hvac-direct-profile-avatar { + width: 100%; + height: 100%; + background: #6c757d; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.hvac-direct-profile-avatar .dashicons { + font-size: 80px; + color: white; +} + +.hvac-direct-profile-details { + flex: 1; +} + +.hvac-direct-profile-details h2 { + margin: 0 0 12px 0; + font-size: 36px; + font-weight: 600; + color: #333; + line-height: 1.2; +} + +.hvac-direct-business-name { + margin: 0 0 12px 0; + font-size: 20px; + color: #666; + font-weight: 500; +} + +.hvac-direct-location { + margin: 0 0 12px 0; + font-size: 18px; + color: #666; +} + +.hvac-direct-certification { + margin: 0 0 24px 0; + font-size: 18px; + color: #0073aa; + font-weight: 600; +} + +.hvac-contact-trainer-btn { + display: inline-block; + padding: 16px 32px; + background: #333; + color: white; + border: none; + border-radius: 25px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + text-decoration: none; +} + +.hvac-contact-trainer-btn:hover { + background: #555; + transform: translateY(-2px); + color: white; +} + +/* Mobile responsive for direct profile */ +@media (max-width: 768px) { + .hvac-direct-profile-card { + padding: 20px; + } + + .hvac-direct-profile-content { + flex-direction: column; + text-align: center; + gap: 20px; + } + + .hvac-direct-profile-image { + width: 150px; + height: 150px; + margin: 0 auto; + } + + .hvac-direct-profile-details h2 { + font-size: 28px; + } + + .hvac-direct-profile-avatar .dashicons { + font-size: 60px; + } +} + +/* ======================================== + Utility Classes + ======================================== */ + +.hvac-hidden { + display: none !important; +} + +.hvac-visible { + display: block !important; +} + +/* Fix for Astra theme conflicts */ +.hvac-find-trainer-page .ast-separate-container .ast-article-single { + background: transparent; + padding: 0; +} + +.hvac-find-trainer-page .entry-content { + margin: 0; +} + +/* ======================================== + MapGeo Plugin Minimal Fixes + ======================================== */ + +/* Hide MapGeo hidden footer content */ +#igm-hidden-footer-content { + display: none !important; +} + +/* Force proper display context */ +.hvac-find-trainer-page .hvac-map-section > * { + position: relative !important; +} + +/* Override any absolute positioning from MapGeo */ +.hvac-find-trainer-page .map_wrapper .map_box { + position: relative !important; + top: auto !important; + left: auto !important; + right: auto !important; + bottom: auto !important; +} + +/* ======================================== + Direct Profile Display Styles + ======================================== */ + +.hvac-direct-profile-container { + background: #fff; + border-radius: 8px; + margin-bottom: 30px; +} + +.hvac-direct-profile-header { + margin-bottom: 20px; +} + +.hvac-back-to-directory { + display: inline-flex; + align-items: center; + gap: 8px; + color: #0073aa; + text-decoration: none; + font-size: 16px; + font-weight: 500; + transition: color 0.2s ease; +} + +.hvac-back-to-directory:hover { + color: #005a87; + text-decoration: none; +} + +.hvac-back-to-directory .dashicons { + font-size: 18px; +} + +/* Full Trainer Profile Display */ +.hvac-trainer-profile-full { + background: #fff; + border: 2px solid #e0e0e0; + border-radius: 12px; + padding: 30px; + max-width: 800px; + margin: 0 auto; +} + +/* Profile Header Section */ +.hvac-trainer-profile-header { + display: flex; + gap: 30px; + align-items: flex-start; + margin-bottom: 30px; + padding-bottom: 20px; + border-bottom: 2px solid #f0f0f0; +} + +.hvac-trainer-image-section { + position: relative; + flex-shrink: 0; +} + +.hvac-trainer-main-image { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + border: 4px solid #e0e0e0; +} + +.hvac-trainer-avatar-large { + width: 150px; + height: 150px; + background: #6c757d; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 4px solid #e0e0e0; +} + +.hvac-trainer-avatar-large .dashicons { + font-size: 80px; + color: white; +} + +.hvac-trainer-header-info { + flex: 1; +} + +.hvac-trainer-header-info .hvac-trainer-name { + font-size: 28px; + font-weight: 600; + margin: 0 0 8px 0; + color: #333; +} + +.hvac-trainer-header-info .hvac-trainer-location { + font-size: 18px; + color: #666; + margin: 0 0 8px 0; +} + +.hvac-trainer-header-info .hvac-trainer-certification { + font-size: 16px; + color: #0073aa; + font-weight: 500; + margin: 0 0 8px 0; +} + +.hvac-trainer-header-info .hvac-trainer-business { + font-size: 16px; + color: #666; + font-weight: 500; + margin: 0 0 8px 0; +} + +.hvac-trainer-header-info .hvac-trainer-events-stat { + font-size: 16px; + color: #333; + margin: 0; +} + +/* Training Details Section */ +.hvac-trainer-details-section, +.hvac-upcoming-events-section, +.hvac-trainer-about-section, +.hvac-contact-section { + margin-bottom: 30px; +} + +.hvac-trainer-details-section h3, +.hvac-upcoming-events-section h3, +.hvac-trainer-about-section h3, +.hvac-contact-section h3 { + font-size: 20px; + font-weight: 600; + color: #333; + margin: 0 0 15px 0; + padding-bottom: 8px; + border-bottom: 2px solid #f0f0f0; +} + +.hvac-training-details-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; +} + +.hvac-training-detail { + display: flex; + flex-direction: column; + gap: 5px; +} + +.hvac-training-detail strong { + color: #333; + font-size: 14px; + font-weight: 600; +} + +.hvac-training-detail span { + color: #666; + font-size: 16px; +} + +/* Events List */ +.hvac-events-list { + list-style: none; + padding: 0; + margin: 0; +} + +.hvac-events-list li { + padding: 10px 0; + border-bottom: 1px solid #f0f0f0; +} + +.hvac-events-list li:last-child { + border-bottom: none; +} + +.hvac-events-list a { + color: #0073aa; + text-decoration: none; + font-weight: 500; +} + +.hvac-events-list a:hover { + color: #005a87; + text-decoration: underline; +} + +/* About Section */ +.hvac-trainer-bio { + color: #333; + line-height: 1.6; + font-size: 16px; +} + +.hvac-trainer-bio p { + margin: 0 0 15px 0; +} + +.hvac-trainer-bio p:last-child { + margin-bottom: 0; +} + +/* Mobile Responsive for Direct Profile */ +@media (max-width: 768px) { + .hvac-trainer-profile-full { + padding: 20px; + margin: 0 10px; + } + + .hvac-trainer-profile-header { + flex-direction: column; + text-align: center; + gap: 20px; + } + + .hvac-trainer-image-section { + align-self: center; + } + + .hvac-trainer-main-image, + .hvac-trainer-avatar-large { + width: 120px; + height: 120px; + } + + .hvac-trainer-avatar-large .dashicons { + font-size: 60px; + } + + .hvac-trainer-header-info .hvac-trainer-name { + font-size: 24px; + } + + .hvac-training-details-grid { + grid-template-columns: 1fr; + gap: 10px; + } +} \ No newline at end of file