/* ==========================================================================
   ChargeWiseHub readability + polish layer
   Loaded last on every page so it wins over page-level styles.
   Purpose: consistent type hierarchy, comfortable body text, clear CTAs,
   keyboard focus, and legible tables. No layout structure is changed.
   ========================================================================== */

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
::selection{background:rgba(0,212,255,.28);color:#fff}

/* ---------- heading hierarchy (section headings were label-sized) ---------- */
h2{
  font-size:clamp(1.45rem,2.35vw,1.8rem)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.018em!important;
  margin-top:2.1em;
  margin-bottom:.7em;
  text-wrap:balance;
}
h2::after{opacity:.5}
h1{text-wrap:balance}
h3{text-wrap:balance;letter-spacing:-.012em}

/* home page section headers were already well sized: keep them big */
.section-header h2{font-size:clamp(1.9rem,3.1vw,2.55rem)!important;line-height:1.18!important}

/* review pages use h2 inside cards: keep them a step down but still clear */
.cwh-card h2,.cwh-wrap h2{
  font-size:1.28rem!important;
  letter-spacing:-.012em!important;
  margin-top:0;
  margin-bottom:.85em;
}

/* ---------- body copy ---------- */
p,li{line-height:1.72}
/* never let body copy render smaller than 15.5px; bigger sizes are untouched */
html body p{font-size:max(15.5px,1em)!important;line-height:1.72}
html body li{line-height:1.72}
article p,article li,.verdict-text p{font-size:1.0625rem!important;line-height:1.72!important}
/* comfortable line length on wide screens */
p{max-width:74ch}
.verdict-text p,.cwh-card p{max-width:70ch}
/* in-article links need to be obvious */
article p a,article li a,.verdict-text a,.cwh-card p a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
article p a:hover,article li a:hover{text-decoration-thickness:2px}

/* ---------- primary buttons / Amazon CTAs ---------- */
a[class*="bg-amazon"],.btn-amazon,.btn-buy,.amazon-btn,.btn{
  min-height:48px!important;
  height:auto!important;
  font-size:1rem!important;
  font-weight:600!important;
  letter-spacing:0!important;
  padding:.8rem 1.4rem!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem;
  line-height:1.2!important;
}
a[class*="bg-amazon"]:hover,.btn-amazon:hover{filter:brightness(1.04)}

/* ---------- keyboard focus + anchor offset under the sticky nav ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #00d4ff;outline-offset:3px;border-radius:4px
}
:target{scroll-margin-top:96px}
h2[id],h3[id],section[id],div[id]{scroll-margin-top:96px}

/* ---------- tables ---------- */
table{font-size:.95rem!important}
table th,table td{padding:.72rem .85rem!important;vertical-align:top}
table tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
table th{letter-spacing:.01em}

/* ---------- images ---------- */
img{max-width:100%;height:auto}
figure img,.cwh-hero-img{border-radius:14px}


/* ---------- tailwind muted-text helpers that were too faint on dark ---------- */
[class*="text-secondary-foreground/40"]{color:rgba(201,217,232,.68)!important}
[class*="text-secondary-foreground/50"]{color:rgba(201,217,232,.72)!important}
[class*="text-muted-foreground/"]{color:rgba(160,196,224,.82)!important}

/* ---------- small-screen safety ---------- */
@media (max-width:640px){
  h1{font-size:clamp(1.8rem,8.2vw,2.35rem)!important;line-height:1.16!important}
  h2{font-size:clamp(1.3rem,6vw,1.55rem)!important;margin-top:1.7em}
  p,li{line-height:1.68}
  article p,article li,.verdict-text p{font-size:1.03rem}
  a[class*="bg-amazon"],.btn-amazon,.btn-buy,.amazon-btn,.btn{width:100%;min-height:50px!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* ---------- motion + print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- tiny card labels: nothing meaningful below 11.5px ---------- */
.review-cat,.card-cat,.review-card .review-meta span,.cwh-card .review-meta span,.tag,.eyebrow{
  font-size:11.5px!important;letter-spacing:.07em!important
}
.review-card .stars,.cwh-card .stars,span[class*="stars"]{font-size:13px!important;letter-spacing:1px!important}
.review-price,.price,.cwh-card .price{font-size:14px!important}

/* ---------- floating chat bubble must not cover content on phones ---------- */
#cwh-chatbot-widget{bottom:18px!important;right:16px!important}
#cwh-chat-bubble{box-shadow:0 6px 18px rgba(0,0,0,.45)!important}
@media (max-width:640px){
  #cwh-chatbot-widget{bottom:calc(14px + env(safe-area-inset-bottom))!important;right:12px!important}
  #cwh-chat-bubble{width:50px!important;height:50px!important}
  #cwh-chat-bubble svg{width:24px!important;height:24px!important}
  #cwh-chat-panel{width:calc(100vw - 28px)!important;max-width:360px!important;right:0!important;bottom:64px!important;max-height:min(70vh,520px)!important}
}

/* ---------- give long-form articles one clear reading column ---------- */
article{max-width:820px;margin-left:auto;margin-right:auto}
article h2,article h3{max-width:none}
@media (max-width:900px){article{max-width:100%}}

/* Approved responsive corrections, 7 November 2026.
   Fix the source of overflow; do not hide or clip the document. */
@media (max-width:1399px){
  html body .grid > *{min-width:0}
  html body .grid > article{width:100%;max-width:100%;box-sizing:border-box}
}
@media (min-width:768px) and (max-width:1399px){
  html body .grid[class*="lg:grid-cols-4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  html body .grid{min-width:0;max-width:100%}
  html body .guides-grid,html body .quick-picks{grid-template-columns:minmax(0,1fr)!important}
  html body [style*="grid-template-columns:1fr 1fr"],html body [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  html body .grid :is(p,li,h1,h2,h3,h4){overflow-wrap:anywhere}
  html body .btn-amazon{margin-right:0!important}
  html body footer > a{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
  html body table{box-sizing:border-box;max-width:100%}
  html body :is(.table-wrap,.table-container,.overflow-x-auto){min-width:0;max-width:100%}
}
@media (max-width:1279px){
  html body a[class*="bg-amazon"],html body .btn-amazon,html body .btn-buy,html body .btn{
    max-width:100%;box-sizing:border-box;white-space:normal!important;
    height:auto!important;min-height:50px!important;line-height:1.4!important;
    overflow-wrap:anywhere;text-align:center;flex-wrap:wrap;
  }
  html body :is(a[class*="bg-amazon"],.btn-amazon,.btn-buy,.btn) > span{min-width:0;overflow-wrap:anywhere}
}