/*
Theme Name: Pressure Canner
Template: aff-base
Description: Vintage pantry look for pressure-canner.com: mason-jar blue, tomato red, butter cream and gingham.
Version: 1.0.0
*/

:root {
	--bg: #fbf5e4;
	--surface: #fffdf6;
	--surface-2: #f3e9cc;
	--ink: #1e2b35;
	--ink-2: #3f4c56;
	--muted: #6a7075;
	--line: #e6dbbd;
	--accent: #2b6d94;
	--accent-ink: #fffdf6;
	--accent-soft: #dcebf2;
	--accent-2: #c03d28;
	--good: #2f7a4b;
	--bad: #b2402f;
	--radius: 10px;
	--radius-sm: 6px;
	--font-display: "Zilla Slab", Rockwell, Georgia, serif;
	--font-body: "Karla", system-ui, sans-serif;
	--display-weight: 700;
	--display-tracking: -0.005em;
	--gingham-red: linear-gradient(90deg, rgba(200, 65, 43, .45) 50%, transparent 50%), linear-gradient(rgba(200, 65, 43, .45) 50%, transparent 50%);
	--gingham-blue: linear-gradient(90deg, rgba(43, 109, 148, .07) 50%, transparent 50%), linear-gradient(rgba(43, 109, 148, .07) 50%, transparent 50%);
}

/* Header: red gingham ribbon on top, jar-blue rule below */
.site-header { border-bottom: 2px solid var(--accent); }
.site-header::before { content: ""; display: block; height: 8px; background-color: #fffdf6; background-image: var(--gingham-red); background-size: 8px 8px; }
.brand__name { font-size: 22px; letter-spacing: .01em; }
.nav__list a:hover, .nav__list .current-menu-item a { background: var(--accent-soft); color: var(--accent); }

/* Hero: blue gingham tablecloth with a butter glow */
.hero {
	background-color: var(--bg);
	background-image:
		radial-gradient(700px 380px at 78% 45%, rgba(251, 245, 228, .96), rgba(251, 245, 228, .55) 70%, transparent),
		var(--gingham-blue);
	background-size: auto, 28px 28px;
	border-bottom: 0;
	box-shadow: inset 0 -6px 0 var(--accent-2);
}
.hero__title { font-weight: 700; }
.hero .kicker { color: var(--accent-2); }
.btn--primary { border-radius: 8px; box-shadow: 0 3px 0 #1d4d69; }
.btn--ghost { border-radius: 8px; border-color: var(--accent); color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-ink); }

/* Silo tiles: pantry jar labels with a lid-blue icon disc */
.silo { position: relative; align-items: flex-start; padding: 22px 20px 18px; border: 0; box-shadow: 0 0 0 1.5px var(--line); background: var(--surface); }
.silo::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(43, 109, 148, .28); border-radius: 6px; pointer-events: none; }
.silo__icon { width: 60px; height: 60px; padding: 11px; border-radius: 50%; background: var(--accent); color: #fffdf6; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px #d4ad55; }
.silo:hover { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); }
.card__icon { color: var(--accent-2); }

/* Quick picks: numbered jar lids */
.quick-picks { counter-reset: agcpick; border-radius: var(--radius); }
.quick-picks li { position: relative; padding-left: 62px; counter-increment: agcpick; }
.quick-picks li::before { content: counter(agcpick); position: absolute; left: 16px; top: 15px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fffdf6; font: 700 14px/1 var(--font-display); box-shadow: inset 0 0 0 3px #d4ad55; }
.quick-picks li:nth-child(even)::before { background: var(--accent-2); }

/* Product box: gingham jar-topper strip */
.aff-product { position: relative; overflow: hidden; padding-top: 26px; border-color: var(--line); }
.aff-product::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background-color: #fffdf6; background-image: var(--gingham-red); background-size: 8px 8px; }
.aff-product__icon { background: var(--accent); color: #fffdf6; border-radius: 50%; }
.aff-product__btn, .aff-cta__btn { border-radius: 8px; }
.aff-cta { border-left-color: var(--accent); }

/* Teaser on a tablecloth */
.teaser__inner { background-color: #f6ecd2; background-image: var(--gingham-blue); background-size: 24px 24px; border: 1.5px solid var(--line); }
.promise__item { border-top: 0; box-shadow: inset 0 6px 0 var(--accent-2), 0 0 0 1.5px var(--line); border-radius: var(--radius); padding-top: 30px; }

.prose h2 { padding-bottom: .25em; border-bottom: 2px dotted rgba(43, 109, 148, .35); }
.prose blockquote { border-left-color: var(--accent-2); }

/* Footer: deep jar blue under a gingham edge */
.site-footer { background: #163a52; color: rgba(251, 245, 228, .8); border-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background-color: #fffdf6; background-image: var(--gingham-red); background-size: 8px 8px; }
.site-footer .agc-logo__jar { fill: #6fa8c8; }

/* ---------- Tool: altitude calculator ---------- */
.agc-alt__intro { color: var(--ink-2); font-size: 16px; }
.agc-alt__wide { grid-column: 1 / -1; }
.agc-alt__gauge { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.agc-alt__gauge legend { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; padding: 0; width: 100%; }
.aff-tool .agc-alt__gauge label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 15px; cursor: pointer; }
.aff-tool .agc-alt__gauge input { width: 18px; min-height: 0; height: 18px; margin: 0; accent-color: var(--accent); }
.agc-alt__gauge label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.agc-alt__gauge label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.agc-alt__for { margin: 0 0 10px; }
.agc-alt__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.agc-alt__card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); border-top: 5px solid var(--accent); }
.agc-alt__card + .agc-alt__card { border-top-color: var(--accent-2); }
.agc-alt__lab { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agc-alt__card strong { font: 700 30px/1.15 var(--font-display); color: var(--ink); }
.aff-tool__result .agc-alt__card strong.agc-alt__none { font-size: 22px; color: var(--bad); }
.agc-alt__band { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.agc-alt__acid { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.agc-alt__table { margin-top: 16px; }
.prose .agc-alt__table table { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14.5px; }
.agc-alt__table caption { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding-bottom: 6px; }
.prose .agc-alt__table th, .prose .agc-alt__table td { padding: 8px 10px; white-space: normal; }
.prose .agc-alt__table tbody th { font-weight: 600; text-align: left; background: transparent; }
.prose .agc-alt__table tr.is-on th, .prose .agc-alt__table tr.is-on td { background: #fbe3dc; color: var(--ink); font-weight: 700; }
.agc-alt__you { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--accent-2); color: #fff; font: 700 10.5px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.agc-alt__warn { margin: 16px 0 10px; padding: 12px 14px; border-left: 4px solid var(--accent-2); background: #fbe9e3; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; line-height: 1.5; }
.agc-alt__notes { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.agc-alt__src, .agc-parts__src { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---------- Tool: parts diagram ---------- */
.agc-parts__views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.agc-parts__views button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font: 600 15px/1 var(--font-body); color: var(--ink-2); cursor: pointer; }
.agc-parts__views button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fffdf6; }
.agc-parts__fig { background-color: #fffdf6; background-image: var(--gingham-blue); background-size: 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.agc-parts__fig svg { display: block; width: 100%; height: auto; }
.agc-parts__leader { stroke: #3f4c56; stroke-width: 1.4; }
.agc-parts__dot { fill: #3f4c56; }
.agc-parts__badge { fill: var(--accent); stroke: #fffdf6; stroke-width: 2.5; }
.agc-parts__num { fill: #fffdf6; font: 700 16px var(--font-body); text-anchor: middle; }
.agc-parts__lbl { fill: var(--ink); font: 600 14px var(--font-body); }
.agc-parts__mark, [data-part] { cursor: pointer; transition: opacity .15s; }
.has-sel [data-part], .has-sel .agc-parts__jars, .has-sel .agc-parts__mark { opacity: .35; }
.has-sel [data-part].is-on, .has-sel .agc-parts__mark.is-on { opacity: 1; }
.agc-parts__mark.is-on .agc-parts__badge { fill: var(--accent-2); }
.agc-parts__mark.is-on .agc-parts__leader { stroke: var(--accent-2); stroke-width: 2.4; }
.agc-parts__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.prose .agc-parts__list li { margin: 0; }
.agc-parts__list button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); font: 600 15px/1.25 var(--font-body); color: var(--ink); text-align: left; cursor: pointer; }
.agc-parts__list button[aria-pressed="true"] { border-color: var(--accent-2); background: #fbe9e3; }
.agc-parts__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fffdf6; font-size: 14px; }
.agc-parts__list button[aria-pressed="true"] .agc-parts__n { background: var(--accent-2); }
.agc-parts__info { margin: 12px 0; padding: 12px 14px; min-height: 52px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 15.5px; line-height: 1.5; }
.agc-parts__info p { margin: 0; }

@media (max-width: 760px) {
	.aff-tool { padding: 16px; }
	.agc-alt__card strong { font-size: 26px; }
	.agc-parts__list { grid-template-columns: 1fr 1fr; }
	.agc-parts__list button { font-size: 14px; }
}
@media (max-width: 600px) {
	.agc-parts__lbl { display: none; }
	.agc-parts__num { font-size: 18px; }
}
@media (max-width: 420px) {
	.agc-parts__list { grid-template-columns: 1fr; }
}