/* ==========================================================
   BMA Header v3: centered logo + "Menu" mega panel
   Works with: Header - Left / Header - Right menus,
   Kadence Element "Header - Mega Panel".
   Panel layout (columns, widths, gaps, promo box) lives in the
   Element's Kadence Row Layout. This file handles the header
   chrome, text styles, and the form.
   ========================================================== */

/* ---------- Logo: thin rules either side ---------- */
@media (min-width: 1181px) {
  .site-header-main-section-center .site-branding a.brand {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .site-header-main-section-center .site-branding a.brand::before,
  .site-header-main-section-center .site-branding a.brand::after {
    content: "";
    width: 56px;
    height: 1px;
    background: var(--global-palette7, #e1e1e1);
  }
}

/* ---------- "Menu" button ---------- */
#secondary-navigation .bma-menu-toggle > a {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#secondary-navigation .bma-menu-toggle > a:hover,
#secondary-navigation .bma-menu-toggle.menu-item--toggled-on > a {
  border-color: var(--global-palette7, #e1e1e1);
  background: var(--global-palette8, #f7f7f7);
  color: var(--global-palette3, #222);
}
#secondary-navigation .bma-menu-toggle > a .dropdown-nav-toggle { display: none; }
/* Kadence reserves ~15px for a dropdown arrow in two places; remove both */
#secondary-navigation .bma-menu-toggle > a .nav-drop-title-wrap { padding-right: 0; gap: 8px; align-items: center; }
#secondary-navigation .bma-menu-toggle .menu-label-icon-wrap { margin-left: 0; padding: 0; width: auto; display: inline-flex; font-size: 1.15em; }
#secondary-navigation .bma-menu-toggle .menu-label-icon { padding: 0; }
.bma-burger line { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.bma-menu-toggle.menu-item--toggled-on .bma-burger .b1 { transform: translateY(6px) rotate(45deg); }
.bma-menu-toggle.menu-item--toggled-on .bma-burger .b2 { opacity: 0; }
.bma-menu-toggle.menu-item--toggled-on .bma-burger .b3 { transform: translateY(-6px) rotate(-45deg); }

/* Stretch the Menu item to full header height so the panel
   drops from the header's bottom edge (normal and sticky) */
.site-header-main-section-right .site-header-item:has(#secondary-navigation) { align-self: stretch; }
#secondary-navigation,
#secondary-navigation .secondary-menu-container,
#secondary-navigation #secondary-menu { height: 100%; }
#secondary-navigation #secondary-menu > li.bma-menu-toggle { height: 100%; display: flex; align-items: center; }

/* ---------- Panel shell ---------- */
#secondary-navigation .bma-menu-toggle > ul.sub-menu {
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--global-palette7, #e1e1e1);
  box-shadow: 0 18px 40px rgba(11, 34, 57, .14);
  padding: 0;
}
#secondary-navigation .bma-menu-toggle > ul.sub-menu > li { width: 100%; border: 0; }
.bma-mega { max-width: 1320px; margin: 0 auto; text-transform: none; letter-spacing: normal; }
.bma-mega a { text-decoration: none; }

/* Dim the page behind the open panel */
body:has(.bma-menu-toggle.menu-item--toggled-on)::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(11, 34, 57, .28);
  z-index: 90;
  pointer-events: none;
}
body:has(.bma-menu-toggle.menu-item--toggled-on) #masthead { position: relative; z-index: 100; }

/* ---------- Column headings + link lists ---------- */
.bma-mega .bma-mega__head {
  font-family: Outfit, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--global-palette1, #2b6cb0);
  margin: 0 0 14px;
}
/* #secondary-navigation prefix needed to beat Kadence's mega menu "ul ul { display:block }" */
#secondary-navigation .bma-mega ul.bma-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bma-mega ul.bma-mega__links li { margin: 0; padding: 0; }
.bma-mega ul.bma-mega__links a {
  display: block;
  padding: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--global-palette3, #222);
}
.bma-mega ul.bma-mega__links a:hover { color: var(--global-palette1, #2b6cb0); }
.bma-mega ul.bma-mega__links a em {
  display: block;
  font-family: Lato, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--global-palette6, #626262);
  margin-top: 1px;
}

/* ---------- Promo column text + form ---------- */
.bma-mega .bma-mega__promo-title,
.bma-mpromo .bma-mega__promo-title {
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0b2239;
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
.bma-mega .bma-mega__promo-text,
.bma-mpromo .bma-mega__promo-text { font-size: 14.5px; line-height: 1.5; color: var(--global-palette4, #3b3b3b); margin: 0; }
:is(.bma-mega, .bma-mpromo) .fluentform { margin: 12px 0 0; }
:is(.bma-mega, .bma-mpromo) .fluentform fieldset { display: flex !important; gap: 8px; align-items: stretch; }
:is(.bma-mega, .bma-mpromo) .fluentform .ff-el-group { margin-bottom: 0 !important; }
:is(.bma-mega, .bma-mpromo) .fluentform .ff-el-group:not(.ff-hpsf-container):not(.ff_submit_btn_wrapper) { flex: 1; min-width: 0; }
:is(.bma-mega, .bma-mpromo) .fluentform .ff-el-input--label { display: none; }
:is(.bma-mega, .bma-mpromo) .fluentform input[type="email"] {
  font-size: 14.5px;
  padding: 9px 11px;
  height: auto;
  border: 1px solid var(--global-palette7, #e1e1e1);
  border-radius: 5px;
  background: #fff;
}
:is(.bma-mega, .bma-mpromo) .fluentform .ff-btn-submit {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 5px;
  white-space: nowrap;
  width: auto;
}
.bma-mega .bma-mega__divider { border: 0; border-top: 1px solid var(--global-palette7, #e1e1e1); margin: 18px 0 !important; opacity: 1; width: 100%; max-width: none; }
.bma-mega .bma-mega__review { margin: 10px 0 0; }
.bma-mega .bma-mega__review a { font-family: Outfit, sans-serif; font-weight: 600; font-size: 15px; color: var(--global-palette1, #2b6cb0); }
.bma-mega .bma-mega__review a:hover { text-decoration: underline; }

/* ---------- Footer row: search ---------- */
.bma-mega__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--global-palette7, #e1e1e1);
  padding: 14px 28px 18px;
}
.bma-mega__foot > * { margin: 0 !important; }
.bma-mega__search { flex: 1; max-width: 420px; }
.bma-mega__search .wp-block-search__input {
  border: 1px solid var(--global-palette7, #e1e1e1);
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 14.5px;
}
.bma-mega .bma-mega__login { display: none; }
.bma-mega .bma-mega__login a { font-family: Outfit, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; color: var(--global-palette3, #222); }

/* ---------- Logged-in visitors ---------- */
body.logged-in .bma-hide-logged-in { display: none !important; }
.header-account-in-wrap .header-account-label,
.header-account-in-wrap .header-account-username {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---------- Mobile header bar ---------- */
.site-mobile-header-wrap .header-mobile-account-wrap .header-account-button { white-space: nowrap; }
.site-mobile-header-wrap .header-mobile-account-wrap { margin-left: 10px; }

/* ---------- Mobile drawer (white, matches desktop panel) ---------- */
#mobile-drawer .drawer-inner { color: var(--global-palette4, #3b3b3b); }
body:not(.logged-in) #mobile-drawer .bma-logged-in-only { display: none; }
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a { font-family: Outfit, sans-serif; font-weight: 500; letter-spacing: .04em; }
#mobile-drawer .mobile-navigation ul ul li > a { text-transform: none; letter-spacing: 0; font-size: 15px; }
#mobile-drawer .mobile-header-button.button-style-outline {
  border: 1px solid var(--global-palette7, #e1e1e1);
  border-radius: 5px;
  font-family: Outfit, sans-serif;
  font-weight: 600;
}

/* Drawer promo Element ("Header - Mobile Promo") */
.bma-mpromo { display: grid; gap: 18px; padding: 18px 0 28px; }
.bma-mpromo > * { margin: 0 !important; }
.bma-mpromo .wp-block-button,
.bma-mpromo .wp-block-button__link { width: 100%; }
.bma-mpromo .wp-block-button__link {
  background: #0974c1;
  color: #fff;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 5px;
  padding: 12px 16px;
  text-align: center;
}
.bma-mpromo__edge { background: #f5f7fa; border-radius: 8px; padding: 18px; }
.bma-mpromo__edge > * { margin-top: 0; margin-bottom: 0; }
.bma-mpromo .bma-mega__search { max-width: none; }
/* Phone: stack the email field and button */
.bma-mpromo .fluentform fieldset { flex-direction: column; }
.bma-mpromo .fluentform .ff-btn-submit { width: 100%; }

/* ---------- Laptop widths ---------- */
@media (max-width: 1180px) {
  .site-header-main-section-right .header-button-wrap { display: none; }
  body:not(.logged-in) .bma-mega .bma-mega__login { display: block; }
  #site-navigation .primary-menu-container > ul > li > a { padding-left: .6em; padding-right: .6em; }
  .site-header-main-section-center .site-branding img { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .bma-burger line { transition: none; }
}