/* Desktop header layout: logo left, menu centred, actions right.
   Mobile keeps the original Capsule order (logo, burger, actions). */
@media (min-width: 768px) {
  .mbf-header .mbf-header-col-center {
    order: 1;
    flex: 1;
    justify-content: flex-start;
  }
  .mbf-header .mbf-header-col-left {
    order: 2;
    flex: 0 1 auto;
    justify-content: center;
  }
  .mbf-header .mbf-header-col-right {
    order: 3;
    flex: 1;
    justify-content: flex-end;
  }
}

/* Default header background. Kept out of the block markup because WordPress
   preset colour classes use !important and would stop the transparent-header
   state (white text over the hero) from working. */
.mbf-header {
  background-color: var(--mbf-color-layout-background, #fff);
}

/* Frosted-glass header at the top of the page (transparent-header state).
   Mirrors the floating header Capsule already shows after scrolling:
   translucent dark layer + backdrop blur on a pseudo-element, so the
   mobile burger overlay (position: fixed) is not affected.
   Tune with the variables below, or delete this block for a clear header. */
:root {
  --capsule-header-glass: var(--mbf-color-overlay-menu, rgba(0, 0, 0, 0.4));
  --capsule-header-blur: 20px;
  --capsule-header-line: rgba(255, 255, 255, 0.15);
}
.page-template-template-transparent-header:not(.mbf-burgermenu-active) header:not(.mbf-scroll-sticky) .mbf-header {
  background-color: var(--capsule-header-glass);
  border-bottom: 1px solid var(--capsule-header-line);
}
.page-template-template-transparent-header:not(.mbf-burgermenu-active) header:not(.mbf-scroll-sticky) .mbf-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--capsule-header-blur));
  backdrop-filter: blur(var(--capsule-header-blur));
}

/* Header logo size. The original theme forces a 126px logo at the top of the
   page on wide screens; here it follows these variables instead.
   Change --capsule-logo-height (e.g. 32px, 48px, 56px) to resize the logo. */
:root {
  --capsule-logo-height: 40px;
}
.mbf-header-branding img {
  height: var(--capsule-logo-height);
  width: auto;
  max-width: none;
  object-fit: contain;
}
@media (min-width: 1440px) {
  .page-template-template-transparent-header header:not(.mbf-scroll-sticky) .mbf-header-branding img {
    height: var(--capsule-logo-height) !important;
  }
}

/* Footer logo size (the footer is black: use a light/white logo). */
:root {
  --capsule-footer-logo-height: 40px;
}
.mbf-footer-branding img {
  height: var(--capsule-footer-logo-height);
  width: auto;
  max-width: none;
  object-fit: contain;
}