{"id":176,"date":"2026-08-06T00:26:19","date_gmt":"2026-08-06T00:26:19","guid":{"rendered":"https:\/\/www.divetalking.com\/oceanseye\/?page_id=176"},"modified":"2026-08-06T00:29:55","modified_gmt":"2026-08-06T00:29:55","slug":"dt-almanac","status":"publish","type":"page","link":"https:\/\/www.divetalking.com\/oceanseye\/dt-almanac\/","title":{"rendered":"DT Almanac"},"content":{"rendered":"<div id=\"dtalm-page\">\n\n<script>\n(function() {\n    var wrap = document.getElementById( 'dtalm-page' );\n    if ( wrap ) {\n        var node = wrap;\n        while ( node && node.parentNode && node !== document.body ) {\n            var parent  = node.parentNode;\n            var sibling = parent.firstElementChild;\n            while ( sibling && sibling !== node ) {\n                var next = sibling.nextElementSibling;\n                sibling.style.display = 'none';\n                sibling = next;\n            }\n            node = parent;\n        }\n    }\n})();\n<\/script>\n\n<style>\n    #dtalm-page {\n        --bg-deepest: #030f1a;\n        --bg-panel: #0a1f35;\n        --bg-panel-alt: #0e2740;\n        --accent: #0ea5e9;\n        --accent-glow: #38bdf8;\n        --accent-deep: #0369a1;\n        --text-primary: #e6f2fb;\n        --text-muted: #7d97ae;\n        --border-glow: rgba(56, 189, 248, 0.22);\n        font-family: 'Inter', -apple-system, sans-serif;\n        background: var(--bg-deepest);\n        color: var(--text-primary);\n        margin: 0 -2000px;\n        padding: 0 2000px;\n        overflow-x: hidden;\n    }\n    #dtalm-page * { box-sizing: border-box; }\n    #dtalm-page .dtalm-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; }\n    #dtalm-page .dtalm-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }\n    #dtalm-page .dtalm-eyebrow {\n        display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 12px;\n        font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;\n        color: var(--accent-glow); margin-bottom: 14px;\n    }\n\n    #dtalm-page .dtalm-hero {\n        padding: 60px 0 32px; text-align: center;\n        background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(14,165,233,0.16), transparent 70%),\n                    linear-gradient(180deg, var(--bg-deepest) 0%, #041525 100%);\n    }\n    #dtalm-page .dtalm-h1 {\n        font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; line-height: 1.1; margin: 0 0 12px;\n        background: linear-gradient(135deg, #ffffff 0%, var(--accent-glow) 65%, var(--accent) 100%);\n        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n    }\n    #dtalm-page .dtalm-hero-sub { font-size: 15px; color: var(--text-muted); max-width: 540px; margin: 0 auto; line-height: 1.6; }\n\n    \/* ---- LAYOUT: sidebar + results ---- *\/\n    #dtalm-page .dtalm-layout {\n        display: grid; grid-template-columns: 250px 1fr; gap: 26px;\n        padding: 30px 0 80px; align-items: start;\n    }\n    @media (max-width: 780px) {\n        #dtalm-page .dtalm-layout { grid-template-columns: 1fr; }\n    }\n\n    \/* ---- SIDEBAR ---- *\/\n    #dtalm-page .dtalm-sidebar {\n        background: var(--bg-panel); border: 1px solid var(--border-glow); border-radius: 12px;\n        padding: 20px; position: sticky; top: 20px;\n    }\n    #dtalm-page .dtalm-filter-group { margin-bottom: 20px; }\n    #dtalm-page .dtalm-filter-group:last-child { margin-bottom: 0; }\n    #dtalm-page .dtalm-filter-label {\n        font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-glow); margin-bottom: 8px; display: block;\n    }\n    #dtalm-page .dtalm-sidebar input[type=\"text\"],\n    #dtalm-page .dtalm-sidebar select {\n        width: 100%; background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-primary);\n        border-radius: 7px; padding: 9px 10px; font-size: 13px; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-sidebar input::placeholder { color: var(--text-muted); }\n    #dtalm-page .dtalm-checklist { max-height: 180px; overflow-y: auto; }\n    #dtalm-page .dtalm-check-row {\n        display: flex; align-items: center; justify-content: space-between; gap: 6px;\n        font-size: 12.5px; padding: 4px 0; color: var(--text-primary); cursor: pointer;\n    }\n    #dtalm-page .dtalm-check-row input { margin-right: 6px; }\n    #dtalm-page .dtalm-check-count { color: var(--text-muted); font-size: 11px; }\n    #dtalm-page .dtalm-clear-btn {\n        background: none; border: 1px solid var(--border-glow); color: var(--text-muted);\n        border-radius: 6px; padding: 7px; font-size: 12px; width: 100%; cursor: pointer; margin-top: 6px;\n    }\n    #dtalm-page .dtalm-clear-btn:hover { color: var(--accent-glow); border-color: var(--accent-glow); }\n\n    \/* ---- RESULTS ---- *\/\n    #dtalm-page .dtalm-results-head {\n        display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px;\n    }\n    #dtalm-page .dtalm-count { font-size: 13px; color: var(--text-muted); }\n    #dtalm-page .dtalm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }\n    #dtalm-page .dtalm-card {\n        background: linear-gradient(160deg, var(--bg-panel) 0%, var(--bg-panel-alt) 100%);\n        border: 1px solid var(--border-glow); border-radius: 14px; padding: 22px;\n        transition: border-color .25s, transform .25s;\n    }\n    #dtalm-page .dtalm-card:hover { border-color: var(--accent-glow); transform: translateY(-2px); }\n    #dtalm-page .dtalm-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }\n    #dtalm-page .dtalm-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; margin: 0; }\n    #dtalm-page .dtalm-card .dtalm-location { color: var(--text-muted); font-size: 12.5px; margin: 3px 0 0; }\n    #dtalm-page .dtalm-rating-badge {\n        background: rgba(56,189,248,0.12); border: 1px solid var(--border-glow); border-radius: 20px;\n        padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--accent-glow); white-space: nowrap;\n    }\n    #dtalm-page .dtalm-stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 6px; font-size: 12.5px; }\n    #dtalm-page .dtalm-stat { color: var(--text-muted); }\n    #dtalm-page .dtalm-stat strong { color: var(--text-primary); font-weight: 600; }\n    #dtalm-page .dtalm-rating-breakdown { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-size: 11px; color: var(--text-muted); }\n    #dtalm-page .dtalm-rating-breakdown span strong { color: var(--accent-glow); }\n    #dtalm-page .dtalm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }\n    #dtalm-page .dtalm-tag {\n        background: rgba(255,255,255,0.04); border: 1px solid var(--border-glow); border-radius: 5px;\n        padding: 3px 8px; font-size: 10.5px; color: var(--text-muted);\n    }\n    #dtalm-page .dtalm-tag-type { color: var(--accent-glow); border-color: rgba(56,189,248,0.4); }\n    #dtalm-page .dtalm-confidence {\n        font-size: 11px; color: var(--accent-glow); background: rgba(56,189,248,0.08);\n        border-radius: 6px; padding: 6px 10px; margin-top: 10px;\n    }\n    #dtalm-page .dtalm-no-data { font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: 8px; }\n    #dtalm-page .dtalm-exposure-note { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }\n    #dtalm-page .dtalm-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; grid-column: 1 \/ -1; }\n    #dtalm-page .dtalm-source-note {\n        text-align: center; font-size: 12px; color: var(--text-muted); padding: 30px 0 60px;\n        border-top: 1px solid var(--border-glow);\n    }\n\n    \/* ---- Skill-level: card trigger ---- *\/\n    #dtalm-page .dtalm-skill-link {\n        display: inline-block; margin-top: 12px; font-size: 12px; color: var(--accent-glow);\n        background: none; border: 1px solid var(--border-glow); border-radius: 6px;\n        padding: 6px 10px; cursor: pointer; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-skill-link:hover { border-color: var(--accent-glow); }\n\n    \/* ---- Skill-level: modal ---- *\/\n    #dtalm-page .dtalm-modal-overlay {\n        display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(3,15,26,.82);\n        align-items: center; justify-content: center; padding: 20px;\n    }\n    #dtalm-page .dtalm-modal-overlay.dtalm-open { display: flex; }\n    #dtalm-page .dtalm-modal-box {\n        background: linear-gradient(160deg, var(--bg-panel) 0%, var(--bg-panel-alt) 100%);\n        border: 1px solid var(--border-glow); border-radius: 14px; padding: 28px;\n        max-width: 440px; width: 100%; max-height: 86vh; overflow-y: auto; position: relative;\n    }\n    #dtalm-page .dtalm-modal-close {\n        position: absolute; top: 14px; right: 16px; background: none; border: none;\n        color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1;\n    }\n    #dtalm-page .dtalm-modal-close:hover { color: var(--accent-glow); }\n    #dtalm-page .dtalm-modal-box h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin: 0 0 4px; padding-right: 20px; }\n    #dtalm-page .dtalm-modal-sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 18px; }\n\n    #dtalm-page .dtalm-summary-box {\n        background: rgba(56,189,248,0.06); border: 1px solid var(--border-glow); border-radius: 8px;\n        padding: 12px 14px; margin-bottom: 18px; font-size: 13px;\n    }\n    #dtalm-page .dtalm-summary-box strong { color: var(--accent-glow); text-transform: capitalize; }\n\n    #dtalm-page .dtalm-level-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }\n    #dtalm-page .dtalm-level-btn {\n        background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-primary);\n        border-radius: 8px; padding: 10px; font-size: 13px; cursor: pointer; text-align: center;\n        font-family: 'Inter', sans-serif; text-transform: capitalize;\n    }\n    #dtalm-page .dtalm-level-btn.dtalm-selected { border-color: var(--accent-glow); background: rgba(56,189,248,0.14); color: var(--accent-glow); }\n\n    #dtalm-page .dtalm-field-label { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; display: block; }\n    #dtalm-page .dtalm-modal-box select {\n        width: 100%; background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-primary);\n        border-radius: 7px; padding: 9px 10px; font-size: 13px; font-family: 'Inter', sans-serif; margin-bottom: 16px;\n    }\n    #dtalm-page .dtalm-verified-note {\n        font-size: 11.5px; color: var(--accent-glow); background: rgba(56,189,248,0.08);\n        border-radius: 6px; padding: 8px 10px; margin-bottom: 14px;\n    }\n    #dtalm-page .dtalm-submit-btn {\n        width: 100%; background: var(--accent-deep); color: #fff; border: none; border-radius: 8px;\n        padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-submit-btn:hover { background: var(--accent); }\n    #dtalm-page .dtalm-submit-msg { font-size: 12.5px; margin-top: 10px; text-align: center; }\n\n    \/* ---- Embedded WP login form \u2014 restyled to fit the dark theme, not the\n         default WordPress admin look ---- *\/\n    #dtalm-page .dtalm-login-embed form { display: flex; flex-direction: column; gap: 10px; }\n    #dtalm-page .dtalm-login-embed p { margin: 0; }\n    #dtalm-page .dtalm-login-embed label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }\n    #dtalm-page .dtalm-login-embed input[type=\"text\"],\n    #dtalm-page .dtalm-login-embed input[type=\"password\"] {\n        width: 100%; background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-primary);\n        border-radius: 7px; padding: 9px 10px; font-size: 13px; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-login-embed input[type=\"submit\"] {\n        width: 100%; background: var(--accent-deep); color: #fff; border: none; border-radius: 8px;\n        padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; margin-top: 6px;\n    }\n    #dtalm-page .dtalm-login-embed input[type=\"submit\"]:hover { background: var(--accent); }\n    #dtalm-page .dtalm-login-embed input[type=\"checkbox\"] { margin-right: 6px; }\n\n    #dtalm-page .dtalm-trend-toggle { display: flex; gap: 8px; margin-bottom: 16px; }\n    #dtalm-page .dtalm-trend-toggle-btn {\n        flex: 1; background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-muted);\n        border-radius: 7px; padding: 8px; font-size: 12.5px; cursor: pointer; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-trend-toggle-btn.dtalm-selected { border-color: var(--accent-glow); background: rgba(56,189,248,0.14); color: var(--accent-glow); }\n    #dtalm-page .dtalm-trend-chart { width: 100%; height: auto; }\n    #dtalm-page .dtalm-trend-bar { fill: var(--accent); transition: opacity .2s; }\n    #dtalm-page .dtalm-trend-bar:hover { opacity: .8; }\n    #dtalm-page .dtalm-trend-label { fill: var(--text-muted); font-size: 9px; font-family: 'Inter', sans-serif; }\n    #dtalm-page .dtalm-trend-value { fill: var(--text-primary); font-size: 9px; font-family: 'Inter', sans-serif; font-weight: 600; }\n    #dtalm-page .dtalm-trend-empty { text-align: center; padding: 30px 10px; color: var(--text-muted); font-size: 13px; }\n\n    #dtalm-page .dtalm-risk-panel {\n        background: rgba(56,189,248,0.06); border: 1px solid var(--border-glow); border-radius: 10px;\n        padding: 16px 20px; margin-bottom: 20px;\n    }\n    #dtalm-page .dtalm-risk-panel h3 {\n        margin: 0 0 4px; font-size: 13px; font-family: 'Space Grotesk', sans-serif; color: var(--accent-glow);\n    }\n    #dtalm-page .dtalm-risk-panel .dtalm-risk-item { font-size: 12.5px; color: var(--text-primary); margin-top: 8px; }\n    #dtalm-page .dtalm-risk-panel .dtalm-risk-item strong { color: var(--accent-glow); }\n    #dtalm-page .dtalm-risk-panel .dtalm-risk-observed {\n        display: inline-block; font-size: 10px; color: var(--text-muted); border: 1px solid var(--border-glow);\n        border-radius: 10px; padding: 1px 7px; margin-left: 6px;\n    }\n    #dtalm-page .dtalm-country-badge {\n        display: inline-block; font-size: 10.5px; color: #fbbf24; margin-left: 4px; cursor: help;\n    }\n    #dtalm-page .dtalm-travel-level {\n        display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; margin-bottom: 12px;\n    }\n    #dtalm-page .dtalm-travel-level-1 { background: rgba(34,197,94,0.15); color: #4ade80; }\n    #dtalm-page .dtalm-travel-level-2 { background: rgba(250,204,21,0.15); color: #facc15; }\n    #dtalm-page .dtalm-travel-level-3 { background: rgba(251,146,60,0.15); color: #fb923c; }\n    #dtalm-page .dtalm-travel-level-4 { background: rgba(239,68,68,0.15); color: #f87171; }\n    #dtalm-page .dtalm-travel-summary { font-size: 13px; line-height: 1.6; color: var(--text-primary); max-height: 300px; overflow-y: auto; }\n    #dtalm-page .dtalm-travel-summary p { margin: 0 0 10px; }\n    #dtalm-page .dtalm-travel-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-glow); }\n    #dtalm-page #dtalm-conditions-input {\n        width: 100%; background: var(--bg-panel-alt); border: 1px solid var(--border-glow); color: var(--text-primary);\n        border-radius: 7px; padding: 9px 10px; font-size: 13px; font-family: 'Inter', sans-serif;\n    }\n    #dtalm-page .dtalm-conditions-temp { font-size: 32px; font-weight: 700; color: var(--accent-glow); font-family: 'Space Grotesk', sans-serif; }\n    #dtalm-page .dtalm-conditions-desc { font-size: 14px; color: var(--text-primary); margin-bottom: 10px; }\n    #dtalm-page .dtalm-conditions-stat-row { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }\n    #dtalm-page .dtalm-insurance-item {\n        border: 1px solid var(--border-glow); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;\n    }\n    #dtalm-page .dtalm-insurance-item h4 { margin: 0 0 4px; font-size: 14px; color: var(--accent-glow); }\n    #dtalm-page .dtalm-insurance-item p { margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); }\n    #dtalm-page .dtalm-insurance-item a {\n        display: inline-block; background: var(--accent-deep); color: #fff; text-decoration: none;\n        border-radius: 6px; padding: 6px 14px; font-size: 12.5px;\n    }\n<\/style>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<section class=\"dtalm-hero\">\n    <div class=\"dtalm-container\">\n        <span class=\"dtalm-eyebrow\">DTAlmanac<\/span>\n        <h1 class=\"dtalm-h1 dtalm-display\">Know before you go.<\/h1>\n        <p class=\"dtalm-hero-sub\">Real conditions, reported by real divers \u2014 not a satellite guess. Filter by what matters to you.<\/p>\n    <\/div>\n<\/section>\n\n<div class=\"dtalm-container\">\n    <div class=\"dtalm-layout\">\n\n        <aside class=\"dtalm-sidebar\">\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Search<\/label>\n                <input type=\"text\" id=\"dtalm-search\" placeholder=\"Site name...\">\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Month<\/label>\n                <select id=\"dtalm-month\">\n                    <option value=\"0\">Any month<\/option>\n                    <option value=\"1\">January<\/option><option value=\"2\">February<\/option><option value=\"3\">March<\/option>\n                    <option value=\"4\">April<\/option><option value=\"5\">May<\/option><option value=\"6\">June<\/option>\n                    <option value=\"7\">July<\/option><option value=\"8\">August<\/option><option value=\"9\">September<\/option>\n                    <option value=\"10\">October<\/option><option value=\"11\">November<\/option><option value=\"12\">December<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Sort By<\/label>\n                <select id=\"dtalm-sort\">\n                    <option value=\"rating\">Highest Rated<\/option>\n                    <option value=\"popularity\">Most Logged<\/option>\n                    <option value=\"depth_shallow\">Shallowest First<\/option>\n                    <option value=\"depth_deep\">Deepest First<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Country<\/label>\n                <select id=\"dtalm-country\"><option value=\"\">All countries<\/option><\/select>\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Min. Water Temp<\/label>\n                <select id=\"dtalm-temp-min\">\n                    <option value=\"0\">Any temperature<\/option>\n                    <option value=\"20\">20&deg;C \/ 68&deg;F+<\/option>\n                    <option value=\"24\">24&deg;C \/ 75&deg;F+<\/option>\n                    <option value=\"26\">26&deg;C \/ 79&deg;F+<\/option>\n                    <option value=\"28\">28&deg;C \/ 82&deg;F+<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Min. Rating<\/label>\n                <select id=\"dtalm-min-rating\">\n                    <option value=\"0\">Any rating<\/option>\n                    <option value=\"3\">3+ stars<\/option>\n                    <option value=\"4\">4+ stars<\/option>\n                    <option value=\"4.5\">4.5+ stars<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"dtalm-filter-group\">\n                <label class=\"dtalm-filter-label\">Dive Type<\/label>\n                <div class=\"dtalm-checklist\" id=\"dtalm-dive-type-list\"><\/div>\n            <\/div>\n            <button type=\"button\" class=\"dtalm-clear-btn\" id=\"dtalm-clear-btn\">Clear All Filters<\/button>\n            <button type=\"button\" class=\"dtalm-clear-btn\" id=\"dtalm-travel-btn\" onclick=\"dtalmOpenTravelModal()\" style=\"margin-top:8px;\">&#9992; Travel Advisories<\/button>\n            <button type=\"button\" class=\"dtalm-clear-btn\" id=\"dtalm-conditions-btn\" onclick=\"dtalmOpenConditionsModal()\" style=\"margin-top:8px;\">&#9728; Check Conditions<\/button>\n            <button type=\"button\" class=\"dtalm-clear-btn\" id=\"dtalm-insurance-btn\" onclick=\"dtalmOpenInsuranceModal()\" style=\"margin-top:8px;\">&#128737; Dive Insurance<\/button>\n\n            \n                            <a href=\"https:\/\/www.divetalking.com\/oceanseye\/dt-almanac\/\" id=\"dtalm-dtdl-link-btn\"\n                    target=\"_blank\" rel=\"noopener noreferrer\"                    class=\"dtalm-clear-btn\" style=\"display:block;text-align:center;text-decoration:none;margin-top:10px;background:rgba(56,189,248,0.1);border-color:var(--accent-glow);color:var(--accent-glow);\">\n                    &#127908; DTDL Dive Log\n                <\/a>\n                    <\/aside>\n\n        <div class=\"dtalm-results\">\n            <div class=\"dtalm-results-head\">\n                <span class=\"dtalm-count\" id=\"dtalm-count\"><\/span>\n            <\/div>\n            <div id=\"dtalm-risk-panel\" style=\"display:none;\"><\/div>\n            <div class=\"dtalm-grid\" id=\"dtalm-grid\"><\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<div class=\"dtalm-source-note\">\n    Site data reflects real logged dives from the DTDL Dive Log community \u2014 every figure shown states exactly how many dives it is based on.\n<\/div>\n\n<!-- Skill-level modal \u2014 one reusable modal, not one per card -->\n<div class=\"dtalm-modal-overlay\" id=\"dtalm-skill-modal\">\n    <div class=\"dtalm-modal-box\">\n        <button type=\"button\" class=\"dtalm-modal-close\" onclick=\"dtalmCloseSkillModal()\">&times;<\/button>\n        <h3 id=\"dtalm-skill-modal-title\">Rate this site<\/h3>\n        <p class=\"dtalm-modal-sub\">What experience level would you recommend for divers here?<\/p>\n\n        <div class=\"dtalm-summary-box\" id=\"dtalm-skill-summary\"><\/div>\n\n        <div id=\"dtalm-skill-logged-out\" style=\"display:none;\">\n            <div class=\"dtalm-login-embed\"><form name=\"loginform\" id=\"loginform\" action=\"https:\/\/www.divetalking.com\/oceanseye\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">Email or Username<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Password<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Remember Me<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Log In\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/pages\/176\" \/>\n\t\t\t<\/p><\/form><\/div>\n        <\/div>\n\n        <div id=\"dtalm-skill-logged-in\" style=\"display:none;\">\n            <div id=\"dtalm-verified-picker\"><\/div>\n\n            <label class=\"dtalm-field-label\">Recommended level for this site<\/label>\n            <div class=\"dtalm-level-group\" id=\"dtalm-level-group\">\n                <button type=\"button\" class=\"dtalm-level-btn\" data-level=\"beginner\">Beginner<\/button>\n                <button type=\"button\" class=\"dtalm-level-btn\" data-level=\"intermediate\">Intermediate<\/button>\n                <button type=\"button\" class=\"dtalm-level-btn\" data-level=\"advanced\">Advanced<\/button>\n                <button type=\"button\" class=\"dtalm-level-btn\" data-level=\"technical\">Technical<\/button>\n            <\/div>\n\n            <div id=\"dtalm-experience-field\" style=\"display:none;\">\n                <label class=\"dtalm-field-label\">Your own experience level (asked once, used for future submissions too)<\/label>\n                <select id=\"dtalm-submitter-level\">\n                    <option value=\"beginner\">Beginner<\/option>\n                    <option value=\"intermediate\">Intermediate<\/option>\n                    <option value=\"advanced\">Advanced<\/option>\n                    <option value=\"technical\">Technical<\/option>\n                <\/select>\n            <\/div>\n\n            <button type=\"button\" class=\"dtalm-submit-btn\" id=\"dtalm-skill-submit-btn\" onclick=\"dtalmSubmitSkill()\">Submit<\/button>\n            <div class=\"dtalm-submit-msg\" id=\"dtalm-skill-submit-msg\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Seasonal trend modal \u2014 one reusable modal, not one per card. Placed\n     here, before the <script> block below, so every element it references\n     via getElementById already exists in the DOM by the time that script\n     runs (see the Engineering Standards document DOM Reference Ordering Check). -->\n<div class=\"dtalm-modal-overlay\" id=\"dtalm-trend-modal\">\n    <div class=\"dtalm-modal-box\">\n        <button type=\"button\" class=\"dtalm-modal-close\" onclick=\"dtalmCloseTrendModal()\">&times;<\/button>\n        <h3 id=\"dtalm-trend-modal-title\">Seasonal Trend<\/h3>\n        <p class=\"dtalm-modal-sub\">Month-by-month conditions, from real logged dives.<\/p>\n\n        <div class=\"dtalm-trend-toggle\">\n            <button type=\"button\" class=\"dtalm-trend-toggle-btn dtalm-selected\" id=\"dtalm-trend-toggle-temp\" onclick=\"dtalmSetTrendMetric('temp')\">Water Temp<\/button>\n            <button type=\"button\" class=\"dtalm-trend-toggle-btn\" id=\"dtalm-trend-toggle-vis\" onclick=\"dtalmSetTrendMetric('visibility')\">Visibility<\/button>\n        <\/div>\n\n        <div id=\"dtalm-trend-chart-wrap\"><\/div>\n    <\/div>\n<\/div>\n\n<!-- Travel advisories modal \u2014 country picker built entirely from the\n     synced table itself (dtalm_get_travel_countries), not a separate\n     static list, so it can only ever show countries with real data. -->\n<div class=\"dtalm-modal-overlay\" id=\"dtalm-travel-modal\">\n    <div class=\"dtalm-modal-box\">\n        <button type=\"button\" class=\"dtalm-modal-close\" onclick=\"dtalmCloseTravelModal()\">&times;<\/button>\n        <h3>Travel Advisories<\/h3>\n        <p class=\"dtalm-modal-sub\">US State Department, synced daily.<\/p>\n\n        <select id=\"dtalm-travel-country-select\" style=\"width:100%;margin-bottom:14px;\">\n            <option value=\"\">Select a country...<\/option>\n        <\/select>\n\n        <div id=\"dtalm-travel-result\"><\/div>\n    <\/div>\n<\/div>\n\n<!-- Check Conditions modal \u2014 free-text search, not a dropdown, since this\n     must work for any place someone searches, entirely independent of\n     dtalm_sites. -->\n<div class=\"dtalm-modal-overlay\" id=\"dtalm-conditions-modal\">\n    <div class=\"dtalm-modal-box\">\n        <button type=\"button\" class=\"dtalm-modal-close\" onclick=\"dtalmCloseConditionsModal()\">&times;<\/button>\n        <h3>Check Conditions<\/h3>\n        <p class=\"dtalm-modal-sub\">Live weather for any location, worldwide.<\/p>\n\n        <div style=\"display:flex;gap:8px;margin-bottom:14px;\">\n            <input type=\"text\" id=\"dtalm-conditions-input\" placeholder=\"e.g. Cebu, Philippines\" style=\"flex:1;\">\n            <button type=\"button\" class=\"button button-primary\" onclick=\"dtalmSearchConditions()\" style=\"background:var(--accent-deep);border:none;color:#fff;border-radius:7px;padding:0 16px;cursor:pointer;\">Search<\/button>\n        <\/div>\n\n        <div id=\"dtalm-conditions-result\"><\/div>\n    <\/div>\n<\/div>\n\n<!-- Insurance directory modal \u2014 admin-curated, always shown in full. -->\n<div class=\"dtalm-modal-overlay\" id=\"dtalm-insurance-modal\">\n    <div class=\"dtalm-modal-box\">\n        <button type=\"button\" class=\"dtalm-modal-close\" onclick=\"dtalmCloseInsuranceModal()\">&times;<\/button>\n        <h3>Dive &amp; Travel Insurance<\/h3>\n        <p class=\"dtalm-modal-sub\">A curated list of providers worth considering before your trip.<\/p>\n\n        <div id=\"dtalm-insurance-list\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    var ajax  = \"https:\\\/\\\/www.divetalking.com\\\/oceanseye\\\/wp-admin\\\/admin-ajax.php\";\n    var nonce = \"145a8e4366\";\n\n    function dtalmEsc( s ) {\n        return String( s == null ? '' : s )\n            .replace( \/&\/g, '&amp;' ).replace( \/<\/g, '&lt;' )\n            .replace( \/>\/g, '&gt;' ).replace( \/\"\/g, '&quot;' );\n    }\n    \/**\n     * A suggested starting point, not a stated fact \u2014 cold tolerance\n     * varies enormously person to person. Thresholds agreed on directly:\n     * 28C+ rash guard\/3mm, 24-28C 3-5mm, 20-24C 5-7mm or semi-dry, below\n     * 20C drysuit territory.\n     *\/\n    function dtalmExposureSuggestion( tempC ) {\n        var t = parseFloat( tempC );\n        if ( isNaN( t ) ) return null;\n        if ( t >= 28 ) return 'Rash guard \/ 3mm';\n        if ( t >= 24 ) return '3-5mm wetsuit';\n        if ( t >= 20 ) return '5-7mm or semi-dry';\n        return 'Drysuit territory';\n    }\n\n    function dtalmPost( action, params ) {\n        var fd = new FormData();\n        fd.append( 'action', action );\n        fd.append( 'nonce', nonce );\n        for ( var k in params ) {\n            if ( ! params.hasOwnProperty( k ) ) continue;\n            if ( Array.isArray( params[k] ) ) {\n                params[k].forEach( function( v ) { fd.append( k + '[]', v ); } );\n            } else {\n                fd.append( k, params[k] );\n            }\n        }\n        return fetch( ajax, { method: 'POST', body: fd } ).then( function( r ) { return r.json(); } );\n    }\n\n    window.dtalmRequestSync = function() {\n        var $btn = document.getElementById( 'dtalm-request-sync-btn' );\n        if ( ! $btn ) return;\n        var original = $btn.textContent;\n        $btn.disabled = true;\n        $btn.textContent = 'Requesting\u2026';\n\n        dtalmPost( 'dtalm_request_sync', {} ).then( function( r ) {\n            $btn.disabled = false;\n            $btn.textContent = original;\n            alert( r.success ? r.data.message : r.data );\n        } ).catch( function() {\n            $btn.disabled = false;\n            $btn.textContent = original;\n            alert( 'Request failed \u2014 check your connection and try again.' );\n        } );\n    };\n\n    \/\/ ---- Load filter option lists (countries, dive types) once ----\n    function dtalmLoadFilterOptions() {\n        dtalmPost( 'dtalm_get_filters', {} ).then( function( r ) {\n            if ( ! r.success ) return;\n\n            var $country = document.getElementById( 'dtalm-country' );\n            r.data.countries.forEach( function( c ) {\n                var opt = document.createElement( 'option' );\n                opt.value = c.country;\n                opt.textContent = c.country + ' (' + c.site_count + ')';\n                $country.appendChild( opt );\n            } );\n\n            var $typeList = document.getElementById( 'dtalm-dive-type-list' );\n            if ( ! r.data.dive_types.length ) {\n                $typeList.innerHTML = '<p style=\"font-size:11.5px;color:var(--text-muted);margin:0;\">None logged yet<\/p>';\n            } else {\n                r.data.dive_types.forEach( function( t ) {\n                    var label = document.createElement( 'label' );\n                    label.className = 'dtalm-check-row';\n                    label.innerHTML = '<span><input type=\"checkbox\" class=\"dtalm-type-check\" value=\"' + dtalmEsc( t.dive_type ) + '\">' + dtalmEsc( t.dive_type ) + '<\/span>'\n                                     + '<span class=\"dtalm-check-count\">' + t.site_count + '<\/span>';\n                    $typeList.appendChild( label );\n                } );\n            }\n        } );\n    }\n\n    \/\/ ---- Load results ----\n    function dtalmRenderRiskPanel( risks ) {\n        var $panel = document.getElementById( 'dtalm-risk-panel' );\n        if ( ! risks.length ) {\n            $panel.style.display = 'none';\n            $panel.innerHTML = '';\n            return;\n        }\n        var html = '<div class=\"dtalm-risk-panel\"><h3>&#9888; Seasonal Considerations<\/h3>';\n        risks.forEach( function( risk ) {\n            var season = dtalmMonthLabels[ risk.season_start_month - 1 ] + '-' + dtalmMonthLabels[ risk.season_end_month - 1 ];\n            var peak = risk.peak_start_month ? ( ' &middot; peak ' + dtalmMonthLabels[ risk.peak_start_month - 1 ] + '-' + dtalmMonthLabels[ risk.peak_end_month - 1 ] ) : '';\n            var observedTag = ( risk.has_official_dates === '1' || risk.has_official_dates === 1 )\n                ? '' : '<span class=\"dtalm-risk-observed\">observed pattern, not official<\/span>';\n            html += '<div class=\"dtalm-risk-item\">'\n                  + '<strong>' + dtalmEsc( risk.region_name ) + '<\/strong> &mdash; ' + season + peak + observedTag\n                  + '<\/div>';\n        } );\n        html += '<\/div>';\n        $panel.innerHTML = html;\n        $panel.style.display = 'block';\n    }\n\n    function dtalmLoad() {\n        var checkedTypes = Array.prototype.slice.call( document.querySelectorAll( '.dtalm-type-check:checked' ) ).map( function( el ) { return el.value; } );\n\n        dtalmPost( 'dtalm_site_list', {\n            search: document.getElementById( 'dtalm-search' ).value.trim(),\n            month: document.getElementById( 'dtalm-month' ).value,\n            sort: document.getElementById( 'dtalm-sort' ).value,\n            country: document.getElementById( 'dtalm-country' ).value,\n            water_temp_min: document.getElementById( 'dtalm-temp-min' ).value,\n            min_rating: document.getElementById( 'dtalm-min-rating' ).value,\n            dive_types: checkedTypes\n        } ).then( function( r ) {\n            var $grid  = document.getElementById( 'dtalm-grid' );\n            var $count = document.getElementById( 'dtalm-count' );\n\n            if ( ! r.success || ! r.data.length ) {\n                $grid.innerHTML = '<div class=\"dtalm-empty\">No sites match these filters yet \u2014 this directory grows as divers log real dives. Try broadening your search.<\/div>';\n                $count.textContent = '0 sites';\n                document.getElementById( 'dtalm-risk-panel' ).style.display = 'none';\n                return;\n            }\n            $count.textContent = r.data.length + ( r.data.length === 1 ? ' site' : ' sites' );\n\n            var distinctCountries = [];\n            r.data.forEach( function( site ) {\n                if ( site.country && distinctCountries.indexOf( site.country ) === -1 ) {\n                    distinctCountries.push( site.country );\n                }\n            } );\n\n            dtalmPost( 'dtalm_get_risks_for_countries', { countries: distinctCountries } ).then( function( rr ) {\n                var risks = rr.success ? rr.data : [];\n                dtalmRenderRiskPanel( risks );\n\n                var countriesWithRisk = {};\n                risks.forEach( function( risk ) {\n                    ( risk.matched_countries || [] ).forEach( function( c ) { countriesWithRisk[ c ] = true; } );\n                } );\n\n                var monthSelected = document.getElementById( 'dtalm-month' ).value !== '0';\n                var html = '';\n                r.data.forEach( function( site ) {\n                var rating = site.avg_rating_overall ? parseFloat( site.avg_rating_overall ).toFixed( 1 ) + ' \/ 5' : 'No ratings yet';\n                html += '<div class=\"dtalm-card\">'\n                      + '<div class=\"dtalm-card-top\">'\n                      +   '<div><h3>' + dtalmEsc( site.site_name ) + '<\/h3>'\n                      +   '<p class=\"dtalm-location\">' + dtalmEsc( site.location ) + ( site.location && site.country ? ', ' : '' ) + dtalmEsc( site.country )\n                      +   ( countriesWithRisk[ site.country ] ? '<span class=\"dtalm-country-badge\" title=\"Seasonal risk applies \u2014 see Seasonal Considerations above\">&#9888;<\/span>' : '' )\n                      +   '<\/p><\/div>'\n                      +   '<span class=\"dtalm-rating-badge\">&#9733; ' + rating + '<\/span>'\n                      + '<\/div>';\n\n                if ( monthSelected ) {\n                    if ( site.month_dive_count > 0 ) {\n                        var monthExposure = dtalmExposureSuggestion( site.month_temp_surface );\n                        html += '<div class=\"dtalm-stat-row\">'\n                              + ( site.month_visibility ? '<span class=\"dtalm-stat\"><strong>' + site.month_visibility + 'm<\/strong> visibility<\/span>' : '' )\n                              + ( site.month_temp_surface ? '<span class=\"dtalm-stat\"><strong>' + site.month_temp_surface + '&deg;C<\/strong> surface<\/span>' : '' )\n                              + '<\/div>'\n                              + ( monthExposure ? '<div class=\"dtalm-exposure-note\">Suggested exposure: ' + monthExposure + '<\/div>' : '' )\n                              + '<div class=\"dtalm-confidence\">&#128202; ' + dtalmEsc( site.month_confidence ) + '<\/div>';\n                    } else {\n                        html += '<div class=\"dtalm-no-data\">No logged dives for this site in the selected month yet.<\/div>';\n                    }\n                } else {\n                    var overallExposure = dtalmExposureSuggestion( site.avg_temp_surface_c );\n                    html += '<div class=\"dtalm-stat-row\">'\n                          + '<span class=\"dtalm-stat\"><strong>' + site.dive_count + '<\/strong> dive' + ( parseInt( site.dive_count, 10 ) === 1 ? '' : 's' ) + ' logged<\/span>'\n                          + ( site.avg_depth_m ? '<span class=\"dtalm-stat\">Avg depth <strong>' + site.avg_depth_m + 'm<\/strong><\/span>' : '' )\n                          + ( site.max_depth_m ? '<span class=\"dtalm-stat\">Max <strong>' + site.max_depth_m + 'm<\/strong><\/span>' : '' )\n                          + '<\/div>'\n                          + ( overallExposure ? '<div class=\"dtalm-exposure-note\">Suggested exposure: ' + overallExposure + '<\/div>' : '' );\n                }\n\n                if ( site.avg_rating_overall ) {\n                    var dims = [];\n                    if ( site.avg_rating_visibility ) dims.push( 'Visibility <strong>' + parseFloat( site.avg_rating_visibility ).toFixed( 1 ) + '<\/strong>' );\n                    if ( site.avg_rating_fish )       dims.push( 'Fish Life <strong>' + parseFloat( site.avg_rating_fish ).toFixed( 1 ) + '<\/strong>' );\n                    if ( site.avg_rating_coral )       dims.push( 'Coral <strong>' + parseFloat( site.avg_rating_coral ).toFixed( 1 ) + '<\/strong>' );\n                    if ( site.avg_rating_photo )       dims.push( 'Photo <strong>' + parseFloat( site.avg_rating_photo ).toFixed( 1 ) + '<\/strong>' );\n                    if ( site.avg_rating_ease )         dims.push( 'Ease <strong>' + parseFloat( site.avg_rating_ease ).toFixed( 1 ) + '<\/strong>' );\n                    if ( dims.length ) {\n                        html += '<div class=\"dtalm-rating-breakdown\">' + dims.map( function( d ) { return '<span>' + d + '<\/span>'; } ).join( '' ) + '<\/div>';\n                    }\n                }\n\n                var tags = '';\n                ( site.dive_types || [] ).slice( 0, 4 ).forEach( function( t ) { tags += '<span class=\"dtalm-tag dtalm-tag-type\">' + dtalmEsc( t ) + '<\/span>'; } );\n                ( site.top_species || [] ).slice( 0, 4 ).forEach( function( sp ) {\n                    var tipParts = [];\n                    if ( sp.family ) { tipParts.push( 'Family: ' + sp.family ); }\n                    if ( sp.scientific_name ) { tipParts.push( 'Possibly ' + sp.scientific_name ); }\n                    var tip = tipParts.length ? ' title=\"' + dtalmEsc( tipParts.join( ' \\u2014 ' ) ) + '\"' : '';\n                    tags += '<span class=\"dtalm-tag\"' + tip + '>' + dtalmEsc( sp.tag ) + '<\/span>';\n                } );\n                if ( tags ) { html += '<div class=\"dtalm-tags\">' + tags + '<\/div>'; }\n\n                html += '<div><button type=\"button\" class=\"dtalm-skill-link\" onclick=\"dtalmOpenSkillModal(' + site.id + ')\">Rate skill level<\/button>'\n                      + ' &middot; <button type=\"button\" class=\"dtalm-skill-link\" onclick=\"dtalmOpenTrendModal(' + site.id + ')\">View Trend<\/button><\/div>';\n\n                html += '<\/div>';\n                } );\n                window.dtalmLastResults = r.data;\n                $grid.innerHTML = html;\n            } );\n        } );\n    }\n\n    document.getElementById( 'dtalm-search' ).addEventListener( 'input', function() {\n        clearTimeout( window.dtalmSearchTimer );\n        window.dtalmSearchTimer = setTimeout( dtalmLoad, 350 );\n    } );\n    document.getElementById( 'dtalm-month' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-sort' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-country' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-temp-min' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-min-rating' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-dive-type-list' ).addEventListener( 'change', dtalmLoad );\n    document.getElementById( 'dtalm-clear-btn' ).addEventListener( 'click', function() {\n        document.getElementById( 'dtalm-search' ).value = '';\n        document.getElementById( 'dtalm-month' ).value = '0';\n        document.getElementById( 'dtalm-sort' ).value = 'rating';\n        document.getElementById( 'dtalm-country' ).value = '';\n        document.getElementById( 'dtalm-temp-min' ).value = '0';\n        document.getElementById( 'dtalm-min-rating' ).value = '0';\n        document.querySelectorAll( '.dtalm-type-check' ).forEach( function( el ) { el.checked = false; } );\n        dtalmLoad();\n    } );\n\n    dtalmLoadFilterOptions();\n    dtalmLoad();\n\n    \/\/ ---- Skill-level modal ----\n    var dtalmSkillSiteId    = 0;\n    var dtalmSelectedLevel  = '';\n    var dtalmSelectedDiveId = 0;\n\n    window.dtalmOpenSkillModal = function( siteId ) {\n        dtalmSkillSiteId    = siteId;\n        dtalmSelectedLevel  = '';\n        dtalmSelectedDiveId = 0;\n\n        var site = ( window.dtalmLastResults || [] ).filter( function( s ) { return parseInt( s.id, 10 ) === siteId; } )[0];\n        document.getElementById( 'dtalm-skill-modal-title' ).textContent = site ? ( 'Rate ' + site.site_name ) : 'Rate this site';\n\n        document.querySelectorAll( '.dtalm-level-btn' ).forEach( function( btn ) { btn.classList.remove( 'dtalm-selected' ); } );\n        document.getElementById( 'dtalm-skill-submit-msg' ).textContent = '';\n        document.getElementById( 'dtalm-verified-picker' ).innerHTML = '';\n        document.getElementById( 'dtalm-skill-modal' ).classList.add( 'dtalm-open' );\n\n        dtalmPost( 'dtalm_get_skill_summary', { site_id: siteId } ).then( function( r ) {\n            if ( ! r.success ) return;\n            var d = r.data;\n\n            var summaryHtml = d.total_count > 0\n                ? 'Most divers say: <strong>' + dtalmEsc( d.top_level ) + '<\/strong> \u2014 based on ' + d.total_count + ' submission' + ( d.total_count === 1 ? '' : 's' )\n                    + ( d.verified_count > 0 ? ' (' + d.verified_count + ' diver-verified)' : '' )\n                : 'No submissions yet for this site \u2014 be the first.';\n            document.getElementById( 'dtalm-skill-summary' ).innerHTML = summaryHtml;\n\n            if ( ! d.is_logged_in ) {\n                document.getElementById( 'dtalm-skill-logged-out' ).style.display = 'block';\n                document.getElementById( 'dtalm-skill-logged-in' ).style.display = 'none';\n                return;\n            }\n            document.getElementById( 'dtalm-skill-logged-out' ).style.display = 'none';\n            document.getElementById( 'dtalm-skill-logged-in' ).style.display = 'block';\n\n            \/\/ Experience level only asked once \u2014 hidden if already captured.\n            var expField = document.getElementById( 'dtalm-experience-field' );\n            if ( d.my_experience ) {\n                expField.style.display = 'none';\n            } else {\n                expField.style.display = 'block';\n            }\n\n            \/\/ Pre-select this user's existing unverified submission, if any.\n            var existing = ( d.my_submissions || [] ).filter( function( s ) { return ! s.dtdl_dive_log_id; } )[0];\n            if ( existing ) {\n                dtalmSelectedLevel = existing.recommended_level;\n                document.querySelectorAll( '.dtalm-level-btn' ).forEach( function( btn ) {\n                    btn.classList.toggle( 'dtalm-selected', btn.getAttribute( 'data-level' ) === existing.recommended_level );\n                } );\n            }\n        } );\n\n        \/\/ Verified-dive picker \u2014 only appears if DTDL is present and this\n        \/\/ user has real logged dives at this site.\n        dtalmPost( 'dtalm_get_my_dives_at_site', { site_id: siteId } ).then( function( r ) {\n            if ( ! r.success || ! r.data.dtdl_available || ! r.data.dives.length ) return;\n\n            var html = '<label class=\"dtalm-field-label\">Rate a specific logged dive (verified)<\/label>'\n                     + '<select id=\"dtalm-dive-picker\"><option value=\"0\">General site rating (not tied to a specific dive)<\/option>';\n            r.data.dives.forEach( function( dive ) {\n                var label = dive.entry_date + ( dive.already_submitted_level ? ' \u2014 already rated: ' + dive.already_submitted_level : '' );\n                html += '<option value=\"' + dive.id + '\">' + dtalmEsc( label ) + '<\/option>';\n            } );\n            html += '<\/select>';\n            document.getElementById( 'dtalm-verified-picker' ).innerHTML = html;\n            document.getElementById( 'dtalm-dive-picker' ).addEventListener( 'change', function() {\n                dtalmSelectedDiveId = parseInt( this.value, 10 ) || 0;\n            } );\n        } );\n    };\n\n    window.dtalmCloseSkillModal = function() {\n        document.getElementById( 'dtalm-skill-modal' ).classList.remove( 'dtalm-open' );\n    };\n\n    document.getElementById( 'dtalm-level-group' ).addEventListener( 'click', function( e ) {\n        var btn = e.target.closest( '.dtalm-level-btn' );\n        if ( ! btn ) return;\n        dtalmSelectedLevel = btn.getAttribute( 'data-level' );\n        document.querySelectorAll( '.dtalm-level-btn' ).forEach( function( b ) { b.classList.remove( 'dtalm-selected' ); } );\n        btn.classList.add( 'dtalm-selected' );\n    } );\n\n    window.dtalmSubmitSkill = function() {\n        var $msg = document.getElementById( 'dtalm-skill-submit-msg' );\n        if ( ! dtalmSelectedLevel ) {\n            $msg.textContent = 'Choose a recommended level first.';\n            return;\n        }\n\n        var expField = document.getElementById( 'dtalm-experience-field' );\n        var submitterLevel = ( expField.style.display !== 'none' )\n            ? document.getElementById( 'dtalm-submitter-level' ).value\n            : '';\n\n        $msg.textContent = 'Submitting...';\n        dtalmPost( 'dtalm_submit_skill', {\n            site_id: dtalmSkillSiteId,\n            recommended_level: dtalmSelectedLevel,\n            dtdl_dive_log_id: dtalmSelectedDiveId,\n            submitter_level: submitterLevel\n        } ).then( function( r ) {\n            if ( ! r.success ) {\n                $msg.textContent = ( typeof r.data === 'string' ) ? r.data : 'Could not submit \u2014 try again.';\n                return;\n            }\n            $msg.textContent = 'Thanks \u2014 your submission was saved.';\n            expField.style.display = 'none';\n        } );\n    };\n\n    \/\/ ---- Seasonal trend modal ----\n    var dtalmTrendData    = [];\n    var dtalmTrendMetric  = 'temp';\n    var dtalmMonthLabels  = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\n\n    window.dtalmOpenTrendModal = function( siteId ) {\n        var site = ( window.dtalmLastResults || [] ).filter( function( s ) { return parseInt( s.id, 10 ) === siteId; } )[0];\n        document.getElementById( 'dtalm-trend-modal-title' ).textContent = site ? ( site.site_name + ' \u2014 Seasonal Trend' ) : 'Seasonal Trend';\n        document.getElementById( 'dtalm-trend-modal' ).classList.add( 'dtalm-open' );\n        document.getElementById( 'dtalm-trend-chart-wrap' ).innerHTML = '<div class=\"dtalm-trend-empty\">Loading...<\/div>';\n\n        dtalmTrendMetric = 'temp';\n        document.getElementById( 'dtalm-trend-toggle-temp' ).classList.add( 'dtalm-selected' );\n        document.getElementById( 'dtalm-trend-toggle-vis' ).classList.remove( 'dtalm-selected' );\n\n        dtalmPost( 'dtalm_get_site_trend', { site_id: siteId } ).then( function( r ) {\n            dtalmTrendData = r.success ? r.data : [];\n            dtalmRenderTrendChart();\n        } );\n    };\n\n    window.dtalmCloseTrendModal = function() {\n        document.getElementById( 'dtalm-trend-modal' ).classList.remove( 'dtalm-open' );\n    };\n\n    window.dtalmSetTrendMetric = function( metric ) {\n        dtalmTrendMetric = metric;\n        document.getElementById( 'dtalm-trend-toggle-temp' ).classList.toggle( 'dtalm-selected', metric === 'temp' );\n        document.getElementById( 'dtalm-trend-toggle-vis' ).classList.toggle( 'dtalm-selected', metric === 'visibility' );\n        dtalmRenderTrendChart();\n    };\n\n    \/**\n     * Hand-built SVG bar chart \u2014 twelve data points at most, genuinely\n     * simple enough not to warrant pulling in a charting library as\n     * DTAlmanac's first external JS dependency. Bar height reflects the\n     * value; bar opacity reflects how many logged dives that month's\n     * average is based on (fewer dives, more faded) \u2014 the same\n     * transparency signal used everywhere else, expressed visually rather\n     * than only in text. Months with no data get an honest placeholder,\n     * not an invented zero.\n     *\/\n    function dtalmRenderTrendChart() {\n        var $wrap = document.getElementById( 'dtalm-trend-chart-wrap' );\n        var field = dtalmTrendMetric === 'temp' ? 'avg_temp_surface_c' : 'avg_visibility_m';\n        var unit  = dtalmTrendMetric === 'temp' ? '&deg;C' : 'm';\n\n        var byMonth = {};\n        dtalmTrendData.forEach( function( row ) { byMonth[ parseInt( row.month_num, 10 ) ] = row; } );\n\n        var values = dtalmTrendData\n            .map( function( row ) { return row[ field ] !== null ? parseFloat( row[ field ] ) : null; } )\n            .filter( function( v ) { return v !== null; } );\n\n        if ( ! values.length ) {\n            $wrap.innerHTML = '<div class=\"dtalm-trend-empty\">Not enough logged dives yet to show a seasonal trend for this metric.<\/div>';\n            return;\n        }\n\n        var min = Math.min.apply( null, values );\n        var max = Math.max.apply( null, values );\n        if ( min === max ) { min -= 1; max += 1; } \/\/ avoid a zero-range chart\n\n        var chartW = 340, chartH = 150, barW = 20, gap = 8, baseY = 120, topPad = 14;\n        var svg = '<svg class=\"dtalm-trend-chart\" viewBox=\"0 0 ' + chartW + ' 170\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">';\n\n        for ( var m = 1; m <= 12; m++ ) {\n            var x = ( m - 1 ) * ( barW + gap ) + 6;\n            var row = byMonth[ m ];\n\n            if ( ! row || row[ field ] === null ) {\n                svg += '<rect class=\"dtalm-trend-bar\" x=\"' + x + '\" y=\"' + ( baseY - 4 ) + '\" width=\"' + barW + '\" height=\"4\" opacity=\"0.15\" rx=\"2\"><\/rect>';\n                svg += '<text class=\"dtalm-trend-label\" x=\"' + ( x + barW \/ 2 ) + '\" y=\"164\" text-anchor=\"middle\">' + dtalmMonthLabels[ m - 1 ] + '<\/text>';\n                continue;\n            }\n\n            var val = parseFloat( row[ field ] );\n            var frac = ( val - min ) \/ ( max - min );\n            var barH = Math.max( 6, frac * ( baseY - topPad ) );\n            var diveCount = parseInt( row.dive_count, 10 ) || 0;\n            var opacity = Math.min( 1, Math.max( 0.35, diveCount \/ 3 ) );\n\n            svg += '<rect class=\"dtalm-trend-bar\" x=\"' + x + '\" y=\"' + ( baseY - barH ) + '\" width=\"' + barW + '\" height=\"' + barH + '\" opacity=\"' + opacity + '\" rx=\"3\"><\/rect>';\n            svg += '<text class=\"dtalm-trend-value\" x=\"' + ( x + barW \/ 2 ) + '\" y=\"' + ( baseY - barH - 5 ) + '\" text-anchor=\"middle\">' + val.toFixed( 1 ) + '<\/text>';\n            svg += '<text class=\"dtalm-trend-label\" x=\"' + ( x + barW \/ 2 ) + '\" y=\"164\" text-anchor=\"middle\">' + dtalmMonthLabels[ m - 1 ] + '<\/text>';\n        }\n\n        svg += '<\/svg>';\n        svg += '<p style=\"font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;\">Values in ' + unit.replace( '&deg;', '\u00b0' ) + ' &middot; fainter bars are based on fewer logged dives<\/p>';\n        $wrap.innerHTML = svg;\n    }\n\n    \/\/ ---- Travel advisories ----\n    var dtalmTravelCountriesLoaded = false;\n\n    window.dtalmOpenTravelModal = function() {\n        document.getElementById( 'dtalm-travel-modal' ).classList.add( 'dtalm-open' );\n        if ( ! dtalmTravelCountriesLoaded ) {\n            dtalmPost( 'dtalm_get_travel_countries', {} ).then( function( r ) {\n                var $sel = document.getElementById( 'dtalm-travel-country-select' );\n                if ( r.success ) {\n                    r.data.forEach( function( c ) {\n                        var opt = document.createElement( 'option' );\n                        opt.value = c;\n                        opt.textContent = c;\n                        $sel.appendChild( opt );\n                    } );\n                }\n                dtalmTravelCountriesLoaded = true;\n            } );\n        }\n    };\n\n    window.dtalmCloseTravelModal = function() {\n        document.getElementById( 'dtalm-travel-modal' ).classList.remove( 'dtalm-open' );\n    };\n\n    document.getElementById( 'dtalm-travel-country-select' ).addEventListener( 'change', function() {\n        var country = this.value;\n        var $result = document.getElementById( 'dtalm-travel-result' );\n        if ( ! country ) {\n            $result.innerHTML = '';\n            return;\n        }\n        $result.innerHTML = '<p style=\"color:var(--text-muted);font-size:13px;\">Loading...<\/p>';\n\n        dtalmPost( 'dtalm_get_travel_advisory', { country: country } ).then( function( r ) {\n            if ( ! r.success ) {\n                $result.innerHTML = '<p style=\"color:var(--text-muted);font-size:13px;\">No advisory found for that country.<\/p>';\n                return;\n            }\n            var a = r.data;\n            var level = parseInt( a.advisory_level, 10 ) || 1;\n            var updated = a.advisory_updated_at ? new Date( a.advisory_updated_at ).toLocaleDateString() : 'unknown';\n\n            $result.innerHTML =\n                '<div class=\"dtalm-travel-level dtalm-travel-level-' + level + '\">Level ' + level + ': ' + dtalmEsc( a.advisory_level_text ) + '<\/div>'\n              + '<div class=\"dtalm-travel-summary\">' + a.summary + '<\/div>'\n              + '<div class=\"dtalm-travel-meta\">'\n              +   'Advisory updated: ' + updated\n              +   ( a.source_url ? ' &middot; <a href=\"' + a.source_url + '\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--accent-glow);\">Official source<\/a>' : '' )\n              +   ' &middot; <a href=\"https:\/\/travel.state.gov\/content\/travel\/en\/us-visas\/visa-information-resources\/list-of-posts.html\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--accent-glow);\">Find the U.S. Embassy<\/a>'\n              + '<\/div>';\n        } );\n    } );\n\n    \/\/ ---- Check Conditions ----\n    \/\/ WMO weather interpretation codes \u2014 the standard scale the Open-Meteo\n    \/\/ weathercode field uses, not something invented for this project.\n    var dtalmWeatherCodes = {\n        0: 'Clear sky', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast',\n        45: 'Fog', 48: 'Depositing rime fog',\n        51: 'Light drizzle', 53: 'Moderate drizzle', 55: 'Dense drizzle',\n        56: 'Light freezing drizzle', 57: 'Dense freezing drizzle',\n        61: 'Slight rain', 63: 'Moderate rain', 65: 'Heavy rain',\n        66: 'Light freezing rain', 67: 'Heavy freezing rain',\n        71: 'Slight snow fall', 73: 'Moderate snow fall', 75: 'Heavy snow fall', 77: 'Snow grains',\n        80: 'Slight rain showers', 81: 'Moderate rain showers', 82: 'Violent rain showers',\n        85: 'Slight snow showers', 86: 'Heavy snow showers',\n        95: 'Thunderstorm', 96: 'Thunderstorm with slight hail', 99: 'Thunderstorm with heavy hail'\n    };\n\n    window.dtalmOpenConditionsModal = function() {\n        document.getElementById( 'dtalm-conditions-modal' ).classList.add( 'dtalm-open' );\n    };\n\n    window.dtalmCloseConditionsModal = function() {\n        document.getElementById( 'dtalm-conditions-modal' ).classList.remove( 'dtalm-open' );\n    };\n\n    \/**\n     * Formats Open-Meteo's \"time\" field \u2014 the destination's own local\n     * time, as a plain string with no timezone suffix (e.g.\n     * \"2026-08-04T20:15\") \u2014 via direct string parsing, never through\n     * `new Date()`. JS Date parser, given a string with no timezone\n     * marker, assumes it is local to the browser rather than the\n     * destination, silently reinterpreting the value. Parsing the string\n     * directly avoids that entirely rather than fighting it.\n     *\/\n    function dtalmFormatLocalTime( isoString ) {\n        var parts = isoString.split( 'T' );\n        if ( parts.length !== 2 ) return isoString;\n        var dateParts = parts[0].split( '-' );\n        var timeParts = parts[1].split( ':' );\n        var hour = parseInt( timeParts[0], 10 );\n        var minute = timeParts[1];\n        var ampm = hour >= 12 ? 'PM' : 'AM';\n        var hour12 = hour % 12;\n        if ( hour12 === 0 ) hour12 = 12;\n        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\n        var monthName = months[ parseInt( dateParts[1], 10 ) - 1 ] || dateParts[1];\n        return monthName + ' ' + parseInt( dateParts[2], 10 ) + ', ' + hour12 + ':' + minute + ' ' + ampm;\n    }\n\n    window.dtalmSearchConditions = function() {\n        var query = document.getElementById( 'dtalm-conditions-input' ).value.trim();\n        var $result = document.getElementById( 'dtalm-conditions-result' );\n        if ( ! query ) {\n            $result.innerHTML = '';\n            return;\n        }\n        $result.innerHTML = '<p style=\"color:var(--text-muted);font-size:13px;\">Searching...<\/p>';\n\n        dtalmPost( 'dtalm_check_conditions', { location: query } ).then( function( r ) {\n            if ( ! r.success ) {\n                $result.innerHTML = '<p style=\"color:var(--text-muted);font-size:13px;\">' + dtalmEsc( typeof r.data === 'string' ? r.data : 'Could not find that location.' ) + '<\/p>';\n                return;\n            }\n            var d = r.data;\n            var desc = dtalmWeatherCodes[ d.weathercode ] || 'Conditions unavailable';\n            var place = d.place + ( d.country ? ', ' + d.country : '' );\n            var tempF = d.temperature !== null ? ( d.temperature * 9 \/ 5 + 32 ) : null;\n            var windMph = d.windspeed !== null ? ( d.windspeed * 0.621371 ) : null;\n\n            $result.innerHTML =\n                '<p style=\"font-size:13px;color:var(--accent-glow);font-weight:600;margin-bottom:6px;\">' + dtalmEsc( place ) + '<\/p>'\n              + '<div class=\"dtalm-conditions-temp\">'\n              +   ( d.temperature !== null ? Math.round( d.temperature ) + '&deg;C <span style=\"font-size:18px;color:var(--text-muted);\">\/ ' + Math.round( tempF ) + '&deg;F<\/span>' : '\u2014' )\n              + '<\/div>'\n              + '<div class=\"dtalm-conditions-desc\">' + dtalmEsc( desc ) + '<\/div>'\n              + '<div class=\"dtalm-conditions-stat-row\">'\n              +   ( d.windspeed !== null ? '<span>Wind <strong style=\"color:var(--text-primary);\">' + d.windspeed + ' km\/h \/ ' + windMph.toFixed( 1 ) + ' mph<\/strong><\/span>' : '' )\n              +   ( d.time ? '<span>Local time there: ' + dtalmFormatLocalTime( d.time ) + ( d.timezone_abbreviation ? ' (' + dtalmEsc( d.timezone_abbreviation ) + ')' : '' ) + '<\/span>' : '' )\n              + '<\/div>';\n        } );\n    };\n    document.getElementById( 'dtalm-conditions-input' ).addEventListener( 'keypress', function( e ) {\n        if ( e.key === 'Enter' ) { dtalmSearchConditions(); }\n    } );\n\n    \/\/ ---- Insurance directory ----\n    var dtalmInsuranceLoaded = false;\n\n    window.dtalmOpenInsuranceModal = function() {\n        document.getElementById( 'dtalm-insurance-modal' ).classList.add( 'dtalm-open' );\n        if ( dtalmInsuranceLoaded ) return;\n\n        dtalmPost( 'dtalm_get_insurance_providers', {} ).then( function( r ) {\n            var $list = document.getElementById( 'dtalm-insurance-list' );\n            if ( ! r.success || ! r.data.length ) {\n                $list.innerHTML = '<p style=\"color:var(--text-muted);font-size:13px;\">No providers listed yet.<\/p>';\n                return;\n            }\n            var html = '';\n            r.data.forEach( function( p ) {\n                html += '<div class=\"dtalm-insurance-item\">'\n                      + '<h4>' + dtalmEsc( p.provider_name ) + '<\/h4>'\n                      + ( p.description ? '<p>' + dtalmEsc( p.description ) + '<\/p>' : '' )\n                      + '<a href=\"' + p.affiliate_url + '\" target=\"_blank\" rel=\"noopener noreferrer\">Learn More<\/a>'\n                      + '<\/div>';\n            } );\n            $list.innerHTML = html;\n            dtalmInsuranceLoaded = true;\n        } );\n    };\n\n    window.dtalmCloseInsuranceModal = function() {\n        document.getElementById( 'dtalm-insurance-modal' ).classList.remove( 'dtalm-open' );\n    };\n})();\n<\/script>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-176","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/pages\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":1,"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/pages\/176\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/pages\/176\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/www.divetalking.com\/oceanseye\/wp-json\/wp\/v2\/media?parent=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}