/* ==================================================================
   1. Tablet & phone shared layer  (<= 1024px)
   ================================================================== */
@media (max-width: 1024px) {
	/* ---- Media safety ----
	   Keep replaced elements from spilling past their container. NOTE:
	   we deliberately do NOT set overflow-x:hidden on html/body — on this
	   layout (which has a height:100% chain) that clips the scroll root
	   and kills vertical scrolling. Wide elements (tables, Tableau embeds)
	   are wrapped/scrolled individually instead. */
	img,
	svg,
	video,
	iframe {
		max-width: 100%;
	}

	/* ---- Content column: undo the desktop two-column offset ----
	   At <=1024px the sidebar is an off-canvas drawer, but the desktop
	   row flow leaves .main sized to shrink-to-fit beside the sidebar's
	   reserved width. Force the content column to span the full width. */
	.table-layout > .main {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Dashboard pages carry extra desktop padding; relax it so the
	   reclaimed width is actually usable for the embedded viz. */
	.main.dp-main {
		padding: 2rem 1.5rem !important;
	}

	/* ---- Tableau embed: horizontal-scroll the fixed-width viz ----
	   Tableau renders each workbook into a fixed-width iframe (≈600px,
	   sometimes wider) that won't reflow to a phone column. Rather than
	   shrink it to an illegible scale, let the embed become a horizontal
	   scroller so the viz keeps full fidelity and the user pans sideways.
	   Sizing is content-based (max-content) so it adapts to whatever
	   width Tableau happens to render — no hard-coded pixel widths. */
	/* NOTE: dashboard-page.css is injected per-page (extra_css) AFTER this
	   module, so same-specificity rules there would otherwise win. The
	   load-bearing overrides below are marked !important so the module
	   stays deterministic regardless of stylesheet order. */
	.dp-embed {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	/* The inner is position:absolute on desktop (fills the embed). On
	   mobile it must flow so it can size to the viz and create scroll
	   width. Entrance transform/opacity are neutralised here too. */
	.dp-embed__inner {
		position: relative !important;
		inset: auto !important;
		width: max-content !important;
		max-width: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.dp-embed #tableauViz,
	.dp-embed tableau-viz {
		width: max-content !important;
		max-width: none !important;
	}
}

/* ==================================================================
   2. Full-page navigation overlay  (<= 1024px)
   ------------------------------------------------------------------
   Replaces the 315px off-canvas side-tray (defined in sidebar.css)
   with a full-viewport overlay menu — the hamburger reveals a
   takeover screen of nav links, the X (same toggle) dismisses it.
   Reuses the existing JS toggle: .sidebar.is-open + body.ris-nav-open
   + .mobile-hamburger.change. Marked !important to override the
   earlier side-tray rules in sidebar.css.
   ================================================================== */
@media (max-width: 1024px) {
	/* The root reserves a stable scrollbar gutter (styles.css). The page can't
	   scroll while the overlay is open, so collapse that gutter — otherwise it
	   leaves an uncovered strip down the right edge of the full-screen menu. */
	html:has(body.ris-nav-open) {
		scrollbar-gutter: auto;
	}

	/* The drawer becomes a full-screen panel; fade/slide it in.
	   Pin to the viewport with inset:0 (not width:100vw, which includes the
	   scrollbar gutter and mis-sizes the overlay) so it covers edge to edge. */
	.sidebar {
		position: fixed !important;
		inset: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		transform: translateY(8px) !important;
		opacity: 0;
		visibility: hidden;
		box-shadow: none !important;
		overscroll-behavior: contain;
		transition:
			opacity 240ms ease,
			transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 240ms !important;
	}

	.sidebar.is-open {
		transform: translateY(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition:
			opacity 240ms ease,
			transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	}

	/* No dimmed backdrop needed — the overlay is opaque & full-screen. */
	.sidebar.is-open ~ .ris-nav-backdrop {
		display: none !important;
	}

	/* The tablet-header already shows the logo on top of the overlay, so
	   blank the drawer's own duplicate logo — but keep its box as a
	   spacer so the nav list still clears the fixed header band. */
	.sidebar .sidebar-header {
		visibility: hidden !important;
	}

	/* Pin the header band (logo + close X) above the overlay regardless
	   of scroll position when the menu opened. */
	body.ris-nav-open .tablet-header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000 !important;
	}

	body.ris-nav-open .mobile-hamburger {
		z-index: 10001 !important;
	}

	/* Comfortable centered column for the nav groups. */
	.sidebar.is-open .sidebar-section-one {
		padding-top: 1.5rem !important;
	}

	.sidebar-section-two {
		width: 100%;
		max-width: 34rem;
		margin: 0 auto;
		padding: 0.5rem 1.5rem 2.5rem;
		gap: 0.35rem;
	}

	/* Larger, full-width tap rows for the nav groups. */
	.sidebar .sidebar-nav-link {
		width: 100%;
		padding: 1.05rem 1.25rem;
	}

	.sidebar .sidebar-section-inner h2 {
		font-size: 1.15rem;
	}

	.sidebar .sidebar-nav-arrow {
		opacity: 0.7;
		font-size: 0.95rem;
	}

	/* ---- Hamburger button ----
	   The legacy theme defines the icon three times (1024/768/640) at varying
	   sizes plus a lopsided .change animation, and the bar spacing never quite
	   lined up the X. Define it once here, cleanly: a 44px tap target with
	   three slim, evenly-gapped bars. !important beats the legacy per-breakpoint
	   rules in styles.css. */
	.mobile-hamburger {
		display: inline-flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
		border: none;
		background: none;
		border-radius: var(--radius, 0.5rem);
		cursor: pointer;
	}

	.mobile-hamburger .bar1,
	.mobile-hamburger .bar2,
	.mobile-hamburger .bar3 {
		width: 24px !important;
		height: 2px !important;
		margin: 0 !important;
		border-radius: 2px;
		background-color: var(--sidebar-foreground, #c4cbdc);
		transform-origin: center !important;
		transition:
			transform 0.3s ease,
			opacity 0.2s ease !important;
	}

	/* Clean, symmetric X for the open state. With 2px bars and a 5px gap the
	   bar centres sit 7px apart, so the outer bars collapse exactly onto the
	   middle one before rotating — a true X, not a lopsided chevron. */
	body.ris-nav-open .mobile-hamburger .bar1 {
		transform: translateY(7px) rotate(45deg) !important;
	}

	body.ris-nav-open .mobile-hamburger .bar2 {
		opacity: 0 !important;
	}

	body.ris-nav-open .mobile-hamburger .bar3 {
		transform: translateY(-7px) rotate(-45deg) !important;
	}
}

/* ==================================================================
   2b. Top bar: logo + hamburger alignment  (<= 1024px)
   ------------------------------------------------------------------
   The legacy tablet-header floats the logo left and the hamburger right
   inside a block container, so the tall Indiana emblem (table + state
   outline) top-aligned against the wordmark and dangled below it. Lay the
   bar out with flexbox instead: emblem and wordmark sit on one vertically
   centred row, and the whole lockup is centred in a clean, slim band.
   ================================================================== */
@media (max-width: 1024px) {
	.tablet-header {
		display: flex !important;
		align-items: stretch;
		height: 72px !important;
		min-height: 72px;
		padding: 0 !important;
	}

	.tablet-header .sidebar-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100% !important;
		padding: 0 1.1rem !important;
		box-sizing: border-box;
	}

	/* Logo lockup: emblem + wordmark on one vertically-centred row.
	   Kill the default link underline — once the home link is "visited" the
	   browser paints that underline in its default visited-link purple,
	   which shows as a stray purple line under the header wordmark. */
	.tablet-header .sidebar-header > a {
		display: inline-flex !important;
		align-items: center;
		gap: 0.6rem;
		float: none !important;
		height: auto;
		text-decoration: none !important;
	}

	/* Size the emblem by height (keeps its aspect ratio) to roughly match the
	   three-line wordmark, so neither element overhangs the other. */
	.tablet-header .sidebar-header svg {
		width: auto !important;
		height: 48px !important;
		margin: 0 !important;
		vertical-align: middle;
		flex-shrink: 0;
	}

	/* Site title on one line (the desktop sidebar uses word-spacing:9999999px
	   to force a three-line stack — undo that here for a horizontal wordmark). */
	.tablet-header .sidebar-header h1 {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 1.25rem !important;
		line-height: 1.1 !important;
		word-spacing: normal !important;
		white-space: nowrap;
		font-weight: 700 !important;
		text-decoration: none !important;
	}
}

/* ==================================================================
   3. Phone layer  (<= 640px)
   ================================================================== */
@media (max-width: 640px) {
	.main.dp-main {
		padding: 1.25rem 1rem !important;
	}

	/* ---- Wide tables wrapped by responsive.js (tables without their own
	   scroll container). Mirrors .table-holder's horizontal scroll. ---- */
	.ris-table-scroll {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	/* ---- Homepage: let flex/grid children shrink below their content
	   size on narrow phones. Without min-width:0 the banner + widget
	   cards keep an intrinsic ~320px floor and spill past the viewport
	   (≈47px overflow at 320px wide). ---- */
	.hp-banner,
	.hp-banner__top,
	.hp-cats-row,
	.hp-cat-card,
	.hp-widget,
	.hp-stats-col,
	.hp-spotlight-header {
		min-width: 0;
		max-width: 100%;
	}
}