/* JunkRemovalCanada V34.3 richer local detail + mobile icon fix — 2026-10-06 */
:root{--local-red:var(--red,#df5a4f);--local-red-soft:var(--red-soft,#fff0ed)}

/* Keep the flat V34.2 rows, but preserve an icon column so text can never slide under icons. */
.local-fact-card{position:relative!important}
.local-fact-card.fact-rule::before{background:var(--local-red-soft)!important;color:var(--local-red)!important;border:1px solid rgba(223,90,79,.18)!important}
.local-fact-card.fact-rule span{color:#8f3832!important}

/* Red is a deliberate secondary accent, matching the homepage. */
.local-utility-section h2::after{content:"";display:block;width:58px;height:3px;margin-top:9px;border-radius:99px;background:var(--local-red)}
.local-detail-section-head-v34 .eyebrow-v34{color:var(--local-red)!important}
.local-topic-detail h3::before{content:"";display:block;position:absolute;left:0;top:.28rem;width:4px;height:1.15rem;border-radius:99px;background:var(--local-red)}
.material-route-row dt{color:#963d35!important}

/* Information that was previously hidden in accordions is visible again, but without boxes. */
.local-topic-detail{position:relative;margin:0;padding:18px 2px 19px;border-bottom:1px solid #dfe7e4}
.local-detail-section-head-v34 + .local-topic-detail{border-top:1px solid #dfe7e4}
.local-topic-detail h3{position:relative;margin:0 0 8px;padding-left:13px;font:800 1rem/1.28 Arial,Helvetica,sans-serif!important;color:#173a30!important;letter-spacing:-.01em}
.local-topic-detail p{margin:7px 0;color:#324b42;font-size:.95rem;line-height:1.62}
.local-topic-detail ul,.local-topic-detail ol{margin:8px 0 0;padding-left:1.2rem;color:#324b42}
.local-topic-detail li{margin:.38rem 0;line-height:1.55}
.local-topic-detail a{color:#0b6d51;font-weight:750}

/* Make detailed rows easy to scan without returning to a boxy card grid. */
.local-utility-row.restored-fact,.local-utility-row.material-route-row{background:linear-gradient(90deg,rgba(255,240,237,.42),transparent 35%)}
.local-utility-row dt{line-height:1.35}

@media(max-width:700px){
  /* Critical bug fix: V34.2 removed left padding but an absolute icon remained. */
  .local-fact-card{padding:14px 0 14px 47px!important;min-height:52px!important}
  .local-fact-card::before{position:absolute!important;left:0!important;top:13px!important;width:31px!important;height:31px!important;margin:0!important;display:grid!important;place-items:center!important}
  .local-fact-card span,.local-fact-card strong{display:block!important;grid-column:auto!important}
  .local-fact-card span{margin-top:0!important}
  .local-topic-detail{padding:16px 0 17px}
  .local-topic-detail h3{font-size:.96rem!important}
  .local-topic-detail p,.local-topic-detail li{font-size:.92rem!important;line-height:1.58}
  .local-utility-row.restored-fact,.local-utility-row.material-route-row{background:linear-gradient(90deg,rgba(255,240,237,.55),transparent 60%)}
}


/* V34.4 mobile overlap hardening — use a true grid icon column, never absolute overlap. */
@media(max-width:700px){
  .local-fact-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    row-gap:3px!important;
    align-items:start!important;
    padding:14px 0!important;
    min-height:0!important;
  }
  .local-fact-card::before{
    position:static!important;
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    justify-self:start!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
  }
  .local-fact-card span,
  .local-fact-card strong{
    grid-column:2!important;
    min-width:0!important;
    width:auto!important;
    padding:0!important;
    margin-left:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .local-fact-card span{grid-row:1!important;margin:0!important;line-height:1.25!important}
  .local-fact-card strong{grid-row:2!important;margin:0!important}
}
