/* Shared header utilities: a text language switch with a full touch target.
   Keyboard focus keeps the visible ring supplied by controls.css. */
.site-header .language-switch,.p-header .language-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  border:0;border-radius:0;background:transparent;color:var(--theme-accent,#60212c);box-shadow:none;
}
.p-header .header-actions{display:flex;align-items:center;gap:6px}
.p-header .menu-toggle{display:none}

/* One navigation surface for Home, Templates, Studio and Packages. */
.mobile-menu{
  position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;
  max-height:none;border:0;border-radius:0;padding:22px 26px;
  background:var(--theme-surface,#fffdfa);color:var(--theme-text,#272326);overflow:auto;overscroll-behavior:contain;
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
}
.mobile-menu:not([open]){display:none}
.mobile-menu .menu-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--theme-rule,#ded4ce);padding-bottom:22px;
}
.mobile-menu .brand-latin{display:inline-flex;align-items:center;gap:6px;font:500 28px/1 Inter,sans-serif;letter-spacing:-.06em}
.mobile-menu .brand-latin>span{font:400 24px/1 Inter,sans-serif;letter-spacing:0;color:var(--theme-accent,#60212c)}
.mobile-menu .icon-button{display:grid;place-items:center;width:44px;height:44px;flex:none}
.mobile-menu .icon-button svg{width:20px;height:20px}
.mobile-menu nav{margin-top:24px}
.mobile-menu nav>a{
  display:block;padding:18px 0;border-bottom:1px solid var(--theme-rule,#ded4ce);
  font:400 34px/1.5 var(--arabic-display,'Noto Naskh Arabic',serif);min-height:70px;
}
.mobile-menu nav>a[aria-current=page]{color:var(--theme-accent,#60212c)}
.mobile-menu nav>.button{
  display:flex;align-items:center;justify-content:center;width:100%;margin-top:30px;
  padding:14px 18px;min-height:52px;border:1px solid var(--theme-accent,#60212c);border-radius:9px;
  background:var(--theme-brand,#60212c);color:var(--theme-on-brand,#fffdfa);font:500 14px/1.6 'IBM Plex Sans Arabic',sans-serif;
}
.mobile-menu .menu-note{text-align:center;color:var(--theme-muted,#71666a);font:400 13px/1.8 'IBM Plex Sans Arabic',sans-serif;margin-top:17px}
html[lang=en] .mobile-menu nav>a{font-family:Inter,sans-serif;font-size:28px}
html[lang=en] .mobile-menu nav>.button{font:500 14px/1.6 Inter,sans-serif}
html[lang=en] .mobile-menu .menu-note{font-family:Inter,sans-serif}
body:has(.mobile-menu[open]){overflow:hidden}
.mobile-menu :is(a,button):focus-visible{outline:2px solid var(--theme-accent,#60212c);outline-offset:4px}

@media(max-width:760px){
  .p-header{height:73px;padding-inline:22px;gap:12px;justify-content:space-between}
  .p-header .wordmark{font-size:28px}
  html[data-navigation-enhanced=true] .p-header .p-nav{display:none}
  .p-header .header-actions{margin-inline-start:auto}
  html[data-navigation-enhanced=true] .p-header .menu-toggle{
    display:block;position:relative;width:44px;height:44px;flex:none;
  }
  .p-header .menu-toggle>span{position:absolute;width:19px;height:1px;background:var(--theme-surface,#272326);left:12px;top:18px}
  .p-header .menu-toggle>span+span{top:25px}
}
@media(min-width:761px){.mobile-menu{width:430px;inset:0 auto 0 0}}
@media(max-width:360px){.p-header{padding-inline:17px}.p-header .wordmark{font-size:25px}.mobile-menu .brand-latin{font-size:25px}}
@media(hover:hover) and (pointer:fine){
  .site-header .language-switch:hover,.p-header .language-toggle:hover{
    background:transparent;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:5px;
  }
}