/* NYC FireWire — command-center theme styles
   Most design is driven by theme.json; this file holds the few things tokens
   can't express: the live ticker, dispatch labels, the console-card style,
   and small UI polish. All colors reference theme.json CSS variables. */

:root {
	--fw-base: var(--wp--preset--color--base);
	--fw-surface: var(--wp--preset--color--surface);
	--fw-surface-2: var(--wp--preset--color--surface-2);
	--fw-border: var(--wp--preset--color--border);
	--fw-text: var(--wp--preset--color--contrast);
	--fw-muted: var(--wp--preset--color--muted);
	--fw-primary: var(--wp--preset--color--primary);
	--fw-amber: var(--wp--preset--color--amber);
	--fw-signal: var(--wp--preset--color--signal);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* ---- Dispatch label: monospace, uppercase, amber. The "techy" accent. ---- */
.is-style-dispatch {
	font-family: var(--wp--preset--font-family--mono) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--fw-amber);
	margin-bottom: 0.5rem;
}

/* ---- Console card: raised surface with hairline border + red top rule ---- */
.is-style-card {
	background: var(--fw-surface);
	border: 1px solid var(--fw-border);
	border-radius: 8px;
	padding: 1.5rem;
}
.is-style-card.has-accent-rule {
	border-top: 2px solid var(--fw-primary);
}

/* ---- Live incident ticker ---- */
.fw-ticker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #15110f;
	border-top: 1px solid #3a1f1c;
	border-bottom: 1px solid #3a1f1c;
	padding: 0.55rem 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	overflow: hidden;
	white-space: nowrap;
}
.fw-ticker__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--fw-amber);
	font-weight: 600;
	flex: none;
}
.fw-ticker__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fw-primary);
	display: inline-block;
	animation: fw-pulse 1.4s ease-in-out infinite;
}
.fw-ticker__track {
	color: #cdd3da;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fw-ticker__track strong { color: var(--fw-text); font-weight: 600; }
.fw-ticker__track span { color: var(--fw-muted); }

@keyframes fw-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
	.fw-ticker__dot { animation: none; }
}

/* ---- Header polish ---- */
.wp-block-site-title a { color: var(--fw-text); text-decoration: none; }
.wp-block-navigation a:hover { color: var(--fw-amber); }

/* ---- Cards / reference hub hover ---- */
.is-style-card a { text-decoration: none; }
.fw-hub-card {
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.fw-hub-card:hover {
	border-color: var(--fw-primary);
	transform: translateY(-2px);
}

/* ---- Footer ---- */
.fw-footer {
	border-top: 1px solid var(--fw-border);
	color: var(--fw-muted);
	font-size: 0.85rem;
}
.fw-footer a { color: var(--fw-muted); }
.fw-footer a:hover { color: var(--fw-amber); }
.fw-social a { transition: color 0.15s ease; }
.fw-social a:hover { color: var(--fw-amber) !important; }

/* ---- Content readability ---- */
.entry-content :where(p, li) { color: #d4dade; }
.wp-block-post-content :where(h2, h3) { margin-top: 2.25rem; }

/* ---- Reference pages: code/signal numbers (e.g. 10-codes, car assignments) ---- */
.fw-code {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--fw-amber);
	font-size: 1.02em;
	letter-spacing: 0.03em;
	font-weight: 600;
}
/* tighten the dense reference lists */
.entry-content ul { margin-left: 1.1rem; }
.entry-content li { margin-bottom: 0.2rem; }

/* ---- Data tables (run statistics, etc.) ---- */
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.entry-content table th {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: var(--fw-amber);
	text-align: left;
	padding: 0.5rem 0.7rem;
	border-bottom: 2px solid var(--fw-border);
	position: sticky;
	top: 0;
	background: var(--fw-base);
}
.entry-content table td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--fw-border); color: #d4dade; }
.entry-content table tbody tr:nth-child(even) { background: var(--fw-surface); }
.entry-content .wp-element-caption { color: var(--fw-muted); font-size: 0.8rem; margin-top: 0.75rem; }

/* ---- Mobile (<=781px) ---- */
@media (max-width: 781px) {
	/* Declutter the header: the hero CTA + the menu already surface the app,
	   so the header "Get the app" button (which wrapped to its own row) is hidden. */
	header .wp-block-buttons { display: none; }

	/* Keep the title + hamburger tidy on one row */
	.wp-block-site-title { font-size: 1.2rem; }
	header.wp-block-group { padding-top: 0.85rem; padding-bottom: 0.85rem; }

	/* Slightly tighter hero on small screens */
	.wp-block-navigation__responsive-container-open { margin-left: auto; }
}

/* ---- Mobile menu overlay: dark + left-aligned (any width) ---- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--fw-base) !important;
	color: var(--fw-text) !important;
	padding-top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left !important;
	width: 100%;
}
/* let long items wrap instead of clipping off-screen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
	white-space: normal !important;
	word-break: break-word;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	max-width: calc(100vw - 3rem) !important;
}

/* ---- Mobile menu accordion (collapsible submenus) ---- */
@media (max-width: 781px) {
	/* parent row: link + chevron inline, submenu drops to a full-width row below */
	.wp-block-navigation__responsive-container.is-menu-open .fw-acc {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .fw-acc > .wp-block-navigation-item__content {
		flex: 1 1 auto;
	}
	/* collapsed by default; open shows it */
	.wp-block-navigation__responsive-container.is-menu-open .fw-acc > .wp-block-navigation__submenu-container {
		display: none !important;
		flex-basis: 100%;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .fw-acc.fw-acc-open > .wp-block-navigation__submenu-container {
		display: flex !important;
	}
	.fw-acc-toggle {
		background: none;
		border: 0;
		color: var(--fw-amber);
		font-size: 1.6rem;
		line-height: 1;
		padding: 0.2rem 0.9rem;
		cursor: pointer;
		flex: none;
		align-self: flex-start;
	}
	.fw-acc-chev { display: inline-block; transition: transform 0.15s ease; }
	.fw-acc.fw-acc-open > .fw-acc-toggle .fw-acc-chev { transform: rotate(90deg); }
}
/* desktop keeps hover dropdowns — hide the accordion chevrons */
@media (min-width: 782px) {
	.fw-acc-toggle { display: none; }
}
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--fw-text); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--fw-amber); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--fw-text); }
/* indent submenu items so the hierarchy reads on mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 1rem;
	border-left: 1px solid var(--fw-border);
	margin-left: 0.25rem;
}