/* =====================================================================
   MRC — Menu mobile custom
   Só CSS. O estado do accordion é do Bricks (classe .open no <li>).
   Tudo scoped a .mrc-panel — não afeta o header desktop.

   Settings no OffCanvas: Direction Right · Width 100% · Background none
                          Padding 0 · z-index 900 · classe mrc-oc
   Colar em: Bricks > Settings > Custom CSS
   ===================================================================== */

:root{
  --mrc-blue:     #1E5081;   /* fundo do painel e do header aberto */
  --mrc-header-h: 80px;      /* altura real do header em mobile */
}

/* ---- 1. HEADER por cima do offcanvas (logo + X visíveis) ---- */
#brx-header{ position:relative; z-index:1000; }

body:has(.mrc-oc[aria-hidden="false"]) #brx-header{
  background: var(--mrc-blue);
  transition: background .25s ease;
}

/* ---- 2. PAINEL ---- */
.mrc-panel{
  margin-left: auto;                  /* encosta à direita */
  margin-top: var(--mrc-header-h);    /* arranca abaixo do header */
 
  max-width: 420px;
  max-height: calc(100dvh - var(--mrc-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mrc-blue);
  border-radius: 0 0 0 24px;
  padding: 28px 26px 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---- 3. NAV: horizontal → vertical ---- */
.mrc-panel .bricks-nav-menu{
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.mrc-panel .bricks-nav-menu > li{ width:100%; }

/* a "row" clicável: texto à esquerda, chevron do Bricks à direita */
.mrc-panel .brx-submenu-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.mrc-panel .brx-submenu-toggle button{
  background: none;
  border: 0;
  padding: 11px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* chevron nativo do Bricks — só rodamos quando aberto */
.mrc-panel .menu-item-icon{ transition: transform .2s ease; }
.mrc-panel li.open > .brx-submenu-toggle .menu-item-icon{
  transform: rotate(180deg);
}

.mrc-panel .bricks-nav-menu a{
  display: block;
  padding: 11px 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mrc-panel .bricks-nav-menu a:hover{ opacity:.75; }

/* ---- 4. Submenu: dropdown absoluto → accordion que empurra ----
   `body` sobe a especificidade acima das regras do Bricks.
   `.brx-submenu-positioned` é a classe que o Bricks usa para posicionar. */
body .mrc-panel .bricks-nav-menu .sub-menu{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: 100% !important;
  max-height: none !important;
  padding: 0 0 6px 14px !important;
  display: none !important;
}
body .mrc-panel .bricks-nav-menu li.open > .sub-menu{ display:block !important; }

.mrc-panel .sub-menu a{
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 0;
  opacity: .9;
}

/* ---- 5. Botões e sociais: só empilhar. O estilo já vem do Bricks. ---- */
.mrc-panel .header__button-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.mrc-panel .header__social-icons-wrapper{
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* ---- 6. Burger só em mobile ---- */
@media (min-width:992px){
  .mrc-burger{ display:none !important; }
}