/* ==========================================================================
 * Tipota MAPS / blog — styles of the blog map
 *
 * Layout (panel + map), the "View" dropdown and the shared colours are in common.css.
 * Everything here is scoped under .tmaps-blog / .tipota-map-wrap, so nothing can change the rest of the site.
 *
 * Sections:  1. colours   2. panel   3. (in common.css)   4. dots & circles
 *            5. post card & list   6. labels   7. phones & tablets
 * Dot size and category colours are set in assets/blog.js (CONFIG).
 * ========================================================================== */

/* 1. Colours ---------------------------------------------------------------- */
.tmaps-blog, .tipota-map-wrap {
	--tm-ink: var(--tmaps-ink);        /* main text */
	--tm-muted: var(--tmaps-muted);    /* secondary text */
	--tm-paper: var(--tmaps-paper);    /* popups background */
	--tm-rule: var(--tmaps-line);      /* thin borders */
	--tm-track: var(--tmaps-accent);   /* numbered circles border, "Leggi" button, route */
	--tm-boat: #ff5a1f;                /* current position of Tipota */
	--tm-place: #2b3f52;               /* place names */
	--tm-archipelago: #20507a;
}

/* 2. Panel: post count, last position, category buttons --------------------- */
.tmaps-blog .tm-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 10px; }
.tmaps-blog .tm-stats div { margin: 0; }
.tmaps-blog .tm-stats dt { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-muted); }
.tmaps-blog .tm-stats dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tm-ink); }
.tmaps-blog .tm-chips { padding-top: 10px; border-top: 1px solid var(--tm-rule); }
/* the all / none control: a small checkbox-like row above the chips */
.tmaps-blog .tm-chips > .tm-all, .tmaps-blog .tm-chips > .tm-all[aria-pressed="true"] { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 4px 2px; border: 0; background: none; color: var(--tm-muted); font: inherit; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.tmaps-blog .tm-chips > .tm-all:hover { color: var(--tm-ink); background: none; }
.tmaps-blog .tm-all-box { width: 15px; height: 15px; border: 2px solid var(--tm-muted); border-radius: 4px; box-sizing: border-box; position: relative; flex: none; }
.tmaps-blog .tm-all[aria-pressed="true"] .tm-all-box { background: var(--tmaps-accent, #2f6fa5); border-color: var(--tmaps-accent, #2f6fa5); }
.tmaps-blog .tm-all[aria-pressed="true"] .tm-all-box::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tmaps-blog .tm-all-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmaps-blog .tm-chip[aria-pressed="false"] { opacity: .5; }
.tmaps-blog .tm-chip[aria-pressed="false"] .tm-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.tmaps-blog .tm-chip .tm-dot { background: var(--c); }

/* 4. Dots, numbered circles, boat ------------------------------------------ */
/* --c is the category colour; --tm-pin the dot size (both set by the JS). */
.tipota-map-wrap .tm-pin {
	display: block; box-sizing: border-box; width: var(--tm-pin, 18px); height: var(--tm-pin, 18px);
	border-radius: 50%; background: var(--c); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	transition: transform .12s;
}
.tipota-map-wrap .tm-pin.tm-gps { background: #fff; border: 4px solid var(--c); }   /* hollow = placed by GPS */
.tipota-map-wrap .leaflet-marker-icon:hover .tm-pin { transform: scale(1.3); }
.tipota-map-wrap .tm-cl {
	display: grid; place-items: center; box-sizing: border-box; border-radius: 50%;
	background: var(--tm-paper); color: var(--tm-ink); border: 3px solid var(--tm-track);
	font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.tipota-map-wrap .tm-boat { position: relative; width: 22px; height: 22px; }
.tipota-map-wrap .tm-boat i { position: absolute; inset: 3px; box-sizing: border-box; border-radius: 50%; background: var(--tm-boat); border: 2px solid #fff; }
.tipota-map-wrap .tm-boat b { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tm-boat); animation: tm-ping 2.2s ease-out infinite; }
@keyframes tm-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* 5. Post card (click a dot) and post list (click a circle) ----------------- */
.tipota-map-wrap .leaflet-popup-content-wrapper { padding: 0; border-radius: 6px; overflow: hidden; background: var(--tm-paper); }
.tipota-map-wrap .leaflet-popup-content { margin: 0; width: min(270px, calc(100vw - 80px)) !important; }
.tipota-map-wrap .leaflet-popup-tip { background: var(--tm-paper); }
.tipota-map-wrap .leaflet-container a.leaflet-popup-close-button {
	z-index: 2; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; line-height: 26px;
}
.tipota-map-wrap .tm-pp-img { display: block; width: 100%; max-width: none; margin: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.tipota-map-wrap .tm-pp-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.tipota-map-wrap .tm-pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tipota-map-wrap .tm-pp h3 { margin: 0; padding: 0; font-size: 17px; line-height: 1.25; }
.tipota-map-wrap .tm-pp h3 a { color: var(--tm-ink); text-decoration: none; }
.tipota-map-wrap .tm-pp-where { margin: 0; font-size: 12px; line-height: 1.4; color: var(--tm-muted); }
.tipota-map-wrap .tm-pp-where span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tipota-map-wrap .tm-read {
	justify-self: start; margin-top: 2px; padding: 7px 12px; border-radius: 4px;
	background: var(--tm-track); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.tipota-map-wrap .tm-read:hover { filter: brightness(1.15); }

.tipota-map-wrap .tm-list-pop .leaflet-popup-content { width: min(300px, calc(100vw - 80px)) !important; }
.tipota-map-wrap .tm-list-h { padding: 10px 40px 8px 14px; border-bottom: 1px solid var(--tm-rule); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tipota-map-wrap .tm-list ol { list-style: none; margin: 0; padding: 4px 0; max-height: min(320px, 50vh, calc(var(--tmaps-h, 70vh) - 150px)); overflow-y: auto; overflow-x: hidden; }
.tipota-map-wrap .tm-list li { margin: 0; }
.tipota-map-wrap .tm-list a {
	display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 14px;
	color: var(--tm-ink); text-decoration: none; font-size: 13.5px; line-height: 1.3;
}
.tipota-map-wrap .tm-list a:hover { background: #eef2f2; }
.tipota-map-wrap .tm-list .tm-li-t { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; }   /* one line; TMAPS.fitText cuts at a word + … */
.tipota-map-wrap .tm-list time { font-size: 11px; color: var(--tm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 6. Labels ---------------------------------------------------------------- */
/* Post titles beside the dots: hidden until the JS adds .tm-show-labels (CONFIG.listZoom). */
.tipota-map-wrap .leaflet-tooltip.tm-label {
	display: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: 2px 6px; border: 0; border-radius: 3px; background: rgba(251, 248, 241, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	color: var(--tm-ink); font-size: 12px; font-weight: 600; line-height: 1.25;
}
.tipota-map-wrap .leaflet-tooltip.tm-label::before { display: none; }
.tipota-map-wrap .tm-show-labels .leaflet-tooltip.tm-label { display: block; }

/* Place names; tm-place-3 countries, -2 archipelagos, -1 islands, -0 landmarks. Raised above the route. */
.tipota-map-wrap .tm-place span {
	position: absolute; transform: translate(-50%, calc(-50% - 22px)); white-space: nowrap; pointer-events: none;
	color: var(--tm-place); font-size: 12px; font-weight: 600; font-style: italic;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
.tipota-map-wrap .tm-place-3 span,
.tipota-map-wrap .tm-place-2 span { transform: translate(-50%, calc(-50% - 30px)); text-transform: uppercase; }
.tipota-map-wrap .tm-place-3 span { font-size: 13px; font-weight: 500; font-style: normal; letter-spacing: .18em; color: rgba(43, 63, 82, .75); }
.tipota-map-wrap .tm-place-2 span { font-size: 12.5px; letter-spacing: .14em; color: var(--tm-archipelago); }

/* 7. Phones and tablets ------------------------------------------------------ */
@media (pointer: coarse) {   /* touch screens: bigger list rows */
	.tipota-map-wrap .tm-list a { padding: 10px 14px; font-size: 14.5px; }
}
@media (max-width: 820px) {
	.tmaps-blog .tm-stats { gap: 4px 16px; margin-bottom: 8px; }
	.tmaps-blog .tm-chips { padding-top: 8px; }
	.tipota-map-wrap .tm-pp-img { aspect-ratio: 16 / 9; }
	.tipota-map-wrap .tm-pp h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tipota-map-wrap .tm-boat b { animation: none; opacity: .5; } }