/*
Theme Name:   Ottawa St.
Theme URI:    https://ottawast.com
Description:  Futuristic Kadence child theme for Ottawa St.: dark/light mode, Story Cards, Explore-by-Street map, TL;DR with Quick/Deep Read, reading progress bar and a live headline ticker.
Author:       Ottawa St.
Template:     kadence
Version:      1.1.1
Requires at least: 6.4
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  ottawa-st
*/

/* =========================================================
   1. Colours (dark is the default, light is opt-in)
   These override Kadence's global palette, so every Kadence
   block and setting picks up the Ottawa St. colours.
   ========================================================= */
html:not([data-ottst-theme="light"]) {
	--global-palette1: #FF3B4A; /* accent: electric red */
	--global-palette2: #7FE7EC; /* accent 2: ice blue */
	--global-palette3: #F4F6FA; /* strongest text */
	--global-palette4: #E8EAF0; /* strong text */
	--global-palette5: #C9CFDA; /* body text */
	--global-palette6: #A9B1BF; /* muted text */
	--global-palette7: #1A1F2A; /* subtle background */
	--global-palette8: #0A0C11; /* page background */
	--global-palette9: #11151D; /* surface */
	--ottst-bg: #0A0C11;
	--ottst-surface: rgba(255, 255, 255, 0.04);
	--ottst-surface-hover: rgba(255, 255, 255, 0.07);
	--ottst-border: rgba(255, 255, 255, 0.10);
	--ottst-text: #E8EAF0;
	--ottst-muted: #A9B1BF;
	--ottst-grid: rgba(255, 255, 255, 0.025);
	--ottst-header-bg: rgba(10, 12, 17, 0.82);
	--ottst-placeholder: #161A25;
	--ottst-purple: #C9A8FF;
	--ottst-shade: rgba(10, 12, 17, 0.96);
	--ottst-on-accent: #0A0C11;
	color-scheme: dark;
}

html[data-ottst-theme="light"] {
	--global-palette1: #D3122A;
	--global-palette2: #0B6F78;
	--global-palette3: #0A0C11;
	--global-palette4: #1A1F2A;
	--global-palette5: #343C4B;
	--global-palette6: #4E5768;
	--global-palette7: #E6E9EF;
	--global-palette8: #F6F7FA;
	--global-palette9: #FFFFFF;
	--ottst-bg: #F6F7FA;
	--ottst-surface: rgba(255, 255, 255, 0.75);
	--ottst-surface-hover: #FFFFFF;
	--ottst-border: rgba(10, 12, 17, 0.10);
	--ottst-text: #0A0C11;
	--ottst-muted: #4E5768;
	--ottst-grid: rgba(10, 12, 17, 0.04);
	--ottst-header-bg: rgba(246, 247, 250, 0.85);
	--ottst-placeholder: #E3E7EE;
	--ottst-purple: #6E3FD1;
	--ottst-shade: rgba(10, 12, 17, 0.88);
	--ottst-on-accent: #FFFFFF;
	color-scheme: light;
}

html:not([data-ottst-theme="light"]),
html[data-ottst-theme="light"] {
	--ottst-accent: var(--global-palette1);
	--ottst-accent-2: var(--global-palette2);
	--ottst-radius: 18px;
	--ottst-font-head: "Space Grotesk", Inter, system-ui, sans-serif;
	--ottst-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ottst-font-read: "Source Serif 4", Georgia, serif;
	--global-body-font-family: var(--ottst-font-body);
	--global-heading-font-family: var(--ottst-font-head);
	--ottst-glow: 0 0 24px color-mix(in srgb, var(--ottst-accent) 30%, transparent);
	--ottst-glow-2: 0 0 24px color-mix(in srgb, var(--ottst-accent-2) 22%, transparent);
}

/* =========================================================
   2. Base
   ========================================================= */
html body {
	background-color: var(--ottst-bg);
	background-image:
		linear-gradient(var(--ottst-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--ottst-grid) 1px, transparent 1px);
	background-size: 48px 48px;
	background-attachment: fixed;
	color: var(--ottst-text);
	font-family: var(--ottst-font-body);
	-webkit-font-smoothing: antialiased;
}

html body .content-bg,
html body .site-main .content-bg {
	background: transparent;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--ottst-font-head);
	letter-spacing: -0.015em;
}

a {
	transition: color 0.2s ease;
}

:focus-visible {
	outline: 2px solid var(--ottst-accent-2);
	outline-offset: 3px;
}

::selection {
	background: color-mix(in srgb, var(--ottst-accent) 35%, transparent);
}

/* =========================================================
   3. Header + logo badge
   ========================================================= */
#masthead,
#masthead .site-header-row-container-inner {
	background: var(--ottst-header-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

#masthead {
	border-bottom: 1px solid var(--ottst-border);
}

/* Set Site Title to "Ottawa St." and it becomes a neon street-sign badge. */
.site-branding .site-title {
	display: inline-block;
	padding: 0.35em 0.75em;
	border: 1.5px solid var(--ottst-accent);
	border-radius: 6px;
	font-family: var(--ottst-font-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ottst-text);
	box-shadow: var(--ottst-glow);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-weight: 500;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	text-shadow: 0 0 14px color-mix(in srgb, var(--ottst-accent-2) 60%, transparent);
}

/* =========================================================
   4. Light/dark toggle
   ========================================================= */
.ottst-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ottst-border);
	border-radius: 12px;
	background: var(--ottst-surface);
	color: var(--ottst-text);
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ottst-theme-toggle:hover {
	border-color: var(--ottst-accent-2);
	box-shadow: var(--ottst-glow-2);
	background: var(--ottst-surface-hover);
	color: var(--ottst-text);
}

.ottst-theme-toggle .ottst-i-moon,
html[data-ottst-theme="light"] .ottst-theme-toggle .ottst-i-sun {
	display: none;
}

html[data-ottst-theme="light"] .ottst-theme-toggle .ottst-i-moon {
	display: block;
}

.ottst-theme-toggle--floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* =========================================================
   5. "Now in Ottawa" ticker
   ========================================================= */
.ottst-ticker {
	border-bottom: 1px solid var(--ottst-border);
	background: color-mix(in srgb, var(--ottst-accent) 6%, transparent);
	overflow: hidden;
}

.ottst-ticker__inner {
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto;
	padding: 10px var(--global-content-edge-padding, 1.5rem);
	display: flex;
	align-items: center;
	gap: 20px;
}

.ottst-ticker__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ottst-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ottst-accent);
}

.ottst-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ottst-accent);
	box-shadow: 0 0 10px var(--ottst-accent);
	animation: ottst-pulse 2s ease-in-out infinite;
}

.ottst-ticker__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ottst-ticker__track {
	display: flex;
	width: max-content;
	animation: ottst-ticker 45s linear infinite;
}

.ottst-ticker:hover .ottst-ticker__track,
.ottst-ticker:focus-within .ottst-ticker__track {
	animation-play-state: paused;
}

.ottst-ticker__group {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-right: 16px;
	white-space: nowrap;
}

.ottst-ticker a {
	font-size: 14px;
	color: var(--ottst-text);
	text-decoration: none;
}

.ottst-ticker a:hover {
	color: var(--ottst-accent-2);
}

.ottst-ticker__sep {
	color: var(--ottst-muted);
}

@keyframes ottst-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes ottst-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* =========================================================
   6. Shared pieces: sections, chips, covers, meta
   ========================================================= */
.ottst-block {
	margin: 0 0 80px;
}

.ottst-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 24px;
}

.ottst-section-title {
	margin: 0;
	font-family: var(--ottst-font-head);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ottst-text);
}

.ottst-section-sub {
	margin: 6px 0 0;
	font-size: 16px;
	color: var(--ottst-muted);
}

.ottst-kicker {
	margin: 0 0 6px;
	font-family: var(--ottst-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ottst-muted);
}

.ottst-chip {
	--chip: var(--ottst-accent);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid color-mix(in srgb, var(--chip) 65%, transparent);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--chip);
	line-height: 1.4;
}

.ottst-chip--canada { --chip: var(--ottst-accent-2); }
.ottst-chip--events { --chip: var(--ottst-purple); }

.ottst-chip--top {
	background: var(--ottst-accent);
	border-color: var(--ottst-accent);
	color: var(--ottst-on-accent);
}

.ottst-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ottst-cover--empty {
	background-color: var(--ottst-placeholder);
	background-image: repeating-linear-gradient(135deg, var(--ottst-grid) 0 2px, transparent 2px 14px);
}

.ottst-meta {
	font-size: 13px;
	color: var(--ottst-muted);
}

.ottst-hint {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--ottst-border);
	border-radius: 12px;
	font-size: 14px;
	color: var(--ottst-muted);
}

/* =========================================================
   7. Hero
   ========================================================= */
.ottst-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.ottst-hero__main {
	flex: 2 1 560px;
	min-width: 0;
	position: relative;
	display: flex;
	min-height: 520px;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--ottst-border);
	color: #E8EAF0;
	text-decoration: none;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ottst-hero__main:hover {
	border-color: color-mix(in srgb, var(--ottst-accent) 60%, transparent);
	box-shadow: var(--ottst-glow);
	color: #E8EAF0;
}

.ottst-hero__main .ottst-cover {
	position: absolute;
	inset: 0;
	transition: transform 0.8s ease;
}

.ottst-hero__main:hover .ottst-cover {
	transform: scale(1.03);
}

.ottst-hero__body {
	position: relative;
	margin-top: auto;
	width: 100%;
	padding: clamp(24px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: linear-gradient(0deg, var(--ottst-shade) 0%, rgba(10, 12, 17, 0.6) 60%, rgba(10, 12, 17, 0) 100%);
}

.ottst-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ottst-hero__chips .ottst-chip:not(.ottst-chip--top) {
	background: rgba(10, 12, 17, 0.5);
}

.ottst-hero__title {
	margin: 0;
	max-width: 760px;
	font-family: var(--ottst-font-head);
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #F4F6FA;
}

.ottst-hero__excerpt {
	max-width: 620px;
	font-size: 18px;
	line-height: 1.55;
	color: #C9CFDA;
}

.ottst-hero__main .ottst-meta {
	color: #C9CFDA;
}

.ottst-hero__side {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ottst-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: 14px;
	background: var(--ottst-surface);
	border: 1px solid var(--ottst-border);
	color: var(--ottst-text);
	text-decoration: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ottst-mini:hover {
	color: var(--ottst-text);
	border-color: color-mix(in srgb, var(--ottst-accent-2) 50%, transparent);
	box-shadow: var(--ottst-glow-2);
	transform: translateY(-2px);
}

.ottst-mini__title {
	font-family: var(--ottst-font-head);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

/* =========================================================
   8. Story Cards
   ========================================================= */
.ottst-stories {
	list-style: none;
	margin: 0;
	padding: 4px 0 16px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.ottst-stories > li {
	scroll-snap-align: start;
	margin: 0;
}

.ottst-story {
	position: relative;
	display: flex;
	height: 360px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--ottst-border);
	color: #E8EAF0;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ottst-stories > li:first-child .ottst-story {
	border-color: color-mix(in srgb, var(--ottst-accent) 60%, transparent);
	box-shadow: var(--ottst-glow);
}

.ottst-story:hover {
	color: #E8EAF0;
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--ottst-accent) 60%, transparent);
	box-shadow: var(--ottst-glow);
}

.ottst-story .ottst-cover {
	position: absolute;
	inset: 0;
}

.ottst-story__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 17, 0.35) 0%, rgba(10, 12, 17, 0) 30%, rgba(10, 12, 17, 0) 45%, var(--ottst-shade) 100%);
}

.ottst-story__body {
	position: relative;
	margin-top: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ottst-story__body .ottst-chip {
	background: rgba(10, 12, 17, 0.55);
}

.ottst-story__title {
	font-family: var(--ottst-font-head);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #F4F6FA;
}

.ottst-story .ottst-meta {
	color: #C9CFDA;
}

@media (max-width: 640px) {
	.ottst-stories {
		grid-auto-columns: 78%;
	}
	.ottst-story {
		height: 460px;
	}
}

/* =========================================================
   9. Explore by Street map
   ========================================================= */
.ottst-mapwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

.ottst-map {
	flex: 3 1 560px;
	min-width: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 30%, transparent);
	background: var(--ottst-placeholder);
	z-index: 0;
}

/* Dark-mode map tiles */
html:not([data-ottst-theme="light"]) .ottst-map .leaflet-tile-pane {
	filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6);
}

.ottst-map .ottst-pin {
	filter: drop-shadow(0 0 6px var(--ottst-accent));
}

.ottst-map .leaflet-popup-content-wrapper,
.ottst-map .leaflet-popup-tip {
	background: var(--global-palette9);
	color: var(--ottst-text);
	border: 1px solid var(--ottst-border);
	box-shadow: var(--ottst-glow-2);
}

.ottst-map .leaflet-control-attribution {
	background: var(--ottst-header-bg);
	color: var(--ottst-muted);
}

.ottst-popup {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--ottst-font-body);
}

.ottst-popup__street {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ottst-accent);
}

.ottst-popup a {
	font-family: var(--ottst-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--ottst-text);
}

.ottst-streets {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ottst-street {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 18px;
	border-radius: 12px;
	background: var(--ottst-surface);
	border: 1px solid var(--ottst-border);
	color: var(--ottst-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ottst-street:hover {
	color: var(--ottst-text);
	border-color: color-mix(in srgb, var(--ottst-accent) 55%, transparent);
	box-shadow: var(--ottst-glow);
}

.ottst-street span {
	font-size: 13px;
	font-weight: 500;
	color: var(--ottst-muted);
}

/* =========================================================
   10. Latest stories grid + Kadence archive cards
   ========================================================= */
.ottst-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ottst-filter button {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--ottst-border);
	background: transparent;
	color: var(--ottst-text);
	font-family: var(--ottst-font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ottst-filter button:hover {
	background: var(--ottst-surface-hover);
	color: var(--ottst-text);
	border-color: var(--ottst-accent-2);
}

.ottst-filter button[aria-pressed="true"] {
	background: var(--ottst-text);
	border-color: var(--ottst-text);
	color: var(--ottst-bg);
}

.ottst-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
}

.ottst-card[hidden] {
	display: none;
}

.ottst-card > a,
.loop-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--ottst-radius);
	overflow: hidden;
	background: var(--ottst-surface);
	border: 1px solid var(--ottst-border);
	color: var(--ottst-text);
	text-decoration: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ottst-card > a:hover,
.loop-entry:hover {
	color: var(--ottst-text);
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--ottst-accent-2) 50%, transparent);
	box-shadow: var(--ottst-glow-2);
}

.ottst-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.ottst-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.ottst-card__title {
	margin: 0;
	font-family: var(--ottst-font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ottst-text);
}

.ottst-card__excerpt {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ottst-muted);
}

/* =========================================================
   11. Newsletter
   ========================================================= */
.ottst-newsletter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 24px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 35%, transparent);
	background: color-mix(in srgb, var(--ottst-accent-2) 6%, transparent);
	box-shadow: var(--ottst-glow-2);
}

.ottst-newsletter__text,
.ottst-newsletter__form {
	flex: 1 1 340px;
	min-width: 0;
}

/* =========================================================
   12. Single posts: progress bar, reading, TL;DR, modes
   ========================================================= */
.ottst-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 100000;
	pointer-events: none;
}

.admin-bar .ottst-progress {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ottst-progress {
		top: 46px;
	}
}

.ottst-progress span {
	display: block;
	height: 100%;
	transform-origin: 0 50%;
	transform: scaleX(var(--p, 0));
	background: var(--ottst-accent);
	box-shadow: 0 0 12px var(--ottst-accent);
}

.single-post .entry-content {
	font-family: var(--ottst-font-read);
	font-size: 20px;
	line-height: 1.75;
	color: var(--ottst-text);
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
	font-family: var(--ottst-font-head);
	color: var(--ottst-text);
	margin-top: 1.6em;
}

.single-post .entry-content blockquote,
.single-post .entry-content .wp-block-quote {
	margin: 1.5em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--ottst-accent);
	font-family: var(--ottst-font-head);
	font-size: 1.3em;
	line-height: 1.35;
	font-style: normal;
	color: var(--ottst-text);
}

.single-post .entry-content img {
	border-radius: 16px;
}

.single-post .post-thumbnail img,
.single-post .article-post-thumbnail img {
	border-radius: 22px;
}

.ottst-readtime {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-family: var(--ottst-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ottst-accent-2);
}

.ottst-readtime .ottst-dot {
	background: var(--ottst-accent-2);
	box-shadow: 0 0 10px var(--ottst-accent-2);
}

/* TL;DR box (Group block → Styles → "TL;DR box", or the pattern) */
.is-style-ottst-tldr {
	margin: 0 0 32px;
	padding: 28px;
	border-radius: 20px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 40%, transparent);
	background: color-mix(in srgb, var(--ottst-accent-2) 7%, transparent);
	box-shadow: var(--ottst-glow-2);
	font-family: var(--ottst-font-body);
	font-size: 17px;
	line-height: 1.55;
}

.is-style-ottst-tldr .ottst-tldr-label {
	margin: 0 0 14px;
	font-family: var(--ottst-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ottst-accent-2);
}

.is-style-ottst-tldr ol,
.is-style-ottst-tldr ul {
	list-style: none;
	counter-reset: ottst;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.is-style-ottst-tldr li {
	counter-increment: ottst;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
}

.is-style-ottst-tldr li::before {
	content: counter(ottst);
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--ottst-accent-2) 16%, transparent);
	color: var(--ottst-accent-2);
	font-size: 13px;
	font-weight: 700;
}

/* Quick Read / Deep Read switch */
.ottst-mode {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 6px;
	border-radius: 14px;
	background: var(--ottst-surface);
	border: 1px solid var(--ottst-border);
}

.ottst-mode button {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ottst-muted);
	font-family: var(--ottst-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ottst-mode button:hover {
	background: var(--ottst-surface-hover);
	color: var(--ottst-text);
}

.ottst-mode button[aria-pressed="true"] {
	background: var(--ottst-text);
	color: var(--ottst-bg);
}

.ottst-mode-more {
	display: none;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 1px dashed color-mix(in srgb, var(--ottst-accent-2) 55%, transparent);
	border-radius: 14px;
	background: transparent;
	color: var(--ottst-accent-2);
	font-family: var(--ottst-font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ottst-mode-more:hover {
	background: color-mix(in srgb, var(--ottst-accent-2) 8%, transparent);
	color: var(--ottst-accent-2);
}

.ottst-quick .ottst-mode-more {
	display: block;
}

.ottst-quick .ottst-mode-more ~ *:not(.ottst-next) {
	display: none !important;
}

/* Next story card */
.ottst-next {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 48px;
	padding: 28px;
	border-radius: 20px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent) 45%, transparent);
	background: color-mix(in srgb, var(--ottst-accent) 6%, transparent);
	box-shadow: var(--ottst-glow);
	color: var(--ottst-text);
	font-family: var(--ottst-font-body);
	text-decoration: none;
	transition: transform 0.25s ease;
}

.ottst-next:hover {
	color: var(--ottst-text);
	transform: translateY(-3px);
}

.ottst-next__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ottst-accent);
}

.ottst-next__title {
	font-family: var(--ottst-font-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

/* =========================================================
   13. Buttons and form fields
   ========================================================= */
.button,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
	border-radius: 12px;
	font-weight: 700;
	box-shadow: var(--ottst-glow);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
	border-radius: 12px;
	border: 1px solid var(--ottst-border);
	background: var(--ottst-surface);
	color: var(--ottst-text);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ottst-accent-2);
	box-shadow: var(--ottst-glow-2);
}

/* =========================================================
   14. Footer
   ========================================================= */
#colophon {
	border-top: 1px solid var(--ottst-border);
	background: transparent;
}

#colophon .site-footer-row-container-inner {
	background: transparent;
}

/* =========================================================
   15. Open-source upgrades: search, weather, share, zoom
   ========================================================= */

/* Instant search overlay (Fuse.js) */
html.ottst-search-open {
	overflow: hidden;
}

.ottst-search {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 10vh 16px 16px;
	background: rgba(5, 6, 10, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ottst-search[hidden] {
	display: none;
}

.ottst-search__panel {
	width: 100%;
	max-width: 680px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 35%, transparent);
	background: var(--global-palette9);
	box-shadow: var(--ottst-glow-2), 0 30px 80px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	font-family: var(--ottst-font-body);
}

.ottst-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 20px;
	border-bottom: 1px solid var(--ottst-border);
	color: var(--ottst-muted);
}

.ottst-search__form input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ottst-text);
	font-family: var(--ottst-font-head);
	font-size: 22px;
	outline: none;
}

.ottst-search__form input[type="search"]:focus {
	box-shadow: none;
}

.ottst-search__close {
	flex: none;
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ottst-border);
	border-radius: 8px;
	background: transparent;
	color: var(--ottst-muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ottst-search__status {
	margin: 0;
	padding: 12px 20px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ottst-muted);
}

.ottst-search__results {
	list-style: none;
	margin: 0;
	padding: 6px 10px 10px;
	overflow-y: auto;
}

.ottst-search__results li {
	margin: 0;
}

.ottst-search__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	color: var(--ottst-text);
	text-decoration: none;
}

.ottst-search__item.is-active,
.ottst-search__item:focus-visible {
	color: var(--ottst-text);
	background: var(--ottst-surface-hover);
	border-color: color-mix(in srgb, var(--ottst-accent-2) 40%, transparent);
}

.ottst-search__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--ottst-muted);
}

.ottst-search__title {
	font-family: var(--ottst-font-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.ottst-search__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ottst-muted);
}

.ottst-search__hint {
	margin: 0;
	padding: 10px 20px;
	border-top: 1px solid var(--ottst-border);
	font-size: 12px;
	color: var(--ottst-muted);
}

@media (max-width: 640px) {
	.ottst-search {
		padding-top: 12px;
	}
	.ottst-search__hint {
		display: none;
	}
}

/* Live weather chip (Open-Meteo) */
.ottst-weather {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 40%, transparent);
	font-size: 13px;
	font-weight: 600;
	color: var(--ottst-text);
	text-decoration: none;
	white-space: nowrap;
}

.ottst-weather:hover {
	color: var(--ottst-text);
	box-shadow: var(--ottst-glow-2);
}

.ottst-weather svg {
	color: var(--ottst-accent-2);
}

.ottst-weather__label {
	font-weight: 500;
	color: var(--ottst-muted);
}

.ottst-weather__src {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ottst-muted);
	opacity: 0.8;
}

@media (max-width: 640px) {
	.ottst-weather__label,
	.ottst-weather__src {
		display: none;
	}
	.ottst-ticker__inner {
		gap: 12px;
	}
}

/* Share bar */
.ottst-sharebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}

.ottst-sharebar .ottst-readtime {
	margin: 0;
}

.ottst-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid var(--ottst-border);
	background: var(--ottst-surface);
	color: var(--ottst-text);
	font-family: var(--ottst-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}

.ottst-share:hover {
	color: var(--ottst-text);
	background: var(--ottst-surface-hover);
	border-color: var(--ottst-accent-2);
	box-shadow: var(--ottst-glow-2);
}

.ottst-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100003;
	padding: 12px 18px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--ottst-accent-2) 45%, transparent);
	background: var(--global-palette9);
	color: var(--ottst-text);
	font-family: var(--ottst-font-body);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--ottst-glow-2);
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ottst-toast.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Photo zoom (medium-zoom) */
.medium-zoom-overlay,
.medium-zoom-image--opened {
	z-index: 100001;
}

.single-post .entry-content img.medium-zoom-image {
	cursor: zoom-in;
}

/* =========================================================
   16. Respect "reduce motion"
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.ottst-ticker__viewport {
		overflow-x: auto;
	}
	.ottst-ticker__group[aria-hidden="true"] {
		display: none;
	}
}

/* Mobile header search button */
.ottst-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: 8px;
	padding: 0;
	border: 1px solid var(--ottst-border);
	border-radius: 12px;
	background: var(--ottst-surface);
	color: var(--ottst-text);
	cursor: pointer;
	box-shadow: none;
	vertical-align: middle;
}

.ottst-icon-btn:hover {
	color: var(--ottst-text);
	background: var(--ottst-surface-hover);
	border-color: var(--ottst-accent-2);
	box-shadow: var(--ottst-glow-2);
}