/* Cool Things — hub grid + calculator UI. Reuses tokens.css variables and shared .btn/.neon-box/
   .faq-item classes from style.css; nothing here overrides the shared site styles. */

/* ---------- Hub: filter bar + card grid ---------- */
.cool-filter-bar {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-3);
}
.cool-filter-btn {
  background: none;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius);
  padding: 0.6em 1.2em;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  min-height: 44px;
}
.cool-filter-btn:hover { border-color: var(--color-cyan); color: var(--color-white); }
.cool-filter-btn.is-active { background: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-btn-text); }

.cool-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: var(--space-5);
}
.cool-grid-ad { grid-column: 1 / -1; display: flex; justify-content: center; }

.cool-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  background: var(--color-black);
  border: 2px solid var(--color-cyan);
  border-radius: var(--radius-box);
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.cool-grid .cool-card:nth-of-type(3n+2) { border-color: var(--color-magenta); }
.cool-grid .cool-card:nth-of-type(3n+3) { border-color: var(--color-green); }
.cool-card:hover { text-decoration: none; filter: brightness(1.12); }
.cool-card-category {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cyan-bright);
}
.cool-card h3 { margin: 0; color: var(--color-white); font-size: 1.15rem; }
.cool-card p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; flex: 1; }
.cool-card-audience { display: flex; gap: 0.4em; flex-wrap: wrap; }
.cool-card-link { font-weight: 700; color: var(--color-cyan-bright); }
.cool-card-img-box {
  width: calc(100% + var(--space-3) * 2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
}
.cool-card-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-hero-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-box);
  border: 2px solid var(--color-cyan);
  margin-bottom: var(--space-3);
}
.tool-hero-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.audience-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.audience-chip-homeowners { border-color: var(--color-green); color: var(--color-green); }
.audience-chip-contractors { border-color: var(--color-cyan); color: var(--color-cyan-bright); }

/* ---------- Tool page layout: main column + sidebar ---------- */
.tool-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
  .tool-layout { grid-template-columns: 1fr 300px; }
  .tool-sidebar { position: sticky; top: calc(var(--space-3) + 70px); }
}
.tool-main { min-width: 0; }
.tool-audience-line { display: flex; align-items: center; gap: 0.6em; margin-top: var(--space-3); flex-wrap: wrap; }
.tool-category-label { font-size: 0.82rem; color: var(--color-text-muted); }

.tool-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }
.tool-cta-box {
  border: 2px solid var(--color-green);
  border-radius: var(--radius-box);
  padding: var(--space-3);
  background: rgba(53, 234, 10, 0.06);
}
.tool-cta-box h3 { margin: 0 0 0.4em; color: var(--color-white); font-size: 1.05rem; }
.tool-cta-box p { color: var(--color-text-muted); font-size: 0.9rem; }

/* A real ad slot (when ads are on) sits well clear of the CTA box above it, with its own gap and
   no shared border, so the soft CTA is never visually mistaken for part of an ad unit. */
.sidebar-ad-wrap { margin-top: var(--space-2); }

.tool-disclaimer { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.related-tools {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: var(--space-3);
}
.related-tools h3 { margin: 0 0 0.5em; font-size: 0.95rem; color: var(--color-white); }
.related-tools ul { margin: 0; padding-left: 1.1em; }
.related-tools li { margin-bottom: 0.3em; }

/* ---------- Calculator form/results ---------- */
.calc-app { border: 2px solid var(--color-cyan); border-radius: var(--radius-box); padding: var(--space-3); background: var(--color-surface); }
.calc-fields { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .calc-fields { grid-template-columns: 1fr 1fr; } }
.calc-field { display: flex; flex-direction: column; gap: 0.35em; }
.calc-field-wide { grid-column: 1 / -1; }
.calc-field label { font-weight: 700; color: var(--color-white); font-size: 0.92rem; }
.calc-field-hint { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.calc-field input[type="text"],
.calc-field input[type="number"],
.calc-field select {
  width: 100%;
  padding: 0.7em 0.8em;
  font-size: 1rem; /* >=16px: avoid iOS auto-zoom on focus */
  border-radius: 4px;
  border: 1px solid var(--color-text-muted);
  background: #0a0a14;
  color: var(--color-white);
  min-height: 44px;
}
.calc-field input:focus, .calc-field select:focus { border-color: var(--color-cyan); outline: 2px solid var(--color-cyan); outline-offset: 1px; }
.calc-checkbox-row { display: flex; align-items: center; gap: 0.6em; }
.calc-checkbox-row input { width: 20px; height: 20px; }
.calc-checkbox-row label { font-weight: 700; color: var(--color-white); font-size: 0.92rem; }

.calc-results { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.calc-result-card { border: 1px solid var(--color-border); border-radius: var(--radius-box); padding: var(--space-2) var(--space-3); background: rgba(255,255,255,0.03); }
.calc-result-card h3 { margin: 0 0 0.5em; color: var(--color-cyan-bright); font-size: 1rem; }
.calc-result-warn { border-color: var(--color-magenta); background: rgba(222,14,224,0.06); color: var(--color-white); }
.calc-stat-list { margin: 0; display: flex; flex-direction: column; }
.calc-stat { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.3em 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; }
.calc-stat:last-child { border-bottom: none; }
.calc-stat dt { color: var(--color-text-muted); }
.calc-stat dd { margin: 0; font-weight: 700; color: var(--color-white); text-align: right; }
.calc-stat-highlight dd { color: var(--color-green); font-size: 1.1rem; }
.calc-total-line { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--color-white); }
.calc-total-line span { color: var(--color-green); }
.calc-note { font-size: 0.85rem; color: var(--color-magenta-bright); margin: 0.6em 0 0; }

.calc-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.calc-copy-status { font-size: 0.85rem; color: var(--color-green); min-height: 1.2em; }

@media (max-width: 480px) {
  .calc-app { padding: var(--space-2); }
  .calc-fields { gap: var(--space-1); }
}

/* ---------- Ad slots ----------
   Only ever present in the DOM once ads are actually turned on (scripts/lib/ads.mjs emits nothing
   at all while ads.enabled is false — no placeholder box, no "Advertisement" landmark). Fixed
   pixel sizes here just prevent layout shift once a real ad unit loads into one. */
.ad-slot { display: flex; align-items: center; justify-content: center; margin: var(--space-3) auto; overflow: hidden; }
.ad-slot-rectangle { width: 300px; height: 250px; max-width: 100%; }
.ad-slot-leaderboard { width: 100%; max-width: 728px; height: 90px; }
@media (max-width: 480px) { .ad-slot-leaderboard { max-width: 320px; height: 100px; } }
.ad-slot-incontent { width: 100%; max-width: 728px; height: 250px; }

/* ---------- ZIP service-area checker (soft CTA) ---------- */
.zip-checker-heading { margin: 0 0 0.5em; color: var(--color-white); font-size: 1.05rem; }
.zip-checker-form { margin-bottom: var(--space-2); }
.zip-checker-label { display: block; font-weight: 700; color: var(--color-white); font-size: 0.88rem; margin-bottom: 0.35em; }
.zip-checker-row { display: flex; gap: 0.5em; flex-wrap: wrap; }
.zip-checker-row input {
  flex: 1 1 120px;
  min-width: 0;
  padding: 0.7em 0.8em;
  font-size: 1rem; /* >=16px: avoid iOS auto-zoom on focus */
  border-radius: 4px;
  border: 1px solid var(--color-text-muted);
  background: #0a0a14;
  color: var(--color-white);
  min-height: 44px;
}
.zip-checker-row input:focus { border-color: var(--color-cyan); outline: 2px solid var(--color-cyan); outline-offset: 1px; }
.zip-checker-row .btn { flex: 0 0 auto; min-height: 44px; }
.zip-checker-result { min-height: 1.2em; }
.zip-result { margin: 0; }
.zip-result p { margin: 0 0 0.5em; }
.zip-result p:last-child { margin-bottom: 0; }
.zip-result-in p strong { color: var(--color-green); }
.zip-result-edge { color: var(--color-cyan-bright); }
.zip-result-out .zip-muted { color: var(--color-text-muted); font-size: 0.88rem; }
.zip-result-error { color: var(--color-magenta-bright); font-size: 0.9rem; }
.zip-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.5em; }
.zip-actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 0.9rem; padding: 0.6em 1em; }

/* Standalone "quick check" variant (roof-estimate page): full-width box above the main tool, same
   neon-box treatment as the rest of that page's sections. */
.zip-checker-quickcheck { max-width: 480px; }
.zip-checker-quickcheck .zip-checker-row { max-width: 420px; }