/* 4x4TireReview design tokens and components. Mirror the tokens in Elementor Site Settings. */

/* Self-hosted fonts (latin subset, SIL Open Font License). Elementor's Google Fonts loading is off; these serve both. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }

:root {
	--tr-paper: #F6F3EC;
	--tr-surface: #FFFFFF;
	--tr-ink: #1F2328;
	--tr-ink-2: #3A3F45;
	--tr-muted: #575C63;
	--tr-rule: #DCD4C4;
	--tr-field: #BDB4A3;
	--tr-sand: #EFEBE2;
	--tr-accent: #B4531F;
	--tr-accent-ink: #8F3F15;
	--tr-accent-tint: #F4E4D7;
	--tr-accent-tint-rule: #E5CDB9;
	--tr-spec-bg: #E2EBF4;
	--tr-spec-ink: #234A70;
	--tr-owner-bg: #F4E4D7;
	--tr-owner-ink: #7A3410;
	--tr-survey-bg: #E5ECDA;
	--tr-survey-ink: #3C5420;
	--tr-good: #4A6629;
	--tr-bad: #B4531F;
	--tr-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--tr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tr-radius-sm: 6px;
	--tr-radius: 10px;
	--tr-radius-lg: 12px;
}

/* Chips */
.tr-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tr-chip { display: inline-block; font: 600 13px/1.4 var(--tr-font-body); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tr-chip--spec { background: var(--tr-spec-bg); color: var(--tr-spec-ink); }
.tr-chip--owner { background: var(--tr-owner-bg); color: var(--tr-owner-ink); }
.tr-chip--survey { background: var(--tr-survey-bg); color: var(--tr-survey-ink); }

/* Buttons */
.tr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border-radius: var(--tr-radius-sm); background: var(--tr-accent); color: #fff; font: 600 15px/1.2 var(--tr-font-body); text-decoration: none; border: 0; cursor: pointer; }
/* :focus is listed so a clicked <button> keeps our colors (Hello Elementor's reset turns focused buttons pink). */
.tr-btn:focus { background: var(--tr-accent); color: #fff; }
.tr-btn--outline:focus { background: transparent; color: var(--tr-ink); }
.tr-btn--dark:focus { background: var(--tr-ink); color: var(--tr-paper); }
.tr-btn:hover, .tr-btn:focus-visible { background: var(--tr-accent-ink); color: #fff; }
.tr-btn--outline { background: transparent; color: var(--tr-ink); border: 1.5px solid var(--tr-ink); }
.tr-btn--outline:hover, .tr-btn--outline:focus-visible { background: var(--tr-ink); color: var(--tr-paper); }
.tr-btn--dark { background: var(--tr-ink); color: var(--tr-paper); }
.tr-btn--light, .tr-btn--light:focus { background: var(--tr-paper); color: var(--tr-ink); }
.tr-btn--light:hover, .tr-btn--light:focus-visible { background: #fff; color: var(--tr-ink); }

/* Text helpers */
.tr-eyebrow { margin: 0; font: 700 13px/1.3 var(--tr-font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--tr-accent-ink); }
.tr-eyebrow--light { color: #F0B48F; }
.tr-meta { font-size: 14px; color: var(--tr-muted); }

/* Cards and panels */
.tr-card { background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.tr-card--pick { border: 2px solid var(--tr-accent); }
.tr-card__title { margin: 0; font: 700 28px/1.1 var(--tr-font-display); color: var(--tr-ink); }
.tr-card .tr-btn { margin-top: auto; }
.tr-panel-dark { background: var(--tr-ink); color: var(--tr-paper); border-radius: var(--tr-radius-lg); padding: 28px; }
.tr-answer { background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius); padding: 22px 24px; font-size: 19px; }

/* Picks grid */
.tr-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* Disclosure and band */
.tr-disclosure { font-size: 14px; color: var(--tr-muted); background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: 8px; padding: 12px 16px; }
.tr-band { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; background: var(--tr-accent-tint); border: 1px solid var(--tr-accent-tint-rule); border-radius: var(--tr-radius-lg); padding: 28px; }
.tr-band__text { flex: 1 1 360px; min-width: 0; }
.tr-band__title { margin: 0 0 6px; font: 700 28px/1.1 var(--tr-font-display); color: var(--tr-ink); }
.tr-band p { margin: 0; color: var(--tr-ink-2); }

/* Tables */
.tr-table-wrap { overflow-x: auto; background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius); }
.tr-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-table th, .tr-table td { padding: 14px 16px; text-align: left; border-top: 1px solid #E6DFD1; vertical-align: top; }
.tr-table thead th { background: var(--tr-sand); border-top: 0; }
.tr-th--spec { color: var(--tr-spec-ink); }
.tr-th--owner { color: var(--tr-owner-ink); }
.tr-th--survey { color: var(--tr-survey-ink); }
.tr-badge { font-size: 12px; font-weight: 700; color: var(--tr-accent-ink); text-transform: uppercase; }

/* Score bars */
.tr-score { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: 15px; margin: 8px 0; }
.tr-score__track { height: 10px; background: var(--tr-sand); border-radius: 5px; overflow: hidden; }
.tr-score__fill { display: block; height: 10px; }
.tr-score__fill--good { background: var(--tr-good); }
.tr-score__fill--bad { background: var(--tr-bad); }
.tr-score__value { font-variant-numeric: tabular-nums; }

/* Author box */
.tr-author { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius-lg); padding: 24px; }
.tr-author__photo { border-radius: 50%; }
.tr-author__name { margin: 4px 0 0; font: 700 26px/1.1 var(--tr-font-display); }
.tr-author__bio { margin: 6px 0; color: var(--tr-ink-2); font-size: 16px; }

/* Pick card (roundup body): <article class="tr-pick"> */
.tr-pick { background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius-lg); padding: 32px; margin: 0 0 24px; }
.tr-pick h2 { margin: 6px 0 0; font: 700 40px/1.05 var(--tr-font-display); }
.tr-pick h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 12px; font: 700 18px/1.3 var(--tr-font-body); }
.tr-pick__top { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.tr-pick__photo { flex: 1 1 220px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--tr-sand); border: 1px dashed var(--tr-field); border-radius: 8px; color: var(--tr-muted); font-size: 14px; text-align: center; }
.tr-pick__photo img { width: 100%; height: 100%; object-fit: contain; }
.tr-pick__who { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: var(--tr-ink-2); }
.tr-pick__who p { margin: 0; }
.tr-pick__who strong { color: var(--tr-ink); font-size: 15px; }
.tr-pick__who .tr-btn { align-self: flex-start; }
.tr-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; font-size: 15px; }
.tr-specs > div { background: var(--tr-paper); border-radius: 6px; padding: 12px; }
.tr-specs dt { color: var(--tr-muted); font-size: 13px; }
.tr-specs dd { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 480px) { .tr-pick { padding: 20px; } .tr-pick h2 { font-size: 30px; } }

/* Sources */
.tr-sources { padding-left: 20px; font-size: 15px; color: var(--tr-ink-2); }
.tr-sources__details > summary { display: flex; align-items: center; min-height: 44px; }
.tr-sources__group { margin: 20px 0 8px; font-size: 17px; }

/* Newsletter band (The Air Down) */
.tr-newsletter { background: var(--tr-sand); border-top: 1px solid var(--tr-rule); padding: 40px 0; margin-top: 72px; }
.tr-newsletter + .tr-footer { margin-top: 0; }
.tr-newsletter__inner { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; }
.tr-newsletter__text { flex: 1 1 320px; }
.tr-newsletter__text h2 { margin: 0 0 8px; font: 700 32px/1.1 var(--tr-font-display); }
.tr-newsletter__text p { margin: 0; color: var(--tr-ink-2); }
.tr-newsletter__form { flex: 1 1 360px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; }
.tr-newsletter__form .tr-field, .tr-newsletter__form .tr-meta, .tr-newsletter__msg { grid-column: 1 / -1; }
.tr-newsletter__form .tr-field { grid-column: 1; }
.tr-newsletter__form .tr-btn { min-height: 44px; }
.tr-newsletter__msg { margin: 0; font-weight: 600; }
.tr-newsletter__msg:empty { display: none; }
.tr-newsletter .tr-meta { margin: 0; font-size: 13px; }
.tr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Explainer diagrams ([tr_diagram]) */
.tr-figure { margin: 28px 0; padding: 20px; background: var(--tr-surface); border: 1px solid var(--tr-rule); border-radius: var(--tr-radius); }
.tr-figure .tr-dg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.tr-figure figcaption { margin-top: 16px; font-size: 15px; color: var(--tr-ink-2); }
.tr-figure__key { margin: 0; padding-left: 22px; }
.tr-figure__key li { margin: 4px 0; }
.tr-figure__note { margin: 10px 0 0; font-size: 14px; color: var(--tr-muted); }
.tr-dg text { font-family: var(--tr-font-body); }
.tr-dg__rubber { fill: var(--tr-ink); }
.tr-dg .tr-dg__mold { font: 700 28px var(--tr-font-display); fill: #EDE8DD; }
.tr-dg__bracket path { fill: none; stroke: var(--tr-accent); stroke-width: 2; }
.tr-dg__num circle { fill: var(--tr-accent); }
.tr-dg__numtext text { font-size: 13px; font-weight: 700; fill: #FFFFFF; }
.tr-dg__panel { fill: var(--tr-sand); }
.tr-dg .tr-dg__mark { font: 700 44px var(--tr-font-display); fill: var(--tr-ink); }
.tr-dg .tr-dg__mark--sm { font-size: 32px; }
.tr-dg__mountain { fill: none; stroke: var(--tr-ink); stroke-width: 5; stroke-linejoin: round; }
.tr-dg__flake path { fill: none; stroke: var(--tr-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tr-dg__label { font-size: 14px; font-weight: 600; fill: var(--tr-ink); }
.tr-dg__tile rect { fill: var(--tr-sand); }
.tr-dg .tr-dg__letter text { font: 700 32px var(--tr-font-display); fill: var(--tr-ink); }
.tr-dg__small text, text.tr-dg__small { font-size: 12px; fill: var(--tr-ink-2); }
.tr-dg__head { font-size: 14px; font-weight: 700; fill: var(--tr-ink); }
.tr-dg__bar { fill: var(--tr-accent); }
.tr-dg__bartext { font-size: 12px; font-weight: 700; fill: #FFFFFF; }

/* Tire spec comparison */
.tr-spectool__form { display: flex; flex-direction: column; gap: 16px; }
.tr-spectool__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tr-spectool__row .tr-field { flex: 1 1 220px; }
.tr-spectool__filters { display: flex; flex-wrap: wrap; gap: 4px 20px; border: 0; margin: 0; padding: 0; }
.tr-spectool__filters legend { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tr-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; cursor: pointer; }
.tr-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--tr-accent); }
.tr-spectool__count { margin: 20px 0 8px; }
.tr-spectool__table { font-variant-numeric: tabular-nums; }
.tr-spectool__table td, .tr-spectool__table th { white-space: nowrap; }
.tr-spectool__table tbody th { white-space: normal; min-width: 150px; }
/* Keep the tire name in view while the table scrolls sideways on phones. */
.tr-spectool__table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--tr-surface); box-shadow: 1px 0 0 #E6DFD1; }
.tr-spectool__table thead tr > :first-child { background: var(--tr-sand); }

/* Calculator */
.tr-calc { display: flex; flex-wrap: wrap; gap: 24px; }
.tr-calc__form { flex: 1 1 360px; min-width: 0; gap: 20px; }
.tr-calc__form fieldset { border: 0; margin: 0; padding: 0; }
.tr-calc__form legend { font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.tr-calc__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tr-calc__row .tr-field { flex: 1 1 180px; }
.tr-calc__swap { flex: 0 0 auto; min-height: 44px; }
.tr-field input[aria-invalid="true"] { border-color: var(--tr-bad); box-shadow: 0 0 0 1px var(--tr-bad); }
.tr-field__error { margin: -12px 0 0; min-height: 0; font-size: 14px; color: var(--tr-accent-ink); }
.tr-field__error:empty { display: none; }
.tr-calc__note { margin: 12px 0 0; font-size: 14px; color: #D6D0C3; }
.tr-calc__gearing { border-top: 1px solid var(--tr-rule); padding-top: 4px; }
.tr-calc__gearing > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.tr-calc__gearing[open] > summary { margin-bottom: 8px; }
.tr-calc__gearing .tr-calc__row + .tr-calc__row, .tr-calc__gearing .tr-meta { margin-top: 12px; }
.tr-calc__gearout { margin-top: 20px; padding-top: 16px; border-top: 1px solid #3A4048; }
.tr-calc__gearout .tr-calc__table th { font-weight: 400; color: #D6D0C3; }
.tr-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.tr-field select { font: 400 18px/1.2 var(--tr-font-body); padding: 10px 12px; border: 1px solid var(--tr-field); border-radius: var(--tr-radius-sm); width: 100%; box-sizing: border-box; min-height: 44px; background: #FFFFFF; color: var(--tr-ink); }
.tr-field input { font: 400 18px/1.2 var(--tr-font-body); padding: 12px; border: 1px solid var(--tr-field); border-radius: var(--tr-radius-sm); width: 100%; box-sizing: border-box; min-height: 44px; }
.tr-calc__result { flex: 1 1 420px; min-width: 0; }
.tr-calc__headline { margin: 8px 0 0; font: 700 36px/1.1 var(--tr-font-display); }
.tr-calc__bars { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tr-calc__bars > div { display: flex; align-items: center; gap: 12px; }
.tr-calc__bars > div > span:first-child { width: 70px; color: #D6D0C3; }
.tr-calc__bar { display: block; height: 16px; background: #8C939B; border-radius: 3px; }
.tr-calc__bar--new { background: #F0B48F; }
.tr-calc__result .tr-table-wrap { background: transparent; border: 0; margin-top: 16px; }
.tr-calc__table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.tr-calc__table th, .tr-calc__table td { padding: 10px 8px 10px 0; text-align: left; border-top: 1px solid #3A4048; }
.tr-calc__table thead th { color: #D6D0C3; font-size: 14px; border-top: 0; }
.tr-calc__speed { margin: 16px 0 0; background: #2A2F35; border-radius: 8px; padding: 14px 16px; }

@media (max-width: 480px) {
	.tr-score { grid-template-columns: 110px minmax(0, 1fr) 70px; }
	.tr-calc__headline { font-size: 28px; }
}