/**
 * Copyright (c) 2014-2026 Alexandru Boia and Contributors
 *
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 *	1. Redistributions of source code must retain the above copyright notice, 
 *		this list of conditions and the following disclaimer.
 *
 * 	2. Redistributions in binary form must reproduce the above copyright notice, 
 *		this list of conditions and the following disclaimer in the documentation 
 *		and/or other materials provided with the distribution.
 *
 *	3. Neither the name of the copyright holder nor the names of its contributors 
 *		may be used to endorse or promote products derived from this software without 
 *		specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
 * IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY 
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE.
 */

:root {
	/* Brand palette */
	--wpts-navy: #0A3868;
	--wpts-navy-2:#0d4a80;
	--wpts-teal: #1FA4B4;
	--wpts-teal-ink:#1793A3; /* teal icon stroke on light tint */
	--wpts-mint: #8CF5D9;
	--wpts-amber: #F29E1F;
	--wpts-amber-ink: #C8801A; /* amber icon stroke on warm tint */
	--wpts-red: #E04038;

	/* Neutrals */
	--wpts-ink: #12303f;
	--wpts-value: #0A3868;
	--wpts-label: #8493A0;
	--wpts-muted: #93A3AE;
	--wpts-surface: #ffffff;
	--wpts-surface-2: #FCFDFE;
	--wpts-surface-3: #F8FAFB;
	--wpts-border: #E3EAEF;
	--wpts-border-2: #EAEFF2;
	--wpts-border-3: #E7EDF1;

	/* Tints (icon chip backgrounds) */
	--wpts-tint-teal: rgba(31, 164, 180, 0.10);
	--wpts-tint-warm: rgba(242, 158, 31, 0.13);

	/* Fonts */
	--wpts-font-head: 'Space Grotesk', system-ui, sans-serif;
	--wpts-font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--wpts-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Geometry */
	--wpts-radius: 10px;
	--wpts-radius-md: 8px;
	--wpts-radius-sm: 4px;
	--wpts-shadow: 0 22px 50px -26px rgba(10, 56, 104, 0.30);
	--wpts-map-control-shadow: rgba(10, 56, 104, 0.28) 0px 2px 8px;
}

/* ---- Techbox shell ---- */
.abp01-techbox-frontend {
	font-family: var(--wpts-font-body);
	color: var(--wpts-ink);
	background: var(--wpts-surface);
	border: 1px solid var(--wpts-border);
	border-radius: var(--wpts-radius);
	overflow: hidden;
	box-shadow: var(--wpts-shadow);
	-webkit-font-smoothing: antialiased;
	background:#fff;
	margin-bottom: 32px;
}

/* ---- Title bar ---- */
.abp01-techbox-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	background: linear-gradient(120deg, var(--wpts-navy), var(--wpts-navy-2));
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--wpts-font-head);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: #fff;
}

/* 
	The plugin renders the title text directly inside .abp01-techbox-title.
	The icon chip is .abp01-techbox-icon (dashicon replaced by inline SVG). 
*/
.abp01-techbox-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(140, 245, 217, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.abp01-techbox-icon svg { 
	width: 19px; height: 19px; 
}

/* 
	Optional sub-title (route name) + trip-type badge — add these spans in the
	title bar markup if you want them; both are theme extras, not core plugin. 
*/

.abp01-techbox-title-area {
	display:flex;
	flex-direction:column;
	line-height:1.15;
}

.abp01-techbox-title-content {
	font-family:var(--wpts-font-head);
	font-weight:700;
	font-size:17px;
	color:#fff;
	letter-spacing:-0.01em;
}

.abp01-techbox-title-content-sub {
	font-family: var(--wpts-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: #8FB3C9;
	margin-top: 4px;
}

.abp01-techbox-badge {
	margin-left: auto;
	font-family: var(--wpts-font-mono);
	font-size: 11px;
	color: var(--wpts-mint);
	background: rgba(140, 245, 217, 0.12);
	border: 1px solid rgba(140, 245, 217, 0.22);
	padding: 5px 11px;
	border-radius: 999px;
}

/* ---- Tabs ---- */
.abp01-techbox-tab-navigation {
	position: relative;
	background: var(--wpts-surface-3);
	box-shadow: inset 0 -1px 0 var(--wpts-border-3);
}

.abp01-techbox-tab-navigation.abp01-tabs-overflow {
	padding: 0 36px;
}

button.abp01-tabs-scroll {
	position: absolute;
	top: 14px;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: auto 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--wpts-ink);
	cursor: pointer;
}

button.abp01-tabs-scroll-left {
	left: 4px;
}

button.abp01-tabs-scroll-right {
	right: 4px;
}

button.abp01-tabs-scroll[hidden] {
	display: none;
}

button.abp01-tabs-scroll:enabled:hover {
	background: var(--wpts-surface);
	border-color: var(--wpts-border);
}

button.abp01-tabs-scroll:focus-visible {
	outline: 2px solid var(--wpts-teal-ink);
	outline-offset: -2px;
}

button.abp01-tabs-scroll:disabled {
	opacity: 0.3;
	cursor: default;
}

.entry-content ul.abp01-techbox-tabs {
	margin-bottom: 0px;
}

.abp01-techbox-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	list-style: none;
	margin: 0;
	padding: 14px 16px 1px;
	background: var(--wpts-surface-3);
	/* Keep the separator inside the scroll area so the active tab can cover it. */
	box-shadow: inset 0 -1px 0 var(--wpts-border-3);
}

.abp01-techbox-tabs::-webkit-scrollbar {
	display: none;
}

.abp01-techbox-tabs > .abp01-tab {
	flex-shrink: 0;
	white-space: nowrap;
}

.entry-content li.abp01-tab {
	margin-left: 0px;
}

.abp01-tab {
	position: relative;
	top: 1px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #6B7C88;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 11px 11px 0 0;
	cursor: pointer;
}

.entry-content .abp01-tab a,
.entry-content .abp01-tab a:visited,
.abp01-tab a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	color: inherit;
	text-decoration: none;
}

.abp01-tab svg { 
	width: 16px; height: 16px; stroke: #7C8B96; 
}

.abp01-tab-active,
.abp01-tab.abp01-tab-active {
	color: var(--wpts-value);
	font-weight: 600;
	background: var(--wpts-surface);
	border-color: var(--wpts-border-3);
	border-bottom: none;
}

.entry-content .abp01-tab-active a,
.entry-content .abp01-tab-active a:visited {
	color: var(--wpts-value);
	border-color: var(--wpts-border-3);
}

.abp01-tab-active svg,
.abp01-tab.abp01-tab-active svg { 
	stroke: var(--wpts-navy); 
}

/* ---- Content ---- */
.abp01-techbox-content { 
	padding: 18px 18px 8px; 
}

/* ---- Info (Prosaic details) ---- */
.entry-content .abp01-techbox-info ul  {
	margin-bottom: 0px;
}

.abp01-techbox-info > ul,
.abp01-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each info item (the plugin outputs <li>; treat li as the card) */
.entry-content li.abp01-info-item,
.entry-content .abp01-techbox-info li.abp01-info-item {
	margin: 0;
}

.abp01-info-item,
.abp01-techbox-info li.abp01-info-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 17px;
	border: 1px solid var(--wpts-border-2);
	border-radius: var(--wpts-radius-sm);
	background: var(--wpts-surface-2);
}
/* Wide item spanning both columns (e.g. Access information) */
.abp01-info-item-wide { 
	grid-column: span 2; 
}

.abp01-info-item-head {
	display: flex;
	align-items: center;
	gap: 9px;
}
.abp01-info-item-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--wpts-tint-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.abp01-info-item-icon svg { 
	width: 16px; 
	height: 16px; 
	stroke: var(--wpts-teal-ink); 
}

/* Warm-accent variant (climb, seasons, electrification, etc.) */
.abp01-info-item-icon-warm { 
	background: var(--wpts-tint-warm); 
}
.abp01-info-item-icon-warm svg { 
	stroke: var(--wpts-amber-ink); 
}

.abp01-info-item-label {
	font-family: var(--wpts-font-mono);
	font-size: 10.5px;
	color: var(--wpts-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.abp01-info-item-value {
	font-family: var(--wpts-font-head);
	font-weight: 600;
	font-size: 16px;
	color: var(--wpts-value);
	letter-spacing: -0.01em;
}

.abp01-info-value .abp01-field-value-multi {
    margin-right: 4px;
}

.abp01-info-value .abp01-field-value-multi.abp01-item-layout-vertical {
    display: block;
}

.abp01-info-value .abp01-field-value-multi.abp01-item-layout-horizontal {
    display: inline;
}

.abp01-info-value .abp01-field-value-show-more-txt {
    margin-right: 2px;
}

.abp01-field-value-show-more a,
.abp01-field-value-show-more a:visited,
.abp01-field-value-show-more a:active {
	background-color: var(--wpts-tint-teal);
	text-decoration: none;
	font-weight: normal;
	padding: 5px;
	border-radius: var(--wpts-radius-sm);
	font-size: 13px;
	margin-left: 6px;
}

/* ---- Map ---- */
.abp01-map-container {
	position: relative;
	height: 340px; /* the plugin sets an inline height from settings->mapHeight */
	border-radius: var(--wpts-radius-sm);
	overflow: hidden;
	border: 1px solid #DDE6EC;
	background: #E9F1F0;
}
.abp01-map {
	position: absolute;
	inset: 0;
	background-color: #EAF2F0;
	/* subtle grid — remove when a real tile layer (Leaflet/OSM) is mounted */
	background-image:
	linear-gradient(rgba(10, 56, 104, 0.05) 1px, transparent 1px),
	linear-gradient(90deg, rgba(10, 56, 104, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* Animated route polyline (used on the placeholder SVG; a live map uses its
	 own polyline styling — keep --wpts-navy / --wpts-teal for parity). */
.wpts-route-casing { stroke: var(--wpts-teal); stroke-opacity: 0.25; stroke-width: 10; }
.wpts-route-line   { stroke: var(--wpts-navy); stroke-width: 3.2; }
.wpts-route-dash {
	stroke: var(--wpts-navy);
	stroke-width: 3.2;
	stroke-linecap: round;
	fill: none;
	stroke-dasharray: 6 7;
	animation: wpts-dash 1.6s linear infinite;
}
@keyframes wpts-dash { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) {
	.wpts-route-dash { animation: none; }
}

/* Start dot / end pin */
.wpts-map-start {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wpts-teal);
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(10, 56, 104, 0.4);
}

/* Zoom control (matches Leaflet's default control slot) */
.abp01-map-zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(10, 56, 104, 0.18);
}
.abp01-map-zoom button {
	width: 32px;
	height: 32px;
	background: #fff;
	color: var(--wpts-navy);
	font-family: var(--wpts-font-head);
	font-size: 19px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.abp01-map-zoom button + button { border-top: 1px solid #EDF1F4; }

.abp01-map-attribution {
	position: absolute;
	left: 12px;
	bottom: 10px;
	font-family: var(--wpts-font-mono);
	font-size: 10px;
	color: #5E7688;
	background: rgba(255, 255, 255, 0.75);
	padding: 3px 8px;
	border-radius: 6px;
}

/* Retry state (already in plugin markup: .abp01-map-retry-container) */
.abp01-map-retry-container {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(233, 241, 240, 0.94);
	text-align: center;
	padding: 24px;
}
.abp01-map-retry-message { font-size: 14px; color: #3E5361; max-width: 320px; }
.abp01-map-retry {
	font-family: var(--wpts-font-head);
	font-weight: 600;
	font-size: 14px;
	color: #fff;
	background: var(--wpts-teal);
	padding: 9px 18px;
	border-radius: 9px;
	text-decoration: none;
}

/* ---- Altitude profile ---- */
#abp01-altitude-profile-container {
	margin-top: 16px;
	border: 1px solid var(--wpts-border-2);
	border-radius: var(--wpts-radius-sm);
	padding: 16px 18px 10px;
	background: var(--wpts-surface-2);
}
.abp01-altitude-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}
.abp01-altitude-title {
	font-family: var(--wpts-font-mono);
	font-size: 10.5px;
	color: var(--wpts-label);
	letter-spacing: 0.05em;
}
.abp01-altitude-range {
	font-family: var(--wpts-font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--wpts-teal);
}
.abp01-altitude-axis {
	display: flex;
	justify-content: space-between;
	font-family: var(--wpts-font-mono);
	font-size: 10px;
	color: var(--wpts-muted);
	padding-top: 2px;
}

/* Chart fill/stroke (SVG). Reuse for a JS charting lib's series colors. */
.wpts-altitude-fill   { 
	fill: var(--wpts-teal); 
}   /* apply with opacity in a gradient */

.wpts-altitude-stroke { 
	stroke: var(--wpts-navy); stroke-width: 2.2; fill: none; 
}
.wpts-altitude-baseline { 
	stroke: #E1E8ED; stroke-width: 1; 
}

/* ---- Teaser top (skip to info box) ---- */
.abp01-techbox-credits {
	padding: 10px 18px;
	border-top: 1px solid var(--wpts-border-2);
	background: var(--wpts-surface-2);
	color: #6B7C88;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.abp01-techbox-credits a,
.entry-content .abp01-techbox-credits a,
.entry-content .abp01-techbox-credits a:visited {
	color: var(--wpts-value);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.abp01-techbox-teaser {
	margin-bottom: 8px;
}

/* ---- Teaser bottom (skip to story) ---- */
.abp01-techbox-teaser {
	border-radius: var(--wpts-radius-sm);
}

.abp01-techbox-teaser,
.abp01-techbox-content-skip-teaser { 
	padding: 8px 26px 8px; 
	color: var(--wpts-amber-ink); 
	background-color: var(--wpts-tint-warm);
	font-size: 13.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 7px;
}

.abp01-techbox-teaser a,
.abp01-techbox-content-skip-teaser a {
	text-decoration: none;
	color: var(--wpts-amber-ink); 
	flex: 1;
}

.abp01-techbox-content-skip-teaser a {
	text-align: center;
}

/* ---- Utility ---- */
.abp01-clear { 
	clear: both; 
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
	.abp01-techbox-info > ul,
	.abp01-info-grid { grid-template-columns: 1fr; }
	.abp01-info-item-wide { grid-column: span 1; }
	.abp01-techbox-content { padding: 20px 18px 6px; }
	.abp01-techbox-title { padding: 16px 18px; }
}

/* Frontend viewer - map controls and widgets */
.leaflet-touch .leaflet-bar {
	border: 0px none;
	box-shadow: var(--wpts-map-control-shadow);
}

.abp01-track-minmaxalt-btn,
.abp01-map-altitude-profile-btn,
.abp01-map-recenter-btn {
    margin-top: 3px;
}

.abp01-track-download-link,
.leaflet-touch .abp01-track-minmaxalt-btn,
.leaflet-touch .abp01-map-altitude-profile-btn,
.leaflet-touch .abp01-map-recenter-btn {
    margin-top: 5px;
}

.leaflet-touch .abp01-map-recenter-btn {
    margin-left: 1px;
}

.abp01-map .leaflet-control-container .leaflet-control a {
    text-decoration: none !important;
}

.abp01-min-max-altitude-box {
    width: 210px;
    height: 60px;
    background-color: #515151;
    opacity: 0.80;
    color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,.06);
}

.abp01-min-max-altitude-box-line {
    width: 100%;
    height: 30px;
    line-height: 20px;
    padding: 5px;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 12px;
    display: inline-block;
    overflow: hidden;
}

.abp01-min-max-altitude-box-line-spacer {
    width: calc(100% - 10px);
    height: 1px;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
    margin: 0px 5px 0px 5px;
    opacity: 0.25;
}

.abp01-min-max-altitude-lbl,
.abp01-min-max-altitude-val {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    box-sizing: border-box;
    display: inline-block;
}

.abp01-min-max-altitude-lbl {
    width: 65%;
    padding-right: 5px;
    text-align: right;
    font-weight: bold;
}

.abp01-min-max-altitude-val {
    width: 35%;
    text-align: left;
}