/* Best Junk Removal - Clear Haul: responsive layer.
   Loaded after clear-haul.css. Everything below is tablet/mobile only. */

/* ---------- footer columns ---------- */
.bjr-footer-cols{display:grid!important;
  grid-template-columns:1.5fr 1fr 1.1fr 1.3fr;align-items:flex-start}
.bjr-footer-cols > .elementor-element{width:auto!important;max-width:none!important}
@media(max-width:1024px){
  .bjr-footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .bjr-footer-cols{grid-template-columns:1fr}
}

/* ---------- review card head: avatar never wraps off ---------- */
.bjr-reviewhead{display:flex!important;flex-wrap:nowrap!important;align-items:center}
.bjr-reviewhead > .elementor-element:first-child{flex:0 0 46px!important;width:46px!important}
.bjr-reviewhead > .elementor-element:last-child{flex:1 1 auto!important;width:auto!important;min-width:0}

/* ================= TABLET ================= */
@media(max-width:1024px){
  /* hide the WIDGET WRAPPER - hiding the inner <a> leaves an empty flex child */
  .bjr-header-inner .elementor-widget-xpro-button{display:none!important}
  .bjr-hero-row > .e-con-inner{justify-items:start}
  /* the decorative glow is sized for a wide panel - shrink it once stacked */
  .bjr-quote-panel::before{width:260px!important;height:260px!important;
    top:-110px!important;right:-90px!important}
}

/* the logo + wordmark must stay side by side at every width */
.bjr-header-inner > .e-con-inner > .elementor-element:first-child{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center!important;gap:10px!important;width:auto!important}
.bjr-header-inner > .e-con-inner > .elementor-element:first-child > .elementor-element{
  width:auto!important;flex:0 0 auto!important}
.bjr-header-inner .xpro-site-logo,
.bjr-header-inner .xpro-site-logo a{display:block;line-height:0}

/* ================= MOBILE ================= */
@media(max-width:767px){

  /* typography scales down before layout does */
  .bjr-article p,.bjr-article li{font-size:16px}

  /* stacked call/whatsapp buttons become full-width tap targets */
  .bjr-btn{width:100%}
  .bjr-btn .elementor-button{width:100%;justify-content:center;
    padding-top:16px!important;padding-bottom:16px!important;min-height:52px}

  /* hero */
  .bjr-hero-row > .e-con-inner{gap:24px}
  .bjr-hero-visual{min-height:0}
  .bjr-hero-float img{max-width:260px}
  .bjr-hero-trust p{font-size:12.5px;line-height:1.7}

  /* decorative glow must not sit on top of the form copy */
  .bjr-quote-panel::before{width:200px!important;height:200px!important;
    top:-90px!important;right:-70px!important;opacity:.7}

  /* review avatar keeps its circle instead of stretching */
  .bjr-reviewhead > .elementor-element:first-child{
    flex:0 0 46px!important;width:46px!important;height:46px!important;
    min-height:46px!important;max-height:46px!important;border-radius:50%!important}

  /* proof chips read as one tidy card stack, not stray icons */
  .bjr-proofrow{gap:8px!important;width:100%}
  .bjr-proofrow .bjr-chipbox{flex:1 1 100%!important;
    background:var(--bjr-surface);border:1px solid var(--bjr-line);
    border-radius:12px;padding:11px 13px}
  .bjr-proofrow .elementor-icon-box-title{font-size:14px!important}
  .bjr-proofrow .elementor-icon-box-description{font-size:12.5px!important}
  .bjr-proofrow .elementor-icon-box-wrapper{gap:0}

  /* cards get tighter padding so copy keeps its measure */
  .bjr-card{border-radius:16px}
  .bjr-quote-panel{border-radius:18px}

  /* trust strip: two up with dividers between rows, not columns */
  .bjr-trust{padding:18px 10px!important;border-right:none!important;
    border-bottom:1px solid var(--bjr-line)}
  .bjr-trust .elementor-icon-box-title{font-size:13.5px!important}
  .bjr-trust .elementor-icon-box-description{font-size:12px!important}

  /* process steps sit flush left, no oversized numerals */
  .bjr-step{padding-left:0!important;padding-right:0!important}

  /* forms are the main mobile conversion path - give them room */
  .bjr-form input[type=text],.bjr-form input[type=email],.bjr-form input[type=tel],
  .bjr-form select,.bjr-form textarea{font-size:16px!important;padding:14px 15px!important}
  .bjr-form .wpforms-field-row{flex-direction:column;gap:0}
  .bjr-form .bjr-half{width:100%!important}

  /* maps shorter so they don't eat the screen */
  .elementor-widget-google_maps iframe{height:220px!important}

  /* recent-jobs media */
  .bjr-job-tag{top:10px;left:10px;font-size:11px}
  .bjr-job-price{font-size:20px}

  /* footer */
  .bjr-footer-cols{gap:30px!important}
  .bjr-footer .elementor-icon-list-item a,
  .bjr-footer .elementor-icon-list-text{font-size:15px}

  /* blog cards */
  .bjr-postgrid img{height:180px}
}

/* ---------- very small phones ---------- */
@media(max-width:400px){
  .bjr-hero-float img{max-width:210px}
  .bjr-brand-name .xpro-heading-title{font-size:15px!important}
  .bjr-header-inner .xpro-site-logo img{width:34px}
}

/* ---------- landscape phones: keep the header from eating the viewport ---------- */
@media(max-height:520px) and (orientation:landscape){
  .bjr-header-outer{position:absolute}
}

/* ---------- keep card content left-aligned when stacked ---------- */
@media(max-width:767px){
  .bjr-card .elementor-icon-box-wrapper{text-align:left}
  .bjr-card .elementor-icon-box-icon{margin-left:0;margin-right:auto}
  .bjr-card .elementor-icon-box-title,
  .bjr-card .elementor-icon-box-description{text-align:left}
  .bjr-step{text-align:left}
  .bjr-quote{text-align:left}
}
/* ---------- header: keep the bar to one tidy row on phones ---------- */
@media(max-width:767px){
  .bjr-header-inner{min-height:60px}
  .bjr-header-inner > .e-con-inner{
    gap:10px!important;
    padding-top:0!important;padding-bottom:0!important}
  .bjr-header-inner .xpro-site-logo img{width:34px}
  .bjr-brand-name .xpro-heading-title{font-size:16px!important}
  /* hamburger sits flush right */
  .bjr-header-inner .elementor-widget-xpro-horizontal-menu{justify-self:end}
  .bjr-header-inner .xpro-elementor-horizontal-menu-toggler-wrapper{
    display:flex;justify-content:flex-end;margin-left:auto}
  .bjr-header-inner .xpro-elementor-horizontal-menu-toggler{
    padding:0;background:transparent;border:0;line-height:0;cursor:pointer}
  .bjr-header-inner .xpro-elementor-horizontal-menu-toggler svg{
    width:24px;height:24px;fill:var(--bjr-ink)}
}
/* ---------- mobile off-canvas menu panel ---------- */
@media(max-width:1024px){
  .bjr-header-inner .xpro-elementor-horizontal-navbar-nav{gap:0}
  .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet
    .xpro-elementor-horizontal-navbar{padding:24px 20px}
  .xpro-elementor-horizontal-navbar-nav .nav-item{border-bottom:1px solid rgba(11,28,44,.08)}
  .xpro-elementor-horizontal-navbar-nav .nav-item:last-child{border-bottom:none}
  .xpro-elementor-horizontal-navbar-nav .menu-link{
    padding:14px 2px!important;font:600 16px Manrope,system-ui,sans-serif!important;
    color:var(--bjr-ink)!important}
  .xpro-elementor-horizontal-navbar-nav .nav-item:hover > .menu-link,
  .xpro-elementor-horizontal-navbar-nav .current-menu-item > .menu-link{color:var(--bjr-accent)!important}
  .xpro-elementor-horizontal-navbar-nav .dropdown-menu .menu-link{
    font-size:15px!important;color:var(--bjr-body)!important;padding-left:14px!important}
  .xpro-elementor-horizontal-menu-close svg{width:20px;height:20px;fill:var(--bjr-ink)}
  .xpro-elementor-horizontal-menu-overlay{background:rgba(11,28,44,.45)}
}