/**
 * CWV Audit Suite — front-end layer.
 *
 * admin/css/admin.css carries the whole look; every rule there is scoped under
 * .cwv-wrap, which the shared views render on both surfaces. This file only
 * does the two things the front end needs and wp-admin does not: neutralise
 * theme styles that reach inside the app, and draw the shortcode's own nav.
 */

.cwv-app {
	--cwv-app-max: 1240px;

	max-width: var(--cwv-app-max);
	margin: 0 auto;
	padding: 0 0 40px;
	color: #23201d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

/* Themes routinely set these on descendants of the content area. */
.cwv-app * {
	box-sizing: border-box;
}

.cwv-app .cwv-wrap {
	margin: 0;
}

.cwv-app h1,
.cwv-app h2,
.cwv-app h3 {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.cwv-app table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 13.5px;
}

.cwv-app th,
.cwv-app td {
	background: none;
}

.cwv-app input,
.cwv-app select,
.cwv-app textarea,
.cwv-app button {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	max-width: 100%;
}

.cwv-app a {
	box-shadow: none;
}

.cwv-app a.cwv-btn,
.cwv-app a.cwv-tab,
.cwv-app a.cwv-app-tab {
	text-decoration: none;
}

/* Some themes force uppercase or letter-spacing on every button. */
.cwv-app .cwv-btn {
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
}

/* wp-admin ships this; the front end does not. */
.cwv-app .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* -------------------------------------------------------------- app nav */

.cwv-app-nav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-items: center;
	padding: 6px;
	margin: 0 0 4px;
	border: 1px solid #e6e1db;
	border-radius: 12px;
	background: #faf9f7;
}

.cwv-app-tab {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 8px;
	color: #6f6a65;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.cwv-app-tab:hover,
.cwv-app-tab:focus {
	background: #fff;
	color: #23201d;
}

.cwv-app-tab.is-active {
	background: #a01c1c;
	color: #fff;
}

.cwv-app-tab.is-active:hover,
.cwv-app-tab.is-active:focus {
	background: #7d1515;
	color: #fff;
}

/* The gradient header is a lot of weight directly under the nav strip. */
.cwv-app .cwv-header {
	margin-top: 16px;
}

@media (max-width: 782px) {
	.cwv-app-nav {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.cwv-app-tab {
		white-space: nowrap;
	}
}