/*!
 * Total Mobile Friendly View 2.0 — frontend styles
 * Scoped under .tmfv-enabled so it never fights the active theme.
 * Static rules live here; anything that needs the live DOM is done in JS.
 * Default breakpoint: 782px.
 */

.tmfv-enabled {
	--tmfv-accent: #2271b1;
	--tmfv-table-bg: #ffffff;
	--tmfv-menu-bg: #1e1e1e;
	--tmfv-menu-fg: #ffffff;
}

/* ================================================================== *
 * 1. Fluid media (all widths) — never let media overflow the screen
 * ================================================================== */
.tmfv-enabled img,
.tmfv-enabled video,
.tmfv-enabled iframe,
.tmfv-enabled embed,
.tmfv-enabled object,
.tmfv-enabled svg,
.tmfv-enabled canvas {
	max-width: 100%;
	height: auto;
}
.tmfv-enabled img { image-rendering: auto; }

/* ================================================================== *
 * 2. Responsive tables — smooth horizontal scroll with edge shadows
 *    (Lea Verou "scrolling shadows": indicator appears/disappears on
 *    its own via background-attachment, no JS required.)
 * ================================================================== */
.tmfv-table-wrap {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin: 0 0 1em;
	background:
		linear-gradient(to right, var(--tmfv-table-bg) 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, var(--tmfv-table-bg) 30%, rgba(255, 255, 255, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}
.tmfv-table-wrap > table {
	min-width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.tmfv-table-wrap:focus {
	outline: 2px solid var(--tmfv-accent);
	outline-offset: 2px;
}
/* Give scrolled-in tables breathing room so text isn't cramped. */
.tmfv-table-wrap > table th,
.tmfv-table-wrap > table td {
	white-space: normal;
	word-break: normal;
}

/* ================================================================== *
 * 3. Injected hamburger + dropdown (only used when the theme has none)
 * ================================================================== */
.tmfv-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--tmfv-menu-bg);
	color: var(--tmfv-menu-fg);
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	margin: 8px 0;
	min-height: 44px;
}
.tmfv-toggle:focus-visible {
	outline: 2px solid var(--tmfv-accent);
	outline-offset: 2px;
}
.tmfv-toggle .tmfv-bars,
.tmfv-toggle .tmfv-bars::before,
.tmfv-toggle .tmfv-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--tmfv-menu-fg);
	position: relative;
	transition: transform .25s ease, opacity .2s ease, background .2s ease;
}
.tmfv-toggle .tmfv-bars::before,
.tmfv-toggle .tmfv-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.tmfv-toggle .tmfv-bars::before { top: -6px; }
.tmfv-toggle .tmfv-bars::after  { top: 6px; }
.tmfv-toggle[aria-expanded="true"] .tmfv-bars { background: transparent; }
.tmfv-toggle[aria-expanded="true"] .tmfv-bars::before { transform: translateY(6px) rotate(45deg); }
.tmfv-toggle[aria-expanded="true"] .tmfv-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Smoothly animated dropdown for the injected menu. */
.tmfv-enabled .tmfv-nav-collapsed.tmfv-managed {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .3s ease, opacity .3s ease;
}
.tmfv-enabled .tmfv-nav-collapsed.tmfv-managed.tmfv-open {
	max-height: 80vh;
	opacity: 1;
	overflow-y: auto;
}

/* ================================================================== *
 * 4. Floating, dismissible mobile/desktop view toggle
 * ================================================================== */
.tmfv-view-toggle {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 99999;
	display: none;
	align-items: center;
	gap: 6px;
	background: var(--tmfv-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
	cursor: pointer;
	opacity: .92;
	transition: opacity .2s ease, transform .2s ease;
}
.tmfv-view-toggle:hover { opacity: 1; }
.tmfv-view-toggle:active { transform: scale(.97); }
.tmfv-view-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.tmfv-view-toggle .tmfv-vt-close {
	margin-left: 2px;
	font-size: 15px;
	line-height: 1;
	opacity: .8;
	padding: 0 2px;
}

/* ================================================================== *
 * 5. Mobile layout (<= 782px)
 * ================================================================== */
@media (max-width: 782px) {
	/* Kill accidental horizontal scroll on the document. */
	.tmfv-enabled body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Wrap long links, code and unbroken strings instead of overflowing. */
	.tmfv-enabled a,
	.tmfv-enabled p,
	.tmfv-enabled li,
	.tmfv-enabled h1,
	.tmfv-enabled h2,
	.tmfv-enabled h3,
	.tmfv-enabled td,
	.tmfv-enabled dd {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
	.tmfv-enabled pre {
		overflow-x: auto;
		max-width: 100%;
		white-space: pre;
	}

	/* Form controls fit the viewport and are easy to tap. */
	.tmfv-enabled input:not([type="checkbox"]):not([type="radio"]),
	.tmfv-enabled select,
	.tmfv-enabled textarea {
		max-width: 100%;
		box-sizing: border-box;
	}
	.tmfv-enabled input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	.tmfv-enabled select,
	.tmfv-enabled textarea {
		width: 100%;
	}

	/* Show the injected hamburger (only present when theme lacks one). */
	.tmfv-enabled .tmfv-toggle { display: inline-flex; }
	.tmfv-enabled .tmfv-nav-collapsed.tmfv-managed a {
		display: block;
		padding: 12px 10px;
		min-height: 44px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, .08);
	}

	/* Common theme containers become a comfortable single column. */
	.tmfv-enabled #content,
	.tmfv-enabled #primary,
	.tmfv-enabled #secondary,
	.tmfv-enabled .site-content,
	.tmfv-enabled .content-area,
	.tmfv-enabled .widget-area,
	.tmfv-enabled .sidebar,
	.tmfv-enabled .row > .col,
	.tmfv-enabled [class*="col-"] {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/* Readable base type on phones. */
	.tmfv-enabled body { font-size: 16px; line-height: 1.6; }

	/* Neutralise hard-coded inline pixel widths that break the layout. */
	.tmfv-enabled [style*="width"]:not(.tmfv-table-wrap):not(script) {
		max-width: 100% !important;
	}
}

/* ================================================================== *
 * 6. Forced desktop mode (user tapped "View Desktop Site")
 * ================================================================== */
html.tmfv-force-desktop .tmfv-toggle { display: none !important; }
html.tmfv-force-desktop .tmfv-nav-collapsed.tmfv-managed {
	max-height: none !important;
	opacity: 1 !important;
	overflow: visible !important;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.tmfv-enabled .tmfv-nav-collapsed.tmfv-managed,
	.tmfv-toggle .tmfv-bars,
	.tmfv-toggle .tmfv-bars::before,
	.tmfv-toggle .tmfv-bars::after,
	.tmfv-view-toggle {
		transition: none !important;
	}
}