/* ==========================================================================
   TBCF shell — header, mobile drawer, sticky CTA, fit band, browser surfaces.
   Loaded on every page after the compiled Tailwind bundle (styles.css).
   ========================================================================== */

:root {
	--tape: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--shadow-lift: 0 1px 2px rgb(11 18 32 / .06), 0 18px 40px -12px rgb(11 18 32 / .28);
}

/* ---------- Browser surfaces ---------- */
::selection { background: var(--color-amber-300); color: var(--color-ink); }
html { accent-color: var(--color-amber-500); scrollbar-color: #94a3b8 transparent; -webkit-tap-highlight-color: rgb(245 158 11 / .18); }
input, textarea, select { caret-color: var(--color-amber-600); }
a { text-underline-offset: .2em; }
:where(a, button, select, input, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-amber-500);
	outline-offset: 3px;
	border-radius: 4px;
}
.font-mono, table, .t-num { font-variant-numeric: tabular-nums; }
html.mnav-lock { overflow: hidden; }

/* ---------- Disclosure + header ---------- */
.shell-disclosure { background: var(--color-bg-inverse); }
.shell-disclosure, .shell-disclosure p { color: #cbd5e1 !important; }
.shell-disclosure > div { padding-block: .4rem; font-size: .72rem; }
@media (max-width: 639px) { .shell-disclosure > div { font-size: .66rem; padding-block: .3rem; } .shell-disclosure p { line-height: 1.35; } }
.shell-disclosure a { color: #fff; }
.shell-disclosure svg { color: var(--color-amber-400); }

.shell-header {
	background: rgb(250 250 249 / .9);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--color-line);
}
.shell-header::after { /* tape-measure tick strip under the header */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
	color: rgb(11 18 32 / .14); background: var(--tape); pointer-events: none;
	-webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	        mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.shell-header .btn-primary,
.btn-primary { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12), 0 1px 2px rgb(180 83 9 / .25); }
.btn-primary:hover { background: var(--color-amber-400); transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12), 0 8px 18px -6px rgb(217 119 6 / .55); }
.btn-primary:active { transform: translateY(0); }

.mnav-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 10px;
	border: 1px solid var(--color-line-strong); background: #fff; color: var(--color-ink);
}
@media (min-width: 1024px) { .mnav-btn { display: none; } }

/* ---------- Mobile drawer ---------- */
.mnav { position: fixed; inset: 0; z-index: 70; }
.mnav[hidden] { display: none; }
.mnav__scrim { position: absolute; inset: 0; background: rgb(11 18 32 / .55); opacity: 0; transition: opacity .25s ease; }
.mnav__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 380px);
	background: var(--color-bg-inverse); color: #e2e8f0;
	padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; gap: 1rem; overflow-y: auto;
	transform: translateX(100%); transition: transform .32s var(--ease-out);
	box-shadow: -24px 0 48px rgb(0 0 0 / .35);
}
.mnav.is-open .mnav__scrim { opacity: 1; }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; }
.mnav__title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.mnav__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; border: 1px solid #334155; }
.mnav__cta { justify-content: center; width: 100%; }
.mnav__list { border-top: 1px solid #1e293b; }
.mnav__list a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem .25rem; border-bottom: 1px solid #1e293b;
	font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: #fff; letter-spacing: .005em;
}
.mnav__list a svg { width: 18px; height: 18px; color: var(--color-amber-400); }
.mnav__list a:active { color: var(--color-amber-400); }
.mnav__foot { margin-top: auto; font-size: .8125rem; color: #94a3b8; line-height: 1.6; }
.mnav__foot a { color: #fff; text-decoration: underline; text-decoration-color: var(--color-amber-500); }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
	position: fixed; z-index: 50; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
	display: inline-flex; align-items: center; gap: .875rem;
	padding: .7rem 1rem .7rem 1.15rem; border-radius: 14px;
	background: var(--color-bg-inverse); color: #fff;
	box-shadow: 0 12px 32px -8px rgb(11 18 32 / .55), inset 0 0 0 1px rgb(255 255 255 / .06);
	opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.sticky-cta.is-pinned { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta__txt { display: flex; flex-direction: column; line-height: 1.15; }
.sticky-cta__txt strong { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .01em; }
.sticky-cta__txt span { font-size: .75rem; color: #94a3b8; }
.sticky-cta svg { width: 38px; height: 38px; padding: 10px; border-radius: 10px; background: var(--color-amber-500); color: var(--color-ink-on-amber); transition: transform .2s var(--ease-out); }
.sticky-cta:hover svg { transform: translateX(3px); }
@media (max-width: 639px) {
	.sticky-cta { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
	.sticky-cta, .mnav__panel, .mnav__scrim { transition: none; }
}

/* ---------- Fit band (above footer, every page but home) ---------- */
.fit-band { background: var(--color-amber-500); color: var(--color-ink-on-amber); position: relative; }
.fit-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; color: rgb(26 18 6 / .35); background: var(--tape); }
.fit-band__in { display: grid; gap: 1.5rem; padding-block: 3rem 2.75rem; }
@media (min-width: 1024px) { .fit-band__in { grid-template-columns: 5fr 7fr; align-items: center; gap: 3rem; } }
.fit-band__h { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 2.4vw + 1rem, 2.75rem); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.fit-band__p { margin-top: .6rem; max-width: 46ch; color: #3b2a07; }
.fit-band__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fit-band__list a {
	display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .85rem; border-radius: 999px;
	background: rgb(255 255 255 / .55); border: 1px solid rgb(26 18 6 / .14);
	font-size: .875rem; font-weight: 600; color: var(--color-ink);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.fit-band__list a:hover { background: var(--color-bg-inverse); color: #fff; transform: translateY(-1px); }
.fit-band__list a.is-all { background: var(--color-bg-inverse); color: #fff; }

.shell-footer__link { color: var(--color-amber-400); }
.shell-footer__link:hover { text-decoration: underline; }
/* keep the fixed CTA from covering the last footer line on phones */
@media (max-width: 639px) { .shell-footer { padding-bottom: 5rem; } }

/* ---- Article quick picks (inc/interlink.php tbcf_il_render_article_quickpicks) ---- */
.qp{margin:0 0 2.5rem;padding:1.25rem 1.25rem 1rem;border:1px solid var(--color-line);border-radius:14px;background:var(--color-bg-subtle)}
.qp__h{margin:0 0 .75rem;font-family:var(--font-display,inherit);font-weight:800;font-size:1.0625rem;color:var(--color-ink)}
.qp__list{list-style:none;margin:0;padding:0}
.qp__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--color-line)}
.qp__row:first-child{border-top:0}
.qp__name{min-width:0;display:flex;flex-direction:column}
.qp__name a{font-weight:700;color:var(--color-ink);text-decoration:none}
.qp__name a:hover{text-decoration:underline}
.qp__name small{font-size:.875rem;color:var(--color-ink-2);line-height:1.35}
.qp__buy{flex:none;white-space:nowrap;padding:.55rem 1rem;font-size:.9375rem}
.qp__note{margin:.6rem 0 0;font-size:.8125rem;color:var(--color-ink-2)}
.qp-card{display:flex;flex-direction:column;justify-content:space-between;gap:.9rem}
.qp-card__buy{align-self:flex-start;padding:.5rem 1rem;font-size:.9375rem}
@media (max-width:480px){.qp{padding:1rem .9rem .8rem}.qp__row{gap:.6rem}.qp__buy{padding:.5rem .8rem}}

/* ---- Truck cover picks (inc/shell.php tbcf_truck_cover_picks) ---- */
.tcp__grid{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.tcp__card{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.1rem 1.2rem;min-width:0}
.tcp__type{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink-2)}
.tcp__name{font-family:var(--font-display,inherit);font-weight:800;font-size:1.125rem;color:var(--color-ink);text-decoration:none}
.tcp__name:hover{text-decoration:underline}
.tcp__best{font-size:.9375rem;color:var(--color-ink-2);line-height:1.4;flex:1}
.tcp__buy{align-self:flex-start;margin-top:.6rem;padding:.55rem 1rem;font-size:.9375rem}
.tcp__note{margin:.75rem 0 0;font-size:.8125rem;color:var(--color-ink-2)}

/* ---- Make page snapshot table (vehicle-templates/vehicle-make.php) ---- */
.vmk-table{overflow-x:auto;border:1px solid var(--color-line);border-radius:12px}
.vmk-table table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:560px}
.vmk-table th,.vmk-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--color-line);vertical-align:top}
.vmk-table thead th{background:var(--color-bg-subtle);font-weight:700;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-ink-2)}
.vmk-table tbody tr:last-child th,.vmk-table tbody tr:last-child td{border-bottom:0}
.vmk-table tbody th{font-weight:700}