/*
 * MFI Calc - responsive layer
 * Loaded AFTER style.css. Replaces style-mobile.css and style-tablet.css.
 * Keeps the existing look (colors, fonts, boxes) and only changes sizing:
 *   - fluid page width up to 1200px instead of a fixed 900px
 *   - text that scales with the screen (rem + clamp) instead of fixed points
 *   - calculator tables and nozzle grids that stack on phones
 * Remove this file's <link> in header.php (and restore the two old ones) to roll back.
 */

/* ---------- base sizing ---------- */
html { font-size: clamp(15px, 0.85rem + 0.3vw, 18px); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { font-size: 1rem; }
img { max-width: 100%; height: auto; }

p, li { font-size: 1rem; }
a { font-size: inherit; }
h1 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); line-height: 1.25; }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem); }
.postTitle { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); }
.newsdate { font-size: 0.85rem; }

/* ---------- page frame ---------- */
#Content {
	width: auto;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 12px;
}
#top, #center, #footer {
	float: none;
	width: auto;
	height: auto;
}
#center::after { content: ""; display: table; clear: both; }
.mainstuff {
	width: auto;
	padding: 6px clamp(12px, 2.5vw, 32px) 1rem;   /* 6px top so the member nav can hang from the red top border */
}
.mainstuff::after { content: ""; display: table; clear: both; }

/* ---------- header ---------- */
#top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0 24px;
	padding: 0 0 8px;                     /* no top padding: the login tab hangs from the red bar */
}
#topL { order: 1; float: none; width: auto; height: auto; margin: 10px 0 0; }
#topR {
	order: 2; float: none; width: auto;
	display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start;
	column-gap: 6px;
}
#topR > a:first-child { order: 1; }                 /* Facebook icon, left of the tab */
#topR > a:first-child img { margin: 4px 0 0 !important; display: block; }
#topLogin { order: 2; float: none; width: auto; min-width: 150px; margin: 0 0 14px; padding: 0.3rem 1.1rem 0.4rem; font-size: 1rem; }
#topR > div[style*="clear"] { display: none; }
#topR > a:last-child { order: 3; flex-basis: 100%; text-align: right; line-height: 0; }
.mobileImg { margin-left: 0; width: clamp(220px, 30vw, 365px); }

/* ---------- navigation ---------- */
.nav ul, .proNav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 4px;
}
.nav a, .nav a:visited { display: inline-block; padding: 0.35rem 0.8rem; font-size: 1.05rem; }
.proNav { margin: -6px 0 0; padding: 0.25rem 0.5rem; }   /* flush with the red top border, like the original */
.proNav li { margin: 0; }
.proNav a:link, .proNav a:visited { display: inline-block; padding: 0.3rem 0.8rem; font-size: 1rem; }

/* ---------- home page ---------- */
.homeheader { margin: 0.5rem 0 0.25rem; }
.homeThirdLeft, .homeThird, .homeThirdRight {
	float: left;
	width: calc((100% - 32px) / 3);
	height: auto;
	min-height: 15rem;
	margin: 12px 16px 0 0;
	padding: 0.5rem 0.75rem 1rem;
}
.homeThirdRight { margin-right: 0; }
.homeThird h1, .homeThirdRight h1, .homeThirdLeft h1 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); }
.homeThird p, .homeThirdRight p, .homeThirdLeft p { font-size: 0.95rem; margin: 0.75rem 0.5rem 0; }
.mainstuff img[width="820"] { width: 100%; }
.homeNews { width: auto; }
.homeNews .wp-caption { max-width: 100%; }

/* ---------- footer ---------- */
#footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	padding: 1.25rem clamp(12px, 2.5vw, 32px);
}
.footalignleft, .footalignright { float: none; max-width: none; padding: 0; }
.footalignleft h3 { margin: 0 0 0.25rem; }
#footer a:link, #footer a:visited, #footer a:hover { padding: 0; line-height: 1.8; font-size: 1rem; }
.footalignright { flex: 0 1 360px; }
.footalignright p { color: #ddd; }
.loginbutton { width: 100%; max-width: 360px; }

/* ---------- member calculators (baseline edit, AFR, jetting) ---------- */
.jettingtitle { width: auto; float: none; margin: 1rem 0; }
.jettingtitle p { width: auto; }
.select_style { margin: 0.5rem 0 1rem; }

#calculator form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
}
#calculator form > .spacer,
#calculator form > div[class^="profile"],
#calculator form > .calcresults,
#calculator form > p,
#calculator form > .errornote { flex: 1 1 100%; margin-left: 0; margin-right: 0; }
#calculator form > p[style*="float"] { text-align: right; }

/* engine/weather table */
.tablewidth { flex: 1 1 520px; width: auto; max-width: 680px; margin: 0; }
#calculator form table { float: none; font-size: 0.95rem; }
#calculator form table tr td { padding: 0.35rem 0.5rem; }
#calculator form table tr td:nth-child(2) { white-space: nowrap; }
.tablefield, .tabledata, .tablenote { width: auto; }
#calculator input[type="text"], #calculator input[type="number"], #calculator select {
	float: none;
	width: 5.5em;
	font-size: 1rem;
	padding: 0.3rem 0.4rem;
	margin: 0 0.25rem 0 0;
}
#calculator input.desc { width: min(100%, 20rem); text-align: left; }
#calculator .smalldesc { width: auto; float: none; font-size: 0.85rem; padding: 0.5rem 0; margin: 0; }
#calculator .small { font-size: 0.85rem; }
.error, .nitroerror { float: none; font-size: 0.85rem; }

/* nozzle grid */
#nozzlestuff { flex: 1 1 300px; }
#nozzlestuff fieldset {
	float: none;
	width: auto;
	margin: 0;
	padding: 0.75rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 8px;
}
#nozzlestuff fieldset > h3, #nozzlestuff fieldset > p, #nozzlestuff fieldset > .errornote,
#nozzlestuff fieldset > div { grid-column: 1 / -1; margin: 0; }
.cylindertable { float: none; width: 100%; margin: 0; background: #fff; }
#nozzlestuff td { width: auto; white-space: nowrap; }
#nozzlestuff input[type="text"] { float: none; width: 4.5em; }
#nozzlestuff .extendedCheckbox { width: 1.1rem; height: 1.1rem; }

/* results */
.calcresults { width: auto; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 4px; }
.calcresults > div[style*="clear"] { display: none; }
.calcresults ul { float: none; flex: 1 1 15rem; width: auto; margin: 0; padding: 0.5rem 0.75rem; }
.calcresults li { line-height: 1.6; }
ul.resultsLong { width: auto; flex-basis: 100%; }

/* buttons */
button { font-size: 1.05rem !important; margin: 0 0 0 0.5rem; }


/* general content boxes that had fixed widths */
.track, .tracklist, .tracklist ul, .sortInfo, .forecastdata ul, #profile form,
#fieldsetextended fieldset, .helpList, .helpInfo, .infocolumn, .welcomenews, .welcomeinfo,
.leftSide, .rightSide { max-width: 100%; }
.track { width: auto; }

/* ============ tablet: 900px and below ============ */
@media (max-width: 900px) {
	.homeThirdLeft, .homeThird, .homeThirdRight { min-height: 13rem; }
	.homeThird h1, .homeThirdRight h1, .homeThirdLeft h1 { font-size: 1.5rem; }
}

/* ============ phone: 640px and below ============ */
@media (max-width: 640px) {
	#Content { padding: 0 6px; }
	#top { justify-content: center; padding: 0 0 2px; }
	#topR { order: 0; width: 100%; justify-content: center; }
	#topR img { display: none; }            /* same as old mobile sheet: hide FB icon + small ad */
	#topR > a { display: none; }
	#topLogin { width: min(80%, 20rem); margin-bottom: 4px; }
	#topL { width: 100%; text-align: center; margin-top: 6px; }
	.mobileImg { width: 260px; }

	.homeThirdLeft, .homeThird, .homeThirdRight {
		float: none; width: 100%; min-height: 0; margin: 10px 0 0;
	}
	.homeThird h1, .homeThirdRight h1, .homeThirdLeft h1 { margin: 0.4rem 0; }
	.mainstuff > div[style*="margin-left"] { margin-left: 0 !important; }
	.homeNews { padding: 0 10px; }
	.homeNews div[style*="float: right"] { float: none !important; margin: 8px auto !important; display: table; }

	#footer { flex-direction: column; gap: 12px; }
	.footalignright { flex-basis: auto; }

	/* calculator tables: each row becomes "label | input" with the note underneath */
	#calculator form table.tablewidth, #calculator form table.tablewidth > tbody { display: block; width: 100%; }
	.tablewidth { flex-basis: 100%; max-width: none; }
	#calculator form table.tablewidth tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 8px;
	}
	#calculator form table.tablewidth tr td { border: 0; }
	#calculator form table.tablewidth tr { border-bottom: 1px solid #ddd; }
	#calculator form table.tablewidth tr td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
	#calculator form table.tablewidth tr td:nth-child(3):empty { display: none; }
	#calculator form table.tablewidth tr.heading-title td { grid-column: 1 / -1; padding: 0.5rem; }
	.tablefield, .tabledata, .tablenote { display: none; }   /* "field / data / note" header row */
	#calculator form table tr:has(> .tablefield) { display: none; }
	#calculator input[type="text"], #calculator select { font-size: 16px; width: 6.5em; } /* 16px stops iOS zoom-on-focus */
	#calculator input.desc { width: 100%; }
	#calculator form table tr:hover { background: transparent; }

	#nozzlestuff { flex-basis: 100%; }
	/* one cylinder per line, like the old layout: "Cylinder #1 ... fixed" over "1-1 [57] [x]" */
	#nozzlestuff fieldset { grid-template-columns: 1fr; gap: 6px; }
	.cylindertable td:first-child { text-align: left; padding-left: 0.6rem; }
	.cylindertable td:last-child { width: 3.5rem; text-align: center; }
	#nozzlestuff input[type="text"] { font-size: 16px; width: 5em; }
	#nozzlestuff td { padding: 2px 3px; }

	#calculator form > div[class^="profile"] > div[style*="float"] { float: none !important; margin-bottom: 0.5rem; }
	#calculator form > div[class^="profile"] button, #calculator > form > div > button { width: 100%; margin: 0.25rem 0; }
	button { margin: 0.25rem 0; }
	.calcresults ul { flex-basis: 100%; }
}


/* =====================================================================
   Added Oct 2026, round 2: form fields, track list, baseline profiles, contact
   ===================================================================== */

/* ---------- form fields everywhere ---------- */
.mainstuff input[type="text"], .mainstuff input[type="email"], .mainstuff input[type="search"],
.mainstuff input[type="number"], .mainstuff input[type="password"], .mainstuff input[type="tel"],
.mainstuff input[type="url"], .mainstuff select, .mainstuff textarea {
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.3;
	padding: 0.45rem 0.6rem;
	border: 1px solid #a9a594;
	border-radius: 4px;
	background-color: #fff;
	color: #111;
	max-width: 100%;
}
.mainstuff select { padding-right: 0.4rem; }
.mainstuff input:focus, .mainstuff select:focus, .mainstuff textarea:focus {
	outline: 2px solid #990000; outline-offset: 1px; border-color: #990000;
}
.mainstuff input[type="submit"] {
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.5rem 1.25rem;
	margin: 0.5rem 0.75rem 0.5rem 0;
	vertical-align: middle;
}
.mainstuff input[type="submit"]:hover { background: #660000; color: #fff; }
.mainstuff input[type="checkbox"] { width: 1.15rem; height: 1.15rem; vertical-align: middle; accent-color: #990000; }
.mainstuff label { line-height: 1.5; }

/* "Use a different profile?" picker on the calculators */
.select_style { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.select_style br { display: none; }
.select_style label { flex-basis: 100%; font-weight: 600; }
.select_style select { min-width: 14rem; }
.select_style input[type="submit"] { margin: 0; }

/* track name search box */
#searchform p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
#searchform br { display: none; }
#searchform input[type="text"] { flex: 1 1 14rem; max-width: 24rem; }
#searchform input[type="submit"] { margin: 0; }
#searchform em { flex-basis: 100%; }

/* ---------- track list ---------- */
.tracklist { float: none; max-width: none; width: 100%; }
.tracklist > h2, .tracklist > h4 { float: none !important; margin: 1.5rem 0 0.35rem !important; }
.tracklist > p { float: none; margin: 0.5rem 0 0; }
.tracklist ul {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) auto minmax(0, 1.6fr);
	width: auto;
	clear: both;
}
.tracklist ul li { float: none; height: auto; width: auto; max-width: none; padding: 0.45rem 0.7rem; line-height: 1.35; }
.tracklist ul li.listoptions { white-space: nowrap; }
.track { padding-bottom: 0.25rem; }

/* ---------- baseline profiles page (needs <div class="baselinegrid"> in calc-baseline.php) ---------- */
.baselinegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 18px;
	align-items: start;
	margin: 1rem 0;
}
.baselinegrid > ul.profile1, .baselinegrid > ul.profile2, .baselinegrid > ul.profile3 {
	float: none; width: auto; height: auto; margin: 0; padding: 0.9rem 1rem; border-radius: 5px;
}
.baselinegrid li { line-height: 1.5; }
.baselinegrid > form { margin: 0; }
.baselinegrid button { margin: 0.5rem 0 0; width: 100%; }
.baselinedelete { width: auto; display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; padding: 0.4rem 0.6rem; }
.baselinedelete label { width: auto !important; float: none !important; font-size: 0.9rem !important; }
.baselinedelete input { float: none !important; margin: 0; }
.baselinedelete br { display: none; }
.baseline_display { float: none; width: auto; height: auto; margin: 0; padding: 0.9rem 1rem; }
.baseline_display label { display: block; font-size: 0.95rem !important; margin: 0.25rem 0; }
.baseline_display select { width: 100%; }
.baseline_display input[type="text"], .baseline_display input[type="number"] { width: 5em; }
.baseline_display hr { margin: 0.75rem 0; }
.baseline_display p { margin: 0 !important; text-align: center; }
.deleteallbaselines { width: auto; max-width: 24rem; height: auto; padding: 0.9rem 1rem; border-radius: 5px; }
.deleteallbaselines label { width: auto !important; float: none !important; margin-right: 0.5rem; }
.deleteallbaselines input[type="checkbox"] { float: none !important; }
.deleteallbaselines > br:first-of-type { display: none; }
.deleteallbaselines span { display: block; margin-top: 0.35rem; font-size: 0.85rem !important; }
.deleteallbaselines button { margin: 0.5rem 0 0; }
.track p { text-align: left; }

/* ---------- contact page (Contact Form 7) ---------- */
.wpcf7-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 0 2.5rem;
	max-width: 60rem;
}
.wpcf7-form > * { grid-column: 1 / -1; }
.wpcf7-form > .hidden-fields-container { display: none; }
.wpcf7-form > .contactLeft { grid-column: 1; grid-row: 1; float: none; min-width: 0; }
.wpcf7-form > .contactright, .wpcf7-form > .contactRight { grid-column: 2; grid-row: 1; float: none; min-width: 0; margin: 0; font-weight: bold; }
.wpcf7-form .contactLeft input[type="text"], .wpcf7-form .contactLeft input[type="email"],
.wpcf7-form .contactLeft select, .wpcf7-form textarea { width: 100%; margin-top: 0.25rem; }
.wpcf7-form input.wpcf7-quiz { width: 6em !important; margin-left: 0.5rem; }
.wpcf7-form textarea { min-height: 15rem; }
.wpcf7-form > p:has(.wpcf7-submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.wpcf7-form .wpcf7-submit { margin: 0; }

@media (max-width: 640px) {
	.ads_right { display: none; }                 /* as the old phone sheet did */

	.tracklist ul { grid-template-columns: minmax(0, 1fr) auto; }
	.tracklist ul li.listname { grid-column: 1 / -1; font-weight: 600; padding-bottom: 0.1rem; }
	.tracklist ul li.listlocation { grid-column: 1; grid-row: 2; padding-top: 0.1rem; font-size: 0.9rem; }
	.tracklist ul li.listoptions { grid-column: 2; grid-row: 2; padding-top: 0.1rem; }
	.tracklist ul { border-bottom: 1px solid #ccc; }

	.wpcf7-form { grid-template-columns: 1fr; }
	.wpcf7-form > .contactLeft, .wpcf7-form > .contactright, .wpcf7-form > .contactRight { grid-column: 1; grid-row: auto; }
	.select_style select { min-width: 0; flex: 1 1 12rem; }
}

/* =====================================================================
   Round 3: news/blog pages, welcome page, admin lists, account page
   ===================================================================== */

/* ---------- news (category, single post, archive) ---------- */
#sidebar {
	width: clamp(15rem, 26%, 19rem);
	margin: 1.25rem 0 1.25rem 2rem;
}
#sidebar .quicklinks { padding: 1rem 1.1rem; margin: 0 0 0.75rem; }
#sidebar .quicklinks h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
#sidebar .quicklinks p { margin: 0.25rem 0; text-align: center; }
#sidebar .quicklinks form { font-size: 1rem; margin: 0.25rem 0 0; }
#sidebar .quicklinks select { width: 100%; }
#sidebar ul { margin: 0; }
#sidebar ul li { padding: 0.2rem 0; }
#sidebar .quicklinksBottom { display: none; }
/* posts sit in the space beside the sidebar instead of a fixed 600px column */
.mainstuff .post, .mainstuff .entry { display: flow-root; max-width: none; }
.mainstuff .entry img { height: auto; }
.mainstuff .navigation { display: flow-root; margin: 1rem 0; }
.category-name { margin: 1rem 0 0.5rem; }

/* ---------- welcome page ---------- */
.welcomeinfo {
	float: left;
	width: calc(50% - 10px);
	max-width: none;
	margin: 0 20px 20px 0;
	padding-bottom: 0.5rem;
}
.welcomeinfo + .welcomeinfo { margin-right: 0; }   /* second box of each pair */
.welcomeinfo ul { margin: 0.5rem 0; }
.welcomeinfo li { line-height: 1.7; }

/* admin area: consult / advanced customer lists */
.ptAdmin { float: left; width: 50%; padding: 0 10px 10px 0; }
.ptAdmin + .ptAdmin { padding: 0 0 10px 10px; }
.ptAdmin ul { width: auto; }
.ptAdmin .ws-plugin--s2member-list-users li { padding: 0.35rem 0 !important; }
.ptAdmin table.ws-plugin--s2member-list-user-fields { width: 100% !important; }
.ptAdmin table.ws-plugin--s2member-list-user-fields td { padding: 0.25rem 0.5rem !important; font-size: 0.9rem; }
button.adminbutton, button.protunebutton { margin: 0.4rem 0; font-size: 0.9rem !important; padding: 0.35rem 0.9rem !important; }
.track form #TestUser { width: min(100%, 18rem); }

/* ---------- account page (needs updated LAYOUT-account.php) ---------- */
.accountgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
	grid-template-areas: "info form";
	gap: 1.5rem 2.5rem;
	align-items: start;
	margin-top: 0.5rem;
}
.accountinfo { grid-area: info; }
.accountform {
	grid-area: form;
	background-color: #f1f1ef;
	border: 3px solid #c2c2c0;
	border-radius: 6px;
	padding: 0.25rem 1.25rem 1.25rem;
}
.accountform h3 { margin: 0.75rem 0 0.5rem; }
#ws-plugin--s2member-profile table, #ws-plugin--s2member-profile tbody,
#ws-plugin--s2member-profile tr, #ws-plugin--s2member-profile td { display: block; width: 100%; border: 0; padding: 0; }
#ws-plugin--s2member-profile td { margin: 0 0 0.75rem; }
#ws-plugin--s2member-profile label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
#ws-plugin--s2member-profile input[type="text"], #ws-plugin--s2member-profile input[type="email"],
#ws-plugin--s2member-profile input[type="password"], #ws-plugin--s2member-profile select,
#ws-plugin--s2member-profile textarea { width: 100%; }
#ws-plugin--s2member-profile input[type="checkbox"] { margin-right: 0.4rem; }
#ws-plugin--s2member-profile .ws-plugin--s2member-profile-field-divider-section { border-top: 1px solid #c2c2c0; margin: 0.25rem 0; }
#ws-plugin--s2member-profile .ws-plugin--s2member-profile-field-divider-section-title { font-family: 'Oswald', Helvetica, Arial, sans-serif; font-size: 1.05rem; margin-top: 0.5rem; }
#ws-plugin--s2member-profile-password-strength { font-size: 0.85rem; padding: 0.3rem 0.5rem; margin-top: 0.4rem; border-radius: 3px; }
#ws-plugin--s2member-profile-submit { width: 100%; max-width: none; margin: 0.5rem 0 0; }
#ws-plugin--s2member-profile .alert { padding: 0.6rem 0.8rem; border-radius: 4px; margin-bottom: 1rem; }
#ws-plugin--s2member-profile .alert-success { background: #e6f2e1; color: #2c5a1e; border: 1px solid #a8cf98; }
#ws-plugin--s2member-profile .alert-error { background: #f8e3e1; color: #8a1a10; border: 1px solid #e2a39b; }
.accountinfo .ppButton { float: none; width: auto; max-width: 30rem; margin: 1rem 0; }
.accountinfo .buttons { width: auto; text-align: center; }

@media (max-width: 760px) {
	.welcomeinfo, .welcomeinfo + .welcomeinfo { float: none; width: auto; margin: 0 0 14px; }
	.ptAdmin, .ptAdmin + .ptAdmin { float: none; width: auto; padding: 0 0 10px; }
	.accountgrid { grid-template-columns: 1fr; grid-template-areas: "info" "form"; }
}
@media (max-width: 640px) {
	#sidebar { float: none; width: auto; margin: 1.5rem 0 0; }
}