/* Keep the header and navigation in the viewport without the legacy
   hide/show jump. The values are measured and updated by afem-header-fix.js. */
body.sticky-header {
  --afem-header-full-height: 84px;
  --afem-menu-height: 80px;
  --afem-header-compact-height: 84px;
}

body.sticky-header #sp-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--afem-header-full-height);
  max-height: var(--afem-header-full-height);
  overflow: hidden;
  box-sizing: border-box;
  z-index: 10001;
  transition: height 280ms ease, max-height 280ms ease, padding 280ms ease, box-shadow 280ms ease;
}

body.sticky-header #sp-main-menu,
body.sticky-header #sp-main-menu.menu-fixed,
body.sticky-header #sp-main-menu.menu-fixed-out {
  position: fixed !important;
  top: var(--afem-header-full-height) !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--afem-menu-height);
  z-index: 10000;
  transition: top 280ms ease, box-shadow 280ms ease;
}

body.sticky-header .body-innerwrapper {
  overflow: visible !important;
  padding-top: calc(var(--afem-header-full-height) + var(--afem-menu-height));
}

body.sticky-header .nav-placeholder {
  display: none !important;
  height: 0 !important;
}

body.afem-header-compact #sp-header {
  height: var(--afem-header-compact-height);
  max-height: var(--afem-header-compact-height);
  box-shadow: 0 2px 12px rgba(11, 45, 92, 0.12);
}

body.afem-header-compact #sp-main-menu,
body.afem-header-compact #sp-main-menu.menu-fixed,
body.afem-header-compact #sp-main-menu.menu-fixed-out {
  top: var(--afem-header-compact-height) !important;
}

/* Higher specificity than the legacy mobile 72px rule. */
body.sticky-header.afem-header-compact #sp-main-menu,
body.sticky-header.afem-header-compact #sp-main-menu.menu-fixed,
body.sticky-header.afem-header-compact #sp-main-menu.menu-fixed-out {
  top: var(--afem-header-compact-height) !important;
}

/* Desktop compact state: keep both contact details and actions, just tighter. */
@media only screen and (min-width: 992px) {
  body.afem-header-compact #sp-header #sp-logo .logo {
    min-height: var(--afem-header-compact-height);
  }

  body.afem-header-compact #sp-header #sp-logo .logo img {
    max-width: 220px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-column {
    gap: 5px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info {
    display: flex !important;
    gap: 14px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li {
    font-size: 13px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    min-height: 30px;
    padding-right: 14px !important;
    padding-left: 14px !important;
    font-size: 11px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li {
    font-size: 12px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }
}

@media only screen and (max-width: 991px) {
  body.sticky-header {
    --afem-header-full-height: 221px;
    --afem-menu-height: 56px;
    --afem-header-compact-height: 152px;
  }

  /* Phone and email share one compact row at every mobile width. */
  #sp-header #sp-contact .sp-contact-info {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    height: auto !important;
    padding: 0 !important;
  }

  #sp-header #sp-contact .sp-contact-info li {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
    max-width: none !important;
    height: 30px;
    margin: 0 !important;
    font-size: 12px;
  }

  #sp-header #sp-contact .sp-contact-info li i {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    font-size: 13px;
  }

  #sp-header #sp-contact .sp-contact-info li a {
    font-size: 12px;
    white-space: nowrap;
  }

  /* Compact mobile state keeps the complete contact/action block readable. */
  body.afem-header-compact #sp-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.afem-header-compact #sp-header #sp-logo .logo {
    min-height: 0;
    padding: 0 0 4px;
  }

  body.afem-header-compact #sp-header #sp-logo .logo img {
    max-width: 190px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-column {
    gap: 8px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-module {
    display: block !important;
    height: 36px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px;
    gap: 8px !important;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    width: auto;
    min-height: 32px;
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 11px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    height: 26px;
    padding: 0 !important;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    max-width: none !important;
    height: 30px;
    margin: 0 !important;
    font-size: 11px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 360px) {
  #sp-header #sp-contact .sp-contact-info {
    gap: 4px;
  }

  #sp-header #sp-contact .sp-contact-info li a {
    font-size: 11px;
  }
}

/* On phones the consultation label can use two short lines, freeing enough
   horizontal room for both logos without reducing their legibility. */
@media only screen and (max-width: 991px) {
  #sp-header #sp-contact .afem-header-actions a:not(.afem-whatsapp-action) {
    box-sizing: border-box;
    flex: 0 0 68px;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px;
    padding-right: 1px !important;
    padding-left: 1px !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.05 !important;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a:not(.afem-whatsapp-action) {
    flex-basis: 68px;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px;
  }
}

@media only screen and (max-width: 360px) {
  #sp-header #sp-contact .afem-header-actions a:not(.afem-whatsapp-action) {
    flex-basis: 64px;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a:not(.afem-whatsapp-action) {
    flex-basis: 64px;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 991px) {
  body.sticky-header {
    --afem-header-full-height: 221px;
    --afem-header-compact-height: 152px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  body.sticky-header {
    --afem-header-full-height: 221px;
    --afem-header-compact-height: 152px;
  }
}

/* Mobile header: branding and actions share the first row, with contact
   details centred below it. The compact state scales this same layout down
   instead of moving elements into additional rows. */
@media only screen and (max-width: 991px) {
  body.sticky-header {
    --afem-header-full-height: 132px;
    --afem-header-compact-height: 98px;
  }

  body.sticky-header #sp-header {
    padding: 8px 0;
  }

  #sp-header > .container {
    height: 100%;
  }

  #sp-header > .container > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "logo actions" "info info";
    align-items: center;
    gap: 4px 8px;
    height: 100%;
    margin: 0 !important;
  }

  #sp-header #sp-logo {
    grid-area: logo;
    width: auto !important;
    min-width: 0;
    height: auto;
    padding: 0 !important;
  }

  #sp-header #sp-logo .sp-column,
  #sp-header #sp-logo .logo {
    width: 100%;
    min-height: 0;
    padding: 0 !important;
  }

  #sp-header #sp-logo .logo {
    justify-content: flex-start;
  }

  #sp-header #sp-logo .logo a {
    justify-content: flex-start;
    width: auto;
  }

  #sp-header #sp-logo .logo img {
    width: 100%;
    max-width: 190px;
    transition: max-width 280ms ease, transform 280ms ease;
  }

  /* Flatten Joomla's module wrappers so the action row and contact list can
     become two direct grid items without changing the markup. */
  #sp-header #sp-contact,
  #sp-header #sp-contact > .sp-column,
  #sp-header #sp-contact .sp-module,
  #sp-header #sp-contact .sp-module-content,
  #sp-header #sp-contact .custom {
    display: contents !important;
  }

  #sp-header #sp-contact .afem-header-actions {
    grid-area: actions;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    height: 34px;
    transition: height 280ms ease, gap 280ms ease;
  }

  #sp-header #sp-contact .afem-header-actions a {
    width: auto;
    min-height: 34px;
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-size: 8px !important;
    transition: min-height 280ms ease, padding 280ms ease, font-size 280ms ease,
      transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  }

  #sp-header #sp-contact .sp-contact-info {
    grid-area: info;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100% !important;
    height: 26px;
    transition: height 280ms ease, gap 280ms ease;
  }

  #sp-header #sp-contact .sp-contact-info li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    max-width: none !important;
    height: 26px;
    margin: 0 !important;
    font-size: 11px;
    transition: height 280ms ease, font-size 280ms ease;
  }

  #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    font-size: 12px;
    transition: width 280ms ease, height 280ms ease, flex-basis 280ms ease,
      font-size 280ms ease;
  }

  #sp-header #sp-contact .sp-contact-info li a {
    font-size: 11px;
    white-space: nowrap;
    transition: font-size 280ms ease;
  }

  body.afem-header-compact #sp-header #sp-logo .logo img {
    max-width: 160px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions {
    height: 28px;
    gap: 4px !important;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    min-height: 28px;
    padding-right: 3px !important;
    padding-left: 3px !important;
    font-size: 8px !important;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info {
    height: 24px;
    gap: 6px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li {
    height: 24px;
    font-size: 10px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    font-size: 11px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li a {
    font-size: 10px;
  }
}

/* Very narrow phones need a little more horizontal room for the two labels. */
@media only screen and (max-width: 360px) {
  #sp-header #sp-logo .logo img {
    max-width: 140px;
  }

  #sp-header #sp-contact .afem-header-actions {
    gap: 4px !important;
  }

  #sp-header #sp-contact .afem-header-actions a {
    padding-right: 3px !important;
    padding-left: 3px !important;
    font-size: 7.5px !important;
  }

  body.afem-header-compact #sp-header #sp-logo .logo img {
    max-width: 120px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    padding-right: 2px !important;
    padding-left: 2px !important;
    font-size: 7.5px !important;
  }
}

@media only screen and (max-width: 991px) {
  /* The legacy compact rule gives the module a fixed block box, which would
     place contact details before the buttons once the wrappers are flattened. */
  body.afem-header-compact #sp-header #sp-contact .sp-module,
  body.afem-header-compact #sp-header #sp-contact .sp-module-content,
  body.afem-header-compact #sp-header #sp-contact .custom {
    display: contents !important;
    height: auto !important;
  }

  body.afem-header-compact #sp-header {
    padding: 4px 0 2px !important;
  }

  body.afem-header-compact #sp-header > .container > .row {
    /* Keep the same grid geometry so the compact state remains smooth. */
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info {
    transform: translateY(-3px);
    transition: transform 280ms ease, height 280ms ease, gap 280ms ease;
  }
}

/* Desktop keeps the full-size header and buttons in both scroll states. */
@media only screen and (min-width: 992px) {
  body.sticky-header {
    --afem-header-compact-height: var(--afem-header-full-height);
  }

  #sp-header #sp-logo .logo {
    min-height: 82px;
  }

  #sp-header #sp-contact .sp-column {
    gap: 8px;
  }

  #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  body.sticky-header #sp-header,
  body.sticky-header #sp-main-menu,
  body.sticky-header #sp-main-menu.menu-fixed,
  body.sticky-header #sp-main-menu.menu-fixed-out {
    transition: none !important;
  }

  body.afem-header-compact #sp-header {
    box-shadow: none;
  }

  body.afem-header-compact #sp-header #sp-logo .logo {
    min-height: 88px;
  }

  body.afem-header-compact #sp-header #sp-logo .logo img {
    max-width: 300px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li {
    font-size: 14px;
  }

  body.afem-header-compact #sp-header #sp-contact .sp-contact-info li i {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    font-size: 16px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    min-height: 40px;
    padding-right: 18px !important;
    padding-left: 18px !important;
    font-size: 12px;
  }
}

/* The AFEM and Intercontrol marks share one source image in the backup. Use
   two cropped, independently sized layers so Intercontrol can be enlarged
   without scaling AFEM with it. */
#sp-header #sp-logo .logo a {
  position: relative;
}

#sp-header #sp-logo .logo img.afem-composite-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

#sp-header #sp-logo .afem-logo-split {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  transition: gap 280ms ease;
}

#sp-header #sp-logo .afem-logo-wordmark,
#sp-header #sp-logo .intercontrol-logo-wordmark {
  display: block;
  flex: 0 0 auto;
  background-image: url('/images/afem-header-logos.png');
  background-repeat: no-repeat;
}

#sp-header #sp-logo .afem-logo-wordmark {
  width: 145px;
  height: 78px;
  background-size: 184.6% auto;
  background-position: 7.3% 55%;
  transition: width 280ms ease, height 280ms ease;
}

#sp-header #sp-logo .intercontrol-logo-wordmark {
  width: 110px;
  height: 32px;
  /* The original composite has generous white margins around this mark. A
     dedicated crop keeps the complete wordmark visible when it is enlarged. */
  background-image: url('/images/intercontrol-logo.svg');
  background-size: 100% 125%;
  background-position: center;
  transition: width 280ms ease, height 280ms ease;
}

@media only screen and (max-width: 991px) {
  #sp-header #sp-logo .afem-logo-split {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }

  #sp-header #sp-logo .afem-logo-wordmark {
    width: 106px;
    height: 57px;
  }

  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 85px;
    height: 25px;
  }

  body.afem-header-compact #sp-header #sp-logo .afem-logo-split {
    gap: 6px;
  }

  body.afem-header-compact #sp-header #sp-logo .afem-logo-wordmark {
    width: 100px;
    height: 54px;
  }

  body.afem-header-compact #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 80px;
    height: 24px;
  }
}

@media only screen and (max-width: 360px) {
  #sp-header #sp-logo .afem-logo-split {
    gap: 4px;
  }

  #sp-header #sp-logo .afem-logo-wordmark {
    width: 78px;
    height: 42px;
  }

  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 60px;
    height: 18px;
  }

  body.afem-header-compact #sp-header #sp-logo .afem-logo-wordmark {
    width: 82px;
    height: 44px;
  }

  body.afem-header-compact #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 60px;
    height: 18px;
  }
}

@media only screen and (min-width: 1200px) {
  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 140px;
    height: 40px;
  }
}

/* Final logo balance: enlarge only Intercontrol while keeping the complete
   mark inside the available header row. */
@media only screen and (min-width: 992px) {
  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 190px;
    height: 46px;
  }
}

@media only screen and (min-width: 1200px) {
  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 210px;
    height: 52px;
  }
}

@media only screen and (min-width: 361px) and (max-width: 991px) {
  #sp-header > .container > .row {
    column-gap: 0;
  }

  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 135px;
    height: 37px;
  }

  #sp-header #sp-contact .afem-header-actions a {
    padding-right: 0 !important;
    padding-left: 0 !important;
    font-size: 7px !important;
  }

  body.afem-header-compact #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 125px;
    height: 34px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    padding-right: 1.5px !important;
    padding-left: 1.5px !important;
    font-size: 7.5px !important;
  }
}

@media only screen and (max-width: 360px) {
  #sp-header > .container > .row {
    column-gap: 0;
  }

  #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 100px;
    height: 30px;
  }

  #sp-header #sp-contact .afem-header-actions a {
    padding-right: 0.5px !important;
    padding-left: 0.5px !important;
    font-size: 7px !important;
  }

  body.afem-header-compact #sp-header #sp-logo .intercontrol-logo-wordmark {
    width: 96px;
    height: 29px;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a {
    padding-right: 0.5px !important;
    padding-left: 0.5px !important;
    font-size: 7px !important;
  }
}

/* WhatsApp remains a clearly identifiable, accessible action while using
   only its brand icon in the compact header row. */
#sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px;
  min-height: 40px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1;
}

#sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action .fa {
  margin: 0;
}

@media only screen and (max-width: 991px) {
  #sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action {
    flex-basis: 34px;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px;
    min-height: 34px !important;
    font-size: 18px !important;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action {
    flex-basis: 28px;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px;
    min-height: 28px !important;
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 360px) {
  #sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action {
    flex-basis: 30px;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px;
    min-height: 30px !important;
    font-size: 17px !important;
  }

  body.afem-header-compact #sp-header #sp-contact .afem-header-actions a.afem-whatsapp-action {
    flex-basis: 26px;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px;
    min-height: 26px !important;
    font-size: 15px !important;
  }
}

/* Mobile dropdowns: the original Helix menu only reveals these panels on
   hover, which is not available on touch screens. Keep the horizontal main
   bar, but open each submenu from its parent tap and render the panel fixed
   below the header/menu so the scrolling wrapper cannot clip it. */
@media only screen and (max-width: 991px) {
  #sp-main-menu .sp-megamenu-parent li.sp-has-child > .sp-dropdown {
    display: none !important;
  }

  #sp-main-menu .sp-megamenu-parent > li.sp-has-child.afem-mobile-open > .sp-dropdown {
    display: block !important;
    position: fixed !important;
    top: calc(var(--afem-header-full-height) + var(--afem-menu-height)) !important;
    left: var(--afem-mobile-dropdown-left, 10px) !important;
    right: auto !important;
    width: min(300px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - var(--afem-header-full-height) - var(--afem-menu-height) - 14px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 0 6px 6px;
    z-index: 10002;
  }

  body.afem-header-compact #sp-main-menu .sp-megamenu-parent > li.sp-has-child.afem-mobile-open > .sp-dropdown {
    top: calc(var(--afem-header-compact-height) + var(--afem-menu-height)) !important;
  }

  #sp-main-menu .sp-megamenu-parent > li.sp-has-child.afem-mobile-open > .sp-dropdown > .sp-dropdown-inner {
    padding: 12px;
  }

  #sp-main-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  #sp-main-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child > .sp-dropdown {
    position: static !important;
    display: none !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  #sp-main-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child.afem-mobile-open > .sp-dropdown {
    display: block !important;
  }

  #sp-main-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child.afem-mobile-open > .sp-dropdown > .sp-dropdown-inner {
    padding: 4px 0 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  #sp-main-menu .sp-megamenu-parent li.sp-has-child > a::after {
    transition: transform 180ms ease;
  }

  #sp-main-menu .sp-megamenu-parent li.sp-has-child.afem-mobile-open > a::after {
    transform: rotate(180deg);
  }
}