/* AC Tonnage Calculator — refconhvac.com/ac-tonnage-calculator/
   Reuses btu-calc.v7.css for base styles; this file overrides only what differs
   for the tonnage-first UI. Loaded by ac-tonnage-calc.v7.html.
   v1.0: 2026-07-21.
*/

/* When the page is tonnage-first, the hero big result shows Tons (data-primary-output="tons")
   and the BTU label is hidden in the sticky bar via JS. No extra CSS needed for the flip.
   The result card uses the same .results/.big/.pill markup, so styling is identical. */

/* The AC Tonnage page adds a "Country" dropdown before the climate chips. The .country-row
   wrapper inside .btu-calc .card is shared with the BTU page (same markup). The base CSS
   already styles .country-row, so nothing to override here. */

/* Tighten the "How to Calculate" prose on the AC Tonnage page to feel more consumer-friendly.
   The h2/h3 inside .seo inherit the same typography from the BTU page. */

/* Make the tonnage chart table a tiny bit more compact than the BTU page's reference table
   because it has 4 columns instead of 3. */
.btu-calc .seo .ref-table th,
.btu-calc .seo .ref-table td{white-space:nowrap}
@media (max-width:520px){
  .btu-calc .seo .ref-table th,
  .btu-calc .seo .ref-table td{white-space:normal;padding:8px 6px;font-size:.82rem}
}

/* On the AC Tonnage page, the FAQ "details" elements should have a slightly warmer hover
   state (consumer-friendly green) than the BTU page's blue-ish feel. */
.btu-calc[data-calc-id="ac_tonnage_calc"] .faq{transition:border-color .15s ease}
.btu-calc[data-calc-id="ac_tonnage_calc"] .faq:hover{border-color:#86efac}
.btu-calc[data-calc-id="ac_tonnage_calc"] .faq[open]{background:#f0fdf4;border-color:#86efac}
.btu-calc[data-calc-id="ac_tonnage_calc"] .faq summary{color:#065f46}
.btu-calc[data-calc-id="ac_tonnage_calc"] .faq summary::-webkit-details-marker{color:#10b981}