/* ===================================
   LOGO RESPONSIVE FIXES - LRD CHIPS
   Unified Height, Width & Alignment
   =================================== */

/* ===================================
   BASE LOGO STYLING - ALL LOCATIONS
   =================================== */

/* Common logo container styling */
.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* Common logo image styling - CONSISTENT ACROSS ALL */
.logo img {
  height: 60px;           /* Base height - same for all desktop */
  width: auto;            /* Auto width to maintain aspect ratio */
  max-width: 200px;       /* Maximum width to prevent overflow */
  object-fit: contain;    /* Preserve aspect ratio */
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================================
   SPECIFIC LOCATION TARGETING
   =================================== */

/* 1. HEADER S1 - TOP HEADER LOGO (Main Desktop) */
.header-s1__top .p-left .logo,
.header-s1__top .p-left .logo a {
  display: flex;
  align-items: center;
}

.header-s1__top .p-left .logo img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* 2. HEADER S1 - BOTTOM HEADER (Navigation Bar) */
/* Hide bottom logo in header-s1, keep only top */
.header-s1__bottom > .logo {
  display: none !important;
}

/* But show it if it's in p-left (some layouts) */
.header-s1__bottom .p-left .logo {
  display: flex !important;
  align-items: center;
}

.header-s1__bottom .p-left .logo img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* 3. HEADER S2 - BOTTOM NAVIGATION LOGO (Home-2 Style) */
.header-s2 .header-s1__bottom .p-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-s2 .header-s1__bottom .p-left .logo {
  display: flex !important;
  align-items: center;
}

.header-s2 .header-s1__bottom .logo img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* 4. HEADER S3, S4, S6, S7 - BOTTOM LOGOS */
.header-s3__bottom .p-left .logo,
.header-s4__bottom .p-left .logo,
.header-s6__bottom .p-left .logo,
.header-s7 .header-s3__bottom .p-left .logo {
  display: flex;
  align-items: center;
}

.header-s3__bottom .p-left .logo img,
.header-s4__bottom .p-left .logo img,
.header-s6__bottom .p-left .logo img,
.header-s7 .header-s3__bottom .p-left .logo img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* 5. MOBILE HEADER LOGO */
.mobile-header {
  display: none; /* Hidden by default, shown on mobile */
}

.mobile-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.mobile-header__container .logo {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 60%; /* Prevent logo from taking too much space */
}

.mobile-header__container .logo a {
  display: flex;
  align-items: center;
}

.mobile-header__container .logo img {
  height: 45px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* 6. OFFCANVAS MENU LOGO (Hamburger Menu) */
#offcanvas-nav .m-nav .logo {
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#offcanvas-nav .m-nav .logo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#offcanvas-nav .m-nav .logo img {
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 7. FOOTER LOGOS (All Footer Variants) */
footer .logo,
.footer-s1 .widget-1 .logo,
.footer-s2 .widget-1 .logo,
.footer-s7 .logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

footer .logo img,
.footer-s1 .widget-1 .logo img,
.footer-s2 .widget-1 .logo img,
.footer-s7 .logo img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   All logos scale proportionally
   =================================== */

/* Large Desktop (1600px and below) */
@media only screen and (max-width: 1600px) {
  .logo img {
    height: 58px;
    max-width: 190px;
  }
  
  .mobile-header__container .logo img {
    height: 45px;
    max-width: 180px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 48px;
    max-width: 180px;
  }
}

/* Desktop/Laptop (1200px and below) */
@media only screen and (max-width: 1200px) {
  .logo img {
    height: 55px;
    max-width: 180px;
  }
  
  .mobile-header__container .logo img {
    height: 42px;
    max-width: 170px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 45px;
    max-width: 170px;
  }
}

/* Tablet (992px and below) */
@media only screen and (max-width: 992px) {
  /* Hide all desktop headers */
  .header-s1,
  .header-s2,
  .header-s3,
  .header-s4,
  .header-s6,
  .header-s7 {
    display: none !important;
  }
  
  /* Show mobile header */
  .mobile-header {
    display: block !important;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
  }
  
  /* Mobile header logo */
  .mobile-header__container .logo img {
    height: 40px;
    max-width: 160px;
  }
  
  /* Offcanvas logo */
  #offcanvas-nav .m-nav .logo img {
    height: 42px;
    max-width: 160px;
  }
  
  /* Footer logos - center on tablet */
  footer .logo,
  .footer-s1 .widget-1 .logo,
  .footer-s2 .widget-1 .logo,
  .footer-s7 .logo {
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
  }
  
  footer .logo img,
  .footer-s1 .widget-1 .logo img,
  .footer-s2 .widget-1 .logo img,
  .footer-s7 .logo img {
    height: 52px;
    max-width: 170px;
  }
}

/* Mobile Landscape (767px and below) */
@media only screen and (max-width: 767px) {
  .mobile-header__container .logo img {
    height: 38px;
    max-width: 150px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 40px;
    max-width: 150px;
  }
  
  footer .logo img,
  .footer-s1 .widget-1 .logo img,
  .footer-s2 .widget-1 .logo img,
  .footer-s7 .logo img {
    height: 48px;
    max-width: 160px;
  }
}

/* Mobile Portrait (576px and below) */
@media only screen and (max-width: 576px) {
  .mobile-header__container .logo img {
    height: 36px;
    max-width: 140px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 38px;
    max-width: 140px;
  }
  
  footer .logo img,
  .footer-s1 .widget-1 .logo img,
  .footer-s2 .widget-1 .logo img,
  .footer-s7 .logo img {
    height: 45px;
    max-width: 150px;
  }
}

/* Small Mobile (425px and below) */
@media only screen and (max-width: 425px) {
  .mobile-header__container .logo img {
    height: 34px;
    max-width: 130px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 36px;
    max-width: 130px;
  }
  
  footer .logo img,
  .footer-s1 .widget-1 .logo img,
  .footer-s2 .widget-1 .logo img,
  .footer-s7 .logo img {
    height: 42px;
    max-width: 140px;
  }
}

/* Extra Small Mobile (375px and below) */
@media only screen and (max-width: 375px) {
  .mobile-header__container .logo img {
    height: 32px;
    max-width: 120px;
  }
  
  #offcanvas-nav .m-nav .logo img {
    height: 34px;
    max-width: 120px;
  }
  
  footer .logo img,
  .footer-s1 .widget-1 .logo img,
  .footer-s2 .widget-1 .logo img,
  .footer-s7 .logo img {
    height: 40px;
    max-width: 130px;
  }
}

/* ===================================
   SPECIFIC PAGE/THEME FIXES
   =================================== */

/* Home-1 Mobile Header */
body#home-1 .mobile-header {
  background: #000060 !important;
}

/* Home-2 Mobile Header */
body#home-2 .mobile-header {
  background: #050b47 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact Page Mobile Header */
body#contact .mobile-header {
  background: #fff !important;
}

/* Sticky Header Logo Transition (if applicable) */
.header-s3.sticky .header-bottom-container .logo img,
.header-s7.sticky .header-bottom-container .logo img {
  height: 50px;
  max-width: 180px;
  transition: all 0.3s ease;
}

/* ===================================
   UTILITY FIXES
   =================================== */

/* Prevent logo from causing layout shifts */
.logo {
  min-height: 0;
}

/* Ensure logo doesn't break container */
.logo img {
  display: block;
  max-width: 100%;
}

/* Remove any unwanted margins/paddings */
.logo,
.logo a,
.logo img {
  margin: 0;
  padding: 0;
}

/* Smooth transitions for responsive changes */
.logo img {
  transition: height 0.3s ease, max-width 0.3s ease;
}

/* Print styles - ensure logo looks good when printed */
@media print {
  .logo img {
    height: 50px !important;
    max-width: 180px !important;
  }
  
  .mobile-header,
  #offcanvas-nav {
    display: none !important;
  }
}