/* HiddenHelp responsive page polish v2
   Scope: live-site safe CSS refinement only. No JS, no content removal, no navigation/logo/header rewrite.
   Goal: make tiles, grids, buttons, filters, forms and print layouts behave better on mobile and laptop screens. */

:root{
  --hh-v2-max:1160px;
  --hh-v2-readable:760px;
  --hh-v2-gap:clamp(12px,2vw,20px);
  --hh-v2-card-pad:clamp(15px,2vw,22px);
  --hh-v2-radius:24px;
  --hh-v2-line:rgba(98,66,112,.18);
  --hh-v2-shadow:0 14px 34px rgba(50,30,60,.09);
  --hh-v2-soft-shadow:0 8px 20px rgba(50,30,60,.07);
}

/* Hard overflow guard for every page, including generated city/support pages. */
html{scroll-behavior:smooth;overflow-x:hidden!important;}
body{overflow-x:hidden!important;}
*,*::before,*::after{box-sizing:border-box;}
main,section,article,aside,header,footer,nav,div{min-width:0;}
img,svg,video,canvas,iframe{max-width:100%;height:auto;}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere;}

/* Page breathing room. Does not change header/nav structure. */
main,.wrap,.container,.page-wrap,.shell,.content-wrap,.hh-page,.page-shell{
  max-width:var(--hh-v2-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
main,.wrap,.container,.page-wrap,.shell,.content-wrap,.hh-page,.page-shell{
  padding-left:clamp(14px,3vw,28px)!important;
  padding-right:clamp(14px,3vw,28px)!important;
}

/* Calm vertical rhythm so laptop pages do not feel cramped or randomly spaced. */
main > * + *,section + section,.section + .section,.card + .card,.panel + .panel{
  margin-top:clamp(14px,2.4vw,26px);
}

/* Universal cards/tiles: consistent sizing without hiding content. */
.card,.tile,.result-tile,.route-card,.guide-card,.saving-card,.provider-card,.contact-card,
.dashboard-card,.support-card,.tool-card,.glass,.panel,.section,.local-card,.activity-card,
.hh-info-card,.quick-route,.support-plan-link-card,.snapshot,.empty-state,.empty-plan,
.article-card,.article,.guide,.route,.bill-card,.support-tile,.result-card,.step-card{
  max-width:100%!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  border-radius:var(--hh-v2-radius)!important;
}

.card,.tile,.result-tile,.route-card,.guide-card,.saving-card,.provider-card,.contact-card,
.dashboard-card,.support-card,.tool-card,.local-card,.activity-card,.hh-info-card,.article-card,
.bill-card,.support-tile,.result-card,.step-card{
  padding:var(--hh-v2-card-pad)!important;
  box-shadow:var(--hh-v2-shadow)!important;
}

/* Keep actions anchored neatly inside cards but do not force non-card content. */
.card > .actions,.tile > .actions,.result-tile > .actions,.route-card > .actions,
.guide-card > .actions,.saving-card > .actions,.provider-card > .actions,
.card > .links,.tile > .links,.result-tile > .links,.route-card > .links,
.guide-card > .links,.saving-card > .links,.provider-card > .links{
  margin-top:auto!important;
}

/* Laptop grids: readable columns, never tiny squeezed tiles. */
.tiles,.trust,.start-grid,.seo-grid,.input-grid,.choice-grid,.result-grid,.localgrid,
.guide-grid,.cards,.routes,.dashboard-grid,.support-grid,.savings-grid,.activity-grid,
.provider-grid,.deep-grid,.tool-grid,.grid,.bill-grid,.quick-grid,.option-grid,
.support-plan-grid,.action-grid,.article-grid{
  gap:var(--hh-v2-gap)!important;
  align-items:stretch!important;
}

@supports (grid-template-columns: repeat(auto-fit,minmax(min(100%, 290px),1fr))){
  @media (min-width:720px){
    .tiles,.choice-grid,.result-grid,.input-grid,.localgrid,.guide-grid,.cards,.routes,
    .dashboard-grid,.support-grid,.savings-grid,.activity-grid,.provider-grid,.deep-grid,
    .tool-grid,.grid,.bill-grid,.quick-grid,.option-grid,.support-plan-grid,.action-grid,
    .article-grid{
      display:grid!important;
      grid-template-columns:repeat(auto-fit,minmax(min(100%, 290px),1fr))!important;
    }
  }
  @media (min-width:1080px){
    .tiles,.choice-grid,.result-grid,.localgrid,.guide-grid,.cards,.routes,
    .dashboard-grid,.support-grid,.savings-grid,.activity-grid,.provider-grid,.deep-grid,
    .tool-grid,.grid,.bill-grid,.quick-grid,.option-grid,.support-plan-grid,.action-grid,
    .article-grid{
      grid-template-columns:repeat(auto-fit,minmax(min(100%, 310px),1fr))!important;
    }
  }
}

/* Common laptop/Chromebook widths: reduce slabby cards and improve scanning. */
@media (min-width:900px) and (max-width:1366px){
  :root{--hh-v2-max:1120px;--hh-v2-card-pad:18px;}
  h1{font-size:clamp(2.25rem,4.6vw,4.2rem)!important;line-height:1.02!important;}
  h2{font-size:clamp(1.65rem,3vw,2.45rem)!important;line-height:1.08!important;}
  h3{font-size:clamp(1.15rem,1.7vw,1.45rem)!important;line-height:1.14!important;}
  .card p,.tile p,.result-tile p,.route-card p,.guide-card p,.saving-card p,
  .provider-card p,.local-card p,.activity-card p{font-size:clamp(.95rem,1.2vw,1.02rem)!important;line-height:1.48!important;}
}

/* Mobile: one clean column and generous tap targets. */
@media (max-width:700px){
  :root{--hh-v2-card-pad:15px;--hh-v2-radius:22px;}
  main,.wrap,.container,.page-wrap,.shell,.content-wrap,.hh-page,.page-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .tiles,.trust,.start-grid,.seo-grid,.input-grid,.choice-grid,.result-grid,.localgrid,
  .guide-grid,.cards,.routes,.dashboard-grid,.support-grid,.savings-grid,.activity-grid,
  .provider-grid,.deep-grid,.tool-grid,.grid,.bill-grid,.quick-grid,.option-grid,
  .support-plan-grid,.action-grid,.article-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  h1{font-size:clamp(2rem,10vw,2.8rem)!important;line-height:1.02!important;}
  h2{font-size:clamp(1.45rem,7vw,2.1rem)!important;line-height:1.08!important;}
  h3,.card strong,.tile strong{font-size:clamp(1.08rem,5vw,1.35rem)!important;line-height:1.14!important;}
  p,li,label,input,select,textarea,button,a{font-size:max(16px,1rem);}
}

/* Button rows: nicer on laptop, stacked on mobile. Avoid touching site navigation specifically. */
.actions,.links,.hero-actions,.result-actions,.card-actions,.guide-actions,.panel-actions,
.tool-actions,.support-actions,.route-controls,.button-row,.cta-row,.form-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
  max-width:100%!important;
}
.actions > *,.links > *,.hero-actions > *,.result-actions > *,.card-actions > *,
.guide-actions > *,.panel-actions > *,.tool-actions > *,.support-actions > *,
.route-controls > *,.button-row > *,.cta-row > *,.form-actions > *{
  min-width:0!important;
}
@media (min-width:760px){
  .card .actions > *,.tile .actions > *,.result-tile .actions > *,
  .card .links > *,.tile .links > *,.result-tile .links > *,
  .hero-actions > *,.result-actions > *,.card-actions > *,.guide-actions > *{
    flex:1 1 190px!important;
  }
}
@media (max-width:700px){
  .actions,.links,.hero-actions,.result-actions,.card-actions,.guide-actions,.panel-actions,
  .tool-actions,.support-actions,.route-controls,.button-row,.cta-row,.form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  .actions > *,.links > *,.hero-actions > *,.result-actions > *,.card-actions > *,
  .guide-actions > *,.panel-actions > *,.tool-actions > *,.support-actions > *,
  .route-controls > *,.button-row > *,.cta-row > *,.form-actions > *{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Form controls: stops bill tracker/provider/filter inputs overflowing on phones. */
input,select,textarea{
  max-width:100%!important;
  min-width:0!important;
}
input[type="text"],input[type="search"],input[type="number"],input[type="email"],input[type="tel"],input[type="date"],
select,textarea{
  width:100%;
  border-radius:16px;
}
.input-grid > label,.input-grid > div,.form-grid > label,.form-grid > div,.field,.field-row > *{
  min-width:0!important;
}
@media (max-width:700px){
  .field-row,.form-row,.input-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
}

/* Filters: deliberately smaller than main actions, wrapped, with no edge collision. */
.filters,.filter-row,.filterbar,.filter-bar,.guide-filters,.hh-filter-row,.badge-row,
.chip-row,.chips,.quick-filters,.provider-chips,.category-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  row-gap:9px!important;
  align-items:center!important;
  max-width:100%!important;
  padding-inline:0!important;
}
.filter-chip,.chip,.tag,.badge,.label,.status,.pill,.category-chip,.guide-filter,.hh-filter-chip,
.provider-chip{
  min-width:0!important;
  max-width:100%!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.18!important;
  box-shadow:none!important;
}
@media (max-width:420px){
  .filter-chip,.chip,.tag,.badge,.label,.status,.pill,.category-chip,.guide-filter,.hh-filter-chip,.provider-chip{
    font-size:.92rem!important;
    padding:7px 9px!important;
  }
}

/* Tables / wide lists: contained scroll instead of page overflow. */
table{max-width:100%;border-collapse:collapse;}
.table-wrap,.overflow-wrap,.responsive-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
main table:not(.no-responsive-table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Swipable/slider areas: keep natural scrolling on mobile and stop clipped tiles. */
.carousel,.slider,.swipe-row,.swipe-track,.tile-track,.results-track,.route-track{
  max-width:100%!important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.carousel > *,.slider > *,.swipe-row > *,.swipe-track > *,.tile-track > *,
.results-track > *,.route-track > *{scroll-snap-align:start;}

/* Floating accessibility controls: stay visible on Chromebook + mobile safe areas. */
.hh-accessibility-bar,.hh-v14-access,.accessibility-float,.floating-accessibility,.hh-access-float,
.accessibility-panel,.access-panel{
  max-width:calc(100vw - 18px)!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  z-index:9999!important;
}
@media (max-width:700px){
  .hh-accessibility-bar,.hh-v14-access,.accessibility-float,.floating-accessibility,.hh-access-float,
  .accessibility-panel,.access-panel{
    transform:none!important;
  }
}

/* Print: avoid blank chunks and keep support packs readable. */
@media print{
  html,body{background:#fff!important;overflow:visible!important;}
  main,.wrap,.container,.page-wrap,.shell,.content-wrap{max-width:100%!important;padding:0!important;}
  .card,.tile,.result-tile,.route-card,.guide-card,.saving-card,.provider-card,.dashboard-card,
  .support-card,.tool-card,.local-card,.activity-card,.bill-card,.support-tile,.result-card{
    box-shadow:none!important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .actions,.links,.hero-actions,.result-actions,.card-actions,.guide-actions,.panel-actions,
  .tool-actions,.support-actions,.route-controls,.filters,.filter-row,.quick-filters,
  .hh-accessibility-bar,.hh-v14-access,.accessibility-float,.floating-accessibility,.hh-access-float{
    display:none!important;
  }
}