/* Wasla Header/Brand Polish 2.3.7
 * Visual corrections only. No brand colors, backgrounds, typography family,
 * menu templates, logos, URLs, Hero, or WordPress/WPML settings are changed.
 * This style sheet is loaded AFTER both the child-theme and optional CTA CSS.
 */

/* Official vertically stacked PDF logo: increase legibility while shrinking
   the unused vertical padding in Indofact's existing Header 6 middle row. */
body.wasla-branding-active .header6.mep-site-header .mep-header-middle {
  padding-block: 6px !important;
}
body.wasla-branding-active .header6.mep-site-header .mep-header-middle__inner {
  gap: 20px;
}
body.wasla-branding-active .header6.mep-site-header .logoSec {
  flex: 0 0 auto;
  max-width: min(190px, 36%);
  min-width: 0;
}
body.wasla-branding-active .header6.mep-site-header .logoSec .wasla-brand-header-picture {
  max-width: 100%;
}
body.wasla-branding-active .header6.mep-site-header .logoSec .wasla-brand-header-image {
  display: block;
  width: auto !important;
  height: 104px !important;
  max-height: 104px !important;
  max-width: 100% !important;
  object-fit: contain;
}
body.wasla-branding-active .header6.mep-site-header .addressSec {
  min-width: 0;
}

/* Both links and the invitation belong to ONE visual group, rather than
   sitting at opposite edges of the full 1170px strip. Keep plugin order,
   destination URLs, fonts, and the original gold/navy button colors. */
.wasla-contact-bar .wasla-contact-bar__inner {
  justify-content: center;
  gap: clamp(12px, 2vw, 26px);
  padding-block: 8px;
}
.wasla-contact-bar .wasla-contact-bar__hint {
  flex: 0 1 auto;
  max-width: 290px;
  margin: 0;
  text-align: start;
}
.wasla-contact-bar .wasla-contact-bar__actions {
  flex: 0 1 auto;
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 991px) {
  body.wasla-branding-active .header6.mep-site-header .mep-header-middle {
    padding-block: 6px !important;
  }
  body.wasla-branding-active .header6.mep-site-header .logoSec .wasla-brand-header-image {
    height: 92px !important;
    max-height: 92px !important;
  }
}

/* Mobile: same Header 6 elements, but logo and phone fit on one compact row.
   Do not change the Bootstrap navigation or WPML mobile language switcher. */
@media (max-width: 767px) {
  body.wasla-branding-active .header6.mep-site-header .mep-header-middle {
    padding-block: 6px !important;
  }
  body.wasla-branding-active .header6.mep-site-header .mep-header-middle__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: start;
  }
  body.wasla-branding-active .header6.mep-site-header .logoSec {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 45% !important;
  }
  body.wasla-branding-active .header6.mep-site-header .logoSec .logo {
    justify-content: flex-start;
  }
  body.wasla-branding-active .header6.mep-site-header .logoSec .wasla-brand-header-image {
    height: 86px !important;
    max-height: 86px !important;
  }
  body.wasla-branding-active .header6.mep-site-header .addressSec {
    flex: 0 1 auto;
    max-width: 55%;
    margin-top: 0;
    min-width: 0;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info li.phnClass {
    gap: 7px;
    min-width: 0;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info strong,
  body.wasla-branding-active .header6.mep-site-header .header-info a {
    font-size: 12px;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info a {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  body.wasla-branding-active .header6.mep-site-header .mep-header-info-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .wasla-contact-bar .wasla-contact-bar__inner {
    padding-block: 8px;
  }
  .wasla-contact-bar .wasla-contact-bar__actions {
    width: 100%;
    max-width: 680px;
  }
}

@media (max-width: 390px) {
  body.wasla-branding-active .header6.mep-site-header .logoSec .wasla-brand-header-image {
    height: 75px !important;
    max-height: 75px !important;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info li.phnClass {
    gap: 5px;
  }
  body.wasla-branding-active .header6.mep-site-header .header-info a {
    font-size: 11px;
  }
}

@media (max-width: 340px) {
  body.wasla-branding-active .header6.mep-site-header .header-info li.phnClass strong {
    display: none;
  }
}