/* =========================================================
   三久太陽能熱水器｜坤晟企業行
   導覽列（Header Nav）與頁尾（Footer）獨立樣式檔
   nav-footer.css
========================================================= */

/* ============ Header / Nav ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(250,251,253,.95);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 2px rgba(11,30,48,.05);
  transition:all .4s ease;
  isolation:isolate;
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  height:4.5rem;
}
@media (min-width:768px){.nav-inner{height:5rem;}}

.nav-logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.nav-logo img{height:2.75rem;width:auto;object-fit:contain;}

.nav-menu{display:none;align-items:center;gap:.15rem;margin-left:auto;}
@media (min-width:1024px){.nav-menu{display:flex;}}

.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:.35rem;
  padding:.6rem .85rem;border-radius:.5rem;
  font-size:.83rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  color:var(--foreground-700);transition:all .25s ease;
}
.nav-link:hover,.nav-link.active{color:var(--primary-600);}
.nav-link.active{background:var(--primary-50);font-weight:700;}
.nav-link i.caret{font-size:.65rem;transition:transform .25s ease;}
.nav-item:hover .nav-link i.caret{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;top:100%;left:0;min-width:260px;
  background:#fff;border:1px solid var(--background-200);
  border-radius:.85rem;box-shadow:0 12px 32px rgba(11,30,48,.14);
  padding:.6rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:all .25s ease;
}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(4px);}
.nav-dropdown a{
  display:block;padding:.6rem .75rem;border-radius:.5rem;
  font-size:.82rem;color:var(--foreground-700);
}
.nav-dropdown a:hover{background:var(--primary-50);color:var(--primary-600);}
.nav-dropdown a.active{background:var(--primary-50);color:var(--primary-600);font-weight:700;}

.nav-actions{display:flex;align-items:center;gap:.75rem;}
.nav-phone{
  display:none;align-items:center;gap:.5rem;
  padding:.55rem 1.15rem;border-radius:9999px;
  font-size:.8rem;font-weight:600;background:var(--primary-600);color:#fff;white-space:nowrap;
}
@media (min-width:768px){.nav-phone{display:inline-flex;}}
.nav-phone:hover{background:var(--primary-700);}

.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:.5rem;border:1px solid var(--background-200);
  background:#fff;color:var(--foreground-800);font-size:1.05rem;cursor:pointer;
}
@media (min-width:1024px){.nav-toggle{display:none;}}

/* ============ Mobile Nav ============ */
.mobile-nav{
  position:fixed;inset:0;top:4.5rem;z-index:999999;
  background:#ffffff;transform:translateX(100%);
  transition:transform .35s ease;overflow-y:auto;
  padding:1rem 1.25rem 3rem;
  padding-bottom:100px;
}
.mobile-nav.open{transform:translateX(0);}
@media (min-width:1024px){.mobile-nav{display:none;}}

.m-nav-item{border-bottom:1px solid var(--background-200);}
.m-nav-row{display:flex;align-items:center;justify-content:space-between;padding:1rem .25rem;}
.m-nav-row a{font-size:.98rem;font-weight:500;color:var(--foreground-800);flex:1;}
.m-nav-row a.active{color:var(--primary-600);}
.m-nav-toggle-btn{
  width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;
  color:var(--foreground-500);background:none;border:none;font-size:.85rem;cursor:pointer;
  transition:transform .25s ease;
}
.m-nav-item.open .m-nav-toggle-btn{transform:rotate(180deg);}
.m-nav-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;padding-left:.75rem;}
.m-nav-item.open .m-nav-sub{max-height:400px;padding-bottom:.75rem;}
.m-nav-sub a{
  display:block;padding:.65rem .75rem;font-size:.87rem;color:var(--foreground-600);border-radius:.5rem;
}
.m-nav-sub a:hover{background:var(--primary-50);color:var(--primary-600);}
.m-nav-sub a.active{font-weight:700;}
.m-nav-phone{
  margin-top:1.5rem;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem;border-radius:9999px;background:var(--primary-600);color:#fff;font-weight:600;font-size:.9rem;
}

/* ============ Footer ============ */
.site-footer{background:var(--background-100);border-top:1px solid var(--background-200);}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  max-width:1280px;margin:0 auto;padding:3.5rem 1.5rem;
}
@media (min-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;}}

.footer-brand .flogo{display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem;}
.footer-brand .flogo img{height:3.5rem;width:auto;object-fit:contain;}
.footer-brand p{font-size:.85rem;color:var(--foreground-600);line-height:1.75;}

.footer-col h4{
  font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--primary-600);
  margin-bottom:1.25rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem;}
.footer-col a{font-size:.85rem;color:var(--foreground-600);transition:color .2s;}
.footer-col a:hover{color:var(--primary-600);}

.footer-contact-item{display:flex;align-items:flex-start;gap:.75rem;}
.footer-contact-item i{color:var(--primary-500);font-size:.85rem;margin-top:.25rem;width:1.1rem;flex-shrink:0;}
.footer-contact-item .t1{font-size:.85rem;color:var(--foreground-800);font-weight:500;}
.footer-contact-item .t2{font-size:.72rem;color:var(--foreground-500);}

.footer-social a{
  display:inline-flex;align-items:center;gap:.65rem;font-size:.85rem;color:var(--foreground-600);
}
.footer-social .icon-circle{
  width:2rem;height:2rem;border-radius:50%;background:#1877F2;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.footer-bottom{border-top:1px solid var(--background-200);}
.footer-bottom-inner{
  max-width:1280px;margin:0 auto;padding:1.25rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--foreground-500);
}
@media (min-width:640px){.footer-bottom-inner{flex-direction:row;}}