/* Ontario Festivals Explorer */
.ofe-app { --ofe-accent:#ffbb00; --ofe-accent-ink:#231a00; --ofe-featured:#d7263d; --ofe-sponsored:#1a3a2e; --ofe-ink:#232323; --ofe-line:#e8e4d8;
	font-size:15px; line-height:1.45; color:#222; max-width:100%; }
.ofe-app * { box-sizing:border-box; }
.ofe-loading, .ofe-empty { padding:28px 16px; text-align:center; color:#667; background:#f6f8f7; border:1px solid var(--ofe-line); border-radius:12px; }

/* Tabs */
.ofe-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ofe-tab { border:1px solid var(--ofe-line); background:#fff; color:var(--ofe-ink); border-radius:999px; padding:8px 16px; font-weight:700; font-size:14px; cursor:pointer; }
.ofe-tab.is-on { background:var(--ofe-accent); border-color:var(--ofe-accent); color:var(--ofe-accent-ink); }

/* Filters */
.ofe-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.ofe-select span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#678; margin-bottom:3px; font-weight:700; }
.ofe-select select { border:1px solid var(--ofe-line); border-radius:10px; padding:8px 10px; background:#fff; font-size:14px; max-width:230px; }
.ofe-pills { display:flex; gap:6px; flex-wrap:wrap; }
.ofe-pill { border:1px solid var(--ofe-line); background:#fff; border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; white-space:nowrap; }
.ofe-pill.is-on { background:var(--ofe-accent); border-color:var(--ofe-accent); color:var(--ofe-accent-ink); }

.ofe-catbar { flex-basis:100%; }
.ofe-flabel { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#678; margin-bottom:4px; font-weight:700; }

/* Views */
.ofe-view { display:none; }
.ofe-view.is-on { display:block; }
.ofe-count { margin-top:10px; font-size:13px; color:#678; }

/* Map */
.ofe-view-map { position:relative; }
.ofe-map { width:100%; border-radius:14px; overflow:hidden; border:1px solid var(--ofe-line); z-index:0; }
.ofe-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#556; margin-top:8px; }
.ofe-legend .ofe-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:5px; vertical-align:-1px; }

.ofe-clu-wrap { background:none; border:none; }
.ofe-clu { background:var(--ofe-accent, #ffbb00); color:var(--ofe-accent-ink, #231a00); border-radius:50%; text-align:center; font-weight:800; font-size:14px;
	box-shadow:0 0 0 5px rgba(255,187,0,.35), 0 2px 8px rgba(0,0,0,.25); cursor:pointer; border:2px solid #fff; }
.ofe-app .ofe-clu { background:var(--ofe-accent); position:relative; }
.ofe-clu-flag { position:absolute; top:-5px; right:-5px; width:19px; height:19px; line-height:19px; border-radius:50%;
	font-size:10px; color:#fff; text-align:center; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }

.ofe-pin-wrap { background:none; border:none; }
.ofe-pin { width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--ofe-accent, #ffbb00);
	border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.ofe-app .ofe-pin { background:var(--ofe-accent); }
.ofe-app .ofe-pin.is-featured { background:var(--ofe-featured); }
.ofe-app .ofe-pin.is-sponsored { background:var(--ofe-sponsored); }
.ofe-app .ofe-pin.is-market { background:#0e9f6e; }
.ofe-pin span { transform:rotate(45deg); font-size:12px; color:#fff; line-height:1; }

.ofe-nearme { position:absolute; top:12px; right:12px; z-index:900; background:#fff; border:1.5px solid var(--ofe-line);
	border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; color:var(--ofe-ink); cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.15); }
.ofe-nearme:hover { border-color:var(--ofe-accent); }

/* Detail card */
.ofe-detail { position:absolute; z-index:1000; top:14px; left:14px; width:300px; max-width:calc(100% - 28px); max-height:calc(100% - 70px);
	overflow:auto; background:#fff; border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.28); }
.ofe-detail-close { position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; border-radius:50%; border:none;
	background:rgba(0,0,0,.08); color:#333; font-size:13px; cursor:pointer; line-height:1; }
.ofe-detail-close:hover { background:rgba(0,0,0,.16); }
.ofe-detail-body { padding:12px 40px 12px 14px; }
.ofe-detail-title { display:block; font-size:16.5px; font-weight:800; color:var(--ofe-ink); text-decoration:none; margin:4px 0 6px; }
.ofe-detail-meta { font-size:13.5px; color:#445; margin:3px 0; }
.ofe-detail-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ofe-detail-actions .ofe-btn { flex:1; text-align:center; min-width:120px; }
.ofe-btn { display:inline-block; background:var(--ofe-accent); color:var(--ofe-accent-ink); border:1px solid var(--ofe-accent); border-radius:10px;
	padding:8px 14px; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer; }
.ofe-btn:hover { opacity:.9; color:var(--ofe-accent-ink); }
.ofe-btn-ghost { background:#fff; color:var(--ofe-ink); border-color:var(--ofe-line); }

/* Badges & chips */
.ofe-badges { display:flex; gap:6px; flex-wrap:wrap; }
.ofe-badge { display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; color:#fff; white-space:nowrap; }
.ofe-badge-sponsored { background:var(--ofe-sponsored); }
.ofe-badge-featured { background:var(--ofe-featured); }
.ofe-badge-now { background:#1a7a4c; }
.ofe-badge-market { background:#0e9f6e; }
.ofe-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ofe-chip { font-size:12px; background:#fdf6e3; border:1px solid var(--ofe-line); color:#6b5300; padding:3px 9px; border-radius:999px; }
.ofe-chip-cat { background:#eef3fb; border-color:#dbe6f5; color:#2b4a75; }

/* Grid */
.ofe-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.ofe-card { background:#fff; border:1px solid var(--ofe-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ofe-card.is-sponsored { border-color:var(--ofe-sponsored); box-shadow:0 0 0 1px var(--ofe-sponsored); }
.ofe-card.is-featured { border-color:var(--ofe-featured); }
.ofe-card.is-market { border-color:#0e9f6e; }
.ofe-app .ofe-card-media { position:relative; display:block; height:130px; overflow:hidden; background:#f6f1e2; }
.ofe-app .ofe-card-media img { position:absolute; top:0; left:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:center 25%; display:block; margin:0; }
.ofe-card-noimg { display:flex; align-items:center; justify-content:center; height:100%; font-size:30px; }
.ofe-card-media .ofe-badges { position:absolute; top:8px; left:64px; z-index:1; }
.ofe-card-body { padding:12px 14px 14px; }
.ofe-card-title { display:block; font-weight:800; color:var(--ofe-ink); text-decoration:none; font-size:15.5px; line-height:1.3; margin-top:6px; }
.ofe-card-title:hover { text-decoration:underline; }
.ofe-card-date { font-size:13px; color:#556; margin-top:5px; }

/* Date badge — top-left corner box (month + day) */
.ofe-date-badge {
	position:absolute; top:8px; left:8px; z-index:1;
	background:#fff; border-radius:8px; padding:4px 9px; text-align:center;
	box-shadow:0 2px 8px rgba(0,0,0,.18); line-height:1.15; min-width:44px;
}
.ofe-date-badge-month { display:block; font-size:10px; font-weight:800; letter-spacing:.04em; color:var(--ofe-featured); }
.ofe-date-badge-day { display:block; font-size:13px; font-weight:800; color:var(--ofe-ink); }

/* Heart / save button (matches the theme's .of-heart if present; self-contained fallback otherwise) */
.ofe-card-media .of-heart {
	position:absolute; top:8px; right:8px; z-index:1;
	width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
	background:rgba(255,255,255,.92); color:#c3c8d2; font-size:1rem; line-height:1;
	display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .12s ease, color .12s ease;
}
.ofe-card-media .of-heart:hover { transform:scale(1.12); color:#e0245e; }
.ofe-card-media .of-heart.is-saved { color:#e0245e; }

/* Category pill above title */
.ofe-cat-pill {
	display:inline-block; font-size:11px; font-weight:700; padding:3px 10px;
	border-radius:999px; background:#eef3fb; color:#2b4a75;
}
.ofe-card-loc { font-size:12.5px; color:#678; margin-top:5px; }
.ofe-card-excerpt { font-size:13px; color:#556; line-height:1.5; margin:8px 0 0; }

.ofe-more-wrap { grid-column:1 / -1; text-align:center; padding:6px 0 2px; }
.ofe-more { font-size:14.5px; padding:11px 26px; }

/* Carousel mode's "View all" CTA — always visible below the row, since a
   "View more" button placed inside the scroll area (like grid mode's) would
   just be one more scrolling card, easy to miss on both desktop and mobile. */
.ofe-view-all-wrap { text-align:center; padding:14px 0 2px; }
.ofe-view-all { font-size:14.5px; padding:11px 26px; }

/* Carousel mode — horizontal scrolling row instead of a wrapping grid */
.ofe-carousel-wrap { position:relative; }
.ofe-carousel-mode .ofe-grid {
	display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 260px);
	grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
	scrollbar-width:none; padding-bottom:2px;
}
.ofe-carousel-mode .ofe-grid::-webkit-scrollbar { display:none; }
.ofe-carousel-mode .ofe-card { scroll-snap-align:start; }
.ofe-card-directions {
	align-self:flex-start; margin-top:2px; font-size:12.5px; font-weight:700;
	color:var(--ofe-accent); text-decoration:none;
}
.ofe-card-directions:hover { text-decoration:underline; }
/* Arrows are visible at every width — a carousel with no visible scroll
   affordance on mobile just looks like a cut-off grid. */
.ofe-carousel-arrow {
	display:flex; position:absolute; top:50%; transform:translateY(-50%);
	width:36px; height:36px; border-radius:50%; border:1px solid var(--ofe-line);
	background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.15); font-size:1.15rem; line-height:1;
	cursor:pointer; z-index:2; align-items:center; justify-content:center;
}
.ofe-carousel-prev { left:-6px; }
.ofe-carousel-next { right:-6px; }
@media (max-width:480px) {
	.ofe-carousel-mode .ofe-grid { grid-auto-columns:minmax(200px, 82vw); }
	/* On phones, edge-straddling circles overlap card content awkwardly —
	   move both arrows into a small pair below the row instead, at the
	   bottom-right, as a clear (but out-of-the-way) "swipe for more" cue. */
	.ofe-carousel-wrap { padding-bottom:44px; }
	.ofe-carousel-arrow {
		top:auto; bottom:0; transform:none;
		width:32px; height:32px; font-size:1rem;
	}
	.ofe-carousel-prev { left:auto; right:44px; }
	.ofe-carousel-next { right:0; }
}

/* Calendar */
.ofe-cal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ofe-cal-nav { display:flex; align-items:center; gap:8px; }
.ofe-cal-nav .ofe-btn { padding:5px 13px; font-size:16px; line-height:1.2; }
.ofe-cal-nav .ofe-btn[disabled] { opacity:.35; cursor:not-allowed; }
.ofe-cal-title { font-weight:800; color:var(--ofe-ink); font-size:16.5px; min-width:150px; text-align:center; }
.ofe-cal-mode { display:flex; gap:6px; }

.ofe-month { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.ofe-dow { text-align:center; font-size:11px; font-weight:800; color:#678; text-transform:uppercase; letter-spacing:.04em; padding:4px 0; }
.ofe-day { min-height:66px; background:#fff; border:1px solid var(--ofe-line); border-radius:10px; padding:6px 7px; position:relative; }
.ofe-day[data-day] { cursor:pointer; }
.ofe-day[data-day]:hover, .ofe-day[data-day]:focus-visible { border-color:var(--ofe-accent); outline:none; }
.ofe-day.is-out { visibility:hidden; }
.ofe-day.is-past { background:#f5f6f5; color:#aab; }
.ofe-day.is-today { border-color:var(--ofe-accent); box-shadow:0 0 0 1px var(--ofe-accent); }
.ofe-day.is-open { background:var(--ofe-accent); border-color:var(--ofe-accent); }
.ofe-day.is-open .ofe-day-num, .ofe-day.is-open .ofe-day-count { color:var(--ofe-accent-ink); }
.ofe-day-num { font-size:12.5px; font-weight:700; color:#444; }
.ofe-day-count { display:inline-block; margin-top:5px; font-size:11px; font-weight:800; color:var(--ofe-accent-ink); background:var(--ofe-accent);
	border-radius:999px; padding:3px 8px; white-space:nowrap; max-width:100%; overflow:hidden; }
.ofe-day-count b, .ofe-day-count i { font-style:normal; font-weight:800; }
.ofe-day.is-open .ofe-day-count { background:rgba(255,255,255,.55); }
.ofe-hint { font-size:13px; color:#789; margin-top:10px; }

.ofe-day-panel { margin-top:14px; background:#fff; border:1px solid var(--ofe-line); border-radius:14px; padding:14px 16px; }
.ofe-day-panel-title { font-weight:800; color:var(--ofe-ink); margin-bottom:8px; font-size:15.5px; }

.ofe-row { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:9px 10px; border-radius:10px; }
.ofe-row + .ofe-row { border-top:1px solid #f0f3f1; }
.ofe-row.is-sponsored { background:#eef5f1; }
.ofe-row.is-featured { background:#fdeef0; }
.ofe-row-title { font-weight:700; color:var(--ofe-ink); text-decoration:none; }
.ofe-row-title:hover { text-decoration:underline; }
.ofe-row-meta { display:inline-flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:#667; align-items:center; }
.ofe-row-km { font-weight:800; color:#2b6cd4; background:#eef4fd; border-radius:999px; padding:2px 8px; font-size:11.5px; }

.ofe-week { display:flex; flex-direction:column; gap:12px; }
.ofe-week-day { background:#fff; border:1px solid var(--ofe-line); border-radius:14px; overflow:hidden; }
.ofe-week-day.is-today { border-color:var(--ofe-accent); box-shadow:0 0 0 1.5px var(--ofe-accent); }
.ofe-week-day.is-past { opacity:.55; }
.ofe-week-head { margin:0; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	background:linear-gradient(90deg, #fff3cf, #fffdf4); border-bottom:2px solid var(--ofe-accent); border-left:5px solid var(--ofe-accent); }
.ofe-week-dayname { font-size:16.5px; font-weight:800; color:var(--ofe-ink); letter-spacing:.01em; }
.ofe-week-date { color:#7a6a33; font-weight:700; font-size:13.5px; background:#fff; border:1px solid #eadfb8; border-radius:999px; padding:2px 10px; }
.ofe-week-head em { font-style:normal; }
.ofe-week-n { margin-left:auto; font-size:12px; font-weight:700; color:#8a7a45; }
.ofe-week-list { padding:6px 12px 10px; }
.ofe-week-empty { font-size:13px; color:#9ab; padding:8px 2px; }

@keyframes ofeSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (max-width: 640px) {
	/* Bottom sheet pinned to the phone screen, not the map */
	.ofe-detail { position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; max-width:none; max-height:60vh;
		border-radius:18px 18px 0 0; z-index:99999; box-shadow:0 -10px 34px rgba(0,0,0,.35);
		animation:ofeSlideUp .22s ease-out; padding-bottom:env(safe-area-inset-bottom, 0); }
	.ofe-detail::before { content:''; display:block; width:42px; height:4px; border-radius:999px; background:#d5d5d5; margin:8px auto 0; }
	.ofe-detail-body { padding:8px 44px 16px 16px; }
	.ofe-detail-actions .ofe-btn { padding:12px 14px; font-size:14.5px; }
	.ofe-month { gap:3px; }
	.ofe-day { min-height:52px; padding:4px 3px; text-align:center; }
	.ofe-day-num { display:block; }
	.ofe-day-count { font-size:11px; min-width:22px; height:22px; line-height:16px; padding:3px 5px; margin-top:3px; }
	.ofe-day-count i { display:none; } /* show just the number on phones */
	.ofe-dow { font-size:9.5px; letter-spacing:0; }
	.ofe-select select { max-width:100%; }
	.ofe-cal-title { min-width:0; }
}
@media (prefers-reduced-motion: no-preference) {
	.ofe-card { transition:transform .15s ease, box-shadow .15s ease; }
	.ofe-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,50,40,.10); }
}