/* FR Mobile Header - conservative safe styles
   Only targets our injected elements (`.fr-mobile-header` scoped) and
   avoids changing theme header wrappers or global positioning.
   
   🔧 Melhorias v2024 - Fundo Claro, SEM backdrop-filter problemático:
   ✓ Background claro (rgba(255,248,240,0.85)) - sem fundo preto
   ✓ Removido backdrop-filter que causava problemas visuais
   ✓ Contraste reforçado no logo (halo branco + saturate + contrast)
   ✓ Micro-pill mais claro (rgba(255,255,255,0.25))
   ✓ Verde "Renascença" perfeitamente legível
   ✓ Logo compacto ~12% scroll (44px → 39px)
   ✓ Transições rápidas mobile (200ms ease-out)
   ✓ Solução limpa: sem blur, sem fundo preto, máxima legibilidade
*/

@media (max-width: 1024px) {
  /* Mobile-only header geometry and visuals for FR_Mobile_Header
     - Scoped under body.fr-mobile-header to avoid touching desktop
     - Only active when JS marks body.fr-mobile-managed (safe fallback)
  */
  body.fr-mobile-header .main-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 60px !important;
    padding-inline: 18px !important;
    /* Transição suave para mudanças de layout */
    transition: all 0.3s ease-out !important;
  }

  /* Collapse any theme wrapper - com contenção de overlay */
  /* Wrapper fica fixo; barra interna relativa para evitar dupla camada fixed no iOS */
  body.fr-mobile-header .main-header-bar-wrap {
    /* Header flui sobre a hero: overlay que ainda rola com o documento (absolute) */
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    height: auto !important;
    max-height: 126px !important;
    padding: 0 !important;
    pointer-events: auto;
    transition: background 0.3s ease-out, box-shadow 0.3s ease-out !important;
    overflow: visible !important;
    z-index: 1200; /* fica acima da hero mas abaixo do estado fixo (1600) */
  }
  body.fr-mobile-header .main-header-bar { position: relative !important; background: transparent !important; }

  /* hairline gradient at base of header */
  body.fr-mobile-header .main-header-bar::after {
  /* hidden by default; we show a subtle hairline only when header is scrolled */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: none;
  pointer-events: none;
  }

  /* Native Astra logo sizing — com contraste reforçado para legibilidade */
  body.fr-mobile-header .site-branding .custom-logo,
  body.fr-mobile-header .site-branding .custom-logo-link img,
  body.fr-mobile-header .site-logo-img img,
  body.fr-mobile-header .custom-logo {
    height: 44px !important;
    max-height: 48px !important;
    min-height: 62px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
    /* Transições mais rápidas para mobile */
    transition: height 0.2s ease-out, filter 0.2s ease-out !important;
    /* Contraste reforçado para legibilidade do verde "Renascença" */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) 
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))
            contrast(1.1) saturate(1.15);
    position: relative;
  }

  /* Neutralize theme-enforced max sizes that cause overflow */
  body.fr-mobile-header .main-header-bar .site-branding img,
  body.fr-mobile-header .site-logo-img img {
    max-height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    height: 100% !important;
    padding-right: 20% !important;
    margin-left: -7%;
  }

  /* Ensure logo stays fully inside the header container */
  body.fr-mobile-header .site-branding { display: flex !important; align-items: center !important; gap: 8px; }

  /* Our chip toggle: design simplificado */
  body.fr-mobile-header .fr-mobile-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: #542f29 !important;
    color: #FFF8F0 !important;
    border-radius: 12px !important;
    border: 0 !important;
    /* Sombra moderada */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    cursor: pointer !important;
    align-self: center !important;
    justify-self: end !important;
    /* Transições mais rápidas para mobile */
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out, 
                transform 0.2s ease-out, filter 0.2s ease-out !important;
    /* Contraste reforçado nos ícones */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    position: relative;
  }
  
  body.fr-mobile-header .fr-mobile-toggle:hover { 
    background: #6f4237 !important; 
    transform: translateY(-1px) !important;
  }
  
  body.fr-mobile-header .fr-mobile-toggle:focus { 
    outline: 3px solid rgba(255,248,240,0.95) !important; 
    outline-offset: 2px !important; 
  }

  /* Ensure internal icons/images from Astra are hidden so only our icon renders */
  body.fr-mobile-header .fr-mobile-toggle img,
  body.fr-mobile-header .fr-mobile-toggle svg,
  body.fr-mobile-header .fr-mobile-toggle .ast-icon { display: none !important; }

  /* Render our simple 3-bar icon centered com contraste reforçado */
  body.fr-mobile-header .fr-mobile-toggle__icon { 
    display: inline-block !important; 
    width: 22px !important; 
    height: 18px !important; 
    position: relative !important; 
  }
  
  body.fr-mobile-header .fr-mobile-toggle__icon span { 
    display: block !important; 
    height: 2px !important; 
    background: #FFF8F0 !important; 
    margin: 4px 0 !important; 
    border-radius: 2px !important;
    /* Transições mais rápidas para mobile */
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
    /* Contraste reforçado com sombra sutil */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }

  /* Hide native Astra toggle only when our module is managing (safe fallback) */
  body.fr-mobile-header.fr-mobile-managed .ast-button-wrap,
  body.fr-mobile-header.fr-mobile-managed .menu-toggle.main-header-menu-toggle { display: none !important; }

  /* Immediate hide using :has() — prevents brief flash before JS runs by letting the browser
     hide the native toggle as soon as it parses the DOM when the container already contains
     our `.fr-mobile-toggle`. This is non-invasive and falls back to the managed-class rule
     above when :has() isn't supported by the browser. */
  .ast-mobile-menu-buttons:has(.fr-mobile-toggle) .menu-toggle.main-header-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* More targeted: hide native toggle only inside the native container when we mark it managed */
  .ast-mobile-menu-buttons.fr-managed-buttons .menu-toggle.main-header-menu-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; }

  /* Hide the inline navigation when our off-canvas exists and module manages DOM */
  body.fr-mobile-header.fr-mobile-managed .main-header-bar-navigation { display: none !important; }

  /* Keep the toggle inside the flex flow (static positioning) */
  body.fr-mobile-header .ast-button-wrap, body.fr-mobile-header .fr-mobile-toggle { position: static !important; }

  /* Scrolled state: background mais claro com sombra suave - especificidade aumentada */
  body.fr-mobile-header .main-header-bar.is-scrolled,
  body.fr-mobile-header.scrolled .main-header-bar,
  body.fr-mobile-header .main-header-bar.is-scrolled {
    /* Background mais claro para melhor legibilidade do logo */
    background: rgba(255, 248, 240, 0.85) !important;
    /* Removido backdrop-filter que causava fundo preto */
  /* position será aplicada (fixed) em regra posterior dedicada */
    min-height: 60px !important;
    padding-inline: 18px !important;
    display: flex !important;
    align-items: center !important;
    /* Transições rápidas para mobile */
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out !important;
    /* z-index para stacking context correto */
    z-index: 1100;
    /* Sem overflow hidden para evitar problemas */
    overflow: visible !important;
  }

  /* CORREÇÃO: Sombra separada com máxima especificidade para evitar conflitos */
  body.fr-mobile-header.fr-mobile-header .main-header-bar.is-scrolled,
  body.fr-mobile-header.fr-mobile-header.scrolled .main-header-bar {
  /* Usar sombra interna (inset) para evitar hairline externa visível no iOS */
  box-shadow: inset 0 -2px 4px -2px rgba(0, 0, 0, 0.10) !important;
  -webkit-box-shadow: inset 0 -2px 4px -2px rgba(0, 0, 0, 0.10) !important;
  }

  /* ::before removido - causava mancha preta fora do header */

  /* hairline remains subtle when scrolled */
  body.fr-mobile-header .main-header-bar.is-scrolled::after,
  body.fr-mobile-header.scrolled .main-header-bar::after {
  /* hairline: subtle gradient separator (visible only when header is scrolled) */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  opacity: 1;
  }

  /* Logo: contraste reforçado para melhor legibilidade do verde "Renascença" */
  body.fr-mobile-header .main-header-bar.is-scrolled .site-branding .custom-logo,
  body.fr-mobile-header.scrolled .main-header-bar .site-branding .custom-logo,
  .main-header-bar.is-scrolled .site-branding .custom-logo {
    height: 39px !important; /* Redução de ~12% de 44px para 39px */
    max-height: 42px !important;
    min-height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
    /* Transições mais rápidas para mobile */
    transition: height 0.2s ease-out, filter 0.2s ease-out !important;
    transform: none !important;
    /* Contraste mais forte para legibilidade do verde */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4))
            contrast(1.15) saturate(1.2);
    position: relative;
  }

  /* Micro-pill protetor sob o logo - sem backdrop-filter problemático */
  body.fr-mobile-header .main-header-bar.is-scrolled .site-branding,
  body.fr-mobile-header.scrolled .main-header-bar .site-branding,
  .main-header-bar.is-scrolled .site-branding {
    position: relative;
    /* Fundo mais claro e sólido para melhor contraste do logo */
    /* background: rgba(255, 255, 255, 0.25); */
    /* Removido backdrop-filter que causava problemas */
    border-radius: 20px; /* pill/oval */
    padding-inline: 8px;
    margin-inline: -4px; /* ajuste fino para não desalinhar */
    transition: background 0.2s ease-out !important;
  }

  /* Container do logo: geometria estável com transições otimizadas */
  body.fr-mobile-header .main-header-bar.is-scrolled .ast-site-identity,
  body.fr-mobile-header.scrolled .main-header-bar .ast-site-identity {
    line-height: inherit !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    /* Transições mais rápidas para mobile */
    transition: all 0.2s ease-out !important;
  }

  /* Hamburger: design simplificado */
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle,
  body.fr-mobile-header.scrolled .main-header-bar .fr-mobile-toggle,
  .main-header-bar.is-scrolled .fr-mobile-toggle {
    position: relative !important;
    background: #542f29 !important;
    color: #FFF8F0 !important;
    /* Sombra moderada */
    box-shadow: 0 3px 12px rgba(84, 47, 41, 0.3), 
                0 1px 6px rgba(0, 0, 0, 0.15) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    transform: none !important;
    /* Transições mais rápidas para mobile */
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out, 
                transform 0.2s ease-out !important;
    /* Contraste reforçado nos ícones */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }
  
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle:hover { 
    background: #6f4237 !important; 
    /* Efeito hover moderado */
    box-shadow: 0 4px 16px rgba(84, 47, 41, 0.4), 
                0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  /* hide any native icons inside our toggle */
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle img,
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle svg,
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle .ast-icon { display: none !important; }

  /* 3) Security: override Astra rules that shrink/logo transform on .is-scrolled */
  body.fr-mobile-header .main-header-bar.is-scrolled .site-branding img,
  body.fr-mobile-header .main-header-bar.is-scrolled .custom-logo,
  body.fr-mobile-header.scrolled .main-header-bar .site-branding img,
  body.fr-mobile-header.scrolled .main-header-bar .custom-logo {
    max-height: 48px !important;
    transform: none !important;
  }

  /* z-indexs (header + toggle) - overlay/panel controlled elsewhere */
  body.fr-mobile-header .main-header-bar { z-index: 1100 !important; }
  body.fr-mobile-header .fr-mobile-toggle { z-index: 1110 !important; }

  /* Área de toque generosa - garantindo 44px mínimo para usabilidade */
  body.fr-mobile-header .fr-mobile-toggle, 
  body.fr-mobile-header .fr-nav__close { 
    min-width: 48px !important; 
    min-height: 48px !important; 
    /* Garantir área de toque adequada mesmo com transform */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 248, 240, 0.1);
  }

  /* Keep other FR panel styles intact (no change) */
  .fr-mobile-header .fr-mobile-overlay{ position: fixed; inset: 0; background: var(--fr-overlay, rgba(24,8,6,.55)); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 1200; }
  .fr-mobile-header .fr-nav__panel{ position: fixed; top: 8vh; right: 12px; bottom: 8vh; width: calc(100% - 56px); max-width: 420px; background: var(--fr-brown-700, #542f29); color: var(--fr-cream, #FFF8F0); border-radius: var(--fr-radius-xl, 20px); box-shadow: var(--fr-elev, 0 8px 24px rgba(0,0,0,.24)); transform: translateX(18%); opacity: 0; transition: transform 220ms cubic-bezier(.22,.9,.32,1), opacity 220ms ease; z-index: 1250; display:flex; flex-direction:column; outline:none; }
  .fr-mobile-header.is-open .fr-mobile-overlay{ opacity: 1; pointer-events: auto }
  .fr-mobile-header.is-open .fr-nav__panel{ transform: translateX(0); opacity: 1 }
}
/* Estado APÓS O SCROLL — mobile (fundo claro, sem backdrop-filter) */
@media (max-width: 1024px) {

  /* Background claro com sombra suave - especificidade aumentada para evitar conflitos */
  body.fr-mobile-header.scrolled .main-header-bar,
  body.fr-mobile-header .main-header-bar.is-scrolled {
    /* Background claro para melhor legibilidade do logo */
    background: rgba(255, 248, 240, 0.85) !important;
    /* Removido backdrop-filter que causava fundo preto */
  /* position será aplicada (fixed) em regra posterior dedicada */
    min-height: 60px !important;
    padding-inline: 18px !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out !important;
    z-index: 1100;
    overflow: visible !important;
  }

  /* CORREÇÃO: Sombra separada com máxima especificidade */
  body.fr-mobile-header.fr-mobile-header.scrolled .main-header-bar,
  body.fr-mobile-header.fr-mobile-header .main-header-bar.is-scrolled {
    box-shadow: inset 0 -2px 4px -2px rgba(0, 0, 0, 0.10) !important;
    -webkit-box-shadow: inset 0 -2px 4px -2px rgba(0, 0, 0, 0.10) !important;
  }

  /* Geometria estável do header container */
  body.fr-mobile-header .main-header-bar.is-scrolled .ast-container .main-header-container {
    min-height: 60px !important;
    padding-inline: 18px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    transition: all 0.2s ease-out !important;
  }
 /*
 Logo no modo mobile scrolled
 /*
  /* LOGO — tamanho/posicionamento consistentes no scroll */
  /* neutraliza offsets usados no topo e fixa ~44px de altura
     We target both the .custom-logo wrapper and the inner img to
     counter earlier rules (height:100%, padding-right, margin-left). */
  /* Keep logo sizing consistent with non-scrolled state to avoid shrinking */
  body.fr-mobile-header .main-header-bar.is-scrolled .site-branding .custom-logo,
  body.fr-mobile-header .main-header-bar.is-scrolled .site-branding .custom-logo img,
  body.fr-mobile-header.scrolled .main-header-bar .site-logo-img img,
  body.fr-mobile-header.scrolled .main-header-bar .site-branding .custom-logo,
  .main-header-bar.is-scrolled .site-branding .custom-logo,
  .main-header-bar.is-scrolled .site-branding .custom-logo img {
    max-height: 100% !important;
    max-width: 124% !important;
    display: block !important;
    height: 112% !important;
    padding-right: 66% !important; /* preserve visual offset used at top */
  /* Responsive offset: keep ~-32% on small phones and smoothly increase to ~-66% near 1024px */
  /* Using clamp with vw to avoid creating many breakpoint rules and keep scope local */
  /* Responsive offset: small phones ~-32%, smoothly increases toward -66% at 1024px.
    Use calc() inside clamp to ensure correct arithmetic across browsers. */
    margin-left: clamp(-66%, calc(-32% + 8vw), -32%) !important;
    object-fit: contain !important;
    transform: none !important;
    padding-top: 9%;
  }

  /* Tablet-only micro-tweak: iPads (approx widths between 720px and 1024px)
     visually prefer a slightly larger negative max to better center the logo.
     This single narrow rule avoids touching phone sizes and keeps CSS minimal. */
  @media (min-width: 720px) and (max-width: 1024px) {
    body.fr-mobile-header .main-header-bar.is-scrolled .site-branding .custom-logo,
    body.fr-mobile-header .main-header-bar.is-scrolled .site-branding .custom-logo img,
    body.fr-mobile-header.scrolled .main-header-bar .site-logo-img img,
    body.fr-mobile-header.scrolled .main-header-bar .site-branding .custom-logo,
    .main-header-bar.is-scrolled .site-branding .custom-logo,
    .main-header-bar.is-scrolled .site-branding .custom-logo img {
      /* same expression but cap the clamp's max at -64% for tablets */
      margin-left: clamp(-66%, calc(-32% + 8vw), -64%) !important;
    }
  }

  /* Tablet: ensure our fallback toggle is visible and tappable on iPad ranges.
     This overrides inline `display:none` that some pages may add during DOM swaps.
     Narrow scope avoids affecting phones or desktop header behavior. */
  @media (min-width: 720px) and (max-width: 1024px) {
    body.fr-mobile-header .fr-mobile-toggle {
      display: inline-grid !important; /* override inline style="display:none" */
      place-items: center !important;
      min-width: 46px !important;
      min-height: 44px !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
   /* Ancestor container used by Astra may be hidden at tablet sizes; restore its layout
     in our scoped environment so the toggle can compute size. This is narrow and
     scoped under body.fr-mobile-header to avoid changing other pages. */
   body.fr-mobile-header .ast-mobile-menu-buttons { display: inline-flex !important; }
  }

  /* HAMBÚRGUER — design otimizado no scroll */
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: #542f29 !important;
    color: #FFF8F0 !important;
    border-radius: 12px !important;
    /* Sombra mais intensa para destacar do fundo blur */
    box-shadow: 0 6px 20px rgba(84, 47, 41, 0.4), 
                0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease-out !important;
    /* Contraste reforçado */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  }
  
  body.fr-mobile-header .main-header-bar.is-scrolled .fr-mobile-toggle:hover {
    background: #6f4237 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(84, 47, 41, 0.5), 
                0 3px 10px rgba(0, 0, 0, 0.3) !important;
  }
}

/*
 * fr-mobile-header.css
 * Scoped mobile header styles for FR_Mobile_Header
 * - Entire file is scoped under `.fr-mobile-header` and `@media (max-width: 1024px)`
 * - Variables exposed and overridable via PHP filter `fr_mobile_header_colors`
 * - BEM naming: fr-nav, fr-nav__panel, fr-nav__item, fr-nav__accordion, fr-nav__cta
 */

/* Critical small inline styles can be added by PHP if desired; this file contains the rest. */

@media (max-width: 1024px) {
  .fr-mobile-header {
  --fr-brown-700: #3D120D; /* base strong */
  --fr-brown-600: #471713; /* stripes/weaker */
  --fr-submenu-bg: #2b0f14; /* darker/purple-tinged submenu surface */
  --fr-cream: #FFF8F0; /* light label color */
  --fr-overlay: rgba(12,6,5,.80); /* darker overlay for focus (stronger) */
  --fr-radius-xl: 34px; /* larger "pill" corners */
  --fr-elev: 0 18px 36px rgba(0,0,0,.45);
  /* Safe bottom spacing: CTA height + FAB gap; tweak this variable if FAB overlaps */
  --fr-safe-bottom: 104px;

    /* header baseline (transparent) - header element itself remains controlled by theme, these are helper styles */
  }

  /* Minimal hamburger toggle (placed by PHP into Astra masthead toggle area) */
  .fr-mobile-toggle{
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 8px;
    cursor: pointer;
    color: var(--fr-cream);
  }
  .fr-mobile-toggle:focus{ outline: 2px solid color-mix(in srgb, var(--fr-cream) 80%, transparent); outline-offset: 2px; }
  .fr-mobile-toggle__icon{ display:inline-block; width:22px; height:18px; position:relative }
  .fr-mobile-toggle__icon span{ display:block; height:2px; background:currentColor; margin:4px 0; border-radius:2px; transition: transform .18s ease, opacity .18s ease; }

  /* Overlay and panel root */
  .fr-mobile-header .fr-mobile-overlay{
    position: fixed;
    inset: 0;
    background: var(--fr-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 1240; /* overlay below panel but above base UI */
  }
  .fr-mobile-header .fr-mobile-overlay[hidden], .fr-nav__panel[hidden], .fr-mobile-header .fr-nav__panel[hidden] { display: none !important; }
  .fr-mobile-header .fr-nav__panel{
    position: fixed;
    top: 8vh;
    left: 50%; /* center horizontally */
    transform: translateX(18%); /* initial off-canvas to the right visually */
    right: auto;
    bottom: 8vh;
    width: calc(100% - 56px);
    max-width: 420px;
    background: var(--fr-brown-700);
    color: var(--fr-cream);
    border-radius: var(--fr-radius-xl);
    box-shadow: var(--fr-elev);
    opacity: 0;
    transition: transform 220ms cubic-bezier(.22,.9,.32,1), opacity 220ms ease;
    z-index: 1250; /* panel above overlay */
    display: flex;
    flex-direction: column;
    outline: none;
    /* visually center using translateX(-50%) when open */
  }

  .fr-mobile-header.is-open .fr-mobile-overlay{ opacity: 1; pointer-events: auto }
  .fr-mobile-header.is-open .fr-nav__panel{ transform: translateX(-50%); opacity: 1 }

  .fr-nav__panel-inner{ display:flex; flex-direction:column; height:100%; padding:22px; gap:14px }
  /* Header: slightly lighter background and consistent spacing */
  /* Header: solid surface to avoid accidental top band — gradients apply only to menu rows below */
  .fr-nav__header{ display:flex; align-items:center; justify-content:space-between; padding-bottom:8px; background-color: var(--fr-brown-700); padding: 14px 0 16px; position: relative }
  /* hide header hairline inside the panel (we don't want pseudo separators rendered in-panel) */
  .fr-nav__panel .fr-nav__header::after { display: none !important; }

  /* 1) Scrollbar and separators reset for mobile panel content to avoid 'gray stripe' artifacts */
  .fr-mobile-header .fr-nav__content { overflow:auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .fr-mobile-header .fr-nav__content::-webkit-scrollbar { width: 0px; height: 0px; }
  .fr-mobile-header .fr-nav__content, .fr-mobile-header .fr-nav__list, .fr-mobile-header .fr-nav__item { border:0 !important; box-shadow:none !important; }
  .fr-mobile-header .fr-nav__content hr { display:none !important; }
  .fr-nav__brand{ display:flex; align-items:center; gap:14px }
  /* Slightly larger brand for visual parity and breathing room */
  .fr-nav__brand img{ max-height:72px; width:auto; display:block }

  /* Close button styled as pill capsule on the right like prototype */
  .fr-nav__close{ background: rgba(255,255,255,0.06); border: none; color: var(--fr-cream); width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; border-radius:12px }
  .fr-nav__close:focus{ outline: 3px solid rgba(255,248,240,0.92); border-radius:16px }

  .fr-nav{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
  /* adjust vertical spacing so first item doesn't collide with logo */
  .fr-nav__content { padding-top: 2px; padding-bottom: calc(var(--fr-safe-bottom, 88px) + env(safe-area-inset-bottom)); overflow: auto; }
  .fr-nav__list{ list-style:none; margin:0; padding:8px 0; display:flex; flex-direction:column; }
  .fr-nav__item{ display:block }
  /* Each top-level row gets a subtle gradient tint (softer stripe appearance) */
  /* Top-level items: slightly larger font and more generous padding per prototype */
  .fr-nav__item > a, .fr-nav__item > .fr-nav__accordion{ display:block; color:var(--fr-cream) !important; text-decoration:none; padding:16px 18px 16px 20px; border-radius:12px; font-size:22px; line-height:1.3; min-height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
  /* Stronger, softer gradients for stripe depth (top->bottom subtle tint) */
  /* Apply stripe gradients to the full-width list item container so the bands span edge-to-edge.
    Increase alpha for clearer contrast to match prototype. Use background-clip so rounded
    corners render correctly. */
  /* make each li visually fill the panel width by offsetting the panel-inner padding
    this ensures the gradient spans to the rounded panel edges */
  .fr-mobile-header .fr-nav__list{ padding:0; margin:0; }
  .fr-mobile-header .fr-nav__list > li { background-clip: padding-box; border-radius:12px; margin:6px -22px; padding:0 22px; }
  /* Level 1 stripes: stronger contrast, applied to the li so they span the full panel */
  .fr-mobile-header .fr-nav__list > li:nth-child(odd) { background: linear-gradient(180deg, rgba(71,23,19,.28) 0%, rgba(61,18,13,.16) 100%); }
  .fr-mobile-header .fr-nav__list > li:nth-child(even) { background: linear-gradient(180deg, rgba(71,23,19,.20) 0%, rgba(61,18,13,.10) 100%); }
  .fr-mobile-header .fr-nav__item > a, .fr-mobile-header .fr-nav__item > .fr-nav__accordion{ background: transparent !important; }
  .fr-mobile-header .fr-nav__item > a, .fr-mobile-header .fr-nav__item > .fr-nav__accordion{ font-size:20px; font-weight:500; padding:14px 18px; }
  .fr-nav__item > a:focus, .fr-nav__item > a:hover, .fr-nav__item > .fr-nav__accordion:focus, .fr-nav__item > .fr-nav__accordion:hover{ background: rgba(255,255,255,0.03); outline:none }

  /* Accordion button for parent items */
  /* Accordion: keep chevron pinned to the extreme right using gap + margin-left:auto */
  /* Accordion: use relative positioning so chevron can be absolutely positioned at panel edge. 
    Increase right padding to avoid label overlap with chevron. */
  .fr-nav__accordion{ position:relative; display:flex; align-items:center; width:100%; background:transparent; border:none; color:var(--fr-cream); padding:14px 18px; padding-right:56px; font-size:20px; text-align:left; border-radius:12px; gap:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
  .fr-nav__accordion:focus{ outline: 3px solid rgba(255,248,240,0.9); border-radius:12px }
  /* Bigger, higher-contrast chevron */
  /* Chevron locked visually to the right edge; increased contrast and size */
  /* Chevron pinned to the right edge of the panel to avoid text wrapping issues. */
  .fr-nav__chev{ position:absolute; right:10px; top:50%; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-50%) rotate(0); transition: transform .18s cubic-bezier(.22,.9,.32,1) }
  .fr-nav__chev::before{ content: "▾"; display:inline-block; color:var(--fr-cream) !important; font-size:18px; line-height:1; opacity:0.98 }
  /* Sub-items: comfortable size and touch targets */
  /* Sublist: smoother reveal and stronger purple-tinged background when open */
  .fr-nav__sublist{ list-style:none; margin:6px 0 0 0; padding:8px 8px 8px 22px; max-height:0; overflow:hidden; transition: max-height 260ms cubic-bezier(.22,.9,.32,1), opacity 200ms ease; opacity:0 }
  .fr-nav__sublist .fr-nav__item > a{ font-size:18px; padding:12px 10px; color:var(--fr-cream) !important; min-height:44px }

  /* Parent open state: slight highlighted background to reinforce hierarchy */
  /* When open, keep the parent li highlighted but let the sublist surface remain visible. */
  .fr-nav__item.is-open{ background: linear-gradient(180deg, color-mix(in srgb, var(--fr-brown-600) 10%, black 0%) 0%, color-mix(in srgb, var(--fr-brown-600) 6%, black 0%) 100%); border-radius:12px }
  /* Purple-tinted submenu surface for stronger separation when open */
  /* Sublist: when open use a stronger, darker surface to match prototype separation. */
  /* Submenu surface & items */
  .fr-nav__item.is-open > .fr-nav__sublist{ display:block !important; opacity:1 !important; max-height: 640px !important; background: var(--fr-submenu-bg, #2B0F14); border-radius:8px; margin:6px 8px; padding:8px 0; gap:4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fr-submenu-bg, #2B0F14) 80%, #000 20%, 15%); }
  .fr-nav__sublist .fr-nav__item > a{ font-size:18px; line-height:24px; padding:12px 14px; display:block; }
  .fr-nav__sublist .fr-nav__item > a:hover, .fr-nav__sublist .fr-nav__item > a:focus{ background-color: color-mix(in srgb, var(--fr-submenu-bg, #2B0F14) 78%, #fff 0%, 6%); }
  .fr-nav__item.is-open > .fr-nav__accordion .fr-nav__chev{ transform: rotate(180deg); filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)) }

  /* CTA fixed to bottom of panel */
  .fr-nav__cta-wrap{ padding-top:14px; margin-top:auto }
  /* CTA: larger, more prominent per prototype */
  /* Primary CTA strong style */
  .fr-nav__cta{ display:block; width:100%; text-align:center; background:var(--fr-brown-600); color:var(--fr-cream) !important; padding:16px; border-radius:12px; text-decoration:none; font-weight:700; font-size:18px; text-transform:uppercase; position:relative; z-index:1400 }
  .fr-nav__cta:hover, .fr-nav__cta:focus{ background:var(--fr-brown-700); box-shadow: 0 6px 18px rgba(0,0,0,.32); outline: 3px solid rgba(255,248,240,0.92); }

  /* Ensure Astra button markup inside our panel is visible and treated as CTA */
  .fr-mobile-header .fr-nav__list .ast-masthead-custom-menu-items .ast-custom-button-link { display: block !important; }
  .fr-mobile-header .fr-nav__list .ast-masthead-custom-menu-items .ast-custom-button-link .ast-button { pointer-events: none; /* inner wrapper inert; link handles clicks */ }

  /* Ensure tap targets >=44px */
  .fr-nav__item > a, .fr-nav__accordion, .fr-nav__close, .fr-mobile-toggle{ min-height:44px }

  /* Header scrolled translucent effect (CSS first, theme may toggle .is-scrolled on header) */
  .site .main-header-bar{ background: transparent; transition: background .22s ease, backdrop-filter .22s ease }
  .site .main-header-bar.is-scrolled{ background: linear-gradient(rgba(84,47,41,0.06), rgba(84,47,41,0.04)); backdrop-filter: blur(2px) }

  /* Accessibility helpers */
  .fr-nav__panel:focus{ outline:none }
  .fr-nav__panel-inner a:focus{ box-shadow: inset 4px 0 0 0 var(--fr-brown-600), 0 0 0 3px color-mix(in srgb, var(--fr-brown-600) 18%, transparent) }

  /* Small screens: full-bleed panel variant */
  @media (max-width: 420px){
  .fr-nav__panel{ right:6px; left:6px; width: calc(100% - 12px); top:6vh; bottom:6vh }
  }

  /* hide theme fallback link for CTA only inside our panel to avoid duplicate weak link */
  .fr-mobile-header .fr-nav__list .ast-masthead-custom-menu-items .menu-link { display: none !important; }
}

/* (REMOVIDO bloco anterior de safe-area iOS: excesso de regras causava faixa vazia) */

/* Classe legacy opcional mantida (sem alteração) */
@media (max-width:1024px){ body.fr-mobile-header.fr-mobile-header--force-bg .main-header-bar-wrap{background:rgba(255, 248, 240, 0.85) !important;} }

/* Neutralização global removida; agora condicionada via .fr-ios-fix */
/* Remove a linha (border-bottom) que o Astra injeta no header no breakpoint mobile */
@media (max-width:1024px){
  .ast-header-break-point .main-header-bar{border-bottom:0 !important; border-bottom-width:0 !important;}
}

/* === iOS MINIMAL CLEAN FIX ===
   Remove qualquer pintura/padding especial no topo para evitar faixa.
   Mantém apenas remoção da borda padrão. */
@media (max-width:1024px){
  body.fr-mobile-header.fr-ios-fix .main-header-bar-wrap{background:transparent !important; padding-top:0 !important;}
  body.fr-mobile-header.fr-ios-fix .main-header-bar-wrap::before{content:none !important;}
  body.fr-mobile-header.fr-ios-fix .main-header-bar, 
  body.fr-mobile-header.fr-ios-fix .main-header-bar .main-header-container{margin-top:0 !important; padding-top:0 !important;}
  body.fr-mobile-header.fr-ios-fix.ast-header-break-point .main-header-bar{border-bottom:0 !important;}
}

/* Ajuste de alinhamento solicitado: centralizar verticalmente o grupo de botões mobile */
@media (max-width:1024px){
  .ast-header-break-point .ast-mobile-menu-buttons.fr-managed-buttons{padding-top:3% !important;}
}

/* === FIXED STATE ONLY AFTER SCROLL TRIGGER === */
@media (max-width:1024px){
  /* Aplica fixação somente quando .is-scrolled estiver presente */
  body.fr-mobile-header .main-header-bar.is-scrolled{
    position:fixed !important;
    top:0;left:0;right:0;width:100%;
    z-index:1600 !important;
  }
  /* Compensação de layout para evitar sobreposição do conteúdo */
  body.fr-mobile-header.fr-header-fixed-active #content,
  body.fr-mobile-header.fr-header-fixed-active .site-content{
    padding-top:var(--fr-mobile-header-height,72px) !important;
  }
}

/* Transparência garantida apenas antes do gatilho (mobile) – regra isolada e específica */
@media (max-width:1024px){
  body.fr-mobile-header.ast-header-break-point .main-header-bar:not(.is-scrolled){
    background: transparent !important;
    box-shadow: none !important;
  }
}