/* ============================================================
   Perfect Pane — Mobile experience layer
   Loads AFTER the page CSS so these rules win.
   Covers: hamburger drawer, sticky action bar, phone polish.
   ============================================================ */

/* ---- Hamburger button (hidden on desktop, shown when nav is) ---- */
.pp-hamburger{ display:none; }
.pp-mobile-bar{ display:none; }

@media (max-width: 900px){

  /* Show the hamburger; hide the desktop "Get a Free Quote" button in the
     header to make room (the drawer + sticky bar both carry that CTA). */
  .pp-hamburger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0 11px; flex:none;
    background:transparent; border:1.5px solid var(--line); border-radius:10px;
    cursor:pointer; order:-1;
  }
  .pp-hamburger span{
    display:block; height:2.5px; width:100%; border-radius:2px;
    background:var(--navy); transition:transform .25s ease, opacity .2s ease;
  }
  html.dark .pp-hamburger{ border-color:var(--line); }
  html.dark .pp-hamburger span{ background:#C4CEE6; }

  /* Turn the bars into an X while the drawer is open */
  html.pp-drawer-open .pp-hamburger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  html.pp-drawer-open .pp-hamburger span:nth-child(2){ opacity:0; }
  html.pp-drawer-open .pp-hamburger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  /* De-clutter the header on phones */
  .header-right > .btn{ display:none; }
  .header-right{ gap:10px; }
}

/* ---- Slide-in drawer ---- */
.pp-drawer-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,16,30,0.5); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s ease;
}
html.pp-drawer-open .pp-drawer-backdrop{ opacity:1; }

.pp-drawer{
  position:fixed; top:0; right:0; z-index:1001;
  width:86%; max-width:360px; height:100%;
  background:var(--white); color:var(--ink);
  box-shadow:-18px 0 50px rgba(6,10,40,0.28);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,.0,.2,1);
  overflow:hidden;
}
html.pp-drawer-open .pp-drawer{ transform:translateX(0); }
html.dark .pp-drawer{ background:#121926; }

.pp-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
  flex:none; background:inherit;
}
.pp-drawer-title{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.05rem;
  letter-spacing:.02em; color:var(--navy);
}
html.dark .pp-drawer-title{ color:#DCE6F5; }
.pp-drawer-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:none; background:transparent;
  color:var(--navy); cursor:pointer; border-radius:10px;
}
.pp-drawer-close:hover{ background:var(--blue-soft); }
html.dark .pp-drawer-close{ color:#C4CEE6; }

/* Drawer nav — flatten the desktop hover dropdown into a static list.
   `display:block` is REQUIRED: the drawer's list is a <nav>, and the site's
   `@media(max-width:900px){nav{display:none}}` rule would otherwise hide it. */
.pp-drawer-nav{ display:block; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 12px; }
.pp-drawer-nav ul{ display:block; list-style:none; margin:0; padding:0; }
.pp-drawer-nav li{ list-style:none; }
.pp-drawer-nav a{
  display:flex; align-items:center; gap:8px;
  padding:14px 12px; border:0; border-radius:10px;
  font-weight:600; font-size:1.02rem; color:var(--navy-deep);
  border-bottom:1px solid var(--line);
}
.pp-drawer-nav a:hover,
.pp-drawer-nav a:active{ background:var(--blue-soft); color:var(--navy); }
html.dark .pp-drawer-nav a{ color:#C4CEE6; }

/* The "Services" parent + its caret */
.pp-drawer-nav .nav-services > a{ font-weight:700; }
.pp-drawer-nav .caret{ display:none; }

/* Force the services submenu to sit open and inline */
.pp-drawer-nav .services-menu{
  position:static; opacity:1; visibility:visible; transform:none;
  display:block; min-width:0; margin:0; padding:0;
  border:0; border-radius:0; box-shadow:none; background:transparent;
}
.pp-drawer-nav .services-menu a{
  padding-left:28px; font-size:0.96rem; font-weight:600; color:var(--slate);
}
.pp-drawer-nav .services-menu a::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex:none; margin-right:4px;
}

/* Drawer CTA block */
.pp-drawer-cta{ flex:none; padding:18px 16px calc(14px + env(safe-area-inset-bottom)); display:grid; gap:12px; border-top:1px solid var(--line); }
.pp-drawer-cta .btn{ width:100%; padding:15px; font-size:1rem; }
.pp-drawer-quote{ background:var(--blue); border-color:var(--blue); color:var(--navy-deep); }
.pp-drawer-call{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---- Sticky bottom action bar (phones) ---- */
@media (max-width: 900px){
  .pp-mobile-bar{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(6,10,40,0.12);
    transform:translateY(0); transition:transform .3s ease;
  }
  html.dark .pp-mobile-bar{ background:rgba(18,25,38,0.94); }

  .pp-mobile-bar a{
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:52px; padding:12px 10px; border-radius:12px;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.01em;
  }
  .pp-bar-call{ background:var(--navy); color:#fff; border:2px solid var(--navy); }
  .pp-bar-quote{ background:var(--blue); color:var(--navy-deep); border:2px solid var(--blue); }
  .pp-bar-call svg, .pp-bar-quote svg{ flex:none; }

  /* Slide the bar out of the way while the quote form is on screen */
  html.pp-form-visible .pp-mobile-bar{ transform:translateY(120%); }

  /* Keep the sticky bar from covering the footer / page end */
  body{ padding-bottom:76px; }
  html.pp-form-visible body{ padding-bottom:0; }
}

/* ============================================================
   Phone polish — tap targets, inputs, spacing
   ============================================================ */
@media (max-width: 900px){

  /* The `.reverse` service grids (Solar Panel + Gutter Cleaning) kept their
     2-column desktop layout on phones because `.service-detail-grid.reverse`
     out-specifies the base 1fr rule — cramming text into a narrow strip that
     runs way past the images. Force every service grid to a single column. */
  .service-detail-grid,
  .service-detail-grid.reverse{ grid-template-columns:1fr; }

  /* 16px inputs stop iOS from auto-zooming when a field is focused */
  input, select, textarea{ font-size:16px !important; }

  /* Comfortable tap targets on the quote form */
  .field input, .field select, .field textarea{ padding:14px 14px; }
  .checkbox-row{ padding:6px 0; }
  .checkbox-row input[type="checkbox"]{ width:22px; height:22px; }
  .checkbox-row label{ font-size:1rem; }

  /* Bigger primary buttons, easy to hit with a thumb */
  .btn{ min-height:48px; }

  /* Tap-to-call icon in the header stays a real target */
  .header-phone{ min-width:44px; min-height:44px; justify-content:center; }
}

@media (max-width: 600px){
  /* Stack the hero CTAs full-width so each is an easy thumb target */
  .banner-ctas{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .banner-ctas .btn{ width:100%; }
  .banner-inner{ padding-left:16px; padding-right:16px; }

  /* Roomier sections without the desktop's tall padding */
  section{ padding:52px 0; }
  .wrap{ padding:0 18px; }

  /* Hero service icons: tidy 2-up grid instead of a cramped wrap */
  .banner-icons{ display:grid; grid-template-columns:1fr 1fr; gap:4px 0; width:100%; }
  .banner-icon-item{ padding:12px 8px; }
  .banner-icon-item span{ max-width:none; font-size:0.82rem; }

  /* Service page hero + in-page CTAs go full width too */
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }

  /* Stat card numbers shouldn't overflow small screens */
  .stat-card .stat-num{ font-size:1.7rem; white-space:normal; }
}