/* Jody Monster Trip Planner — everything scoped to .jmt-trip so the theme isn't affected */

.jmt-trip {
	--jmt-sand: #fbf4e9;
	--jmt-paper: #fffdf9;
	--jmt-ink: #1d2a2f;
	--jmt-muted: #5f6b6d;
	--jmt-line: #eadfcd;
	--jmt-coral: #e2583a;
	--jmt-coral-soft: #fde4da;
	--jmt-teal: #0f6f68;
	--jmt-teal-soft: #d8efec;
	--jmt-gold: #f2b134;
	--jmt-gold-soft: #fdf0d2;
	--jmt-radius: 18px;

	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 0 48px;
	background: var(--jmt-sand);
	color: var(--jmt-ink);
	font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.55;
	border-radius: var(--jmt-radius);
	overflow: clip; /* clip (not hidden) so the sticky day nav still works */
}
.jmt-trip *, .jmt-trip *::before, .jmt-trip *::after { box-sizing: inherit; }
.jmt-trip :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd) { margin: 0; padding: 0; border: 0; background: none; }
.jmt-trip :where(ul, ol) { list-style: none; }
.jmt-trip a { color: var(--jmt-teal); text-decoration: none; }
.jmt-trip a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.jmt-hero {
	position: relative;
	border-radius: var(--jmt-radius) var(--jmt-radius) 0 0;
	padding: 56px 32px 200px;
	background:
		radial-gradient(ellipse 120px 26px at 18% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 90px 20px at 24% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 140px 24px at 62% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
		linear-gradient(180deg, #8fd0e6 0%, #bfe5ef 45%, #fde8c9 100%);
	overflow: hidden;
	text-align: left;
}
.jmt-hero__sun {
	position: absolute;
	right: 90px; top: 30px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, #fffbe6 0%, #ffe48a 38%, rgba(255,214,107,.35) 55%, rgba(255,214,107,0) 72%);
	pointer-events: none;
}
.jmt-hero__scene {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 170px;
	background: url("beach.svg") center bottom / cover no-repeat;
	pointer-events: none;
}
.jmt-hero__palm {
	position: absolute;
	right: 10px; bottom: 48px;
	width: 200px; height: 290px;
	background: url("palm.svg") center bottom / contain no-repeat;
	pointer-events: none;
}
.jmt-hero__dates {
	position: relative;
	font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: #1c5a68;
}
.jmt-hero__title {
	position: relative;
	margin-top: 8px !important;
	font-family: "DM Serif Display", Georgia, serif;
	font-weight: 400;
	font-size: clamp(38px, 7vw, 64px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: #10323b;
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.jmt-hero__sub { position: relative; margin-top: 10px !important; font-size: 18px; color: #1d4a55; }
.jmt-countdown {
	position: relative;
	display: inline-block;
	margin-top: 20px !important;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.7);
	font-weight: 600; font-size: 14px;
	color: #1c5a68;
}
.jmt-stats { position: relative; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px !important; color: #1d4a55; font-size: 14px; }
.jmt-stats strong { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 26px; margin-right: 4px; color: #10323b; }

/* ---------- Sticky day nav ---------- */
.jmt-nav {
	position: sticky; top: 0; z-index: 5;
	display: flex; gap: 6px;
	padding: 10px 16px;
	background: rgba(251,244,233,.92);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--jmt-line);
	overflow-x: auto;
}
.jmt-nav a {
	flex: 1 0 auto;
	min-width: 64px;
	padding: 6px 10px;
	border-radius: 12px;
	text-align: center;
	font-weight: 600; font-size: 15px;
	color: var(--jmt-ink);
	background: var(--jmt-paper);
	border: 1px solid var(--jmt-line);
}
.jmt-nav a span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jmt-muted); }
.jmt-nav a:hover { text-decoration: none; border-color: var(--jmt-coral); }
.jmt-nav a.is-today { background: var(--jmt-coral); border-color: var(--jmt-coral); color: #fff; }
.jmt-nav a.is-today span { color: #ffe3d9; }

/* ---------- Cards ---------- */
.jmt-card {
	background: var(--jmt-paper);
	border: 1px solid var(--jmt-line);
	border-radius: var(--jmt-radius);
	padding: 24px;
	box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px -16px rgba(80,40,10,.25);
}

/* ---------- Checklist ---------- */
.jmt-checklist { margin: 24px 24px 0; }
.jmt-checklist h2, .jmt-day__title {
	font-family: "DM Serif Display", Georgia, serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
}
.jmt-checklist ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; margin-top: 14px !important; }
.jmt-checklist label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 15px; }
.jmt-checklist input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--jmt-teal); flex: none; }
.jmt-checklist input:checked + span { color: var(--jmt-muted); text-decoration: line-through; }
.jmt-fine { margin-top: 10px !important; font-size: 13px; color: var(--jmt-muted); }

/* ---------- Day timeline ---------- */
.jmt-days { position: relative; margin: 32px 24px 0 !important; }
.jmt-days::before {
	content: ""; position: absolute;
	left: 35px; top: 10px; bottom: 10px;
	border-left: 2px dashed #e4c9a6;
}
.jmt-day { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; margin-bottom: 28px; scroll-margin-top: 80px; }
.jmt-day__date {
	position: sticky; top: 78px;
	align-self: start;
	display: flex; flex-direction: column; align-items: center;
	width: 72px; padding: 10px 0 8px;
	background: var(--jmt-ink); color: #fff;
	border-radius: 16px;
	line-height: 1;
}
.jmt-day__num { font-family: "DM Serif Display", Georgia, serif; font-size: 34px; }
.jmt-day__dow { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jmt-gold); }
.jmt-day__mon { margin-top: 3px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b7c2c3; }
.jmt-day.is-today .jmt-day__date { background: var(--jmt-coral); }
.jmt-day.is-past .jmt-day__card { opacity: .72; }

.jmt-day__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.jmt-day__label { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jmt-muted); }
.jmt-tag, .jmt-today {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.jmt-tag { background: var(--jmt-teal-soft); color: var(--jmt-teal); }
.jmt-tag--show-night { background: var(--jmt-coral-soft); color: #a8361d; }
.jmt-tag--park-day { background: #e6e3fb; color: #4b3fa6; }
.jmt-tag--free-day { background: var(--jmt-gold-soft); color: #8a5a00; }
.jmt-today { background: var(--jmt-coral); color: #fff; }
.jmt-today[hidden] { display: none; }

.jmt-day__city { margin-top: 2px !important; color: var(--jmt-muted); font-weight: 500; }
.jmt-day__summary { margin-top: 10px !important; font-size: 17px; }

/* Drive pill */
.jmt-drive {
	display: flex; align-items: center; gap: 12px;
	margin-top: 16px;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--jmt-teal-soft);
	color: var(--jmt-teal) !important;
}
.jmt-drive:hover { text-decoration: none !important; filter: brightness(.97); }
.jmt-drive__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--jmt-teal); color: #fff; flex: none; }
.jmt-drive__text { display: flex; flex-direction: column; line-height: 1.3; }
.jmt-drive__text strong { color: var(--jmt-ink); }
.jmt-drive__text span { font-size: 14px; }

/* Items */
.jmt-items { margin-top: 18px !important; }
.jmt-item { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--jmt-line); }
.jmt-item:first-child { border-top: 0; }
.jmt-item__time { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jmt-coral); padding-top: 2px; }
.jmt-item h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.jmt-item p { margin-top: 3px !important; color: #3e4a4d; font-size: 15px; }
.jmt-maplink { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; }

/* Stay */
.jmt-stay {
	display: flex; gap: 14px; align-items: flex-start;
	margin-top: 16px; padding: 14px 16px;
	border-radius: 14px;
	background: var(--jmt-gold-soft);
}
.jmt-stay__label { flex: none; padding-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; width: 70px; }
.jmt-stay strong { display: block; font-size: 17px; }
.jmt-stay a { display: block; font-size: 14px; }
.jmt-stay p { margin-top: 4px !important; font-size: 14px; color: #5b4a2a; }
.jmt-stay--tbd { background: #fff; border: 2px dashed #e6c88a; }

/* Tips */
.jmt-tips { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #f1effc; }
.jmt-tips h3 { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4b3fa6; }
.jmt-tips ul { margin-top: 8px !important; }
.jmt-tips li, .jmt-venue__col li { position: relative; padding-left: 16px; margin-top: 6px; font-size: 15px; }
.jmt-tips li::before, .jmt-venue__col li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }

/* Venue */
.jmt-venue { margin-top: 20px; padding: 20px; border-radius: 16px; background: #fbf7f1; border: 1px solid var(--jmt-line); }
.jmt-venue__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.jmt-venue__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jmt-muted); }
.jmt-venue h3 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.15; }
.jmt-venue__head a { font-size: 14px; }
.jmt-badge { padding: 6px 12px; border-radius: 999px; background: var(--jmt-teal); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }

.jmt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px !important; }
.jmt-facts div { padding: 10px 12px; background: var(--jmt-paper); border: 1px solid var(--jmt-line); border-radius: 12px; }
.jmt-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jmt-muted); }
.jmt-facts dd { margin-top: 2px; font-weight: 600; font-size: 15px; line-height: 1.3; }

.jmt-venue__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.jmt-venue__col h4 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jmt-coral); }
.jmt-venue__col ul { margin-top: 4px !important; }
.jmt-venue__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--jmt-line); font-size: 14px; font-weight: 600; }

/* Footer */
.jmt-foot { margin: 8px 24px 0; font-size: 13px; color: var(--jmt-muted); text-align: center; }
.jmt-private { padding: 20px; text-align: center; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
	.jmt-trip { border-radius: 0; }
	.jmt-hero { padding: 40px 16px 150px; border-radius: 0; }
	.jmt-hero__scene { height: 120px; }
	.jmt-hero__palm { right: -24px; bottom: 30px; width: 130px; height: 190px; }
	.jmt-hero__sun { right: -30px; top: -20px; width: 160px; height: 160px; }
	.jmt-checklist { margin: 20px 16px 0; }
	.jmt-card { padding: 18px 16px; }
	.jmt-days { margin: 24px 16px 0 !important; }
	.jmt-days::before { display: none; }
	.jmt-day { grid-template-columns: 1fr; gap: 0; }
	.jmt-day__date {
		position: relative; top: 0;
		flex-direction: row; gap: 8px; align-items: baseline;
		width: auto; justify-self: start;
		padding: 8px 14px; margin-bottom: -12px; margin-left: 14px;
		z-index: 1;
	}
	.jmt-day__num { font-size: 22px; }
	.jmt-day__dow, .jmt-day__mon { margin-top: 0; }
	.jmt-day__card { padding-top: 24px; }
	.jmt-item { grid-template-columns: 1fr; gap: 2px; }
	.jmt-venue { padding: 16px; margin-left: -4px; margin-right: -4px; }
	.jmt-venue__grid { grid-template-columns: 1fr; gap: 14px; }
	.jmt-stay { flex-direction: column; gap: 4px; }
	.jmt-foot { margin: 8px 16px 0; }
}